My code is trying to allow user to add new text field by clicking the add button. I want to post all the text fields the user had added (be it 2, 3, 4 or more) to the next page so I can retrieve the data that the user had entered.
P/S: Added new requirement: Retrieve data and print the data that the user had entered.
Here is my code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var counter = 2;
$("#addMenuTab").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Menu Tab #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeMenuTab").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
</script>
<form name="basicInfo" action="contents.php" method="post">
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Menu Tab #1 : </label>
<input type='text' id='textbox1' >
</div>
</div>
<br/>
<input type='button' value=' Add Menu Tab ' id='addMenuTab' />
<input type='button' value=' Remove Menu Tab ' id='removeMenuTab' />
</form>
</body>
</html>
You can get all these fields and their values on contents.php under $_POST global array.
For example:
<?php
echo "<pre>";
print_R($_POST);
echo "</pre>";
?>
I have a simple solution for your problem.
Use one counter to count the number of textfields.
We can later pass this variable to html.
Modify your javascript:-
<script>
$(document).ready(function(){
var counter = 2;
$("#count").val(counter-1);
$("#addMenuTab").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Menu Tab #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
$("#count").val(counter);
counter++;
});
$("#removeMenuTab").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
$("#count").val(counter-1);
});
});
</script>
Now add one hidden field in your html form. The value of this hidden field will be the total number of texfields.
<input type='hidden' id='count' name='counter' value=''/>
In your contents.php add the below given code.
$count=$_POST['counter'];
for($i=1;$i<=$count;$i++)
{
echo "value from textbox$i is".$_POST["textbox$i"]."<br/>";
}
Here you will get the total number of textfields in the variable $count
Since the name of your texfields are like textbox1,textbox2..etc You can use a loop for getting all the data from your previous page using the POST method.
Also add name attribute to your initial textbox to get this work.
<input type='text' id='textbox1' name="textbox1" >
I don' understand what is your question. If you add some inputs like textbox10, you will be able to read textbox10 without problems on your server.
Related
I want to add the insertion button in the following code directory
How can I add a button to the insert section.
$(document).ready(function() {
$('#row_add_btn').click(AddRows)
var number = 1;
function AddRows() {
number++;
if (number < 21) {
var AddToRows = '<p><input name="icerik' + number + '"/> <input name="icerik' + number + '" /><input type="button" class="ibtnDel"></p>'
$('#list_add_rows').append(AddToRows)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list_add_rows">
<p>
<input type="text" name="icerik1" />
<input type="text" name="icerik1" />
</p>
</div>
<a id="row_add_btn">Add</a>
If you want the button click to remove the row, this jQuery should do the trick:
$(document).on("click", ".ibtnDel", function () {
$(this).parent().remove();
});
jQuery on() documentation
If you planning to insert deletion of the the rows then you need to use the code what Will P. suggested above but in addition you will need to handle the maximum number of rows differently.
Increment the number in if condition and decrement on remove row.
Example Snippet:
$(document).ready(function() {
$('#row_add_btn').click(AddRows);
$(document).on('click', '.ibtnDel', removeRow);
var number = 1;
function AddRows() {
if (number <= 21) {
number++;
var AddToRows = '<p><input name="icerik' + number + '"/> <input name="icerik' + number + '" /><input type="button" class="ibtnDel"></p>'
$('#list_add_rows').append(AddToRows)
}
}
function removeRow() {
number--;
$(this).parent().remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list_add_rows">
<p>
<input type="text" name="icerik1" />
<input type="text" name="icerik1" />
</p>
</div>
<a id="row_add_btn">Add</a>
I want to add dynamic input.
I have one input already created and if someone write something into it, it will add new input below it and if again some one write something into newly created input, it will call the same jquery and generate another input below and so on. ( same like google's contact form for address and email )
How can I do this.
I have tried this but it is giving me for each keypress new input and also for newly created input it is not working
var counter = 2;
$("input[id^='textbox']").keypress(function () {
if (counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1' >
</div>
</div>
You should use .on() to attach event handler to new input. Also check if parent of typing text is last-child, then add new row.
$(document).on("keyup change", "input[id^='textbox']", function(){
if ($(this).parent().is(":last-child") && $(this).val() != ""){
var index = $(this).parent().index() + 2;
$("#TextBoxesGroup").append('<div id="TextBoxDiv'+index+'"><label>Textbox #'+index+' : </label><input type="textbox" id="textbox'+index+'" ></div>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1' >
</div>
</div>
I tried to passing the input value from user to another page by using the Session method after the user click on submit button.
My page has a form with one button which called as "Add Textbox". This button allow the user to add textbox by themselves.
Here is my current code
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function() {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' + '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function() {
if (counter == 2) {
alert("System required at least one.");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="<?php $_PHP_SELF ?>" method="post">
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 :</label>
<input type='textbox' id='textbox1' name="textbox1">
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<br/>
<input type="submit" name="submit" id="submit">
</form>
And here is my code to assign the value to session in php
<?php
if(isset($_POST['submit'])) {
for($i=1; $i<=10; $i++)
{
if(isset($_POST['textbox'.$i]))
{
$obj = $_POST['textbox'.$i];
echo $obj,'<br>';
$_SESSION['textbox'.$i] = $obj;
}
}
header("Location:../brightan-system/result.php");
}
?>
and here is how I tried to get the value from the second page
<?php
for($i=1; $i<=10; $i++)
{
echo "<strong>".$i."</strong> ".$_SESSION['textbox'.$i]."<br>";//Use the session variables
}
session_destroy();
?>
Actually, I can get a result on the second page, but the problem is if the user only add 4 textboxes, then there will be an error that said Undefined index on the second page. This is because the for loop produce 10 session variable on the second page.
Is there another way to get the session variable instead using for loop in this case?
You should check first if ith textbox is set or not. Add condition to check before printing it.
<?php
for($i=1; $i<=10; $i++)
{
if(isset($_SESSION['textbox'.$i])){
echo "<strong>".$i."</strong> ".$_SESSION['textbox'.$i]."<br>";//Use the session variables
}
}
session_destroy();
?>
am just a beginner of php.
When i click a button i need to add more date-picker dynamically.I put the code but when i click the button am getting new textbox not date-picker.plz check my code and tell me where is the mistake and what i have to do.Here is my code,
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="css/datepicker.css">
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newdatepicker = $(document.createElement('div'))
.attr("id", 'datepicker' + counter);
newdatepicker.after().html('<label> #'+ counter + ' : </label>' +
'<input class= name="date' + counter +
'" id="dateid' + counter + '" value="" >');
newdatepicker.appendTo("#date");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#datepicker" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n date #" + i + " : " + $('#date' + i).val();
}
alert(msg);
});
});
</script>
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('.input-daterange').datepicker({
todayBtn: "linked"
});
});
</script>
<div id='date'>
<div class="hero-unit">
<div class="input-daterange" id="datepicker1" >
<span class="add-on" style="vertical-align: top;height:20px">Select Leave Date:</span>
<input type="text" class="input-small" name="date" id="dateid"/>
</div>
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
</html>
When the page loads, you initialize the date picker plugin on the elements found at that time:
$(document).ready(function () {
$('.input-daterange').datepicker({
todayBtn: "linked"
});
});
But then you never initialize it on new elements added later. So when you add a new element:
newdatepicker.appendTo("#date");
It's just the uninitialized element that was created. The plugin was never told about it. You need to run the plugin on it.
Since the code creates the id value, you can simply use that to target the element right after it's been added. Maybe something like this:
newdatepicker.appendTo("#date");
$('#dateid' + counter).datepicker({
todayBtn: "linked"
});
I'm trying to add new fields via a button into my form. However, it adds it to the outside of the form. Any ideas on what to edit to accomplish this? Thanks.
My HTML:
<div id="page">
<h1>Quick Order</h1>
<div id="dynamicInput">
<form method="post" name="QuickOrderMulti">
<input type="hidden" name="formName" value="dmiformQuickOrderMulti">
<p>Product # <input type='Text' name="ProductNumber" title="Enter Product #"></p>
<p>Product # <input type='Text' name="ProductNumber" title="Enter Product #"></p>
<input type="submit" value="Add"><input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
</form>
</div>
</div> <!-- page -->
My JavaScript:
<script type="text/javascript">
var counter = 0;
var limit = 3;
function addInput(dynamicInput){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Product # " + (counter + 1) + " <br><input type='text' name='ProductNumber[]'>";
document.getElementById(dynamicInput).appendChild(newdiv);
counter++;
}
}
</script>
You're appending to the DIV surrounding the form thus the fields won't be inside the child form.
Either put the form around your "dynamicInput" div... or insert inside the form instead.
Option A:
<form method="post" name="QuickOrderMulti">
<div id="dynamicInput">
...
</div>
</form>
Option B:
<div id="dynamicInput">
<form method="post" name="QuickOrderMulti" id="QuickOrderMulti">
...
</form>
</div>
<script type="text/javascript">
...
document.getElementById('QuickOrderMulti').appendChild(newdiv);
^^^^^^^^^^^^^^^
...
</script>
You're adding the input to the div, not the form. Just give the form an id and add the input fields to that.
document.getElementById("formId").innerHTML = "Product # " + (counter + 1) + " <br><input type='text' name='ProductNumber[]'>";
Try:
<script type="text/javascript">
var counter = 0;
var limit = 3;
function addInput(dynamicInput){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var parent = document.getElementById('myform')
var element = null;
try { // IE
element = document.createElement('<input type="text" name="ProductNumber[]">');
}
catch (e) { // W3C
element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("name", "ProductNumber[]");
}
parent.appendChild("Product # " + (counter + 1) + element);
counter++;
}
}
</script>