JQuery not working on submit button

Question

I am trying to learn some JQuery. I am using an external js to write my code in. It works fine when I call the 2 paragraph functions, but when I call the submit button it just load the page again. My code looks like this:

<html>
<body>

    <p id="paragraf">This is an internal paragraf</p>


    Another Example:
    <p id="paragraftest">This is the external js script</p>

    <form>
        <input type="text" name="Submit_test">
        <button id="buttontest">Submit</button> 
    </form>
    <script type="text/javascript" src="jqueryScript/jquery.js"></script>
    <script type="text/javascript" src="jqueryScript/hide.js"></script>
</body>
</html>

Javascript:

$('#paragraf').click(function() {
    $('#paragraf').hide();
});

$('#paragraftest').click(function() {
    $('#paragraftest').hide();
});

$('buttontest').submit(function() {
    alert("test");
});

/* I have tried with "" and '' in buttontest and test, but still the same */ I have also tried with this, but it is still the same.

<form>
        <input type="text" name="buttontest">
        <input type="submit" value="">
    </form>

Can anybody see why nothing happens? Best Regards Mads

Arun P Johny · Accepted Answer · 2014-02-21 11:00:11Z

5

Missing id selector - buttontest is the id of the button so you need to use id-selector to select it(prefix with #)

$('#buttontest').submit(function() {
    alert("test");
});

answered Feb 21, 2014 at 11:00

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

5 Comments

dfsq Over a year ago

Funny, but this answer is totally incorrect. #buttontest is a button and not a form, it doesn't have a submit event at all.

McDuck4 Over a year ago

Perfect... thanks a lot everybody. This solved the answer :-)

dfsq Over a year ago

@user1883095 In your HTML buttontest is a button. If you move this id to a form this will be correct.

McDuck4 Over a year ago

The good thing is that if you give a form an id, then you can have a lot of forms on the page and functions to those forms in your js, or?

Arun P Johny Over a year ago

@user1883095 there is nothing wrong with giving the form an id.... only thing to keep in mind is ID of an element must be unique in a page

Ashis · Accepted Answer · 2014-02-21 11:01:57Z

1

Correct this syntax:

$('input[name=buttontest]').submit(function() {
    alert("test");
});

Using a unique ID for the button:

$('input#button_id').submit(function() {
    alert("test");
});

answered Feb 21, 2014 at 11:01

Ashis

1037 bronze badges

Comments

Christos · Accepted Answer · 2014-02-21 11:00:55Z

1

You should select the button with the following way:

$('#buttontest')

You hadn't used the #, which is required when we are selecting elements form the DOM using their ids. For sure it was a writing error, since you use this correctly on your other selections.

answered Feb 21, 2014 at 11:00

Christos

54.1k9 gold badges82 silver badges114 bronze badges

Comments

dfsq · Accepted Answer · 2014-02-21 11:02:28Z

0

Submit event is a form event, and you are trying to bind it to a button.

$('form').submit(function() {
    alert("test");
});

In generally if you want to submit a form you should use dedicated onsubmit form event, not click event on any button.

answered Feb 21, 2014 at 11:02

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

McDuck4 · Accepted Answer · 2014-02-21 11:09:58Z

0

It works with this code now:

<form id="form">
        <input type="text" name="buttontest">
        <input type="submit" value="submit"> 
    </form>
    <form id="form_1">
        <input type="text" name="buttontest">
        <input type="submit" value="submit"> 
    </form>

Javascript:

$('#form').submit(function() {
    alert("test");
});

$('#form_1').submit(function() {
    alert("test");
});

answered Feb 21, 2014 at 11:09

McDuck4

6643 gold badges14 silver badges35 bronze badges

Collectives™ on Stack Overflow

JQuery not working on submit button

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related