CODEWITHSUNDEEP
jqueryforms
leonel
leonel

Reputation: 10224

jQuery, How to autofill text fields according to what's selected in select drop down menu?

An Invoice has a list of LineItems.

LineItems have name (in select menu), price and quantity properties.

There is a default of 3 empty line items in each invoice in case the user wants to add at least 3 line items.

If the user selects a line item from the select drop down menu, I want the quantity to default to 1 and the price for that line item to autofill according to the line item selected.

How could I do that? I'm googling for the answer but I can't find what I'm looking for.

Just as a side note: I'm using Ruby 1.9.2 and Rails 3.1.0

Upvotes: 1

Views: 1254

Answers (1)

DefyGravity
DefyGravity

Reputation: 6031

in html 5 you can do this:

<head>
    <script type="text/javascript">
      $(document).ready(  function(){
       $("#lineItemsDD").change(function(event){
          var optionElem =$(this).find(":selected")[0];
          $(get the quantity input text box).val(optionElem.dataset.defaultQuantity);
          $(get the price input text box).val(optionElem.dataset.defaultPrice);
       });
      }
     );
    </script>
</head>
<body>
    <select name="lineItem" id="lineItemsDD">
    <option value='A' data-defaultQuantity='1' data-defaultPrice='12.50'>option A</option>
    <option value='B' data-defaultQuantity='1' data-defaultPrice='2.50'>option B</option>
    <option value='C' data-defaultQuantity='1' data-defaultPrice='1.50'>option C</option>
    </select>
</body>

otherise, do this:

<head>
    <script type="text/javascript">
      $(document).ready(  function(){
//get the default data, this may be an ajax call for you
       var defaultData = { "A":{"quantity":1,"price":12.50},"B":{"quantity":1,"price":2.50},"C":{"quantity":1,"price":1.50}};
// set the data into each option for use later.
       $("#lineItemsDD option").each(function(index, elem){
          $(this).data("defaultData", defaultData[$(this).val()]  );
       });
// if the user changes their option, set the new default data in the other inputs
       $("#lineItemsDD").change(function(event){
          var defaultData =$(this).find(":selected").data('defaultData');
          $(get the quantity input text box).val(defaultData.quantity);
          $(get the price input text box).val(defaultData.price);
       });
      }
     );
    </script>
</head>

Upvotes: 1

Related Questions