Home     |     .Net Programming    |     cSharp Home    |     Sql Server Home    |     Javascript / Client Side Development     |     Ajax Programming

Ruby on Rails Development     |     Perl Programming     |     C Programming Language     |     C++ Programming     |     IT Jobs

Python Programming Language     |     Laptop Suggestions?    |     TCL Scripting     |     Fortran Programming     |     Scheme Programming Language


 
 
Cervo Technologies
The Right Source to Outsource

MS Dynamics CRM 3.0

Javascript / Client Side Development

Dynamic form fields added with appendChild or innerHTML do not POST on submit in Firefox


I spent several hours struggling with dynamic form fields added with
appendChild or innerHTML not POSTing on submit in Firefox. The only
way I found to make it work is to append any created fields to a DIV
within the form. Here is an example I store from another post. I hope
this helps someone.

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>creating input elements dynamically</title>
<script type="text/javascript">
function addInput () {
  var div;
  if (document.getElementById) {
    div = document.getElementById('hiddenList');
    var input;
    if (document.createElement && (input =
document.createElement('input'))) {
      input.type = 'hidden';
      input.name = 'currentDate';
      input.defaultValue = input.value = new Date().toString();
      div.appendChild(input);
    }
  }

}

function showQueryString () {
  document.write('<p>location.search: ' + location.search + '<\/p>\r
\n');

}

</script>

</head>
<body>
<script type="text/javascript">
showQueryString();
</script>

<form name="form1" action="test.php">
  <div id="hiddenList"></div>

  <input type="submit" onClick="addInput()">
</form>

</body>
</html>

I spent several hours struggling with dynamic form fields added with
appendChild or innerHTML not POSTing on submit in Firefox. The only
way I found to make it work is to append any created fields to a DIV
within the form. Here is an example I store from another post. I hope
this helps someone.

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>creating input elements dynamically</title>
<script type="text/javascript">
function addInput () {
  var div;
  if (document.getElementById) {
    div = document.getElementById('hiddenList');
    var input;
    if (document.createElement && (input =
document.createElement('input'))) {
      input.type = 'hidden';
      input.name = 'currentDate';
      input.defaultValue = input.value = new Date().toString();
      div.appendChild(input);
    }
  }

}

function showQueryString () {
  document.write('<p>location.search: ' + location.search + '<\/p>\r
\n');

}

</script>

</head>
<body>
<script type="text/javascript">
showQueryString();
</script>

<form name="form1" action="test.php">
  <div id="hiddenList"></div>

  <input type="submit" onClick="addInput()">
</form>

</body>
</html>

On May 24, 9:40 am, Derek Basch <dba@yahoo.com> wrote:

> I spent several hours struggling with dynamic form fields added with
> appendChild or innerHTML not POSTing on submit in Firefox. The only
> way I found to make it work is to append any created fields to a DIV
> within the form. Here is an example I store from another post. I hope
> this helps someone.

I don't know what your problem was since you didn't post the non-
working code, I suspect it was as a result of putting DOM-altering
code in an onclick handler on the submit button - use the form's
onsubmit event instead.

In any case, your code works fine even if you remove the div and
append the input to the form from the submit button's click event.
For the record, to be valid HTML a form must have a block element
inside it enclosing all the form controls, like:

  <form ... >
    <div>
      <!-- the rest of the form -->
    </div>
  </form>

The div can be replaced with a p or table element, or any block
element.

<URL: http://www.w3.org/TR/html401/interact/forms.html#edef-FORM >

[...]

> <form name="form1" action="test.php">
>   <div id="hiddenList"></div>

>   <input type="submit" onClick="addInput()">

It's not a good idea to combine a submit button with an onclick event,
use the form's onsubmit handler instead.

--
Rob

Add to del.icio.us | Digg this | Stumble it | Powered by Megasolutions Inc