ajax jquery auto form submission issue
Question
i am using below code to automatic submit form without refresh but the problem is when i use the manual submit button in form field and submit it just works fine but autosubmit refreshed . i want to submit the form and store the data in mysql. with manual submission and auto submissin data are getting stored but page gets refreshed with auto submission that i dont want
<script type="text/javascript">
window.onload = function() {
setTimeout('document.form1.submit()',10000);
}
</script>
<script type="text/javascript" >
$(function() {
$(".button").click(function() {
var searchBox = $("#searchBox").val();
var dataString = 'searchBox='+ searchBox ;
if(searchBox=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "ytitest1.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
here is the live link http://way2enjoy.com/try/k/ytitest1.php
i want autosubmit only but page should not refresh
3 answers
solution1
0 2012-12-21 14:18:08
your .click function should have e argument then add
e.preventDefault();
in the body of your function
$(function() {
$(".button").click(function(e) {
e.preventDefault();
var searchBox = $("#searchBox").val();
var dataString = 'searchBox='+ searchBox ;
if(searchBox=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "ytitest1.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
});
});
solution2
0 2012-12-21 14:21:22
<script type="text/javascript" >
$(function() {
$("form").submit(function() {
var searchBox = $("#searchBox").val();
var dataString = 'searchBox='+ searchBox ;
if(searchBox=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "ytitest1.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
When you autosubmit form onsubmit event is triggered, not click
solution3
0 2012-12-21 14:24:39
This is what you need, and i've included the entire code for your reference.
This example has the form itself bound to the ajax call, and when it's called the form action does nothing and only processes the jquery. Works on the automatic call or the manual call.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<form id="myform" name="myform" action="#NULL" method="POST">
<input type="text" name="myname">
<input type="submit">
</form>
<script>
$(document).ready(function() {
setTimeout(function() {
$('#myform').submit();
}, 1000);
$('#myform').submit(function(e) {
e.preventDefault();
window.alert('Do work here.');
});
});
</script>
</body>
</html>
Here is the docs on the jQuery .submit() handler: http://api.jquery.com/submit/ which includes information on .preventDefault() also.
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.