使用JavaScript在下拉菜单中填充表单字段

Question

I am trying to populate data in my fields depending on the value selected in the drop down box. I have passed the dropdown option select to the javascript function, but having problem in updating the form fields. Please check my code for the error I've committed.

This is my html code:

 <div class="form-ui">
      <span class="form-elements reqField">
          <select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">
              <option value="1">Please Select</option>
              <option value="2">Mrs.Jane Smith</option>
              <option value="3">Mr.Junior Smith</option>
          </select>
      </span>

      <span class="form-elements reqField">
           <select id="itle1" class="dropdown">
              <option value="1">Mr.</option>
              <option value="2">Ms.</option>
              <option value="3">Mrs.</option>
           </select>
     </span>

    <span class="form-elements">
          <input id="FirstName1" type="text" class="text" value="" />
    </span>

    <span class="form-elements reqField">
          <input id="LastName1" type="text" class="text" value="" />
    </span>
   </div>

And the javascript code:

 function populateData(value,person){
    if(value==2){
        $('#Title'+person).value=3;
        $('#FirstName'+person).value="Jane";
        $('#LastName'+person).value="Smith";
    }
   if(value==3){

   }

 }

Answer 1

quick answer is that I think you need to use val() not value - can't quite remember how it works with select though

http://api.jquery.com/val/

Answer 2

jQuery uses val() to get and set values.

So your js function should be

$('#FirstName'+person).val("Jane");
$('#LastName'+person).val("Smith");

and not

$('#FirstName'+person).value="Jane";
$('#LastName'+person).value="Smith";

Also

<select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">

should be

<select class="dropdown" onchange="populateData(this.value,1)">

Answer 3

HTML ID error here <select id="itle1" class="dropdown"> Should be Title1 not itle1

Also I think the javascript should look like this

function populateData(value,person){
    if(value==2){
        $('#Title'+person+' option[value="3"]').attr('selected','selected');
        $('#FirstName'+person).val("Jane");
        $('#LastName'+person).val("Smith");
    }
    if(value==3){

    }
}

Answer 4

You could use a FORM instead of a DIV, and the attribute name , instead of id .
They were designed a long time ago to manage forms.

You can use jQuery for that, but everything is already built-in in pure Javascript to handle forms.

<form class="form-ui">
  <span class="form-elements reqField">
      <select class="dropdown" onchange="populateData(this)">
          <option value="1">Please Select</option>
          <option value="2">Mrs.Jane Smith</option>
          <option value="3">Mr.Junior Smith</option>
      </select>
  </span>

  <span class="form-elements reqField">
       <select name="title" class="dropdown">
          <option value="1">Mr.</option>
          <option value="2">Ms.</option>
          <option value="3">Mrs.</option>
       </select>
 </span>

<span class="form-elements">
      <input name="FirstName" type="text" class="text" value="" />
</span>

<span class="form-elements reqField">
      <input name="LastName" type="text" class="text" value="" />
</span>
</form>
<script>
    function populateData(sel){
        var form = sel.form,
            value = sel.options[sel.selectedIndex].value;
        switch(value){
            case '3':
                form.FirstName.value = 'Junior';
                form.LastName.value = 'Smith';
                form.title.value = '1';
            break;
            case '2':
            break;
            default:
        }
    }
</script>