processing javascript array with PHP Options

[joyful]

Hey!

I am dynamically creating form inputs with this script:

CODE

var counter = 1;
var limit = 40;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of steps: " + counter);
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

(I found the above script here)

This script works great! The issue arises when I attempt to process the data with PHP:

CODE

$myInputs = $_POST["myInputs"];
foreach ($myInputs as $eachInput) {
     echo $eachInput . "<br>";
}

I seem to only be able to get the contents of the first input using the above script. What am I doing wrong? Should this work? I followed the tutorial at www.randomsnippets.com exactly; yet, it seems not to work!

Thanks in advance!

--

[Christian J]

(I found the above script here)

There's no ACTION attribute or submit button in the form, so it can't submit:

CODE

<script src="/wp-includes/js/addInput.js" language="Javascript" type="text/javascript"></script>
<form method="POST">
     <div id="dynamicInput">
          Entry 1<br><input type="text" name="myInputs[]">
     </div>
     <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
</form>

(if there's an ACTION attribute you might use the Enter key instead of a submit button when there's only a single textfield, though).

The issue arises when I attempt to process the data with PHP:

CODE

$myInputs = $_POST["myInputs"];
foreach ($myInputs as $eachInput) {
     echo $eachInput . "<br>";
}

Seems OK. But as a side-note you must sanitize the POST data, otherwise malicious users can inject any kind of content into your web page.

I seem to only be able to get the contents of the first input using the above script. What am I doing wrong?

No idea. Have you given the generated textfields the same NAME as the first (static) one? Does the javascript place them inside the form (and not outside)?

Should this work?

With a correct form, yes.

[joyful]

Thanks for the reply Christian.

First of all, I did not post the actual HTML form. I hoped the content of it could be assumed, however, in hindsight, I believe I should have posted it:

CODE

<form method='POST' action='myfile.php'>";

    <div id='dynamicInput'>
        Step 1<br><input type='text' name='myInputs[]' />
    </div>
    <input type='button' value='Add another step' onClick='addInput(".'"dynamicInput"'.");'>    
                
    <div id='submitButtonWrap'><input type='submit' value='Create' name='addSubmit' /></div>";
                
</form>";

As posted above, this is my java script:

CODE

var counter = 1;
var limit = 40;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of steps " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

And PHP:

CODE

$myInputs = $_POST["myInputs"];
foreach ($myInputs as $eachInput) {
     echo $eachInput . "<br>";
}

Also, what do you mean by "sanitize the data"? How can I do that?
As stated above, the issue with the above javascript/HTML/PHP is that it only submits the first input. What am I doing wrong?

Thanks a lot for your help!

--

[Christian J]

Thanks for the reply Christian.

First of all, I did not post the actual HTML form. I hoped the content of it could be assumed, however, in hindsight, I believe I should have posted it:

CODE

<form method='POST' action='myfile.php'>";

    <div id='dynamicInput'>
        Step 1<br><input type='text' name='myInputs[]' />
    </div>
    <input type='button' value='Add another step' onClick='addInput(".'"dynamicInput"'.");'>    
                
    <div id='submitButtonWrap'><input type='submit' value='Create' name='addSubmit' /></div>";
                
</form>";

The ending "; and the nested quotes makes it look like HTML generated by PHP (but incorrectly so). Maybe the nested quotes are messed up.

Also, what do you mean by "sanitize the data"? How can I do that?

When printing content on a PHP web page, use e.g. htmlspecialchars(). In an SQL query, use e.g. mysql_real_escape_string() to avoid SQL injections.

[joyful]

Hey! Sorry, it was generated with PHP... I forgot to remove all the remnants of that. By the way, the fact that it was generated with PHP is of no relevance to the issue... Right?.

Here is what it looks like (full, in the PHP):

