提交表单时，我需要将 iframe 重定向到不同的页面

Question

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>

Answer 1

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>