SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2013
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Merging the Content of 3 Fields Before Form Submission

    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. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    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

    javascriptexample.net, 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
    Location
    Germany
    Posts
    5,996
    Mentioned
    219 Post(s)
    Tagged
    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):

    Code:
    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;
    }


Bookmarks

Posting Permissions

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