Jump to content

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

Sykat

By Sykat
in PHP Coding Help

Recommended Posts

Sykat Newbie

Sykat

Posted
Posted

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?

tryingtolearn Regular Member

tryingtolearn

Posted
Posted

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 Newbie

Sykat

Posted
  • Author
Posted 
<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...

post-174557-0-14877300-1424266182_thumb.jpg

output:

post-174557-0-91184200-1424266202.jpg

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.