Initiate an AJAX call

Question

Initiate an AJAX call

Hey there, I have a piece of code that I need some help with.

<button onclick="sbt()" name="step1[save]" type="submit" class="btn-type5 next-btn-form pie" value="Далее">Send</button>
function sbt(){
var phone = document.getElementById('fld1').value;
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
                xmlhttp=new XMLHttpRequest();
        }
        else
        {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }}
        xmlhttp.open("GET","host.com/send.php?phone="+phone+"&t="+Date.now(),true);
        xmlhttp.send();
}

I'm trying to send this request asynchronously, but when I use xmlhttp.open(...,...,true), the request doesn't even reach the server. I've been monitoring it in Google Chrome console. However, if I manually run the sbt() function from the console, the request goes through just fine. Additionally, if I change to xmlhttp.open(...,...,false), it works as expected. Can someone please assist me with this issue? Thank you.

javascript ajax

Answer 1

Answer №1

When the submit button is clicked, the form will be submitted immediately, causing the browser to navigate away from the current page and exit the JavaScript execution environment that initiated the Ajax request.

To prevent the default submission behavior of the form and use JavaScript instead, you can include the following code:

onclick="submitForm(); return false;"

(Consider utilizing a more modern approach to event binding using EventTarget.addEventListener instead of inline onclick attributes).

Answer 2

When the submit button is clicked, the form will be submitted immediately, causing the browser to navigate away from the current page and exit the JavaScript execution environment that initiated the Ajax request.

To prevent the default submission behavior of the form and use JavaScript instead, you can include the following code:

onclick="submitForm(); return false;"

(Consider utilizing a more modern approach to event binding using EventTarget.addEventListener instead of inline onclick attributes).

Answer 3

Answer №2

Is this the full code for your page?

Have you verified the order in which JavaScript files are loaded?

Please check out this example---> here (it includes a 3-second response delay)

<h2>AJAX async demo</h2>

<button type="button" onclick="callAjax()">Request data</button>
<div id="testDiv"></div>

<script>
function callAjax() {

    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("testDiv").innerHTML = xmlhttp.responseText;
        }
    };

    xmlhttp.open("POST", "/echo/html/", true);
    var params = "html=test&delay=3"
    xmlhttp.send(params);
}
</script>

Answer 4

Is this the full code for your page?

Have you verified the order in which JavaScript files are loaded?

Please check out this example---> here (it includes a 3-second response delay)

<h2>AJAX async demo</h2>

<button type="button" onclick="callAjax()">Request data</button>
<div id="testDiv"></div>

<script>
function callAjax() {

    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("testDiv").innerHTML = xmlhttp.responseText;
        }
    };

    xmlhttp.open("POST", "/echo/html/", true);
    var params = "html=test&delay=3"
    xmlhttp.send(params);
}
</script>

Initiate an AJAX call

Answer №1

Answer №2

Similar questions

Sharing context sub files in Next.js can be easily accomplished by following a few simple

The hamburger menu unexpectedly appears outside the visible screen area and then reappears at random intervals

Tips for preventing my component from being duplicated during the development process

Guide on sending a JavaScript variable to PHP using AJAX

jQuery Autocomplete without dropdown menu suggestion available

ui-jq flot graph with lazy loading

Applying the jqtransform plugin to all forms except for one

Creating dynamic qtip2 tooltips is an effective way to enhance user interaction on

What is the best way to incorporate a text box along with a submit button that triggers a callback to a javascript function when clicked, utilizing either plain javascript or jQuery?

Creating a Sudoku game board using underscore templates

Explore one of the elements within a tuple

Managing state changes in React can be a complex task, but

Tips on customizing the appearance of two Material-UI Sliders across separate components

When using React.js Material UI's CardActionArea with a flex display, the children elements may not automatically use the full width as expected

Creating a unique theme export from a custom UI library with Material-UI

Discovering how to navigate to a link within a web table using Cypress has been a challenge, as I keep receiving the error message stating that the element is not visible due to its CSS property being

Can JavaScript event listeners be compelled to trigger in a specific sequence?

Experience the power of Vue Google Chart - Geochart where the chart refreshes seamlessly with data updates, although the legend seems to disappear

Getting rid of the scrollbar in Internet Explorer

Problems that seem to loop endlessly