CODEWITHSUNDEEP
javascriptphphtml
ninja
ninja

Reputation: 53

How to auto Set input values in a form when select an option?

I have a form for example:

<form>
   <ul>

   <li>
   <select name="choose">
   <option value="0">1</option>
   <option value="1">1</option>
   <option value="2">2</option>

   </select>
   </li>

   <li><h2>No. Of person</h2></li>
    <input type="text" name="ref_person"id="field" value="" />

   <li><h2>earning of person:</h2></li>
    <input type="text" name="ear_person" id="field" value="" />

   </ul>
   </form>

so, when I choose option:1 both the input fields must be filled with no. let say, No. of person = 3 and earning of person = $5.

Upvotes: 0

Views: 3659

Answers (4)

Bindrid
Bindrid

Reputation: 3735

Here is a code sample that uses the onchange event to copy values to the textboxes. 

<script type="text/javascript">
     function selectOnChange(obj) {

         var val = obj.options[obj.selectedIndex].value;
         var text = obj.options[obj.selectedIndex].text;
         document.getElementById("field1").value = val;
         document.getElementById("field2").value = text;
      }
</script>
</head>
<body>

     <div>
         <select onchange='selectOnChange(this)' name="choose">
               <option value="100">1</option>
               <option value="200">2</option>
               <option value="300">3</option>

          </select>

      </div>
      <ul><li><h2>No. Of person</h2></li></ul>
      <div>
           <input type="text" name="ref_person" id="field1" value="">

           <ul>
                <li><h2>earning of person:</h2></li></ul>
                <input type="text" name="ear_person" id="field2" value="" />
       </div>

Upvotes: 1

ninja
ninja

Reputation: 53





   function getPerson(select) {
  var form = select.form;
  form.ref_person.value = select.options[select.selectedIndex].getAttribute('per');
  form.ear_person.value = select.value;
}


<form>
  <fieldset><legend>Person and earning</legend>
  <label for="personSelect">Select a person
    <select name="choose" id="personSelect" onchange="getPerson(this)">
      <option per="3" value="0">1</option>
      <option per="9"  value="100">2</option>
      <option per="27"  value="500">3</option>
    </select>
  </label>
  <br>
  <label for="personNumber">No. Of person:
    <input type="text" name="ref_person"id="personNumber"></label>

  <label for="personEarning">Earning of person:
    <input type="text" name="ear_person" id="personEarning"></label>
  </fieldset>
</form>

Upvotes: 1

RobG
RobG

Reputation: 147453

Your question should be as well written as you can make it, including valid, semantic HTML.

Also, a question should contain the code you have tried, an explanation of what you have tried, where it's going wrong and exactly what you expect it to do, including some example input and output.

The following may help. Note that element IDs must be unique and that forms should use semantic markup (e.g. don't use a list to present it, don't put headings inside lists, use labels, group elements using fieldsets, etc.).

You can use the select element's change event to get the value and text of the selected option and display it elsewhere in the form. You can also reference form controls as named properties of the form, which is handy and more straight forward than using getElementById.

In the code, a reference to the select is passed to the function using this. Every form control has a form property that is a reference to the form that it's in. The rest should be easy enough to understand, but please ask if you need other help.

function getPerson(select) {
  var form = select.form;
  form.ref_person.value = select.options[select.selectedIndex].text;
  form.ear_person.value = select.value;
}
<form>
  <fieldset><legend>Person and earning</legend>
  <label for="personSelect">Select a person
    <select name="choose" id="personSelect" onchange="getPerson(this)">
      <option value="0">1</option>
      <option value="100">2</option>
      <option value="500">3</option>
    </select>
  </label>
  <br>
  <label for="personNumber">No. Of person:
    <input type="text" name="ref_person"id="personNumber"></label>

  <label for="personEarning">Earning of person:
    <input type="text" name="ear_person" id="personEarning"></label>
  </fieldset>
</form>

Upvotes: 1

Bram
Bram

Reputation: 3263

I couldn't get a switch statement to work, so I did it with three if statements, but here is my solution. Fiddle with it yourself to make it as you wish.

<form>
    <ul>
        <li>
            <select name="choose" id="option1" onchange="relatedPrice()">
                <option value="0">1</option>
                <option value="1">2</option>
                <option value="2">3</option>
            </select>
        </li>
        <li><h2>No. Of person</h2></li>
        <input type="text" name="ref_person" id="field1" value="" />
        <li><h2>earning of person:</h2></li>
        <input type="text" name="ear_person" id="field2" value="" />
    </ul>
</form>
<script>
    function relatedPrice() {
        var e = document.getElementById("option1");
        var test = e.options[e.selectedIndex].text;

        document.getElementById("field1").value = test;
        if(test==1) {
            document.getElementById("field2").value = 100;
        }
        if(test==2) {
            document.getElementById("field2").value = 200;
        }
        if(test==3) {
            document.getElementById("field2").value = 300;
        }
    }
</script>

Upvotes: 0

Related Questions