HTML Forms and jQuery : buttons

Question

I have a form where the data is collected then sent to a PHP page via AJAX. This form has a simple button after the </form> tag, it is a "normal" button on which I listen to a click, then perform my AJAX call.

<button id="normalbutton">Imabutton</button>

Why did I put the button outside ? Because if the button is inside the <form>...</form> tags, even if my form has no action specified, even if the button is not a submit button, the simple fact of clicking on it refreshes the whole page.

How can I deal with buttons inside my form?

So far, the only solution I found is to remove the <form>...</form> tags, because I handle the submission with jQuery, and I don't need to have a form anymore. Is this correct according to HTML syntax ? i.e. can we have input tags, for instance, without a parent form ? It works, but is it grammatically correct ?

insertusernamehere · Accepted Answer · 2015-06-28 09:52:01Z

3

First of all with HTML5 it's possible to have form elements outside the actual form. You can link both using the form-attribute on the button:

The form element that the button is associated with (its form owner). The value of the attribute must be the id attribute of a element in the same document. If this attribute is not specified, the element must be a descendant of a form element. This attribute enables you to place elements anywhere within a document, not just as descendants of their elements.

Besides that, if you don't specify the type-attribute for a button-element its type is submit by default. So clicking this button will always submit the form. You have two options:

Option 1: set type="button"
Option 2: prevent submitting of the form:

$('#normalbutton').click(function(event) {
    event.preventDefault();
});

edited Jun 28, 2015 at 9:52

answered Jun 28, 2015 at 9:42

insertusernamehere

23.7k10 gold badges93 silver badges130 bronze badges

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

1 Comment

kulaeff Over a year ago

Note: it is also possible to use return false; instead of event.preventDefault().

Varun · Accepted Answer · 2015-06-28 09:39:34Z

1

Use <button type="button" id="normalbutton">Imabutton</button> inside a <form> and it should work like a normal button and not refresh.

answered Jun 28, 2015 at 9:39

Varun

1,9562 gold badges12 silver badges17 bronze badges

Comments

user4999841 · Accepted Answer · 2015-06-28 09:46:29Z

From the question, it seems as if you want to perform AJAX via the form you are using.

So, first off, there is no need of using form tag while using AJAX. The form tag along with its attributes method and action sends a non asynchronous request to the script specified by the action attribute using method specified by the method attribute.

But, since HTML is a markup language and to make your markup more semantic, you may use the form tag with an id attribute.

Next thing, regarding buttons; you may use either the input tag with attribute type set to button or button tag with attribute type set to button as by default buttons in form tag are considered to be of type submit

Reference:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

brroshan · Accepted Answer · 2015-06-28 09:38:23Z

0

When you do not specify type of the button element it's a submit type by default. Use <button type="button" id="normalbutton">Imabutton</button>

answered Jun 28, 2015 at 9:38

brroshan

1,65017 silver badges19 bronze badges

Comments

Geseft · Accepted Answer · 2015-06-28 09:39:27Z

0

Put your button back in the form, and in the function which handles the click insert the following(at the start):

event.preventDefault();

Where event is the argument of the function like this:

$( "#normalbutton" ).click(function( event ) {
event.preventDefault();
.....
});

More info at: http://api.jquery.com/event.preventdefault/

answered Jun 28, 2015 at 9:39

Geseft

3171 silver badge7 bronze badges

Comments

Parth Patel · Accepted Answer · 2015-06-28 09:39:33Z

0

Please check code Put type="button" in

<html>
<head>
<title>Demo</title>
</head>
<body>
<form action="#">
    <input type="text" />
    <button type="button" id="normalbutton">Imabutton</button>
</form>
</body>
</html>

answered Jun 28, 2015 at 9:39

Parth Patel

8441 gold badge9 silver badges15 bronze badges

Comments

Pralhad Narsinh Sonar · Accepted Answer · 2015-06-28 09:43:32Z

0

You don't have to remove the <form> tags. Either you can use the button type for the <button> tag or just use <a> - hyper-link. You can call your jQuery even through the <a> - hyper-link.

If you could share the whole code it would help community members to answer it more quickly.

answered Jun 28, 2015 at 9:43

Pralhad Narsinh Sonar

1,4541 gold badge14 silver badges23 bronze badges

Comments

Abhinav · Accepted Answer · 2015-06-28 09:49:22Z

0

You can even use button type submit. All you have to do when a user clicks on the button is use preventDefault();.

$(function(){
  $('#buttonId').click(function(){
     event.preventDefault();
     //Do your AJAX Stuff
  });
});

Also make sure that action attribute is empty in your form. It should work.

Even if the problem persists make sure that ID attribute is not used anywhere else.

Check out Jquery Docs - preventDefault()

edited Jun 28, 2015 at 9:49

answered Jun 28, 2015 at 9:38

Abhinav

8,17812 gold badges51 silver badges92 bronze badges

4 Comments

kulaeff Over a year ago

I think it will be more elegant if you place event.preventDefault() after //Do AJAX Stuff

Abhinav Over a year ago

No, it should be the first line cos it will help in preventing the redirection

kulaeff Over a year ago

It will prevent default handler anyway.

Abhinav Over a year ago

but its best practice to include it in the first line

Sai Deepak · Accepted Answer · 2015-06-28 09:50:32Z

0

You can use return false on submit or onclick function

Using Jquery

<script>
$(function(){
    $("#normalbutton").click(function(){
       return false;
    });
});
</script>

answered Jun 28, 2015 at 9:50

Sai Deepak

6784 silver badges16 bronze badges

Collectives™ on Stack Overflow

HTML Forms and jQuery : buttons

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related