Jump to content
Sign in to follow this  
Sykat

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

Recommended Posts

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 by Sykat

Share this post


Link to post
Share on other sites

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 />";
    
}

Share this post


Link to post
Share on other sites
<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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • 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.