Jump to content

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

Sykat

By Sykat
in PHP Coding Help

 Share

Recommended Posts

Sykat Newbie

Sykat

Posted
Posted (edited)

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.

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