CODE

            echo "<form method='POST' action='requests.php'>";
                
            echo "<div id='dynamicInput'>
                        <div>Step 1<br><input type='text' name='myInputs[]' /></div>
                  </div>
                        <input type='button' value='Add another step' onClick='addInput(".'"dynamicInput"'.");'>
                        ";    
                
            echo "<div id='submitButtonWrap'><input type='submit' value='Create' name='addSubmit' /></div>";
                
            echo "</form>";

I really don't understand what I am doing wrong. I feel like I have done everything it the tutorial. When I echo the array (an array that had 3 inputs contents) in PHP I get this:

CODE

Array ( [0] => First Inputs Contents )

The array only was one row when it should have all 3. Do you see what I am doing wrong?

Again, Thanks a lot for all the help

--

[Brian Chandler]

It helps to show the html that is being generated, not the php program generating it. For example, in the middle of the echo we have

...ut(".'"dynamicInput"'.");'>...

which produces

...ut("dynamicInput");'>...

(but which would be easier to read if written

...ut(\"dynamicInput\");'>...


Anyway, I think the problem is that you have three [variable] text inputs with the same name, "myinputs[]". In the case of checkboxes, you can use this PHP (fake) array name to get more than one value for the same _name_ input, but it's not obvious that you can for text input. First thing to do is to check by printing out the complete $_POST array in the PHP form handler. Also print out the raw POST data (can't remember how to do that)...

But I think it's cleaner to avoid the whole business of duplicate _name_ values. Can't you make the javascript generate additional text inputs with name=input2, name=input3, etc?

[Christian J]

I think the problem is that you have three [variable] text inputs with the same name, "myinputs[]". In the case of checkboxes, you can use this PHP (fake) array name to get more than one value for the same _name_ input, but it's not obvious that you can for text input.

It's permitted by PHP, see code example here: http://www.php.net/manual/en/faq.html.php#faq.html.arrays (note that the default TYPE of INPUT is "text").

The following works for me. I changed the ACTION to the same page, so now you'll get a notice and warning when the page is first loaded (because the form is not yet submitted):

CODE

<?php
$myInputs = $_POST["myInputs"];
foreach ($myInputs as $eachInput)
{
     echo $eachInput . "<br>";
}

echo "<form method='POST' action=\"\">";
echo "<div id='dynamicInput'>
            <div>Step 1<br><input type='text' name='myInputs[]' /></div>
      </div>
            <input type='button' value='Add another step' onClick='addInput(".'"dynamicInput"'.");'>
            ";

echo "<div id='submitButtonWrap'><input type='submit' value='Create' name='addSubmit' /></div>";
echo "</form>";
?>
<script type="text/javascript">
var counter = 1;
var limit = 40;
function addInput(divName)
{
     if (counter == limit)
     {
          alert("You have reached the limit of steps: " + counter);
     }
     else
     {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}
</script>

But I think it's cleaner to avoid the whole business of duplicate _name_ values. Can't you make the javascript generate additional text inputs with name=input2, name=input3, etc?

But then you must tease them apart in the PHP, which seems much messier.

[Brian Chandler]

But I think it's cleaner to avoid the whole business of duplicate _name_ values. Can't you make the javascript generate additional text inputs with name=input2, name=input3, etc?

But then you must tease them apart in the PHP, which seems much messier.

Not really. And there is something profoundly repugnant in programming terms in having [sort-of] variable names including [] characters.

(Handling names like 'input1' 'input2' really is trivial -- something like:

CODE

$i = 1;
while ($text = $_POST['input'. $i++])  // assuming text box must be nonempty
{
...process $text...
}

[Christian J]

there is something profoundly repugnant in programming terms in having [sort-of] variable names including [] characters.

The NAME attribute is not a variable, and in the actual PHP the square brackets are not used. But in javascript such NAME attribute values seems to complicate things.

(Handling names like 'input1' 'input2' really is trivial -- something like:

That was indeed simple (despite the "Undefined index" notice when it reaches the end, but I guess such a notice is not harmful).

[joyful]

Hey!

Thanks a lot Christian and Brian,
I ended up doing this with Christian's method (javascript array).

Thanks!
Cheers!