Pass variable value from form javascript

Question

Say I got a HTML form like below and want to pass the values in the textfields to JS variables.

<form name="testform" action="" method="?"
<input type="text" name="testfield1"/>
<input type="text" name="testfield2"/>
</form>

I've only passed values to variables in PHP before. When doing it in javascript, do I need a method? And the main question, how is it done?

Lowkase · Accepted Answer · 2012-12-02 20:35:50Z

3

Here are a couple of examples:

Javascript:

document.getElementById('name_of_input_control_id').value;

jQuery:

$("#name_of_input_control_id").val();

Basically you are extracting the value of the input control out of the DOM using Javascript/jQuery.

answered Dec 2, 2012 at 20:35

Lowkase

5,6992 gold badges34 silver badges48 bronze badges

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

6 Comments

Konrad Rudolph Over a year ago

Note how the controls in OP’s example don’t have an ID though …

Lowkase Over a year ago

True. OP will have to add an ID to his/her input controls.

Konrad Rudolph Over a year ago

My point is: not necessarily. Using a name is just fine, and since form elements need a name anyway (at least when they also communicate via the form with a server), why not use that?

Lowkase Over a year ago

Depends what the OP wants to do with that value. Maybe he/she wants to do some browser side validation or some fancy UI/UX based on the input.

Konrad Rudolph Over a year ago

That doesn’t change anything.

|

Mik · Accepted Answer · 2012-12-02 20:43:38Z

0

the answers are all correct but you may face problems if you dont put your code into a document.ready function ... if your codeblock is above the html part you will not find any input field with the id, because in this moment it doesnt exist...

document.addEventListener('DOMContentLoaded', function() {
   var input = document.getElementById('name_of_input_control_id').value;
}, false);

jQuery

jQuery(document).ready(function($){
    var input = $("#name_of_input_control_id").val();
});

answered Dec 2, 2012 at 20:43

Mik

1,7031 gold badge14 silver badges26 bronze badges

Comments

lostsource · Accepted Answer · 2012-12-02 20:45:37Z

You don't really need a method or an action attribute if you're simply using the text fields in Javascript

Add a submit button and an onsubmit handler to the form like this,

<form name="testform" onsubmit="return processForm(this)">
    <input type="text" name="testfield1"/>
    <input type="text" name="testfield2"/>
    <input type="submit"/>
</form>

Then in your Javascript you could have this processForm function

function processForm(form) {
    var inputs = form.getElementsByTagName("input");
    // parse text field values into an object
    var textValues = {};
    for(var x = 0; x < inputs.length; x++) {
        if(inputs[x].type != "text") {
            // ignore anything which is NOT a text field
            continue;
        }

        textValues[inputs[x].name] = inputs[x].value;
    }

    // textValues['testfield1'] contains value of first input
    // textValues['testfield2'] contains value of second input

    return false;  // this causes form to NOT 'refresh' the page
}

Josh Crozier · Accepted Answer · 2013-11-17 18:27:40Z

0

Try the following in your "submit":

var input = $("#testfield1").val();

edited Nov 17, 2013 at 18:27

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

answered Dec 2, 2012 at 20:37

ffffff01

5,26811 gold badges56 silver badges61 bronze badges

Collectives™ on Stack Overflow

Pass variable value from form javascript

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related