Form event trigger

JavaScript
1

HI all

I have a page that allows individuals to use a select drop down box to choose from a number of items for an invoice. What i would like to happen, is when an item from the list is chosen, the current number in stock generates in a disabled text box to the right. This obviously needs to happen before form submission, but i am a newbie at javascript and need it to have it work alongside php.

Any guidance is appreciated.

2

Hi,

The javascript will be quite separate to your PHP.
Try posting the code of a simple HTML page with the minimum elements to illustrate what you are trying to do.

3

You can use a php file to retrieve the number of items for a certain item, by calling the php file with a querystring that contains the item you want to get the number of.
So for example, if it were popcorn, a call to
/path/to/numberofitems.php?item=popcorn
would result in the a value of 15 being echo’d out.

If you use item ids, it could instead be:
/path/to/numberofitems.php?itemid=10293

Here’s how you could use that with a function that triggers when the select field is changed.


<form id="orderItem">
    <p>
        <select name="itemid">
            <option value="">Please choose an item</option>
            <option value="1234">Popcorn</option>
            <option value="1235">Cereal</option>
            <option value="1236">Bread</option>
        </select>
        <input name="items" disabled="disabled">
    </p>
</form>



$(function () {
    function updateItemsHandler($field) {
        return function (data) {
            $field.val(data);
        };
    }
    
    var form = $('#orderItem'),
        select = $('[name="itemid"]', form),
        itemsField = $('[name="items"]', form);
        
    select.on('change', function () {
        var path = 'http://domain/path/to/numberOfItems.php?' + $(this).serialize();
        $.get(path, updateItemsHandler(itemsField));
    });
});

I just used something like this for the PHP, just for the purposes of testing:


<?php
$itemid = filter_input(INPUT_GET, 'itemid', FILTER_SANITIZE_NUMBER_INT);
if ($itemid === '1234') {
    echo '3 packs';
} else if ($itemid === '1235') {
    echo '3 boxes';
} else if ($itemid === '1236') {
    echo '4 loaves';
} else {
    echo $itemid . ' id not known';
}
?>
4

Thanks for the reply markbrown

The HTML is below…

&lt;select name="item1_item"&gt;
  &lt;?php
  /* connect to database */
  require 'connect.inc.php';

  /***
   ** CREATE QUERY TO EXTRACT AVAILABLE STOCK
   ** STORE IN VARIABLES FOR USE IN SELECT FIELD
   ***/

  /* drop down query for stock */
  $stock_query  = "SELECT `description`
                   FROM   `stock`";
  $stock_result = mysql_query($stock_query);
  $numrows      = mysql_num_rows($stock_result);

  /* PHP SELECT MENU
        1 - create "Please select" default category
        2 - create for loop to cycle through stock
        3 - assign a variables for stock descriptions...
        4 - ...display stock descriptions
  */
  echo '&lt;option value=""&gt;Please select an item...&lt;/option&gt;';
  for($i=0; $i &lt; $numrows; $i++)
  {
  $stock_name = mysql_result($stock_result,$i,0);
  echo'&lt;option value="'.htmlspecialchars($stock_name).'"&gt;'.htmlspecialchars($stock_name).'&lt;/option&gt;';
  }
  ?&gt;
  &lt;/select&gt;

Which extracts from (one row for example)…

stock inventory no|supplier____|category|description_______|curr_quantity_|

1_____________|suppliername|furniture|leather swivel chair|10__________|

When an item is selected from the select menu for a leather swivel chair, i would like its current quantity of 10 to be displayed in the below…

&lt;input id="item1_availablequantity" name="item1_availablequantity" type="text" maxlength="2" size="2" disabled="disabled" /&gt;

This ensures the user knows the amount of stock available for this item.

I hope this makes sense :slight_smile:

5

Paul has a good solution above that would do what you are wanting.
I might do without the ajax request though and put the values as well as quantities in the page to begin with.


<form id="orderItem">
  <p>
    <select name="itemid">
      <option value="">Please choose an item</option>
      <option value="1234" data-qty="5">Popcorn</option>
      <option value="1235" data-qty="12">Cereal</option>
      <option value="1236" data-qty="8">Bread</option>
    </select>
    <input name="items" disabled="disabled">
  </p>
</form>



$(function() { 
  $('select[name="itemid"]').on('change', function() {
    var option = this.options[this.selectedIndex]
    $('input[name="items"]').val($(option).data('qty'));
  })
});

Code is evil, use as little as possible.