PDA

Click to See Complete Forum and Search --> : JS-generated text boxes is not sent on submit!

TriKri
August 9th, 2007, 06:50 PM
Hello!

I have no example right now, but I earlier this day created a program which generated textboxes to appear inside the form which I later submitted them with. But after submit, the boxes generated with JavaScript and added through the DOM wasn't sent, only those which where created when the document loaded (written directly in the html-document) where.

Why does this problem exist and how can I solve it? I do not wich to use the add-the-variables-to-the-adress method. Do I have to add them by changing in the html-code rather than creating DOM objects? Moreover I'm running IE 7.
PeejAvery
August 9th, 2007, 09:26 PM
As long as elements are created properly, they can be added to a form any time after document load. Are you sure you created them properly and attached them to the form?
TriKri
August 10th, 2007, 02:44 AM
Well, how's properly? I created them and attached them to an element which lies inside the form and they all pop up on the screen so I can fill them in. What more have gone wrong?
andreasblixt
August 10th, 2007, 03:24 AM
Try the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript - Dynamic form fields</title>
<script type="text/javascript">
var i = 1;
function newField(before) {
var p = document.createElement("p");

var id = "field-x-" + i;

var input = document.createElement("input");
input.id = id;
input.name = "x-" + i;
input.type = "text";

var label = document.createElement("label");
label["for"] = id;

var text = document.createTextNode("Extra #" + i);

i++;

label.appendChild(text);
p.appendChild(label);
p.appendChild(input);
before.parentNode.insertBefore(p, before);
}
</script>
<style type="text/css">
label {
display: block;
float: left;
font-weight: bold;
width: 5em;
}
</style>
</head>
<body>
<form action="js.html" method="get">
<p>
<label for="field-name">Name</label>
<input id="field-name" name="name" type="text" />
</p>
<p>
<input onclick="newField(this.parentNode)" type="button" value="New field" />
<input type="submit" value="Submit form" />
</p>
</form>
</body>
</html>

One possible problem with your code could be that you forgot the name property.
TriKri
August 10th, 2007, 04:28 AM
One possible problem with your code could be that you forgot the name property.

I believe you hit the head on the nail! I'm not sure though, I have to test it first nut the name attribute definitely wasn't set. I thought I had done that... Thanks, anyway! :D
PeejAvery
August 10th, 2007, 12:54 PM
Like I said, so long as you create it properly, it works. Next time, post some code and it would help.