gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 22:14:16 30 4
gpt4 key购买 nike

所以我尝试创建一个只有一个输入框的页面。我们将读取一个 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>

最佳答案

试试这个:使用 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();
});
});
});

关于javascript - 如何创建具有动态输入框数量的 php 页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38992485/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com