SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2013
    0 Post(s)
    0 Thread(s)

    Merging the Content of 3 Fields Before Form Submission


    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 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. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Sydney, NSW, Australia
    25 Post(s)
    1 Thread(s)
    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.
    Stephen J Chapman, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    219 Post(s)
    12 Thread(s)
    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;


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts