How to pass a form input value into a JavaScript function

Question

I have a generic JavaScript function which takes one parameter

function foo(val) { ...}

and I want to call the function when submit a form

<form>
<input type="text" id="formValueId"/>
<input type="button" onclick="foo(this.formValueId)"/>
</form>

but the expression foo(this.formValueId) does not work (not surprised, it was a desperate attempt), So the question is, how can I pass a form value to the javascript function. As I mentioned the javascript is generic and I don't want to manipulate the form inside it!

I could create a helper function in the middle to get the form values with jQuery (for example) and then call the function but I was wondering if I can do it without the helper function.

This may be your answer. demo: jsbin.com/icikav/5/edit#javascript,html The method you're trying to call isn't defined. — funerr
– funerr, Commented Oct 10, 2011 at 18:12
Be advised that it is possible to submit this form by hitting Enter in the text field (not in IE though) and your button click will not be triggered. — Ilia G
– Ilia G, Commented Oct 10, 2011 at 18:13

Clive · Accepted Answer · 2011-10-10 18:11:49Z

25

It might be cleaner to take out your inline click handler and do it like this:

$(document).ready(function() {
    $('#button-id').click(function() {
      foo($('#formValueId').val());
    });
});

answered Oct 10, 2011 at 18:11

Clive

36.9k8 gold badges89 silver badges113 bronze badges

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

Comments

Ibu · Accepted Answer · 2011-10-15 04:21:41Z

19

Give your inputs names it will make it easier

<form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" onclick="foo(this.form.valueId.value)"/>
</form>

UPDATE:

If you give your button an id things can be even easier:

<form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" id="theButton"/>
</form>

Javascript:

var button = document.getElementById("theButton"),
value =  button.form.valueId.value;
button.onclick = function() {
    foo(value);
}

edited Oct 15, 2011 at 4:21

answered Oct 10, 2011 at 18:10

Ibu

44k14 gold badges82 silver badges109 bronze badges

1 Comment

nav3916872 Over a year ago

instead of onclick="foo(this.form.valueId.value)" we can use onclick="foo(valueId.value)". it works...

Saket · Accepted Answer · 2011-10-10 18:11:27Z

6

Use onclick="foo(document.getElementById('formValueId').value)"

answered Oct 10, 2011 at 18:11

Saket

46.3k13 gold badges65 silver badges80 bronze badges

Comments

James Hill · Accepted Answer · 2011-10-10 18:13:10Z

6

There are several ways to approach this. Personally, I would avoid in-line scripting. Since you've tagged jQuery, let's use that.

HTML:

<form>
    <input type="text" id="formValueId" name="valueId"/>
    <input type="button" id="myButton" />
</form>

JavaScript:

$(document).ready(function() {
    $('#myButton').click(function() {
      foo($('#formValueId').val());
    });
});

answered Oct 10, 2011 at 18:13

James Hill

62.2k22 gold badges150 silver badges166 bronze badges

Comments

Kishan Bheemajiyani · Accepted Answer · 2014-01-24 08:47:43Z

2

Well ya you can do that in this way.

    <input type="text" name="address" id="address">
        <div id="map_canvas" style="width: 500px; height: 300px"></div>
    <input type="button" onclick="showAddress(address.value)" value="ShowMap"/>

Java Script

function showAddress(address){

    alert("This is address :"+address)

}

That is one example for the same. and that will run.

edited Jan 24, 2014 at 8:47

answered Oct 17, 2013 at 6:29

Kishan Bheemajiyani

3,4396 gold badges39 silver badges74 bronze badges

1 Comment

Lijo Over a year ago

please add the java script also

Ilia G · Accepted Answer · 2011-10-10 18:33:29Z

1

More stable approach:

<form onsubmit="foo($("#formValueId").val());return false;">
<input type="text" id="formValueId"/>
<input type="submit" value="Text on the button"/>
</form>

The return false; is to prevent actual form submit (assuming you want that).

answered Oct 10, 2011 at 18:33

Ilia G

10.2k3 gold badges43 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to pass a form input value into a JavaScript function

6 Answers 6

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related