HTML form calling javascript function

Question

This will be a silly question, just trying to figure my way around Javascript functions interacting with HTML forms and can't get it to work.

Extremely simple, put it in a fiddle

$('#test').submit(function(){
    var battery = $('#battery').value();
    $('#output').text(battery);
});

<form id="test" action="">
    <fieldset>
        <label for="battery">Cell Count</label><br />
        <input type="number" size="3" name="battery" id="battery" /><br />
        <input type="submit" name="submit" id="submit" onclick="submit()" />
    </fieldset>
</form>

<div id="output">

</div>

Always returns an error and I can't figure out why. Have played around with and other things, can't get it to work always error.

Since you're using jQuery you probably want to handle the click on your JS code and not inline in your HTML... — elclanrs
– elclanrs, Commented Dec 26, 2012 at 22:30
@elclanrs - Not only that, but a submit button will submit the form without any javascript all by itself. — adeneo
– adeneo, Commented Dec 26, 2012 at 22:34
Right. I've been searching Stack Overflow all morning and this is why I changed val() to value(), however it still returns error. I'm using the FF error console, but JSFiddle is just much easier for trial and error on something like this. Once I get the function to at least start I'll start in the browser. Thanks all. — HandsomeRob
– HandsomeRob, Commented Dec 26, 2012 at 23:00
Ok, well I've hosted it at bungle.ca/test.htm, gotten as far as an error on line 14 syntax error: illegal character. — HandsomeRob
– HandsomeRob, Commented Dec 26, 2012 at 23:53

Pointy · Accepted Answer · 2012-12-26 22:29:37Z

4

The error is probably that .value() isn't a function. You want .val().

answered Dec 26, 2012 at 22:29

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

Comments

BenM · Accepted Answer · 2012-12-26 22:29:51Z

1

jQuery's function for returning the value of an input element is val(), not value(). Your code should be:

$('#test').submit(function(){
    var battery = $('#battery').val();
    $('#output').text(battery);
});

<form id="test" action="">
    <fieldset>
        <label for="battery">Cell Count</label><br />
        <input type="number" size="3" name="battery" id="battery" /><br />
        <input type="submit" name="submit" id="submit" onclick="submit()" />
    </fieldset>
</form>

<div id="output">

</div>

answered Dec 26, 2012 at 22:29

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Comments

Amar · Accepted Answer · 2012-12-26 22:33:54Z

1

If you use proper developer tools (for example Firebug in Firefox) then you could easily figure out the problem here as in the console it would have shown you something like :

Uncaught TypeError: Object [object Object] has no method 'value'

Which means that there is no value method and val() is what should be used instead.

answered Dec 26, 2012 at 22:33

Amar

12k5 gold badges52 silver badges73 bronze badges

Comments

PhearOfRayne · Accepted Answer · 2012-12-26 22:29:44Z

0

To retrieve values from inputs using jQuery you need to use .val()

Change:

var battery = $('#battery').value();

to:

var battery = $('#battery').val();

answered Dec 26, 2012 at 22:29

PhearOfRayne

5,0504 gold badges33 silver badges44 bronze badges

Comments

user1888370 · Accepted Answer · 2012-12-26 22:36:20Z

0

I'm not sure if this is correct, but I think your javascript code looks like php, and there's nothing in the action="" field in the quotes. Also, I think that value should be val.

answered Dec 26, 2012 at 22:36

user1888370

Comments

antonio · Accepted Answer · 2012-12-27 19:06:31Z

The correct function is val() no value() in jquery.

By using the method .submit keep in the "return false" to not run the "action" of the "form" that you have not considered.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).on('ready', function() {
        $('#test').submit(function(){
            var battery = $('#battery').val();
            $('#output').text(battery);
            return false;
        });        
    })

</script>

If you are using jQuery, you do not need the onclick="submit()" argument in the input object

<form id="test" action="#">
    <fieldset>
        <label for="battery">Cell Count</label><br />
        <input type="number" size="3" name="battery" id="battery" /><br />
        <input type="submit" name="submit" id="submit"/>
    </fieldset>
</form>
<div id="output"></div>

regards

Collectives™ on Stack Overflow

HTML form calling javascript function

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related