Return the values of form using javascript

Question

I have an HTML form with drop down boxes, check boxes and text fields.

I am looking for a solution that returns the values of the form using javascript.

In other words, javascript must read the form and return the field names and values entered.

Return string should be something similar to the below:

ans00441, 908, txt00441, "I do not know yet", ans00442, "country 2", ans00442, "country 3", ans00442, "country 4", ans00444, "Very Much", txt00444, "Too much"

FORM1 below has been submitted as example.

Any suggestion would be highly appreciated.

FORM1

<SCRIPT LANGUAGE="JavaScript">


function showResult(frm){
    alert('Display field names and values');
}   

 </SCRIPT>


            <table>
               <tr>
                  <td>
                     <h2 id="qst00441">For who will you vote</h2>
                     <br>
                     <input type="radio" name="ans00441" value="908 ">Party 1<br>
                     <input type="radio" name="ans00441" value="909 ">Party 2<br>
                     <input type="radio" name="ans00441" value="910 ">Party 3<br>
                     <input type="radio" name="ans00441" value="911 ">Party 4<br>
                     <br>Other Party<input type="text"  name="txt00441"  size="45" value="" ><br>
                  </td>
               </tr>
               <tr>
                  <td>
                     <h2 id="qst00442">Where do you live</h2>
                     <br>
                     <input type="checkbox" name="ans00442" value="912 ">Country 1<br>
                     <input type="checkbox" name="ans00442" value="913 ">Country 2<br>
                     <input type="checkbox" name="ans00442" value="914 ">Country 3<br>
                     <input type="checkbox" name="ans00442" value="915 ">Country 4<br>
                     <br>Other country <input type="text"  name="txt00442"  size="45" value="" ><br>
                  </td>
               </tr>
               <tr>
                  <td>
                     <h2 id="qst00444">How much do you earn</h2>
                     <br>
                     <input type="radio" name="ans00444" value="921 ">Not to much<br>
                     <input type="radio" name="ans00444" value="922 ">ok<br>
                     <input type="radio" name="ans00444" value="923 ">Very Much<br>
                     <br>Income <input type="text"  name="txt00444"  size="45" value="" ><br>
                  </td>
               </tr>
            </table>

            <INPUT TYPE="Button" VALUE="Submit" name="btnSubmit1" onClick="showResult(this.form);"

Patrik Krehák · Accepted Answer · 2014-05-21 17:17:45Z

1

I also recommend you to use onSubmit event in form except of onClick in button, because you could get problems: users can press enter in input-text and function won't be processed.

This is code (but you will need jQuery), which goes through every input in #form and does some security.

function showResult() {
    var result = '';
    $('#form input').each(function() {
        var self = $(this),
            type = self.attr('type'),
            name = self.attr('name'),
            value = self.val(),
            checked = self.is(':checked');

        if( value.length > 0 && type == 'text' || ( (type == 'radio' || type == 'checkbox') && checked) ) {
            result += name + ', ';
            result += value + ', ';
        }
    });
    $('#form').html(result);
}

Here is fiddle DEMO.

answered May 21, 2014 at 17:17

Patrik Krehák

2,6938 gold badges36 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lucasvs · Accepted Answer · 2014-05-21 16:49:15Z

0

You can do this to get json from the form:

 var frm = $(document.myform);
 var data = JSON.stringify(frm.serializeArray());

answered May 21, 2014 at 16:49

lucasvs

504 bronze badges

Comments

NEOLPAR · Accepted Answer · 2014-05-21 19:03:58Z

0

You could use document.getElementsByTagName("input"); and last format the string in the bucle, for a pure javascript solution.

var elements = document.getElementsByTagName("input"),
    elementsLength = elements.length,
    result = '';

for( var i = 0; i < elementsLength; i++ ){
    var element = elements[i];

    result += element.name + ',' + element.value+ ',';
}

You can see this running here

You could see more here

edited May 21, 2014 at 19:03

answered May 21, 2014 at 17:17

NEOLPAR

3821 silver badge6 bronze badges

Collectives™ on Stack Overflow

Return the values of form using javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related