JavaScript: Adding INPUTs onsubmit

JavaScript: Adding INPUTs onsubmit

Billybob

Member #3,136

January 2003

I need to add an input to an HTML form when the user clicks the Submit button:

1<script src='jquery.js'></script>
2<script>
3function form_special_file_input()
4{
$('input.special_file_input').each( function (i) {
  alert(this.value);
  var input = document.createElement('input');
  input.value = this.value;
  input.name = this.name;
  input.type = 'hidden';
  input.class = '';
  document.forms[0].appendChild(input);
  alert(i);
});

alert('done');

return false;
19}
20</script>

According to Dom Inspector the element is added. But it doesn't get POST'd. What's the deal?

Matthew Leverton

Supreme Loser

January 1999

You should set the type first before any other parameters. Browsers, especially Opera, are picky about that sort of thing. input.class should be input.className.

Adding things during the onsubmit phase of a form can be tricky. Browsers handle it differently. It might be better to try to set a timeout that submits the form a few ms after the field is added.

--
RTFM | Follow Me on Google+ | I know 10 people

Billybob

Member #3,136

January 2003

Yeah, I'm having serious trouble getting it to see the field. I tried your suggestion of setting the type first, to no avail. I added a new button. One adds the field. The other submits the form. So even with a delay it doesn't work.
And finally I tried a div and modifying its innerHTML. Same result.

In this particular case I've decided to go with XMLhttprequest, using the ajax extension to JQuery. Still wish I could add fields, but oh well not worth my time figuring out right now.

Thank you for the help.

EDIT: Dangit, now I gotta figure out how to shove files from file inputs across XMLhttprequest >:(
EDIT2: Nevermind, don't really need to do that (and it appears to be impossible).