Daniel Daniel - 3 months ago 9
jQuery Question

How to create php page that have dynamic number of input boxes?

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. And if i read the qr it should open anohter input box and write the next QR code into this and so on...

And it the end of the page there will be a "Send" button which sends the datas into 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

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>

Answer

Try this : Use class="QR" instead of name attribute for input box.

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