Dynamic controls not posted on IE

Forum Moderators: open

Message Too Old, No Replies

Dynamic controls not posted on IE

mickeyc

11:40 am on Jul 30, 2012 (gmt 0)

Let me start with the general idea.
I need a form where I allow users to add / remove items of the same type.
For example names. There would be a text box for first name and another for last name. The user will be able to add / remove members before posing the form

I built such a form that dynamically adds controls (clone on javascript). I tried 2 methods:
Cloning the controls and then renaming the new controls, where each has a serial number
Or, the better way, create a control array and every clone simply adds an element to the array.

Both methods work perfectly on Chrome and FF, but when posting the form on IE, only the first element goes through.

I found out that on the first method I used, the problem is that IE doesn't allow renaming and simply added a new attribute called submitName with the new name. But why doesn't it work with the array?

Thanks!

Fotiman

2:35 pm on Jul 30, 2012 (gmt 0)

Welcome to WebmasterWorld! You'll probably get more help if you post some actual code. Also, this might be better addressed in the JavaScript forum.

mickeyc

6:16 pm on Jul 30, 2012 (gmt 0)

Thanks!
This is the script:

function AddItem()
{
var NumberOfIngredients = document.getElementById("NumberOfIngredients");
var NewNumberOfIngredients = parseInt(NumberOfIngredients.value) + 1;
var NewContainer = document.getElementById("ingredient1").cloneNode(true);
NewContainer.id = "ingredient" + NewNumberOfIngredients;
var overallParent = document.getElementById("FormParent");
overallParent.insertBefore(NewContainer,document.getElementById("AddRemoveButtons"));
NumberOfIngredients.value = NewNumberOfIngredients;
}

This is the HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js.js" type="text/javascript"></script>
</head>
</body>
<form action="test.php" method="post">
<div name="FormParent" id="FormParent">
<input type="hidden" name="NumberOfIngredients" id="NumberOfIngredients" value="1">
<div id="ingredient1">
<input type="text" name="ingredientname[]">
<input type="text" name="ingredientquantity[]">
<select name="ingredientmeasurement[]">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
</div>
<div name="AddRemoveButtons" id="AddRemoveButtons">
<input type="button" value="Add" onclick="AddItem();"/>
<input type="button" value="Remove" onclick="RemoveItem();"/>
<input type="submit" name="submit" value="Submit">
</div>
</div>
</form>
</body>
</html>

I am posting to this php code to check if it's working:
<?php
function printArray($array)
{
foreach ($array as $key => $value)
{
if(is_array($value))
{
echo $key . " array:<br>";
printArray($value);
}
else
{
echo "$key => $value<br>";
}
//If $value is an array, print it as well!

}
}
printArray($_POST)

?>

obviously this is just a test code...

Fotiman

7:59 pm on Jul 30, 2012 (gmt 0)

I tried your code, and it seemed to work for me. Here's how I tested it, though. First, I changed the form method from "post" to "get", so that I could see the values being submitted. Next, I changed the action to "", since I am testing this locally, not in a PHP environment. Then in IE, I clicked Add twice, added some values, and clicked on submit. This is what shows in the address bar:

file:///C:/test.htm?NumberOfIngredients=3&ingredientname%5B%5D=i1&ingredientquantity%5B%5D=v1&ingredientmeasurement%5B%5D=1&ingredientname%5B%5D=i2&ingredientquantity%5B%5D=v2&ingredientmeasurement%5B%5D=1&ingredientname%5B%5D=i3&ingredientquantity%5B%5D=v3&ingredientmeasurement%5B%5D=1&submit=Submit

This was the same in both IE and Chrome. So I wonder if maybe there is more happening that's external to the code you posted?

mickeyc

8:30 am on Jul 31, 2012 (gmt 0)

I changed to GET, added 2 controls and this is what I get in IE:
[localhost...]

As you can see, NumberOfIngredients increased to 3 but it only sent the first batch
This is regardless of whether I post to a PHP page or not.
The reason I use the PHP code I that I want to use POST and it allows me to view the array

Which IE version did you test this on? I've been trying to crack this for weeks

What I posted is the entire code

Fotiman

1:34 pm on Jul 31, 2012 (gmt 0)

I tested with IE8. Here is the complete code that I tested with:


<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script>
function AddItem() { 
  var NumberOfIngredients = document.getElementById("NumberOfIngredients"),
    NewNumberOfIngredients = parseInt(NumberOfIngredients.value, 10) + 1,
    NewContainer = document.getElementById("ingredient1").cloneNode(true),
    overallParent = document.getElementById("FormParent"); 
  NewContainer.id = "ingredient" + NewNumberOfIngredients; 
  overallParent.insertBefore(NewContainer,document.getElementById("AddRemoveButtons")); 
  NumberOfIngredients.value = NewNumberOfIngredients; 
}
</script>
</head> 
<body> 
<form action="" method="get"> 
  <div name="FormParent" id="FormParent"> 
    <input type="hidden" name="NumberOfIngredients" id="NumberOfIngredients" value="1"> 
    <div id="ingredient1"> 
      <input type="text" name="ingredientname[]"> 
      <input type="text" name="ingredientquantity[]"> 
      <select name="ingredientmeasurement[]"> 
        <option value="1">a</option> 
        <option value="2">b</option> 
        <option value="3">c</option> 
      </select> 
    </div> 
    <div name="AddRemoveButtons" id="AddRemoveButtons"> 
      <input type="button" value="Add" onclick="AddItem();"/> 
      <input type="button" value="Remove" onclick="RemoveItem();"/> 
      <input type="submit" name="submit" value="Submit"> 
    </div> 
  </div> 
</form> 
</body> 
</html>

mickeyc

8:18 am on Aug 1, 2012 (gmt 0)

Unbelievable! I found the problem
I compared the files and the problem is that I am stupid...
I had 2 closing body tags and that's what caused the problem
I guess Chrome and FF fix that and IE doesn't.
All that because of one little "/"

Thank you!

Fotiman

1:19 pm on Aug 1, 2012 (gmt 0)

Glad you got it sorted. I actually did notice the double </body> in your post, but thought it was just a typo in your forum post. I Should have asked. :)