javascript - Passing dynamically created form fields to PHP - Stack Overflow

admin管理员组

文章数量:1415100

I am trying to pass dynamically created form fields to a php script, and it's causing me a huge headache.

I've done this in the past many times, and I can't figure out what i'm doing wrong here.

Below is an example of what's going on:

A brief explanation: I have a form with a textarea, there is a button named "Add More", when clicked, a new textarea is generated via javascript. The textareas values are pushed into an array named "ments". When I try to loop through this array within my php script, it only gives me the first item, and none of the dynamically created ones.

HTML

<form action="" method="post" enctype="multipart/form-data" accept-charset="utf-8">
<textarea name="ments[]"></textarea>
<a href="javascript: return null;" class="add-more">Add More</a>
</form>

JS

$(".add-more").click(function(){ 

       var new_field = '<textarea name="ments[]"></textarea>';
       $(this).before(new_field);

}); 

PHP - this is where the issue is, when I try to loop through the ments[] array, it only gives me the first one, and does not bring through any of the ones that were generated dynamically.

<?php

$ments = $_POST['ments'];

$mentString = "";
foreach($ments as $value) {
$mentString .= $value;
}

?>

So with the above, if I create 5 textareas using the "Add More" button, input some text into each one, and then submit the form, none of the dynamically created fields send through to the php.

Can anyone help?

Thanks!!

I am trying to pass dynamically created form fields to a php script, and it's causing me a huge headache.

I've done this in the past many times, and I can't figure out what i'm doing wrong here.

Below is an example of what's going on:

A brief explanation: I have a form with a textarea, there is a button named "Add More", when clicked, a new textarea is generated via javascript. The textareas values are pushed into an array named "ments". When I try to loop through this array within my php script, it only gives me the first item, and none of the dynamically created ones.

HTML

<form action="" method="post" enctype="multipart/form-data" accept-charset="utf-8">
<textarea name="ments[]"></textarea>
<a href="javascript: return null;" class="add-more">Add More</a>
</form>

JS

$(".add-more").click(function(){ 

       var new_field = '<textarea name="ments[]"></textarea>';
       $(this).before(new_field);

}); 

PHP - this is where the issue is, when I try to loop through the ments[] array, it only gives me the first one, and does not bring through any of the ones that were generated dynamically.

<?php

$ments = $_POST['ments'];

$mentString = "";
foreach($ments as $value) {
$mentString .= $value;
}

?>

So with the above, if I create 5 textareas using the "Add More" button, input some text into each one, and then submit the form, none of the dynamically created fields send through to the php.

Can anyone help?

Thanks!!

• php
• javascript
• html
• forms

Share Improve this question Follow edited Sep 9, 2013 at 13:23 hakre 199k5555 gold badges450450 silver badges856856 bronze badges asked Jan 17, 2012 at 21:57 user995542user995542 6111 silver badge1111 bronze badges 2

• How are you submitting the form? – Diodeus - James MacFarlane Commented Jan 17, 2012 at 22:04
• I'm submitting the form using the url of the page the form is on, within the file there is a php script that catches the post variables, you can see part of it above. – user995542 Commented Jan 18, 2012 at 13:41

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

<form action="" method="post" />

should be:

<form action="" method="post">

This has been resolved.

The issue was being caused by an unclosed form above the one I was having the issues with.

Thanks for the replies everyone!

The other answer is correct, but you also will need to close the form as well. Your code was missing the closing ">" as well.

<form action="" method="post" >
<textarea name="ments[]"></textarea>
<a href="javascript: return null;" class="add-more">Add More</a>
</form>

Also, the class name in your JS didn't match the class name in your HTML.

Here it is all together and working:

<html>

<head>

<script src="//ajax.googleapis./ajax/libs/jquery/1.6.2/jquery.min.js"></script>

</head>

<body>

<form action="" method="post">

    <textarea name="ments[]"></textarea>

    <a href="javascript: return null;" class="add-more">Add More</a>

    <input type="submit" />

</form>

<script>
    $(".add-more").click(function(){ 
           var new_field = '<textarea name="ments[]"></textarea>';
           $(this).before(new_field);

    });
</script>

<?php

$ments = $_POST['ments'];

$mentString = "";

foreach($ments as $value) {
    $mentString .= $value;
}

echo $mentString;

?>

</body>

</html>

本文标签： javascriptPassing dynamically created form fields to PHPStack Overflow