html - Populating form fields on change of drop down using javascript - Stack Overflow

admin管理员组

文章数量:1318570

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 mitted.

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){

   }

 }

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 mitted.

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){

   }

 }

• javascript
• html
• drop-down-menu

Share Improve this question Follow asked Mar 16, 2011 at 9:35 AngelineAngeline 2,3792222 gold badges6969 silver badges107107 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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)">

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./val/

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){

    }
}

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>

本文标签： htmlPopulating form fields on change of drop down using javascriptStack Overflow