PDA

View Full Version : Redirect and alert using JavaScript



G.Bregvadze
Dec 24th, 2013, 03:57 PM
Hi,

I am using send.php to which the form is transmitted and send to the specified mail address.

After sending the mail, the php file triggers the JS code included in this PHP filem which alerts the user that mail was sent and also using Javascript redirect the user to home page.

The code is here:


echo '<script type="text/javascript">
window.location = ".../index.html";
alert("Comment was submitted");
</script>';

So the user gets alert than is redirected to homepage.

However I intend to get another result: first redirect the user to homepage and then get the alert window. changing the order of commands does not help. can someone help me with this issue?

Philip M
Dec 24th, 2013, 05:45 PM
If you wish the alert (obsolete!) to appear after the redirection to the home page has taken place, the code will need to be included in the home page, and triggered by a cookie which when read shows that the redirection came from your other page.

Quizmaster: Name a football team with "City" or "Town" in its title.
Contestant: Manchester United.

G.Bregvadze
Dec 24th, 2013, 06:15 PM
You mean that include ALERT code in home page, but set the condition, that when the page was redirected from Send.php, alert user??

if so, can you help me to write this condition?

Philip M
Dec 24th, 2013, 06:40 PM
You could also pass an arbitrary value to the second page as a query string.

In the form page specifying the url to redirect to:-

window.location = "http://www.myHomePage.html?ID=999"; // or any value you like

In the second page:-


var url = window.location.search; // return the query portion of a url, here ?ID=999
url = url.replace(/[^0-9]/g,""); // strip non-digits including the ?
alert(url); // alerts 999 in this example
if (url == "999") {
// show the alert box, but remember that alerts are obsolete. You should use a DOM method to display a message to your user.
}

G.Bregvadze
Dec 24th, 2013, 08:07 PM
SO you mean that DOM method is better?

G.Bregvadze
Dec 24th, 2013, 08:20 PM
You could also pass an arbitrary value to the second page as a query string.

In the form page specifying the url to redirect to:-

window.location = "http://www.myHomePage.html?ID=999"; // or any value you like

In the second page:-


var url = window.location.search; // return the query portion of a url, here ?ID=999
url = url.replace(/[^0-9]/g,""); // strip non-digits including the ?
alert(url); // alerts 999 in this example
if (url == "999") {
// show the alert box, but remember that alerts are obsolete. You should use a DOM method to display a message to your user.
}


Can you explain

var url = window.location.search;

url = url.replace(/[^0-9]/g,""); // strip non-digits including the ?

This lines??

