change placeholder text for each option

so how can I achieve that?I've already tried this code down below but it doesn't work

var placeholderText = {
        "Mobile": "0932-XXX-XXXX or 0932xxxxxxx",
        "Landline": "123-4567",
        "FAX": "+(country code)(area code)(fax number)",
        "Email": "sample@example.com",
};

$("#ModalContactType").on("click", function () {
  if (this.value != 0) {
    $("#ModalDetail").val(placeholderText[$("#ModalContactType option:selected").text()]);
  } 
  else {
    $("#ModalDetail").val("");
  }

});

Here is my HTML code

<select id="ModalContactType">
    <option value="0">--Please Select--</option>
    <option value="1">Mobile</option>
    <option value="2">Landline</option>
    <option value="3">FAX</option>
    <option value="4">Email</option>
</select>

And here

<div class="input-group">
    <div class="input-group-addon">Detail</div>
    <input type="text" id="ModalDetail" class="form-control">
</div>

3 answers

  • answered 2018-05-16 04:50 Achu

    Remove the backtick (`) at the end of your javascript it should work fine. Also ensure that you are defining your html tags before importing the script.

  • answered 2018-05-16 04:59 לבני מלכה

    see code bellow in Jquery:
    use onchange() and add jquery script

    var placeholderText = {
            "Mobile": "0932-XXX-XXXX or 0932xxxxxxx",
            "Landline": "123-4567",
            "FAX": "+(country code)(area code)(fax number)",
            "Email": "sample@example.com",
        };
     function  setPlaceholder(){
     
             if (this.value != 0) {
                $("#ModalDetail").val(placeholderText[$("#ModalContactType option:selected").text()]);
            } 
            else {
                $("#ModalDetail").val("");
            }
        }
    
     
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select id="ModalContactType" onchange="setPlaceholder()">
          <option value="0">--Please Select--</option>
           <option value="1">Mobile</option>
          <option value="2">Landline</option>
         <option value="3">FAX</option>
         <option value="4">Email</option>
    </select>
    
    <div class="input-group">
         <div class="input-group-addon">Detail</div>
         <input type="text" id="ModalDetail" class="form-control"/>
    </div>

    OR using javascript:

        var placeholderText = {
                "Mobile": "0932-XXX-XXXX or 0932xxxxxxx",
                "Landline": "123-4567",
                "FAX": "+(country code)(area code)(fax number)",
                "Email": "sample@example.com",
            };
         function  setPlaceholder(slc){
         
                 if (this.value != 0) {
                    document.getElementById("ModalDetail").value=placeholderText[slc.options[slc.selectedIndex].text];
                } 
                else {
                     document.getElementById("ModalDetail").value="";
                }
            }
        <select id="ModalContactType" onchange="setPlaceholder(this)">
              <option value="0">--Please Select--</option>
               <option value="1">Mobile</option>
              <option value="2">Landline</option>
             <option value="3">FAX</option>
             <option value="4">Email</option>
        </select>
    
        <div class="input-group">
             <div class="input-group-addon">Detail</div>
             <input type="text" id="ModalDetail" class="form-control"/>
        </div>

    EDIT:

    to set placeholder and not text:

    document.getElementById("ModalDetail").placeholder="...";
    

            var placeholderText = {
                    "Mobile": "0932-XXX-XXXX or 0932xxxxxxx",
                    "Landline": "123-4567",
                    "FAX": "+(country code)(area code)(fax number)",
                    "Email": "sample@example.com",
                };
             function  setPlaceholder(slc){
             
                     if (this.value != 0) {
                        document.getElementById("ModalDetail").placeholder=placeholderText[slc.options[slc.selectedIndex].text];
                    } 
                    else {
                         document.getElementById("ModalDetail").placeholder="";
                    }
                }
            <select id="ModalContactType" onchange="setPlaceholder(this)">
                  <option value="0">--Please Select--</option>
                   <option value="1">Mobile</option>
                  <option value="2">Landline</option>
                 <option value="3">FAX</option>
                 <option value="4">Email</option>
            </select>
    
            <div class="input-group">
                 <div class="input-group-addon">Detail</div>
                 <input type="text" id="ModalDetail" class="form-control"/>
            </div>

  • answered 2018-05-16 05:05 Karthikeyan

    I am doing same code, its working fine. the problem is script moved to end of the body tag

    var placeholderText = {
            "Mobile": "0932-XXX-XXXX or 0932xxxxxxx",
            "Landline": "123-4567",
            "FAX": "+(country code)(area code)(fax number)",
            "Email": "sample@example.com",
        };
    
        $("#ModalContactType").on("click", function () {
            if (this.value != 0) {
                $("#ModalDetail").val(placeholderText[$("#ModalContactType option:selected").text()]);
            } 
            else {
                $("#ModalDetail").val("");
            }
    
        });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select id="ModalContactType">
      <option value="0">--Please Select--</option>
      <option value="1">Mobile</option>
      <option value="2">Landline</option>
      <option value="3">FAX</option>
      <option value="4">Email</option>
    </select>
                                
                                
    <div class="input-group">
      <div class="input-group-addon">Detail</div>
      <input type="text" id="ModalDetail" class="form-control">
    </div>