CODEWITHSUNDEEP
jqueryhtmlformsbutton
Fafanellu
Fafanellu

Reputation: 433

HTML Forms and jQuery : buttons

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 ?

Upvotes: 0

Views: 55

Answers (9)

insertusernamehere
insertusernamehere

Reputation: 23580

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();
});

Upvotes: 3

Sai Deepak
Sai Deepak

Reputation: 688

You can use return false on submit or onclick function

Using Jquery

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

Upvotes: 0

Abhinav
Abhinav

Reputation: 8168

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()

Upvotes: 0

user4999841
user4999841

Reputation:

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

Upvotes: 1

Pralhad Narsinh Sonar
Pralhad Narsinh Sonar

Reputation: 1454

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.

Upvotes: 0

Varun
Varun

Reputation: 1946

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

Upvotes: 1

Parth Patel
Parth Patel

Reputation: 824

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>

Upvotes: 0

Geseft
Geseft

Reputation: 317

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/

Upvotes: 0

brroshan
brroshan

Reputation: 1650

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>

Upvotes: 0

Related Questions