Using AJAX to refresh a div upon submitting a form, instead of reloading the entire page

Question

Using AJAX to refresh a div upon submitting a form, instead of reloading the entire page

My SQL database generates a table that remains hidden until the search button is clicked to display the results.

I want to use ajax to update the table without refreshing the entire page. Currently, when the page refreshes, the table reverts back to being hidden, only briefly showing the content.

$(function () {
    $('#searchForm').on('submit', function () {
        $.ajax({
            type: 'GET',
            url: 'Index',
            data: $('#searchForm').serialize(),
            success: function () {
                $("#resultsTable").removeClass("d-none");
            }
        });
    });
});

Form:

<form asp-page="./Index" id="searchForm" method="get">
    <div class="form-actions no-color">
        <p>
            Find by name:
            <input type="text" name="SearchString" value="@Model.CurrentFilter" />
            <input type="submit" value="Search" class="btn btn-default" id="searchName" />

            @*<a asp-page="./Index">Back to full List</a>*@
        </p>
    </div>
</form>

Although the code above is functional, the page still refreshes. I believe I may have overlooked something.

javascript css ajax html

Answer 1

Answer №1

try using e.preventDefault() to prevent the default form submission behavior.

 $(function () {
        $('#searchForm').on('submit', function (e) {
    e.preventDefault()
            $.ajax({
                type: 'GET',
                url: 'Index',
                data: $('#searchForm').serialize(),
                success: function () {
                    $("#resultsTable").removeClass("d-none");
                }
            });
        });
    });

Answer 2

try using e.preventDefault() to prevent the default form submission behavior.

 $(function () {
        $('#searchForm').on('submit', function (e) {
    e.preventDefault()
            $.ajax({
                type: 'GET',
                url: 'Index',
                data: $('#searchForm').serialize(),
                success: function () {
                    $("#resultsTable").removeClass("d-none");
                }
            });
        });
    });

Answer 3

Answer №2

Make sure to utilize the event.preventDefault() method.

By using the preventDefault() method from the Event interface, you are informing the user agent that the default action of the event should not be taken if it is not explicitly handled. The event will still propagate as usual unless stopPropagation() or stopImmediatePropagation() is called by one of its event listeners.

<input id="search" type="text" name="SearchString" value="@Model.CurrentFilter" />

$(function () {
$('#searchForm').on('submit', function (e) {
    e.preventDefault();
    const search = $('#search').val();
    $.ajax({
        type: 'GET',
        url: 'Index',
        data: { search },
        success: function () {
            $("#resultsTable").removeClass("d-none");
        }
    });
  });
});

Next, in your PHP script:

<?php searchValue = $_GET['search']; ?>

Answer 4

Make sure to utilize the event.preventDefault() method.

By using the preventDefault() method from the Event interface, you are informing the user agent that the default action of the event should not be taken if it is not explicitly handled. The event will still propagate as usual unless stopPropagation() or stopImmediatePropagation() is called by one of its event listeners.

<input id="search" type="text" name="SearchString" value="@Model.CurrentFilter" />

$(function () {
$('#searchForm').on('submit', function (e) {
    e.preventDefault();
    const search = $('#search').val();
    $.ajax({
        type: 'GET',
        url: 'Index',
        data: { search },
        success: function () {
            $("#resultsTable").removeClass("d-none");
        }
    });
  });
});

Next, in your PHP script:

<?php searchValue = $_GET['search']; ?>

Using AJAX to refresh a div upon submitting a form, instead of reloading the entire page

Answer №1

Answer №2

Similar questions

Guide to showcasing Laravel Eloquent information using jQuery "Ajax" tooltips?

Invoke a function from a different source in JavaScript

Creating randomized sequences using JavaScript

Automatically fill in an input field with jQuery by using the value from another input field

Executing raml2html within an ANT automation script

My node.js code is not producing the expected result. Can anyone point out where I may be going wrong?

How can you pause a YouTube video using jQuery?

Display MySQL data in a Jade/Pug view by separating it into different sections

From HTML to Python to Serial with WebIOPi

Using a Default Value in a Destructured Function Parameter Results in a ReferenceError

Having trouble removing the npm package spotifydl from my system

Retrieving the selected value from a dropdown using jQuery's `$('#id').val()` may not always provide the desired result

Making an AJAX request using jQuery to retrieve data from an API with dynamic pagination

Adjust the vertical scaling of a container in CSS Grid to maintain aspect ratio similar to an <img>

Is there a way to display a message in a div container instead of using the alert box when there is a successful ajax response?

The problem of double encoding in jQuery Ajax issues

Social media comments widget

Transferring Information from Vue to PHP: What You Need to Know

How to automatically close the menu on a Wordpress theme after clicking a link

Ways to eliminate unnecessary re-rendering of components that remain unchanged?