从具有相同名称的多个文本框中获取带有javascript的输入框的值答案

【问题标题】：Get value of input box with javascript from multiple text boxes with same name从具有相同名称的多个文本框中获取带有javascript的输入框的值
【发布时间】：2014-11-12 19:06:25
【问题描述】：

我正在尝试为我的工作编写的 php 应用程序出现问题。这就是我所拥有的。

我有一个包含项目的数据库表。我的列是 itemID、itemcode、description、price、category 和 size。我编写了一个 php 函数，以便能够根据它们的类别调用我需要的项目。 php页面有一个项目列表

项目代码 |描述 |价格 |尺寸 | （数量输入框（名称=“数量”））| （添加按钮）

我的目标是，当有人输入数量并点击提交时，它会将其添加到数据库中客户的订单中。很简单。我想用 javascript 来做，因为我编写了更多代码来将其提交到数据库，而无需刷新页面。如果我只在 php 中执行此操作，我可以将所有变量发送到另一个 php 文档并以这种方式解决所有问题。

我遇到的问题是我编写的 javascript 代码只注册了第一个输入框，而不管我单击哪个按钮来添加它。因此，如果我填写了与该行中该项目对应的第四个输入框，它认为我正在尝试计算第一个输入框中的值。

我所拥有的一个简单示例

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

我已经尝试在整个表格周围放置一个表格，以及组合最后两个单元格并在标签内围绕它包装一个表格。在这种情况下，我只需添加一个

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

这样做似乎更有意义。

我需要传递以下变量：商品 ID、来自数量输入框的输入以及作为 URL 一部分的订单 ID (order.php?orderID=xxx)。

【问题讨论】：

你能用jQuery还是只用javascript？
我也可以。 jQuery 如果它成功了。
你写的什么 JavaScript 不行？

标签： javascript php user-input

【解决方案1】：

这是一个没有唯一命名字段的经典问题。将项目 ID 放在名称上，并给按钮一个类，例如：

 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>';
}

然后你可以创建一个类似的处理程序

  $(".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.
 });

工作演示：http://jsfiddle.net/sq4ecf4j/

【讨论】：

谢谢。我在 mysub 函数的开头输入了一个简单的警报，然后它就弹出来了。我把它放在 var qty 行之后的最后，它崩溃了。当我转到 javascript 控制台“未捕获的错误：语法错误，无法识别的表达式：[name='qty_'+itemid]”时出现此错误
哎呀，错字了。编辑我的帖子@Ross
是的！非常感谢！你是救星。

【解决方案2】：

使用 AJAX 功能可能是最好的。 AJAX 自带 jQuery。

我通常做的是将 id 放在表单元素上，如下所示：

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

使用jQuery，可以通过调用表单元素的id来获取表单元素的值：

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

为 1 个或多个表单项执行此操作后，进行 AJAX 调用并传递数据。

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);
        }
    });

【讨论】：