jQuery: $.ajax() redirects to its URL form action parameter instead of performing AJAX request to the form action

Question

I will show my code first before explaining my problem.

Here is my form:

<form id="update-sale-form" method="POST" action="actions/updatesale.php">
<table id="update-sale-table" class="table borderless">
    <tr>
        <td><label>Item Code</label></td>
        <td id="item-code"></td>
    </tr>
    <tr>
        <td><label>On Sale?</label></td>
        <td>
            <input type="hidden" id="itemcode" name="item-code" value="" />
            <select id="is-sale" class="form-control" name="is-on-sale" onchange="checkSale(this.value)">
                <option value="0">No</option>
                <option value="1">Yes</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><label>Percentage</label></td>
        <td>
            <div class="input-group">
                <input type="text" id="sale-percentage" class="form-control input-sm" name="sale-percentage" onkeypress="return isNumberKey(event)" maxlength="2"/>
                <span class="input-group-addon">%</span>
            </div>
        </td>
    </tr>
</table>
<div class="response"></div>
</form>
<script type="text/javascript">
function disableSalePercentage(){
    $('#sale-percentage').prop('disabled', true);
    $('#sale-percentage').val('0');
}

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

function checkSale(value){
    if(value=='0'){
        disableSalePercentage();
    } else {
        $('#sale-percentage').prop('disabled', false);
        $('#sale-percentage').val('');
    }
}

Here is my PHP file that handles the request.

<?php
session_start();
require '../config/consettings.php';

$itemCode = $_POST['item-code'];
$isSale = $_POST['is-on-sale'];
$salePercent;

if($isSale==1){
    if(empty($_POST['sale-percentage']) OR ($_POST['sale-percentage']==00)){
        echo "Please provide valid percentage value.";
        return;
    } else $salePercent = $_POST['sale-percentage'];
} else $salePercent = 0;

$stringQuery = "UPDATE vc_products SET issale='$isSale', salepercent='$salePercent' WHERE code='$itemCode'";
$updateQuery = mysqli_query($connection, $stringQuery);
if($updateQuery) echo "good-query";
else echo mysqli_error($connection);
?>

Here is the JavaScript that handles the AJAX request:

$("#products-table").on('click', 'span.sale-toggle', function(){
    var itemCode = $(this).attr('itemcode');
    var isSale = $(this).attr('issale');
    var salePercent = $(this).attr('percent');

    BootstrapDialog.show({
        title: '<span class="glyphicon glyphicon-edit"></span> Editing Sale Information.',
        message: $('<div></div>').load('forms/updatesale.php'),
        cssClass: 'edit-sale-modal',
        onshow:function(){
            //Do nothing.
        },
        onshown:function(){
            $('#update-sale-table td#item-code').html(itemCode);
            $('#update-sale-table input#itemcode').val(itemCode);
            if(isSale == 'true'){
                $('#update-sale-table select#is-sale').val('1');
                $('#update-sale-table input#sale-percentage').val(salePercent);
            } else {
                $('#update-sale-table select#is-sale').val('0');
                disableSalePercentage();
            }
        },
        buttons:[{
            label: '<span class="glyphicon glyphicon-remove"></span>',
            cssClass: 'btn-danger',
            action: function(dialog){
                dialog.close();
            }
        }, {
            label: '<span class="glyphicon glyphicon-ok"></span>',
            cssClass: 'btn-primary',
            hotkey: 13,
            action: function(dialog){
                var actionPath = $('form#update-sale-form').attr('action');
                var formData = $('form#update-sale-form').serialize();

                $.ajax({
                    url: actionPath,
                    type: 'POST',
                    data: formData,
                    beforeSend: function(){
                        //Do nothing.
                    },
                    success:function(actionResponse){
                        var response = actionResponse.trim();

                        if(response=='good-query'){
                            dialog.close();
                            BootstrapDialog.show({
                                title: '<span class="glyphicon glyphicon-ok"></span> Sale Record Updated.',
                                message: 'Sale record successfully changed.',
                                cssClass: 'sale-change-successfull',
                                buttons: [{
                                    label: '<span class="glyphicon glyphicon-ok"></span>',
                                    cssClass: 'btn-success',
                                    hotkey: 13,
                                    action: function(dialog){
                                        dialog.close();
                                    }
                                }]
                            });
                        } else {
                            var message = "<div class='alert alert-danger'>"+response+"</div>";
                            $('.response').html(message);
                        }
                    }
                });
            }
        }]
    });
});

I really need a hand here. My problem is that, my jQuery AJAX function is "redirecting" to the "form actions" url instead of performing the AJAX and returning the result. In my bootstrap dialog box, the form was loaded and it has a button that listens to an event where enter key is pressed and it works fine but if the percentage field is focused and the enter key is hit the page redirect to the form action and not performing the ajax call. No error displayed so i cannot troubleshoot the error but if the check button on the modal box is clicked, everything works fine. it only redirect when i am inputting the percentage value and hit enter which is most end users usually do. I really need some help here. Please spare me a little bit of your time and check what is wrong with my $.ajax() call, I really think there is something wrong with it but I just cant figure it out. Please, I need some help.

Answer 1

Hitting enter in an input field fires the submit event of the form. So what you need to do, is to attach a handler to that event, rather than the button's click event.

That will catch both when the user clicks a submit button or hits enter on any input fields in the form.

$(function() {
    $("#update-sale-form").on("submit", function(event) {
        event.preventDefault();
        var form = $(event.target);

        var actionPath = form.attr("action");
        var formData = form.serialize();

        // --------------------------
        // Insert your ajax code here
        // --------------------------

        return false;
    });
});

You also need to change the action of your OK button to perform a submit on the form

action: function(dialog) {
    $("#update-sale-form").submit();   
}

---

Bonus info

When finding html elements by their ID, there's nothing gained by using long selectors that include ancestor details.

$("#itemcode")

is not only easier to read, but also faster than

$("#update-sale-table input#itemcode")

Whenever it needs to find an element by it's ID, jquery uses the browser's native document.getElementById('...') function, which is extremely fast. However, when including ancestor details in the selector, jquery has to verify that the found element does infact have the correct ancestor elements. A step it can skip entirely, if you only use the ID in the selector.