I'm facing a weird problem where I have to reach a form page via two methods: create and edit. When posting from the create URL, the same form works perfectly, but whenever I post via edit or re-create URL, the page refreshes itself and tries to post on the URL itself.

Urls are: http://localhost:8000/admin/orders/create http://localhost:8000/admin/orders/create/1234

and the code is:

$('#quote_form').validate({
    rules: {
        item: {
            required: true,
        },
        quantity: {
            required: true,
        }
    },
    focusInvalid: true,
    invalidHandler: function(form, validator) {
        $('#' + validator.errorList[0].element.id).focus();
    },
    submitHandler: function() {
        $('#newQuote').empty();
        let dataArray = $('#quote_form').serializeArray();
        let item = $('#item').val();
        let customerValue = '';
        if ($('#customer').val().length !== 0 && $('#customer').val() !== undefined) {
            customerValue = $('#customer').val();
        } else if ($('#customer_id').val().length !== 0 && $('#customer_id').val() !== undefined) {
            customerValue = $('#customer_id').val();
        }
        dataArray.push({
            name: 'customer',
            value: customerValue
        });
        $.ajax({
            url: ADMIN_AJAX_URL + "orders/create-order-session",
            method: 'post',
            data: dataArray,
            success: function(response) {
                let result = JSON.parse(response);
                if (result.html != '') {
                    clearForm($("#quote_form"));
                    $('#newQuote').append(result.html);
                } else {
                    $('.error_text').html(result.message);
                    $('.error_row').show();
                }
            }
        });
    }
});

I've tried to post via the submit button and form validation etc, but not bored fruit.

I'm facing a weird problem where I have to reach a form page via two methods: create and edit. When posting from the create URL, the same form works perfectly, but whenever I post via edit or re-create URL, the page refreshes itself and tries to post on the URL itself.

Urls are: http://localhost:8000/admin/orders/create http://localhost:8000/admin/orders/create/1234

and the code is:

$('#quote_form').validate({
    rules: {
        item: {
            required: true,
        },
        quantity: {
            required: true,
        }
    },
    focusInvalid: true,
    invalidHandler: function(form, validator) {
        $('#' + validator.errorList[0].element.id).focus();
    },
    submitHandler: function() {
        $('#newQuote').empty();
        let dataArray = $('#quote_form').serializeArray();
        let item = $('#item').val();
        let customerValue = '';
        if ($('#customer').val().length !== 0 && $('#customer').val() !== undefined) {
            customerValue = $('#customer').val();
        } else if ($('#customer_id').val().length !== 0 && $('#customer_id').val() !== undefined) {
            customerValue = $('#customer_id').val();
        }
        dataArray.push({
            name: 'customer',
            value: customerValue
        });
        $.ajax({
            url: ADMIN_AJAX_URL + "orders/create-order-session",
            method: 'post',
            data: dataArray,
            success: function(response) {
                let result = JSON.parse(response);
                if (result.html != '') {
                    clearForm($("#quote_form"));
                    $('#newQuote').append(result.html);
                } else {
                    $('.error_text').html(result.message);
                    $('.error_row').show();
                }
            }
        });
    }
});

I've tried to post via the submit button and form validation etc, but not bored fruit.

• php
• jquery
• ajax
• laravel
• forms

Share Improve this question Follow asked Nov 16, 2024 at 2:14 Abid RizviAbid Rizvi 1311 silver badge33 bronze badges 3

• ... but not bored fruit ... what does this mean? – Paul T. Commented Nov 16, 2024 at 4:36
• @PaulT. I'd assume the OP meant "but it did not bear fruit". The idea of a fruit being bored and needing entertainment did make me smile though – ADyson Commented Nov 16, 2024 at 8:35
• I think its "Bore Fruit" but people not give you margin of a single letter. Anyways I'm glad that you smiled on something. By the way I'm a web developer not an article writer. – Abid Rizvi Commented Nov 18, 2024 at 14:17

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

To prevent the default form submission behavior, pass event.preventDefault() in your submitHandler. The submitHandler function receives a form parameter, so you should pass that into $(form).serializeArray() instead of using $('#quote_form').serializeArray().

$('#quote_form').validate({
    rules: {
        item: {
            required: true,
        },
        quantity: {
            required: true,
        }
    },
    focusInvalid: true,
    invalidHandler: function(form, validator) {
        $('#' + validator.errorList[0].element.id).focus();
    },
    submitHandler: function(form, event) {
        event.preventDefault();
        $('#newQuote').empty();
        let dataArray = $(form).serializeArray();
        let item = $('#item').val();
        let customerValue = '';

        if ($('#customer').val().length !== 0 && $('#customer').val() !== undefined) {
            customerValue = $('#customer').val();
        } else if ($('#customer_id').val().length !== 0 && $('#customer_id').val() !== undefined) {
            customerValue = $('#customer_id').val();
        }

        dataArray.push({
            name: 'customer',
            value: customerValue
        });

        $.ajax({
            url: ADMIN_AJAX_URL + "orders/create-order-session",
            method: 'post',
            data: dataArray,
            success: function(response) {
                let result = JSON.parse(response);
                if (result.html != '') {
                    clearForm($("#quote_form"));
                    $('#newQuote').append(result.html);
                } else {
                    $('.error_text').html(result.message);
                    $('.error_row').show();
                }
            }
        });
    }
});