How Can I Submit Form Data with $.load Without Reloading the Page?

Submitting Data via $.load Without Page Reload

When loading remote content within a form using $.load(), there can be issues with submitting data. This problem occurs when the request is handled by the same page as the form, resulting in a reload instead of proper data submission.

To resolve this, consider using AJAX techniques to post data to an external PHP file. Here's an example to demonstrate:

AJAX Code (FILE #1):

<script>
$(function() {
    $('#Sel').change(function() {
        var opt = $(this).val();
        var someelse = 'Hello';
        var more_stuff = 'Goodbye';
        $.ajax({
            type: "POST",
            url: "receiving_file.php",
            data: 'selected_opt=' + opt + '&something_else=' +someelse+'&more_stuff='+more_stuff,
            success:function(data){
                alert('Data received: ' + data);
            }
        });
    });
});
</script>

PHP File #2 (receiving_file.php):

<?php
    $recd = $_POST['selected_opt'];
    echo 'Option chosen: ' . $recd;
?>

In this setup, when the user changes the dropdown selection, the AJAX request is sent to receiving_file.php, which processes the data and returns a response that can be displayed in the browser without reloading the page. This addresses the issue of data not being posted correctly within the form.

The above is the detailed content of How Can I Submit Form Data with $.load Without Reloading the Page?. For more information, please follow other related articles on the PHP Chinese website!