如何使用javascript在表单上获取具有相同名称的字段的值

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.

我通过从数据库中提取产品然后在php中使用foreach循环显示产品来在我的索引页面上显示产品。问题是,我希望在根据产品用户选择添加到购物车的标准提交表单时,只获得一个产品ID和数量。

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

当我点击添加到购物车按钮时,我只是一直收到第一个产品order_code。

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

以下是该页面的HTML。

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

3 个解决方案

#1

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.

不要使用具有相同名称的字段。名称应唯一标识提交的表单。您可以以编程方式生成字段名称服务器端,或者更好的是,使用js收集数据客户端并将JSON发布到服务器。

#2

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

名称对于特定表单字段应该是唯一的。您已使用GET提交表单。

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.

稍后当您使用$ _GET [“name”]访问脚本'cart_action.php'中的特定字段值时,会导致不必要的错误。因此对字段使用相同的名称不是一个好主意。

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.

如果您确实要为特定样式或属性分组某些字段,则可以为属性“class”赋予它们相同的值。对于多个字段,类可以相同,因为这也有助于在css样式表中使用“.classname”应用类似的样式。

So giving the same value for class sounds better.

因此,为类提供相同的价值听起来更好。

#3

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.

但click事件被点燃的元素是按钮。所以与事件合作。 event.target是按钮。

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

触发事件单击事件时使用event.target的示例

$('#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;
});

#1

#2