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 ? ie can we have input tags, for instance, without a parent form ? It works, but is it grammatically correct ?
9 answers
solution1
3 2015-06-28 09:42:18
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();
});
solution2
1 2015-06-28 09:39:34
在<form>使用<button type="button" id="normalbutton">Imabutton</button> <form> ，它应该像普通按钮一样工作，并且不会刷新。
solution3
1
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
solution4
0 2015-06-28 09:38:23
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>
solution5
0 2015-06-28 09:38:39
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()
solution6
0 2015-06-28 09:39:27
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/
solution7
0 2015-06-28 09:39:33
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>
solution8
0 2015-06-28 09:43:32
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.
solution9
0 2015-06-28 09:50:32
You can use return false on submit or onclick function
Using Jquery
<script>
$(function(){
$("#normalbutton").click(function(){
return false;
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.