JavaScript / Jquery：具有多个id的多个输入值

Question

我有一个HTML表单

<form>
<input type="hidden" name="id" value="1" /><input type="text" name="qty" />
<input type="hidden" name="id" value="2" /><input type="text" name="qty" />
<input type="hidden" name="id" value="3" /><input type="text" name="qty" />
<input type="hidden" name="id" value="4" /><input type="text" name="qty" />
<input type="submit"/>
</form>

当我提交表单时， for id = 1 , qty is 5 ， for id = 3, qty is 8 。 如何在Java脚本或jquery中获取此值并将此信息提交给服务器？ 我得到所有输入的文本值。 但是我无法区分哪个数量适合哪个值？

Answer 1

您不应有两个或多个具有相同名称或ID的元素！ 名称和ID是唯一的。

尝试这个：

<form>
<input type="hidden" name="id[1]" value="1" /><input type="text" name="qty[1]" id="qty1" value="" />
<input type="hidden" name="id[2]" value="2" /><input type="text" name="qty[2]" id="qty2" value="" />
<input type="hidden" name="id[3]" value="3" /><input type="text" name="qty[3]" id="qty3" value="" />
<input type="hidden" name="id[4]" value="4" /><input type="text" name="qty[4]" id="qty4" value="" />
<input type="submit"/>
</form>

您可以像这样访问JS中的数据：

使用元素名称：

var qty1 = document.forms[0].elements["qty[1]"].value;

使用元素ID：

var qty1 = document.getElementById("qt1").value;

Answer 2

好吧，对我来说，您的隐藏输入是无用的：您说输入文本是具有定义值的对应隐藏字段ID。 然后，您只需要正确输入您的输入，就知道哪个ID或对应的ID。

如果您想使用您所说的jQuery（javascript），则只需执行以下操作：

<form>
    <input type="text" name="qty1" id="qty1" />
    <input type="text" name="qty2" id="qty2" />
    <input type="text" name="qty3" id="qty3" />
    <input type="text" name="qty4" id="qty4" />
    <input type="submit" name='submit' id="submitButton" value="submit"/>
</form>

<script>
    $('document').on('click','#submitButton',function(event){
        event.preventDefault();
        //this prevents the click to submit, as you want to get values by javascript... remove this if you post it with php
        console.log('QTY1 : '+$('#qty1').val()+' - QTY2 : '+$('#qty2').val()+' - QTY3 : '+$('#qty3').val()+' - QTY 4 : '+$('#qty4').val());
        //This is with jQuery, javascript would look like addEventListeneer, and get values like document.getElementById('id').value;
        //then, ajax something if you really want to post your form through javascript, but this is not a good solution...
    });
</script>

其他解决方案，对我来说更好，只是使用php并直接发布您的表单...

<?php
    if(isset($_POST['submit'])){
        //then, user has clicked on submit button
        //CONSIDERED THAT YOU HAVE CHECKED IF THE FIELDS ARE NOT EMPTY
        $qty1 = $_POST['qty1'];
        $qty2 = $_POST['qty2'];
        $qty3 = $_POST['qty3'];
        $qty4 = $_POST['qty4'];
        //do your stuff with the posted values...
    }else{
        echo '
            <form method="POST" action="yourPage.php">
                <input type="text" name="qty1" id="qty1" />
                <input type="text" name="qty2" id="qty2" />
                <input type="text" name="qty3" id="qty3" />
                <input type="text" name="qty4" id="qty4" />
                <input type="submit" name="submit" id="submitButton" value="submit"/>
            </form>
        ';
    }
?>

希望能帮助到你

Answer 3

您的html完全有效，但是您没有利用元素的name来发挥自己的优势。

<input type="hidden" name="id1" value="1" /><input type="text" name="qty1" />

这将返回：

id1=1&qty1=X

但最后，我认为您的隐藏领域只是浪费空间。 您似乎需要的只是数量字段的名称。

<input type="text" name="qty1" />
<input type="text" name="qty2" />
...

如果您对元素使用相同的名称，它仍将为您提供所需的数据，但是可能需要进行一些分析才能弄清楚“什么是什么”。

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

这基本上会返回：

     qty=X,Y   (or qty=X&qty=Y)
item ----0-1

Answer 4

您可以将每对隐藏文本输入包装在div元素中，然后遍历这些div并在每个div元素中找到这两个输入。 它可能看起来像这样：

<form>
  <div id="keyValuePairs">
    <div class="pair">
      <input type="hidden" name="id" value="1" /><input type="text" name="qty" />
    </div>
    <div class="pair">
      <input type="hidden" name="id" value="2" /><input type="text" name="qty" />
    </div>
    <div class="pair">
      <input type="hidden" name="id" value="3" /><input type="text" name="qty" />
    </div>
    <div class="pair">
      <input type="hidden" name="id" value="4" /><input type="text" name="qty" />
    </div>
  </div>
  <input type="submit" id="sendBtn"/>
</form>

然后用Jquery进行迭代

$("#sendBtn").click(function(){
  var arr = [];
  $("#keyValuePairs .pair").each(function(){
    var val = $(this).find("input[name='id']").val();
    var key = $(this).find("input[name='qty']").text();
    var obj = { val:val, key:key };
    arr.push(obj);
  });
  // some ajax call or any way you want to post data server
});

在迭代结束时，arr应该包含对象，这些对象的val属性包含隐藏输入的value属性中的内容，而key属性包含文本输入中存在的文本。