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的元素！姓名＆amp; 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或东西是对应的。

如果你想使用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属性。

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

4 个答案: