Fatal编程技术网
  • javascript/
  • Javascript 如何创建具有动态输入框数量的php页面？

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

javascript php jquery mysql

Javascript 如何创建具有动态输入框数量的php页面？,javascript,php,jquery,mysql,Javascript,Php,Jquery,Mysql,所以我尝试创建一个只有一个输入框的页面。我们将读取一个QR码数据，该数据在末尾有一个新行。如果我读了qr码，它会打开另一个输入框，然后把下一个qr码写进这个框，以此类推 在页面的最后会有一个“发送”按钮，将数据发送到mysql 有什么想法吗 这就是我现在拥有的： <!DOCTYPE html> <?php header('Content-Type: text/html; charset=UTF-8'); ?> <head> </head> &

所以我尝试创建一个只有一个输入框的页面。我们将读取一个QR码数据，该数据在末尾有一个新行。如果我读了qr码，它会打开另一个输入框，然后把下一个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>
要向表单字段添加新输入，可以使用以下代码：

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

$（''）.attr({
键入：“输入”，
id:‘foo’，
名称：“酒吧”
}).附录（“形式”）；
当您需要添加新的输入时，您可以调用函数，并在函数内部使用上述代码将输入添加到表单中。请使用某种增量数字使id和名称唯一

向表单字段添加新输入，您可以使用以下代码：

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

$（''）.attr({
键入：“输入”，
id:‘foo’，
名称：“酒吧”
}).附录（“形式”）；
当您需要添加新的输入时，您可以调用函数，并在函数内部使用上述代码将输入添加到表单中。请使用某种递增数字使id和名称唯一

您好，您的问题不太清楚。尝试在这里使用它，我有一个
html
代码，它有一个
表单
，只有一个
输入标签
，首先，一个
按钮
添加更多字段，一个
提交按钮
+ 

JQuery
添加或
追加
更多
输入字段

<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>
嗨，你的问题不太清楚。尝试在这里使用它，我有一个
html
代码，它有一个
表单
，只有一个
输入标签
，首先，一个
按钮
添加更多字段，一个
提交按钮
+ 

JQuery
添加或
追加
更多
输入字段

<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>
尝试以下操作：对输入框使用class=“QR”而不是name属性

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


QR:
jQuery：

$（函数（）{
//假设您正在以下函数中读取二维码
$（'.QR'）。单击（函数（）{
//二维码如下所示
var qrCode=“二维码”；
var lastInput=$（'.QR:last'）；
lastInput.val（qrCode）；
//在最后一个输入框后添加输入
lastInput.after（“
”）；
});
//提交所有QR值
$（'form.form'）.submit（函数（）{
//您可以读取所有值并附加到变量中
var值=”；
$（'input.name'）。每个（函数（）{
值+=$（this.val（）；
});
});
});
尝试以下操作：对输入框使用class=“QR”而不是名称属性

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


QR:
jQuery：

$（函数（）{
//假设您正在以下函数中读取二维码
$（'.QR'）。单击（函数（）{
//二维码如下所示
var qrCode=“二维码”；
var lastInput=$（'.QR:last'）；
lastInput.val（qrCode）；
//在最后一个输入框后添加输入
lastInput.after（“
”）；
});
//提交所有QR值
$（'form.form'）.submit（函数（）{
//您可以读取所有值并附加到变量中
var值=”；
$（'input.name'）。每个（函数（）{
值+=$（this.val（）；
});
});
});
您是否先尝试过您这边的内容？我刚刚创建了一个带有输入框的页面。但在我看来，它应该使用ajax，我对它一无所知。总而言之，我没有做任何有意义的事情。你能分享你的页面代码吗？它有单一的输入框、发送按钮和二维码读取功能，这样我们可以更好地帮助你？你是否使用ajax调用来读取二维码？你也可以分享这个代码。二维码包含一些文本，它设置了计算机将二维码读取器识别为另一个键盘，这就是为什么我不需要任何代码来处理它。你有没有先尝试过你这边的任何东西？我刚刚创建了一个带有输入框的页面。但在我看来，它应该使用ajax，我对它一无所知。总而言之，我没有做任何有意义的事情。你能分享你的页面代码吗？它有单一的输入框、发送按钮和二维码读取功能，这样我们可以更好地帮助你？你是否使用ajax调用来读取二维码？你也可以分享这个代码。QR代码包含一些文本，它设置了计算机将QR阅读器识别为另一个键盘，这就是为什么我真的不需要任何代码来处理它。它需要ajax，不是吗？它需要ajax，不是吗？谢谢，我会试试。对不起，我是新来的。Ofc我会记下来的。但我想我能理解你们的代码，我应该把它粘贴到正文中，第一行粘贴到头上，对吗？我应该改变什么吗？或者我应该把它粘贴到表格里？谢谢，我会试试的。对不起，我是新来的。Ofc我会记下来的。但我想我能理解你们的代码，我应该把它粘贴到正文中，第一行粘贴到头上，对吗？我应该改变什么吗？或者我应该将它粘贴到表单中？JQuery应该进入send.php还是进入表单中？它应该位于带有
标记的
中，就像这样
您的JQuery代码
几乎就是我必须拥有的。我编辑了描述。你能帮我一点忙吗？当你提交我的答案中提到的表格时，你可以得到所有文本框的逗号分隔值，只需替换这个代码
values+=$（this）.val（）+“，”
Ahw谢谢，你能不能帮我一个忙，不是因为点击事件，而是因为“回车键”生成了新的单元格？JQuery应该进入send.php还是进入表单？它应该在
中，带有
标记，像这样
你的JQuery代码
几乎就是我必须拥有的。我编辑了描述。你能帮我一点忙吗？当你提交我的答案中提到的表格时，你可以得到所有文本框的逗号分隔值，只需替换这个代码
values+=$（this）.val（）+“，”啊，谢谢，你能不能帮我，不是点击事件，而是“回车键”生成新单元格？

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