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

Question

So i try to create a page that have only one input box. 所以我尝试创建一个只有一个输入框的页面。 We will read a data of QR code which have a new line at the end. 我们将读取最终有新行的QR码数据。 And if i read the qr it should open anohter input box and write the next QR code into this and so on... 如果我读了qr它应该打开anohter输入框并将下一个QR码写入此等等......

And it the end of the page there will be a "Send" button which sends the datas into mysql. 它在页面的末尾会有一个“发送”按钮，它将数据发送到mysql。

Any idea? 任何想法？

Thats what I have now: 那是我现在拥有的：

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

UPDATE 1 更新1

After the page loads in and i click into the box it's creats a new blank box. 页面加载后，我点击进入框，它创建一个新的空白框。 And it should create the new box after enter. 它应该在输入后创建新的框。 And after this at all, how can I get the values of all the boxes? 在此之后，我怎样才能获得所有盒子的价值？ :) Thanks for help!! ：）感谢帮助！！

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

UPDATE 2 There is only one problem, that is when i load the page and the first write in is a blank cell every time. 更新2只有一个问题，就是当我加载页面时，第一次写入每次都是一个空白单元格。 :( And a quetion: How can I send the values to the send.php which will contains a php and that will the datas to the mysql. :(和一个问题：如何将values发送到send.php ，它将包含一个php ，并将数据发送到mysql。

Now i have this code: 现在我有这个代码：

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

to add a new input to a form field you can use below code : 要向表单字段添加新输入，您可以在代码下方使用：

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

when ever you need to add a new input you can call a function and inside the function use the above code to add input to form. 当您需要添加新输入时，您可以调用函数并在函数内部使用上面的代码向表单添加输入。 Please use some kind of incremental number to make the id and name unique 请使用某种增量编号使id和名称唯一

Answer 2

Hi your question is not so clear. 嗨，你的问题不是那么清楚。 Try to use this in this i have a html code which has a form with only one input tag first ,one button to add more fields, one submit button + 尝试在此使用此我有一个html代码，其中一个form只有一个input tag ，一个button添加更多字段，一个submit button +

JQuery to add or append more input fields 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 to see Posted form values Php script看到发布的表单值

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

Answer 3

Try this : Use class="QR" instead of name attribute for input box. 试试这个：输入框使用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: 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 个解决方案

解决方案1
0 2016-08-17 09:18:36

解决方案2
0 2016-08-17 09:32:30

解决方案3
0 已采纳 2016-08-17 09:40:10

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

问题描述

3 个解决方案

解决方案1 0 2016-08-17 09:18:36

解决方案2 0 2016-08-17 09:32:30

解决方案3 0 已采纳 2016-08-17 09:40:10

解决方案1
0 2016-08-17 09:18:36

解决方案2
0 2016-08-17 09:32:30

解决方案3
0 已采纳 2016-08-17 09:40:10