I am try to send ajax form using jQuery in my html form with same names and deffirent values, but what happen is when I submit the form my ajax won't work and it will submit to #
. someone can explain me why?
my HTML form:
<script src="lib/jquery/jquery.1.9.0.min.js"> </script>
<form name="Form" action="#" method="POST">
<input name="idnum" type="hidden" value="somevaluehere1">
<button type="submit">btn 1</button>
</form>
<form name="Form" action="#" method="POST">
<input name="idnum" type="hidden" value="somevaluehere2">
<button type="submit">btn 2</button>
</form>
this is my ajax:
$(document).ready(function() {
$("form[name=form]").submit(function(e){
e.preventDefault()
$.ajax ({
type: "POST",
url: "ajax/post.php",
data: $(this).serialize(),
success: function(data) {
alert(data)
}
});
});
});
sorry to my English guys
Form
is not the same as form
. Your selector doesn't match the forms because attribute selector values are case sensitive.
Change $("form[name=form]")
to $("form[name=Form]")
.
You can prove this by comparing alert($("form[name=form]").length);
to alert($("form[name=Form]").length);
Note, however, that the name attribute for form elements should hold a unique value so you should switch to using the class attribute instead (then you can use the class selector (form.Form
).