How can I Generate a page using jquery Dynamic form field..

Sykat · February 18, 2015

I am trying to create a dynamic form using Jquery but don't know how to post those data using $_POST.

The page

<html>
<head>
<title> Dynamically create input fields- jQuery </title>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var addDiv = $('#addinput');
var i = $('#addinput p').size() + 1;

$('#addNew').live('click', function() {
$('<p><input type="text" id="p_new" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><input type="text" id="p_new2" size="40" name="p_new_2' + i +'" value="" placeholder="I am New 2" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);
i++;

return false;
});

$('#remNew').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});

</script>

</head>
<body>
<h2>Dynammically Add Another Input Box</h2>
<form action="gen.php" method="post">
<div id="addinput">
<p>
<input type="text" id="p_new" size="40" name="p_new" value="" placeholder="Input Value" /><input type="text" id="p_new2" size="40" name="p_new2" value="" placeholder="Input Value" /><a href="#" id="addNew">Add</a>
</p>
</div>
</form>
</body>
</html>

Here is live example.. A Pen by Captain Anonymous

Whatever, The new fields got an unique name="" value as
p_new_1, p_new_21 for first new field,
p_new_2, p_new_22 for second new field
......
......

Now, I know I can display inserted data using <?php echo $_POST["p_new_1"]; ?> and similar way like this...
But as a growing field, this form can have unlimited input field. How can I display all of those data in the page gen.php?
It must be something like this example:


<html>

    <body>

      <div class="header">Generated content<div>

<p><a href="inserted data of first field of default row">inserted data of second field of default row</a></p>

<p><a href="inserted data of first field of first new row">inserted data of second field of first new row</a></p>

<p><a href="inserted data of first field of 2nd new row">inserted data of second field of 2nd new row</a></p>

<p><a href="inserted data of first field of 3rd new row">inserted data of second field of 3rd new row</a></p>

<p><a href="inserted data of first field of 4th new row">inserted data of second field of 4th new row</a></p>

And list go on according to submitted form....

</div></body></html>

I actually lake of knowledge of PHP and no idea about array or something named loop. Can someone do it for me? What I have to do in gen.php?

Edited February 18, 2015 by Sykat

tryingtolearn · February 18, 2015

I wouldn't increment the field names (p_new_1, p_new_2... p_new_21, p_new_22)

Make that into an array

<input type="text" id="p_new" size="40" name="p_new[]" value="" placeholder="Input Value" />

Then when you submit the form use a loop to echo the values

foreach($_POST['p_new'] as $k => $v){
    $cleanv = strip_tags($v);//its a users input so I wouldn't trust it as is - use some form of checking here
    echo "$k - $cleanv<br />";
    
}

Sykat · February 18, 2015

<html>
<head>
<title> Dynamically create input fields- jQuery </title>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var addDiv = $('#addinput');
var i = $('#addinput p').size() + 1;

$('#addNew').live('click', function() {
$('<p><input type="text" id="p_new" size="40" name="p_new_[' + i +']" value="" placeholder="I am New" /><input type="text" id="p_new2" size="40" name="p_new_2[' + i +']" value="" placeholder="I am New 2" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);
i++;

return false;
});

$('#remNew').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});

</script>

</head>
<body>
<h2>Dynammically Add Another Input Box</h2>
<form action="gen.php" method="post">
<div id="addinput">
<p>
<input type="text" id="p_new_[1]" size="40" name="p_new" value="" placeholder="Input Value" /><input type="text" id="p_new2" size="40" name="p_new_2[1]" value="" placeholder="Input Value" /><a href="#" id="addNew">Add</a>
</p>

</div>
<input type="submit" />
</form>
</body>
</html>

SO you mean this?

It makes p_new_[1], p_new_2[1]; p_new_[2], p_new_2[2];...

But

<?php
foreach($_POST['p_new_'] as $k => $v){
    $cleanv = strip_tags($v);//its a users input so I wouldn't trust it as is - use some form of checking here
    echo ''. $k - $cleanv .'';
    
}
?>

this is not working...

output:

tryingtolearn · February 18, 2015

Change all the field names to

name="p_new[]"

even in the JavaScript

and in the foreach use

$_POST['p_new']

not

$_POST['p_new_']

like I used in the example.

Sign In

How can I Generate a page using jquery Dynamic form field..

Recommended Posts

Sykat

Link to comment

Share on other sites

tryingtolearn

Link to comment

Share on other sites

Sykat

Link to comment

Share on other sites

tryingtolearn

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information