[英]How to create php page that have dynamic number of input boxes?
所以我尝试创建一个只有一个输入框的页面。 我们将读取最终有新行的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>
要向表单字段添加新输入,您可以在代码下方使用:
$('<input>').attr({
type: 'input',
id: 'foo',
name: 'bar'
}).appendTo('form');
当您需要添加新输入时,您可以调用函数并在函数内部使用上面的代码向表单添加输入。 请使用某种增量编号使id和名称唯一
嗨,你的问题不是那么清楚。 尝试在此使用此我有一个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);
}
?>
试试这个:输入框使用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();
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.