jQuery user input on button click

Question

I have a an HTML page with an input area and a submit button.

I am using jQuery to alert the user of what their input is. (Really I am trying to store that in a variable but that will be trivial once I get this working).

Can someone help me understand why it is not working, as well as a solution? Thanks.

The HTML form is as follows:

<html>
    <head>
    </head>
    <body>
        <form>
            <input type="text" class="grid_size">
            <button type="submit">Submit Me!</button>
        </form>
        <!-- Add jQuery -->
        <script src="js/jquery.js"></script>
        <script src="js/custom.js"></script>
    </body>
</html>

The custom jQuery I am using is this:

$(document).ready(function() {
    $("form").submit(function() {
    alert( grabUserInput )});
});

function grabUserInput() {
    return $("form").find(".grid-size").val();
}

That text input needs a label. See w3.org/TR/WCAG20-TECHS/H44.html — danielnixon
– danielnixon, Commented Dec 26, 2014 at 0:04

Yiin · Accepted Answer · 2014-12-25 17:45:53Z

2

You named your class grid_size, and search for a class grid-size in javascript code. This code should fix a typo:

$(document).ready(function() {
    $("form").submit(function() {
        alert( grabUserInput() );
    });
});

function grabUserInput() {
    return $("form").find(".grid_size").val();
}

answered Dec 25, 2014 at 17:45

Yiin

6696 silver badges9 bronze badges

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

1 Comment

Steven L. Over a year ago

Thank you! I also forgot the parenthesis at the end of the grabUserFunction().

PeterKA · Accepted Answer · 2014-12-25 17:46:16Z

1

Try this -- grabUserInput is a function, not a variable -- so you have to include () to invoke the function:

$(document).ready(function() {
    $("form").submit(function() {
        alert( grabUserInput() );
    });
});

And your markup has to match your selector:

 <input type="text" class="grid-size">

BONUS:

In case all you want is to alert the value, and you do not want to submit the form use the following:

$(document).ready(function() {
    $("form").submit(function(e) {
        e.preventDefault()
        alert( grabUserInput() );
    });
});

answered Dec 25, 2014 at 17:46

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Comments

GitzJoey · Accepted Answer · 2014-12-25 17:50:59Z

0

why not try to put some id

<input id="input_grid_size" type="text" class="grid_size">
<button id="button_submit" type="submit">Submit Me!</button>

and jq

$(document).ready(function() {
    $("#button_submit").click(function() {
    alert($('#input_grid_size').val()); }); });

it seem your code also forgot the ";" and "()" in the alert

answered Dec 25, 2014 at 17:50

GitzJoey

651 silver badge10 bronze badges

Collectives™ on Stack Overflow

jQuery user input on button click

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related