How to get value of fields with same name on form submit using javascript

Question

I'm displaying products on my index page by fetching products from database and then displaying them with the help of foreach loop in php. The problem is that, I want to get only one single product id and quantity when the form is submitted on the criteria that which product user has selected to add to the cart.

I'm only getting the first product order_code all the time when I click on add to cart button.

<script type="text/javascript">
        $(function() {
            $("form.cart_form").submit(function() {
                var title = "Your Shopping Cart";
                var orderCode = $("input[name=order_code]", this).val();
                var quantity = $("input[name=quantity]", this).val();
                var url = "cart_action.php?order_code=" + orderCode + "&quantity=" + quantity + "&TB_iframe=true&height=400&width=780";
                tb_show(title, url, false);

                return false;
            });

        });
    </script>

The following is the HTML of that page.

<div id="container">
    <h1>Shopping Cart Demo</h1>

    <form class="cart_form" action="cart_action.php" method="get">

        <?php 
            $count = 0; 
            $i = 1; 
            foreach($products as $product): 
                if ($count % 2 == 0) { 
                    echo "<div class='images'>"; 
                }
                echo "<img src='$product->pro_img'/>"; 
            ?>
                <input type="hidden" name="order_code" value="<?php echo $product->pid; ?>" />

                <label><?php  print $product->name;  ?> <input class="center" type="text" name="quantity" value="1" size="3" ?></label>
                <label>Price: $<?php echo $product->price;   ?></label>

                <input type="submit" name="submit" value="Add to cart" />

            <?php 
                if ($i % 2 == 0) { 
                 echo "</div>";

                } $count++;
                $i++;  
            endforeach; 
        ?>

    </form>

</div>

bind click event to submit button and on click event using `prevAll()` get the input field and it's value — Pranav C Balan, Nov 26 '15 at 19:02
Thanks but can you please illustrate it or tell me the code to change ? — gorengo, Nov 29 '15 at 16:33

score 0 · Answer 1 · answered Nov 26 '15 at 18:58

0

Don't use fields with the same name. A name should uniquely identify a form filed. You can programatically generate field names server side or, better yet, gather up the data client side using js and post JSON to the server.

answered Nov 26 '15 at 18:58

Nick Bailey

3,078
2
11
13

score 0 · Answer 2 · edited May 23 '17 at 12:30

all products are in the same form. when someone submits the form, all products get submitted.

but the element where the click event is firefed of is the button. so work with the event. event.target is the button.

although the names of your inputs should be unique or grouped. in your case take unique names. for grouped inputs in a form see this

example for working with event.target when event click event is fired

$('#myForm').submit(function(event) {
    var $submitButton = $(event.target);
});

example for getting button that submitted the form with event submit

$('#myForm').on('submit', function(event) {
  event.preventDefault();
  var $myButton = $(this).find('input[type=submit]:focus');
  console.log($myButton);
  return false;
});

Thanks. Can you further define it or can you provide me a sample code of event.target usage in my case ? — gorengo, Nov 29 '15 at 16:34

score 0 · Answer 3 · answered Nov 26 '15 at 19:07

A name should be unique for a particular form field. You have used GET to submit the form.

Later when you use $_GET["name'] to access a particular field value in the script 'cart_action.php' ,it would cause unnecessary errors. So using the same name for fields isn't a good idea.

If you do want to group some fields for a particular style or attribute, you could give them the same value for the attribute 'class'. Class could be same for more than one field since this would also be helpful to apply similar styles using '.classname' in css stylesheet.

So giving the same value for class sounds better.

How to get value of fields with same name on form submit using javascript

3 Answers3