I need to redirect another page after successful form submission. I'm new in JavaScript. I need to know how to do the right way. Redirect to a other page after successful form submission through AJAX. first this code have a form submission after redirect to another page.
I'm Programming with php/wordpress.
php/html code:
<form id="alecaddd-testimonial-form" action="#" method="post" data-url="<?php echo admin_url('admin-ajax.php'); ?>">
<div class="field-container">
<input type="text" class="field-input" placeholder="Adult" id="name" name="name" required>
<small class="field-msg error" data-error="invalidName">Your Name is Required</small>
</div>
<div class="field-container">
<input type="text" class="field-input" placeholder="infant" id="infant" name="infant" required>
<small class="field-msg error" data-error="invalidName">Your Name is Required</small>
</div>
<div class="field-container">
<input type="email" class="field-input" placeholder="Child" id="email" name="email" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<input type="date" class="field-input" placeholder="date" id="date" name="date" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<textarea name="message" id="message" class="field-input" placeholder="Your Message" required></textarea>
<small class="field-msg error" data-error="invalidMessage">A Message is Required</small>
</div>
<div class="field-container">
<div>
<a href="order.php?id=102" class="btn btn-success">
<button type="stubmit" class="btn btn-default btn-lg btn-sunset-form">BOOK NOW</button>
</div>
</a>
<small class="field-msg js-form-submission">Submission in process, please wait…</small>
<small class="field-msg success js-form-success">Message Successfully submitted, thank you!</small>
<small class="field-msg error js-form-error">There was a problem with the Contact Form, please try again!</small>
</div>
<input type="hidden" name="action" value="submit_testimonial">
<input type="hidden" name="nonce" value="<?php echo wp_create_nonce("testimonial-nonce") ?>">
</form>
Javascript:-
! function o(n, i, u) {
function c(r, e) {
if (!i[r]) {
if (!n[r]) {
var t = "function" == typeof require && require;
if (!e && t) return t(r, !0);
if (l) return l(r, !0);
var s = new Error("Cannot find module '" + r + "'");
throw s.code = "MODULE_NOT_FOUND", s
}
var a = i[r] = {
exports: {}
};
n[r][0].call(a.exports, function(e) {
return c(n[r][1][e] || e)
}, a, a.exports, o, n, i, u)
}
return i[r].exports
}
for (var l = "function" == typeof require && require, e = 0; e < u.length; e++) c(u[e]);
return c }({
1: [function(e, r, t) {
"use strict";
function o() {
document.querySelectorAll(".field-msg").forEach(function(e) {
return e.classList.remove("show")
})
}
document.addEventListener("DOMContentLoaded", function(e) {
var a = document.getElementById("alecaddd-testimonial-form");
a.addEventListener("submit", function(e) {
e.preventDefault(), o();
var r = {
name: a.querySelector('[name="name"]').value,
email: a.querySelector('[name="email"]').value,
message: a.querySelector('[name="message"]').value,
nonce: a.querySelector('[name="nonce"]').value
};
if (r.name)
if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(String(r.email).toLowerCase()))
if (r.message) {
var t = a.dataset.url,
s = new URLSearchParams(new FormData(a));
a.querySelector(".js-form-submission").classList.add("show"), fetch(t, {
method: "POST",
body: s
}).then(function(e) {
return e.json()
}).then(function(e) {
window.location.href = '';
}).catch(function(e) {
o(), a.querySelector(".js-form-error").classList.add("show")
}).then(function(e) {
o(), 0 !== e && "error" !== e.status ? (a.querySelector(".js-form-success").classList.add("show"), a.reset()) : a.querySelector(".js-form-error").classList.add("show")
})
} else a.querySelector('[data-error="invalidMessage"]').classList.add("show");
else a.querySelector('[data-error="invalidEmail"]').classList.add("show");
else a.querySelector('[data-error="invalidName"]').classList.add("show")
})
})
}, {}] }, {}, [1]); //# sourceMappingURL=form.js.map
Any help, as always, is greatly appreciated.
I need to redirect another page after successful form submission. I'm new in JavaScript. I need to know how to do the right way. Redirect to a other page after successful form submission through AJAX. first this code have a form submission after redirect to another page.
I'm Programming with php/wordpress.
php/html code:
<form id="alecaddd-testimonial-form" action="#" method="post" data-url="<?php echo admin_url('admin-ajax.php'); ?>">
<div class="field-container">
<input type="text" class="field-input" placeholder="Adult" id="name" name="name" required>
<small class="field-msg error" data-error="invalidName">Your Name is Required</small>
</div>
<div class="field-container">
<input type="text" class="field-input" placeholder="infant" id="infant" name="infant" required>
<small class="field-msg error" data-error="invalidName">Your Name is Required</small>
</div>
<div class="field-container">
<input type="email" class="field-input" placeholder="Child" id="email" name="email" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<input type="date" class="field-input" placeholder="date" id="date" name="date" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<textarea name="message" id="message" class="field-input" placeholder="Your Message" required></textarea>
<small class="field-msg error" data-error="invalidMessage">A Message is Required</small>
</div>
<div class="field-container">
<div>
<a href="order.php?id=102" class="btn btn-success">
<button type="stubmit" class="btn btn-default btn-lg btn-sunset-form">BOOK NOW</button>
</div>
</a>
<small class="field-msg js-form-submission">Submission in process, please wait…</small>
<small class="field-msg success js-form-success">Message Successfully submitted, thank you!</small>
<small class="field-msg error js-form-error">There was a problem with the Contact Form, please try again!</small>
</div>
<input type="hidden" name="action" value="submit_testimonial">
<input type="hidden" name="nonce" value="<?php echo wp_create_nonce("testimonial-nonce") ?>">
</form>
Javascript:-
! function o(n, i, u) {
function c(r, e) {
if (!i[r]) {
if (!n[r]) {
var t = "function" == typeof require && require;
if (!e && t) return t(r, !0);
if (l) return l(r, !0);
var s = new Error("Cannot find module '" + r + "'");
throw s.code = "MODULE_NOT_FOUND", s
}
var a = i[r] = {
exports: {}
};
n[r][0].call(a.exports, function(e) {
return c(n[r][1][e] || e)
}, a, a.exports, o, n, i, u)
}
return i[r].exports
}
for (var l = "function" == typeof require && require, e = 0; e < u.length; e++) c(u[e]);
return c }({
1: [function(e, r, t) {
"use strict";
function o() {
document.querySelectorAll(".field-msg").forEach(function(e) {
return e.classList.remove("show")
})
}
document.addEventListener("DOMContentLoaded", function(e) {
var a = document.getElementById("alecaddd-testimonial-form");
a.addEventListener("submit", function(e) {
e.preventDefault(), o();
var r = {
name: a.querySelector('[name="name"]').value,
email: a.querySelector('[name="email"]').value,
message: a.querySelector('[name="message"]').value,
nonce: a.querySelector('[name="nonce"]').value
};
if (r.name)
if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(String(r.email).toLowerCase()))
if (r.message) {
var t = a.dataset.url,
s = new URLSearchParams(new FormData(a));
a.querySelector(".js-form-submission").classList.add("show"), fetch(t, {
method: "POST",
body: s
}).then(function(e) {
return e.json()
}).then(function(e) {
window.location.href = 'https://www.google.';
}).catch(function(e) {
o(), a.querySelector(".js-form-error").classList.add("show")
}).then(function(e) {
o(), 0 !== e && "error" !== e.status ? (a.querySelector(".js-form-success").classList.add("show"), a.reset()) : a.querySelector(".js-form-error").classList.add("show")
})
} else a.querySelector('[data-error="invalidMessage"]').classList.add("show");
else a.querySelector('[data-error="invalidEmail"]').classList.add("show");
else a.querySelector('[data-error="invalidName"]').classList.add("show")
})
})
}, {}] }, {}, [1]); //# sourceMappingURL=form.js.map
Any help, as always, is greatly appreciated.
Share Improve this question edited Sep 13, 2021 at 14:41 Noufal Binu asked Sep 12, 2018 at 5:23 Noufal BinuNoufal Binu 1742 silver badges16 bronze badges3 Answers
Reset to default 3Replace header("Location:http://www.google.");
with:
window.location.href = 'https://www.google.';
header() is a PHP function which means "before you send the response back to the client (browser), add the Location: header. This header tells chrome to redirect using a 301 or 302 status code. PHP code obviously won't work in Javascript.
Considering javascript ONLY happens in the browser there are no headers that need to be set. You can just tell javascript to directly navigate the current window to the URL you specify.
You can redirect the page by using the below methods:
By using a meta tag in the head:
<meta http-equiv="refresh" content="0;url=http://your-page-url." />
Note that content="0;... is used for after how many seconds you need to redirect the page
By using JavaScript:
window.location.href = "http://your-page-url.";
By using jQuery:
$(location).attr('href', 'http://yourPage./');
use window.location.href
Eg-
window.location.href = 'https://stackoverflow.';