Question

所以我尝试创建一个只有一个输入框的页面。我们将读取最终有新行的QR码数据。如果我读了qr它应该打开anohter输入框并将下一个QR码写入此等等......

在页面的末尾会有一个“发送”按钮，将数据发送到mysql。

有什么想法吗？

这就是我现在所拥有的：

<!DOCTYPE html>
<?php 

header('Content-Type: text/html; charset=UTF-8');

?>
<head>
</head>
<body >

<form name="form" action="send.php" method="post">
<div style="top: 40%; left: 40%; position: absolute;">
QR: <input type="text" name="QR"><br>

<input type="submit" class ="button" value="SEND!" >

</form>
</body>
</html>

更新1

页面加载后我单击进入框，它会创建一个新的空白框。它应该在输入后创建新的框。在此之后，我怎样才能获得所有盒子的价值？ :) 谢谢你的帮助！

<!DOCTYPE html>
<?php 

header('Content-Type: text/html; charset=UTF-8');

?>
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
  //suppose you are reading QR code in below function

  $(".QR").click(function(){
    // QR code is like below
    var qrCode = document.getElementById("input").value;
    var lastInput = $('.QR:last');
    lastInput.val(qrCode);
    //add input after last input box
    lastInput.after('<br><input type="text" class="QR"><br>');
    var qrCode="";
  });

  // submit all QR values
  $('form.form').submit(function(){
    //you can read all value and append in a variable 
    var values= "";
    $('input.name').each(function(){
       values += $(this).val();
    });
  });
});
    </script>
</head>
<body >
    <input type="text" class="QR" id="input">
    <br>
</form>
</body>
</html>

更新2 只有一个问题，就是当我加载页面时，第一次写入每次都是一个空白单元格。 :( 还有一个问题：如何将values发送到send.php，其中包含php，并将数据发送到mysql。

现在我有了这段代码：

    <!DOCTYPE html>
<?php 

header('Content-Type: text/html; charset=UTF-8');

?>
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">

    $(function(){
  //suppose you are reading QR code in below function

  $(".QR").keyup(function(event){
    // QR code is like below
    if ( event.which == 13 ) {
    var qrCode = document.getElementById("input").value;
    var lastInput = $('.QR:last');
    lastInput.val(qrCode);
    //add input after last input box
    lastInput.after('<br><input type="text" class="QR"><br>');
    document.getElementById("input").value="";
    }
  });

  // submit all QR values
  $('form.form').submit(function(){
    //you can read all value and append in a variable 
    var values= "";
    $('input.name').each(function(){
       values += $(this).val();
    });
  });

});
    </script>

  <script type="text/javascript"> 
//Enterre, nem lép tovább:
      function stopRKey(evt) { 
        var evt = (evt) ? evt : ((event) ? event : null); 
        var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
        if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
      } 

      document.onkeypress = stopRKey; 

</script>
</head>
<body >
  <form>
    <input type="text" class="QR" id="input">
    <button type="submit" formaction="send.php" >Feltöltés!</button>
  </form>  

</form>
</body>
</html>

Answer 1

将新输入添加到表单字段，您可以在代码下面使用

$('<input>').attr({
    type: 'input',
    id: 'foo',
    name: 'bar'
}).appendTo('form');

当您需要添加新输入时，您可以调用函数并在函数内部使用上面的代码向表单添加输入。请使用某种增量编号使id和名称唯一

Answer 2

您的问题不是很清楚。尝试在此使用此功能我有一个html代码，其中form首先只有一个input tag，一个button可添加更多字段，一个submit button +

JQuery要添加或append更多input fields

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="value[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>

Php script查看已发布的表单值

<?php
if(isset($_POST['submit'])){
echo "<pre>";print_r($_POST);   
    }
?>

Answer 3

试试这个：输入框使用class =“QR”而不是name属性。

<!DOCTYPE html>
<?php 

header('Content-Type: text/html; charset=UTF-8');

?>
<head>
</head>
<body >

<form name="form" action="send.php" method="post">
<div style="top: 40%; left: 40%; position: absolute;">
QR: <input type="text" class="QR"><br>

<input type="submit" class ="button" value="SEND!" >

</form>
</body>
</html>

jQuery的：

$(function(){
  //suppose you are reading QR code in below function

  $('.QR').click(function(){
    // QR code is like below
    var qrCode = "qr code";
    var lastInput = $('.QR:last');
    lastInput.val(qrCode);
    //add input after last input box
    lastInput.after('<input type="text" class="QR"><br>');
  });

  // submit all QR values
  $('form.form').submit(function(){
    //you can read all value and append in a variable 
    var values= "";
    $('input.name').each(function(){
       values += $(this).val();
    });
  });
});

如何创建具有动态输入框数量的php页面？

3 个答案: