homepage Welcome to WebmasterWorld Guest from 54.226.173.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Dynamic controls not posted on IE
mickeyc




msg:4480061
 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




msg:4480140
 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




msg:4480238
 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




msg:4480286
 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




msg:4480473
 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




msg:4480573
 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




msg:4480833
 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




msg:4480916
 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. :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved