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

时间:2015-11-26 18:49:26

标签: javascript php jquery html

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

当我点击添加到购物车按钮时,我只会收到第一个产品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>

以下是该页面的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 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

所有产品都采用相同的形式。当有人提交表格时,所有产品都会被提交。

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

虽然输入的名称应该是唯一的或分组的。 在你的情况下采取独特的名称。 对于表单中的分组输入,请参阅this

在触发事件event.target事件时使用click的示例

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

获取提交包含事件submit

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

答案 2 :(得分:0)

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

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

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

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