Merging the Content of 3 Fields Before Form Submission

JavaScript
1

Hi.

I have a form with a series of text fields.

3 of them have to be combined into a hidden field before submission.

I have found http://jsfiddle.net/Tyriar/5ERRG/ a few hours ago and I am trying to adapt it to a form.

The <div id=“output”></div> would be the hidden input.

And <button id=“test”>Test</button> would be replaced by the submit button.

In the first place, after editing the code and changing <div id=“output”></div> for <input id=“output”/> the fourth field does not receive any content from the 3 fields above, so I have no tested it in a form.

Some idea on how to adapt the code to my project?

If such a thing is possible.

In other case, I would appreciate some other way to do it.

Thanks for your help.

Best regards.

2

Merging the fields into a hidden field is relatively easy if the person filling out the form has JavaScript enabled but is not possible if they do not have JavaScript enabled. In that instance you’d have to merge them on the server and so since you have to do that when JavaScript is disabled, why not just do it there for everyone.

3

Hi there,

What felgall says is correct - it’s best done on the server, however if you need a JS solution, all you do is this (untested):

var field1 = document.getElementById("field1"),
    field2 = document.getElementById("field1"),
    field3 = document.getElementById("field1"),
    hiddenField = document.getElementById("hiddenField"),
    form = document.getElementById("myForm");

form.onsubmit = function(){
  hiddenField.value = field1.value + field2.value + field3.value;
}