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

Please indent your code (and also a correct punctation could be desired) — freedev, Dec 21 '12 at 14:06
So your saying.. you want to stop the autosubmit part when the form is submitted manually? — phpisuber01, Dec 21 '12 at 14:07
@phpisuber01 want autosubmit only but page should not refreh — raviloves, Dec 21 '12 at 14:09
It's because you bound the AJAX to your button and not to the form submission itself. Rebind it. This question has an example: http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form — phpisuber01, Dec 21 '12 at 14:11
@codeHeart manual submit is working fine without page refresh and data is also getting stored .auto submit code is window.onload = function() { setTimeout('document.form1.submit()',10000); } — raviloves, Dec 21 '12 at 14:14
@phpisuber01 manual submit is working fine without page refresh and data is also getting stored .auto submit code is window.onload = function() { setTimeout('document.form1.submit()',10000); } — raviloves, Dec 21 '12 at 14:14

mamdouh alramadan · Answer 1 · 2012-12-21T14:31:21.157

0

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

edited Dec 21 '12 at 14:31

answered Dec 21 '12 at 14:18

mamdouh alramadan

8,349
6
36
53

can u please where exactly in my javascript – raviloves Dec 21 '12 at 14:22
mamdouh alramadan, return false already does e.preventDefault() – Pavel K Dec 21 '12 at 14:25
@PavelK , sometimes you should be explicit to the browser – mamdouh alramadan Dec 21 '12 at 14:33
@raviloves this should work for you unless you have specified an action for your form. the form should not have an action neither a method. – mamdouh alramadan Dec 21 '12 at 14:39

score 0 · Answer 2 · answered Dec 21 '12 at 14:21

0

    <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

answered Dec 21 '12 at 14:21

Pavel K

496
3
15

your code is working just fine but the data in mysql is empty as the form is submitted just after the page is loaded but the users has not searched anything so can i delay form submission by 10 seconds??/ – raviloves Dec 21 '12 at 14:31
raviloves, this code doesn't perform any operations, it is just binding event. But you can validate fields within this code. **if(searchBox=="")return false;** Put this right after declaring variables – Pavel K Dec 21 '12 at 14:41
not working even with return false .it insert into mysl but blank – raviloves Dec 21 '12 at 15:16
So searchBox is not empty and may contain whitespaces, if you are sure empty data inserting goes from here. Otherwise you had mistaken in **ytitest1.php** when wrote processing function for $_POST['dataString'] – Pavel K Dec 21 '12 at 16:12

score 0 · Answer 3 · answered Dec 21 '12 at 14:24

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.

ajax jquery auto form submission issue

3 Answers3