Arbitrator
Dec 25th, 2013, 04:25 AM
However I intend to get another result: first redirect the user to homepage and then get the alert window. changing the order of commands does not help. can someone help me with this issue?I think this issue would be better addressed through PHP: when a comment is submitted, send a POST request to index.html that controls whether the alert script is appended to the source code of index.html. (In such a solution, index.html will need to become a PHP page if it isn't already.)

That said, this issue can be addressed via JavaScript. Here's a solution that addresses Philip M's "alerts are obsolete" concern (the code from which can also be used for the aforementioned PHP-based solution) using a variant of his URL parameter strategy.

Put this code in send.php:

<!doctype html>
<html lang="en">
<head>
<title>send.php</title>
</head>
<body>
<script>
location.assign("/?comment-submitted=true");
</script>
</body>
</html>

Put this code in index.html:

<!doctype html>
<html lang="en">
<head>
<title>index.html</title>
<style>
* { margin: 0; padding: 0; }
.dialogBoxViewportOuterBox { display: table; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: hsla(0, 0%, 40%, 0.5); }
.dialogBoxViewportInnerBox { display: table-cell; vertical-align: middle; }
.dialogBox { display: table; margin: 0 auto; background-color: hsla(0, 0%, 90%, 1); box-shadow: 0.15rem 0.15rem 0.5rem hsla(0, 0%, 50%, 1); }
.dialogBoxContentBox, .dialogBoxButtonBox { margin: 0.5rem; }
.dialogBoxButtonBox { text-align: right; }
.dialogBoxButtonBox button { vertical-align: bottom; cursor: pointer; }
</style>
</head>
<body>
<script>
var queryString = document.URL.match(/\?([^#]+)/);
var queryStringSansQuestionMark = null;
var queryStringSeparator = "&";
var parameters = null;
var parameterIndex = 0;
var dialogBox = null;
var paragraph = null;
function createSimpleModalDialogBox() {
var dialogBox = {};
dialogBox.viewportOuterBox = document.createElement("div");
dialogBox.viewportInnerBox = document.createElement("div");
dialogBox.dialogBox = document.createElement("dialog");
dialogBox.contentBox = document.createElement("div");
dialogBox.buttonBox = document.createElement("div");
dialogBox.button = document.createElement("button");
dialogBox.button.dialogBox = dialogBox;
dialogBox.viewportOuterBox.setAttribute("class", "dialogBoxViewportOuterBox");
dialogBox.viewportInnerBox.setAttribute("class", "dialogBoxViewportInnerBox");
dialogBox.dialogBox.setAttribute("class", "dialogBox");
dialogBox.contentBox.setAttribute("class", "dialogBoxContentBox");
dialogBox.buttonBox.setAttribute("class", "dialogBoxButtonBox");
dialogBox.button.style.setProperty("min-width", "3rem");
dialogBox.button.textContent = "OK";
dialogBox.buttonBox.appendChild(dialogBox.button);
dialogBox.dialogBox.appendChild(dialogBox.contentBox);
dialogBox.dialogBox.appendChild(dialogBox.buttonBox);
dialogBox.viewportInnerBox.appendChild(dialogBox.dialogBox);
dialogBox.viewportOuterBox.appendChild(dialogBox.viewportInnerBox);
dialogBox.show = function () {
document.documentElement.setAttribute("inert", "");
document.body.appendChild(dialogBox.viewportOuterBox);
this.dialogBox.setAttribute("open", "");
this.button.focus();
};
dialogBox.destroy = function () {
document.documentElement.removeAttribute("inert");
document.body.removeChild(dialogBox.viewportOuterBox);
};
dialogBox.button.addEventListener("click", function () {
this.dialogBox.destroy();
});
return dialogBox;
}
if (queryString !== null) {
queryStringSansQuestionMark = queryString[1];
parameters = queryStringSansQuestionMark.split(queryStringSeparator);
while (parameterIndex < parameters.length) {
if (/comment-submitted=true/.test(parameters[parameterIndex])) {
dialogBox = createSimpleModalDialogBox();
paragraph = document.createElement("p");
paragraph.textContent = "Your comment was submitted.";
dialogBox.contentBox.appendChild(paragraph);
dialogBox.show();
break;
}
parameterIndex += 1;
}
}
</script>
</body>
</html>

Philip M
Dec 25th, 2013, 09:29 AM
Can you explain

var url = window.location.search;

url = url.replace(/[^0-9]/g,""); // strip non-digits including the ?

This lines??

Is it not explained already?

window.location.search is a method which returns the query portion of a url, here in my example ?ID=999 (completely arbitrary)

url = url.replace(/[^0-9]/g,""); // strip non-digits including the ?
so leaving just 999.

But I agree with arbitrator that the best way to do this is with PHP.

Yes, I intended to convey that using a DOM method is better. Was that not clear to you? You don't need all the fancy dialog-box stuff suggested by arbitrator. Just create a <span> with an id and then
document.getElementById("myspanid").innerHTML = "Comment was submitted";

You can use CSS to style the message (font, size, color etc.) and use setTimeout() to erase the message after a few seconds.

G.Bregvadze
Dec 25th, 2013, 11:34 AM
Thank you both for help, I will try both methods at home.

I have a qeusiton regading DOM.

creating <span> annd using document.getElementById("myspanid").innerHTML = "Comment was submitted";, must be done in Send.php, or in index.html?

Philip M
Dec 25th, 2013, 02:07 PM
Thank you both for help, I will try both methods at home.

I have a qeusiton regading DOM.

creating <span> annd using document.getElementById("myspanid").innerHTML = "Comment was submitted";, must be done in Send.php, or in index.html?

In index.html.

felgall
Dec 25th, 2013, 07:59 PM
Thank you both for help, I will try both methods at home.

I have a qeusiton regading DOM.

creating <span> annd using document.getElementById("myspanid").innerHTML = "Comment was submitted";, must be done in Send.php, or in index.html?

It would be best done in index.html using PHP to add the message before loading the page - after all the person may have JavaScript turned off and so will not see the message if added via JavaScript.

G.Bregvadze
Dec 28th, 2013, 06:35 PM
Thank you all for the support and great solutions, all the solutions work, thank you again