SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    form event trigger

    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. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,681
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by chrisjwebb1978 View Post
    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.
    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.

    Code html4strict:
    <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>

    Code javascript:
    $(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 Code:
    <?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';
    }
    ?>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    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.
    Thanks for the reply markbrown

    The HTML is below...

    Code HTML4Strict:
    <select name="item1_item">
      <?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 '<option value="">Please select an item...</option>';
      for($i=0; $i < $numrows; $i++)
      {
      $stock_name = mysql_result($stock_result,$i,0);
      echo'<option value="'.htmlspecialchars($stock_name).'">'.htmlspecialchars($stock_name).'</option>';
      }
      ?>
      </select>

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

    Code HTML4Strict:
    <input id="item1_availablequantity" name="item1_availablequantity" type="text" maxlength="2" size="2" disabled="disabled" />

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

    I hope this makes sense :-)

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.

    Code html5:
    <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>
    Code javascript:
    $(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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •