How to prevent jQuery ajax submit form on page

Question

I have two ajax calls on a page. There are text inputs for searching or for returning a result.

The page has several non ajax inputs and the ajax text input is within this . Whenever I hit enter -- to return the ajax call the form submits and refreshes the page prematurely. How do I prevent the ajax from submitting the form when enter is pressed on these inputs? It should just get the results.

However, I cannot do the jquery key press because it needs to run the ajax even if the user tabs to another field. Basically I need this to not submit the full form on the page before the user can even get the ajax results. I read return false would fix this but it has not.

Here is the javascript:

        <script type="text/javascript">
    $(function() {
        $("[id^='product-search']").change(function() {
            var myClass = $(this).attr("class");
            // getting the value that user typed
            var searchString    = $("#product-search" + myClass).val();
            // forming the queryString
            var data            = 'productSearch='+ searchString + '&formID=' + myClass;
            // if searchString is not empty
            if(searchString) {
                // ajax call
                $.ajax({
                    type: "POST",
                    url: "<?php echo $path ?>ajax/product_search.php",
                    data: data,
                    beforeSend: function(html) { // this happens before actual call
                        $("#results" + myClass).html(''); 
                        $("#searchresults" + myClass).show();
                        $(".word").html(searchString);
                   },
                   success: function(html){ // this happens after we get results
                        $("#results" + myClass).show();
                        $("#results" + myClass).append(html);
                  }
                });
            }
            return false;
            });

            $("[id^='inventory-ESN-']").change(function() {
                var arr = [<?php 
                $j = 1;
                foreach($checkESNArray as $value){
                    echo "'$value'"; 
                    if(count($checkESNArray) != $j)
                        echo ", ";
                    $j++;
                }
                ?>];
                var carrier = $(this).attr("class");
                var idVersion = $(this).attr("id");
                if($.inArray(carrier,arr) > -1) {
                // getting the value that user typed
                    var checkESN    = $("#inventory-ESN-" + idVersion).val();
                    // forming the queryString
                    var data            = 'checkESN='+ checkESN + '&carrier=' + carrier;
                    // if checkESN is not empty
                    if(checkESN) {
                        // ajax call
                        $.ajax({
                            type: "POST",
                            url: "<?php echo $path ?>ajax/checkESN.php",
                            data: data,
                            beforeSend: function(html) { // this happens before actual call
                                $("#esnResults" + idVersion).html(''); 
                            },
                            success: function(html){ // this happens after we get results
                                $("#esnResults" + idVersion).show();
                                $("#esnResults" + idVersion).append(html);
                            }
                        });    
                    }
                }
                return false;
            });
    });
    </script>

you can bind to onkeypress and check for button 13 [enter] and return false (prevent submission) on each input field. — Brad Christie
– Brad Christie, Commented Sep 14, 2012 at 0:30
$("[id^='product-search']").on('keyup', function(e) {if (e.which==13) e.preventDefault();}); — adeneo
– adeneo, Commented Sep 14, 2012 at 0:57

haynar · Accepted Answer · 2012-09-14 01:20:01Z

2

I would suggest you to bind that ajax call to the submit event of the form and return false at the end, this will prevent triggering default submit function by the browser and only your ajax call will be executed.

UPDATE

I don't know the structure of your HTML, so I will add just a dummy example to make it clear. Let's say we have some form (I guess you have such a form, which submission you tries to prevent)

HTML:

<form id="myForm">
    <input id="searchQuery" name="search" />
</form>

JavaScript:

$("#myForm").submit({

                     // this will preform necessary ajax call and other stuff
    productSearch(); // I would suggest also to remove that functionality from
                     // change event listener and make a separate function to avoid duplicating code

    return false;
});

this code will run every time when the form is trying to be submitted (especially when user hits Enter key in the input), will perform necessary ajax call and will return false preventing in that way the for submission.

edited Sep 14, 2012 at 1:20

answered Sep 14, 2012 at 0:57

haynar

6,0517 gold badges37 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

vizon Over a year ago

However, the form needs to submit when the button is clicked or someone presses enter on an input that isn't Ajax. This just needs to stop submission for the Ajax calls.

haynar Over a year ago

sorry, if understood the main problem it not correctly. do you want to prevent AJAX calls?

vizon Over a year ago

I wanted the ajax calls to work without submitting the full page. On submit the php is run. If you do the ajax search it prematurely posts the information to the php.

haynar Over a year ago

you want to make only ajax calls when user presses Enter key on text field and prevent the form being submitted, isn't it? But the form should be submittable as well?

Collectives™ on Stack Overflow

How to prevent jQuery ajax submit form on page

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related