I have form. There are two inputs:name and birthday. My code is:
<div id="block">
<form role="form" id="addForm" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="birthday">Birthday</label>
<input type="text" class="form-control" id="birthday" required placeholder="Enter birthday">
</div>
<button name="submit" id="submit" value="" type="submit" class="btn btn-large btn-primary btn-block">Add</button>
</form>
</div>
And I validate my form using jquery:
<script>
$().ready(function() {
$("#addForm").validate({
rules:{
name:{
required: true,
minlength: 2,
maxlength: 10,
},
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
messages:{
name:{
required: "This field is required",
minlength: "Name must be at least 2 characters",
maxlength: "Maximum number of characters - 10",
},
},
submitHandler: function(form) {
$(form).ajaxSubmit({
url:'addEmpl.php',
type:'GET',
dataType: 'html',
success: function(data) {
$("#block").html(data);
}
});
}
});
});
</script>
When all inputs are right and I click on button Add my Ajax doesn't work.
Maybe are some wrongs with submitHandler?
I have form. There are two inputs:name and birthday. My code is:
<div id="block">
<form role="form" id="addForm" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="birthday">Birthday</label>
<input type="text" class="form-control" id="birthday" required placeholder="Enter birthday">
</div>
<button name="submit" id="submit" value="" type="submit" class="btn btn-large btn-primary btn-block">Add</button>
</form>
</div>
And I validate my form using jquery:
<script>
$().ready(function() {
$("#addForm").validate({
rules:{
name:{
required: true,
minlength: 2,
maxlength: 10,
},
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
messages:{
name:{
required: "This field is required",
minlength: "Name must be at least 2 characters",
maxlength: "Maximum number of characters - 10",
},
},
submitHandler: function(form) {
$(form).ajaxSubmit({
url:'addEmpl.php',
type:'GET',
dataType: 'html',
success: function(data) {
$("#block").html(data);
}
});
}
});
});
</script>
When all inputs are right and I click on button Add my Ajax doesn't work.
Maybe are some wrongs with submitHandler?
Share Improve this question edited Dec 28, 2016 at 11:35 Bhumi Shah 9,47410 gold badges68 silver badges110 bronze badges asked Dec 28, 2016 at 11:33 Nastya GorobetsNastya Gorobets 1972 gold badges10 silver badges23 bronze badges 4-
3
Have you included the
ajaxSubmitlibrary in your page? It's not a standard jQuery method. Have you checked the console for errors? – Rory McCrossan Commented Dec 28, 2016 at 11:35 - 1 I have error: TypeError: $(...).ajaxSubmit is not a function – Nastya Gorobets Commented Dec 28, 2016 at 11:39
-
1
In which case you need to include the
ajaxSubmit()library. Alternatively you could just use the standard$.ajax()method, as including an entire library for a single request is overkill. If you google there's lots of guides and tutorials on how to send a form through AJAX with jQuery – Rory McCrossan Commented Dec 28, 2016 at 11:43 - Thanks! It solved my problem! – Nastya Gorobets Commented Dec 28, 2016 at 11:43
3 Answers
Reset to default 4Try using the below code instead of ajaxSubmit:
$.ajax({
type: "GET",
url: "addEmpl.php",
data: $(this).serialize(),
dataType: "html"
success: function(data) {
$("#block").html(data);
}
});
Hope it will help you :)
You can write like this:
$().ready(function() {
$("#addForm").validate({
rules:{
name:{
required: true,
minlength: 2,
maxlength: 10,
},
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
messages:{
name:{
required: "This field is required",
minlength: "Name must be at least 2 characters",
maxlength: "Maximum number of characters - 10",
},
},
submitHandler: function(form) {
$.ajax({
url:'addEmpl.php',
type:'GET',
dataType: 'html',
success: function(data) {
$("#block").html(data);
}
});
return false; // required to block normal submit since you used ajax
}
});
});
Here is the fiddle http://jsfiddle/bhumi/bvdu94c4/
You can try this
<script>
$('#submit').click(function (){
//your code here
});
</script>