This is my code: I have tried many ways to redirect iframe to a different page when the function is called. I need to solve this and I need to know how to load iframe on a different page when I input the alphabet in the input field
function setAction(form) {
var inp = document.getElementById("oid").value;
var letters = /^flow/i;
var numbers = /^[0-9]/i;
var empty = /^(?!\s*$).+/;
if (oid.value.match(letters)) {
// var page = "https://flowpl.com/track/"
form.action = "https://flowpl.com/test-page/";
// window.top.location.href = page;
// location.href = "https://flowpl.com/test-page/";
} else if (oid.value.match(numbers)) {
let url_string = "https://tracker.flowpl.com/track_customer_orders";
let refNum = document.getElementById('oid').value;
window.location.href = url_string + "?refNum=" + refNum + "&lang=english";
}
// else {
// // alert('Please input numeric characters only');
// // document.test.oid.focus();
// return false;
// }
return false;
}
function loadintoIframe(info) {
if (typeof info.id !== 'undefined' && typeof info.src !== 'undefined') {
document.getElementById(info.id).src = info.src;
}
}
window.onload = function() {
document.forms['test'].elements['submit'].onclick = function() {
// let page = "https://flowpl.com/track/";
let myIframe = document.getElementById("myiFrame");
let url_string = "https://flowpl.portal.shipsy.in/track/result";
let refNum = document.getElementById('oid').value;
let adsURL = url_string + "?refNum=" + refNum + "&searchBy=referenceNumber";
console.log(adsURL);
// let frame = window.location.href = "https://flowpl.com/track/";
// let frame = window.frames["myiFrame"].top.location = "https://flowpl.com/track/"
// window.top.location.href = page;
myIframe.src = adsURL;
}
}<div class="container-wrap">
<div class="container main-content">
<div class="row">
<form name="test" method="POST" onsubmit="return setAction(this)">
<input type="text" name="oid" id="oid" value="" required>
<input type="submit" name="submit" value="submit">
</form>
<iframe style="border:0px #ffffff none;" name="myiFrame" id="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="500px" width="1200px" allowfullscreen></iframe>
</div>
<!--/row-->
</div>
<!--/container-->
</div>You could just add target to the form
Never call anything submit in a form
window.addEventListener("load", function() {
document.getElementById("test").addEventListener("submit", function() {
let url_string = "https://flowpl.portal.shipsy.in/track/result";
let refNum = document.getElementById('oid').value;
let adsURL = url_string + "?refNum=" + refNum + "&searchBy=referenceNumber";
console.log(adsURL);
this.action = adsURL;
})
})<div class="container-wrap">
<div class="container main-content">
<div class="row">
<form id="test" method="POST" target="myiFrame">
<input type="text" name="oid" id="oid" value="" required>
<input type="submit" value="submit">
</form>
<iframe style="border:0px #ffffff none;" name="myiFrame" id="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="500px" width="1200px" allowfullscreen></iframe>
</div>
<!--/row-->
</div>
<!--/container-->
</div>