solar411 solar411 - 7 days ago 5
Ajax Question

Submit Form with Reloading

Currently I have a form with multi-select checkboxes. When submitted it posts to a PHP script with an array similar to:
&id%5B%5D=3&id%5B%5D=7

HTML:

<form id="frm-example" action="vmwaressl_admin_process.php" method="POST">


The php script loops through the array and does a SQL update for each row that is selected. The script then uses the header() function to redirect back to the page.

PHP:

<?php
foreach ($_POST['id'] as $key => $idValue) {
$host_id_sql = "query";
$stmt = sqlsrv_query($conn, $host_id_sql);
if ($stmt === false) {
die(print_r(sqlsrv_errors(), true));
}
while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
$host_id = $row['HOST_ID'];

}
$host_update_sql = "update query";
$stmt = sqlsrv_query($conn, $host_update_sql);
if ($stmt === false) {
die(print_r(sqlsrv_errors(), true));
}
$host_id_sql = null;
$stmt = null;
}

header('Location: home_page.php');
?>


My question is about the page refresh. Is there any way to submit the form but not refresh the page? I'm thinking ajax but I'm not sure how to accomplish it.

Thanks.

Answer

Change your form tag to just :-

<form id="frm-example">

and add this in a script tag :-

$('#frm-example').on('submit', function (e) {
        if (!e.isDefaultPrevented()) {
            var url = "vmwaressl_admin_process.php";

            $.ajax({
                type: "POST",
                url: url,
                data: $(this).serialize(),
                success: function (data)
                {
                    //Whatever You want to do on success
                }
            });
            return false;
        }
    })