Get value of input box with javascript from multiple text boxes with same name

Question

I'm having an issue with a php application I'm trying to write for my job. Here's what I have.

I have a database table with items. My columns are itemID, itemcode, description, price, category, and size. I wrote a php function to be able to call the items I need based on their category. The php page has a list of the items as so

itemcode | description | price | size | (input box for qty (name="qty")) | (button to add)

My goal is that when someone puts in the qty and hits submit, it adds it to a customer's order in the database. Very simple. I want to do it in javascript because I wrote more code to submit it to the database without having to do a page refresh. If I did it in only php, I could have all the variables sent to another php document and have everything worked out that way.

the problem I'm having is that the javascript code I wrote only registers the very first input box regardless of which button I clicked to add it. So if I fill out the fourth input box that corresponds with that item in that row, it thinks I'm trying to calculate the value in the first input box.

A simple example of what I have

<script type="text/javascript">
</script>

<table>
<?php
foreach ($items->listByCategory('cat') as $itemlist) {
  echo '<tr>';
  echo '<td>'.$itemlist["itemcode"].'</td>';
  echo '<td>'.$itemlist["desc"].'</td>';
  echo '<td>'.$itemlist["price"].'</td>';
  echo '<td>'.$itemlist["size"].'</td>';
  echo '<td><input type="text" name="qty"></td>';
  echo '<td><input type="submit" value="Add"></td>';
}
?>
</table>

I've experimented with putting a form around the entire table as well as combining the last two cells and wrapping a form around that within the tags. In that case, I would just add a

echo '<td>';
echo '<form>';
echo '<input type="text" name="qty">';
echo '<input type="hidden" name="itemID" value="'.$itemlist["itemID"].'">
echo '<input type="submit" value="Add">';
echo '</td>';

That seems like it would make more sense to do.

I need to pass the following variables through: the item ID, the input from the qty input box, and the order ID, which I have as part of the URL (order.php?orderID=xxx).

Answer 1

This is a classic problem of not naming your fields uniquely. Put the item ID on the names and give the button a class such as:

 foreach ($items->listByCategory('cat') as $itemlist) {
  echo '<tr>';
    echo '<td>'.$itemlist["itemcode"].'</td>';
    echo '<td>'.$itemlist["desc"].'</td>';
    echo '<td>'.$itemlist["price"].'</td>';
    echo '<td>'.$itemlist["size"].'</td>';
    echo '<td><input type="text" name="qty_'.$itemlist["itemID"].'"></td>';
    echo '<td><input class="mysub" type="submit" name="btn_'.$itemlist["itemID"].'" value="Add">  </td>';
  echo '<tr>';
}

And then you can create a handler like

  $(".mysub").click(function() { 
    //get item id by naming convention
    var itemid = $(this).attr('name').substring(4);  //4 is "btn_", we want what comes after it
    //now you can get qty, like
     var qty = $("input[name='qty_"+itemid+"']").val();

    //now you can do your ajax stuff with those 2 vars in a POST.
 });

working demo: http://jsfiddle.net/sq4ecf4j/

Answer 2

Using the AJAX function would probably be best. AJAX comes with jQuery.

What I usually do is put ids on the form elements like so:

<input type="text" name="qty" id="qty"></input>

With jQuery, you can get the value of the form element by calling it's id:

var qty = $('#qty').val();

Once you do that for 1 or more of your form items, make the AJAX call and pass the data.

var qty = $('#qty').val();
var item = $

function submit()
    $data = (
    $.ajax({
        url: '/path/to/url',
        type: 'post',
        data: { qty: qty },
        success: function(result){
            alert(result);
        },
        error: function(xhr){
            // display the error
            alert(xhr.responseText);
        }
    });