Question

I am teaching my self php and mysql.I am creating a small commerce site to test my skills.
I have mutiple forms on page like this

<div class="formInfo"><form name="CartForm" method="post" action="./ajax/addCart.php" class="fixed">
<input name="prodId" type="hidden" value="10" />
  <label for="qty">Quantity:</label>

  <input name="qty" type="text" id="qty" size="4" maxlength="6" class="qtyBox">
  <br>
  <input type="submit" name="addtoCart" id="addtoCart" value="Add to Cart" class="btnAdd">
</form>



<div class="formInfo"><form name="CartForm" method="post" action="./ajax/addCart.php" class="fixed">
<input name="prodId" type="hidden" value="7" />
  <label for="qty">Quantity:</label>

  <input name="qty" type="text" id="qty" size="4" maxlength="6" class="qtyBox">
  <br>
  <input type="submit" name="addtoCart" id="addtoCart" value="Add to Cart" class="btnAdd">
</form>


<div class="formInfo"><form name="CartForm" method="post" action="./ajax/addCart.php" class="fixed">
<input name="prodId" type="hidden" value="9" />
  <label for="qty">Quantity:</label>

  <input name="qty" type="text" id="qty" size="4" maxlength="6" class="qtyBox">
  <br>
  <input type="submit" name="addtoCart" id="addtoCart" value="Add to Cart" class="btnAdd">
</form>

Now when I click sumbit button I want to show the values of hidden field id and visible field qta (of currently clicked form)
so far my code is

<script type="text/javascript">
$(document).ready(function(e) {
    $('.formInfo').submit(function() {
        alert($(this).val())
    });
});
</script>

I can not figure out.How to tell jquery that I want values of “id” and “qty” of ‘this’ reference not the value of reference itself

Answer 1

As stated in previous answers ids should be unique, you need to bind submit to the form not a div, you can access form members by their name from the form element

$(document).ready(function(e) {
    $('.formInfo form').submit(function() {
        alert(this.prodId.value);
        alert(this.qty.value);
    });
});

FIDDLE