Is it possible to redirect a URL with a readyState of 4?

Question

Is it possible to redirect a URL with a readyState of 4?

Is it possible to redirect to a page when the readyState is equal to 4?

    //load the send form
    if (sendRequest) {
        sendRequest.open("POST", urlRequest, true);
        sendRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
        sendRequest.setRequestHeader("Connection", "close");
        sendRequest.onreadystatechange = displayStatus;
        sendRequest.send(sendData);
    } else {
        alert("fails"); //alert if request fails
    }
}

function displayStatus() {
    if (sendRequest.readyState == 4) {
        alert("send");
    // redirect to thank you page? 


    } else {
        alert("send fails"); 

} //end readyState

}

I am anticipating not getting a status code of 200.

Therefore, on readyState 4, I would like to automatically redirect to another page after the form has been sent. A simple PHP mail function using

<?php header(location: "url"); ?>

does not seem to be effective, so I believe utilizing Ajax or JavaScript is necessary...

At present, my current setup just isn't functioning as expected. Any suggestions for a solution?

javascript ajax

Answer 1

Answer №1

Are you looking to trigger a redirect after the ajax request is successful? If so, you can achieve this by utilizing the jquery ajax() function and specifying the redirect code within the success callback.

For more information on the jquery ajax() function, you can visit http://api.jquery.com/jQuery.ajax/

Another simpler option is to use the post() method as an alternative. You can learn more about it at http://docs.jquery.com/Post

Answer 2

Are you looking to trigger a redirect after the ajax request is successful? If so, you can achieve this by utilizing the jquery ajax() function and specifying the redirect code within the success callback.

For more information on the jquery ajax() function, you can visit http://api.jquery.com/jQuery.ajax/

Another simpler option is to use the post() method as an alternative. You can learn more about it at http://docs.jquery.com/Post

Answer 3

Answer №2

Is the code located within the sendRequest.onreadystatechange callback? It should be inside that callback, even if a 200 return is not expected.

Try this:

sendRequest.onreadystatechange=function(){
  //DEBUG
  alert("ready state change: "+ sendRequest.readyStat);
  if (sendRequest.readyState == 4) {
    alert("form sent");
    window.location = "http://www.mywebsite.com";
  }
}

Server-side will not work for two main reasons - first, the header has already been sent for the page making the request, and secondly, the requested page is AJAX so only the requested page will change, not the current one.

[EDIT] Have you checked the error console? Also, does this page involve frames by chance?

[EDIT 2]

I've created a jsbin where this works on Firefox and Chrome... http://jsbin.com/umufi4/2/edit

I believe the issue may not be with the location change if 'http://' is used in front of it, but rather how your sendRequest is constructed. Here are some errors I found, some of which may be related to jsbin and remote access, but if they exist on your end, they could be preventing it from reaching window.location

ERRORS: Refused to set unsafe header "Connection" XMLHttpRequest cannot load . Origin http://jsbin.com is not allowed by Access-Control-Allow-Origin. jromero.meFailed to load resource

Several questions arise:

Is this a cross-domain request?
Do you see the "send" alert box?
Is sendRequest a global variable?

Answer 4

Is the code located within the sendRequest.onreadystatechange callback? It should be inside that callback, even if a 200 return is not expected.

Try this:

sendRequest.onreadystatechange=function(){
  //DEBUG
  alert("ready state change: "+ sendRequest.readyStat);
  if (sendRequest.readyState == 4) {
    alert("form sent");
    window.location = "http://www.mywebsite.com";
  }
}

Server-side will not work for two main reasons - first, the header has already been sent for the page making the request, and secondly, the requested page is AJAX so only the requested page will change, not the current one.

[EDIT] Have you checked the error console? Also, does this page involve frames by chance?

[EDIT 2]

I've created a jsbin where this works on Firefox and Chrome... http://jsbin.com/umufi4/2/edit

I believe the issue may not be with the location change if 'http://' is used in front of it, but rather how your sendRequest is constructed. Here are some errors I found, some of which may be related to jsbin and remote access, but if they exist on your end, they could be preventing it from reaching window.location

ERRORS: Refused to set unsafe header "Connection" XMLHttpRequest cannot load . Origin http://jsbin.com is not allowed by Access-Control-Allow-Origin. jromero.meFailed to load resource

Several questions arise:

Is this a cross-domain request?
Do you see the "send" alert box?
Is sendRequest a global variable?

Answer 5

Answer №3

Appreciation to J.Romero for guiding me in identifying the problem and tweaking the script.

The issue was not related to cross-domain concerns, as the settings were properly configured. The alert box is functioning correctly, and the sendRequest function is global for all functions to utilize.

Only one error was identified, which was within the form itself. Instead of

onSubmit="return checkForm(this);" action=""

, it should be

onSubmit="checkForm(this); return false;" action=""

.

By returning a value of false with the onSubmit event, the form does not submit automatically. By appropriately configuring the JavaScript and AJAX, the form submission process can be finalized: validating the form, preparing it, making the AJAX call, verifying all inputs, sending the form, and redirecting to a thank you page.

Gratitude to everyone who offered their assistance!

Answer 6

Appreciation to J.Romero for guiding me in identifying the problem and tweaking the script.

The issue was not related to cross-domain concerns, as the settings were properly configured. The alert box is functioning correctly, and the sendRequest function is global for all functions to utilize.

Only one error was identified, which was within the form itself. Instead of

onSubmit="return checkForm(this);" action=""

, it should be

onSubmit="checkForm(this); return false;" action=""

.

By returning a value of false with the onSubmit event, the form does not submit automatically. By appropriately configuring the JavaScript and AJAX, the form submission process can be finalized: validating the form, preparing it, making the AJAX call, verifying all inputs, sending the form, and redirecting to a thank you page.

Gratitude to everyone who offered their assistance!

Is it possible to redirect a URL with a readyState of 4?

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to change a mandatory field to optional in SuiteCRM?

Is it feasible to generate a fixed lighting effect overlay with HTML and CSS?

Exploring Nodejs and delving into fundamental queries

What could be the reason for a Python server receiving a JSON message as None?

Ways to designate a parent element in Vue Draggable when the element is lacking a child

"Provide information, then open a new webpage by clicking on a button. Perform various actions with the form by using type

Conceal the menu when tapping anywhere else

Creating a function in Angular to locate each object based on its ID

If the option of "none" is chosen, I would like to deactivate all checkbox selections

Disable menu bar | customize menu bar in electronJS

What is AngularJs's preference: URL or ID for templateUrl?

Chrome full screen mode can be toggled on websites after ajax data has loaded

Exploring Methods for Retrieving offsetHeight and scrollHeight in AngularJS

Create reactivity in output by utilizing global functions in Vue

When utilizing ajax in an MVC framework, an error was encountered due to the conversion of a datetime2 data type to a datetime data type resulting in an out-of

What could be causing the issue with the JS function that is preventing the button from

A guide to integrating ffmpeg with NuxtJS

What is the best way to organize Node/Express routes based on their type into different files?

Configuring the array interval in an Angular application

How can you display a personalized modal or error message using React context while incorporating dynamic content?