stackoom
  简体   繁体   中英

Unable to redirect my form to a new html page. Its going to localhost:3000/confirm.html instead i want it to open confirm.html in a new window

 原文  2020-01-23 07:31:13  5   2    javascript/ html

Question

In the below code, after clicking on 'Save Data' I want the page to go to another htm page 'confrim.html'. Instead what is happening is its just showing "localhost:3000/confirm.html" and not opening a new page. Can anyone help to fix this, attaching the code for the reference. I tried to implement the following through the submitInfo() function Thanks

 <!DOCTYPE html> <html> <head> <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">--> <style> * { box-sizing:border-box; border-color: teal; } html{ background : radial-gradient(rgba(48, 97, 97, 0.5),rgba(255,255,255,0.5)) } div { padding: 10px; overflow: hidden; color: rgb(16, 8, 32); font-size: 25px; font-style: initial; font-family: 'Times New Roman', Times, serif; } .input[type=button]{ font: 25px Calibri; width: auto; float: left; cursor: pointer; padding: 7px; color: teal; font-size: 30px; } #bt{ width : 190px; height: 60px; font-size: 25px; font-family: 'Times New Roman', Times, serif; background-color: #05193d; color: whitesmoke; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.5); margin-top: 10px; } input[type=text], textarea, select { font: 17px Calibri; width: 100%; padding: 12px; border: 1px solid rgb(19, 18, 18); border-radius: 4px; color:teal } </style> <title>Save form Data in a Text File using JavaScript</title> <h1>User Information </h1> <!--<link rel="stylesheet" href="style.css">--> </head> <body> <div> <form name="myForm" action="confirm.html" method="POST" > <!--Add few elements to the form--> <div> <label for="Name">Name</label> <input type="text" id="txtName" placeholder="Enter your name" required /> </div> <div> <label for="Email">Email</label> <input type="text" id="txtEmail" placeholder="Enter your Email Id" /> </div> <div> <label for="Controller Type">Controller Type</label> <select id="selProd"> <option value=""> - Select the Controller - </option> <option value="RAID">RAID</option> <option value="JBOD">JBOD</option> <option value="EBOD">EBOD</option> <option value="AP">AP</option> </select> </div> <div> <label for="Test Type">Test Type </label> <select id="selTest"> <option value=""> - Select The Test - </option> <option value="BFT">BFT</option> <option value="Manufacturing">Manufacturing</option> <option value="Channel">Channel</option> <option value="DVT" >DVT</option> </select> </div> <div> <label for="Protocol Type">Protocol Type </label> <select id="selProto"> <option value=""> - Select The Protocol - </option> <option value="SAS">SAS</option> <option value="iSCSI">iSCSI</option> <option value="FC">FC</option> </select> </div> <div> <label for="IP Address">IP Address:</label> <input type="text" id="txtIP" placeholder="Enter your IP address" /> </div> <div> <label for="Chasis Input">Number of Chasis Input:</label> <input type="number" id="txtInputs" placeholder="Enter Number of Chasis" /> </div> <div> <input type="button" id="myBtn" value="Save data" onclick="submitInfo()"/> </div> <div> <input type="button" id="bt" value="Save data to file" onclick="saveFile()" /> </div> </form> </div> <script> let saveFile = () => { // Get the data from each element on the form. const name = document.getElementById('txtName'); const email = document.getElementById('txtEmail'); const test = document.getElementById('selTest'); const product = document.getElementById('selProd'); const protocol = document.getElementById('selProto'); const IP = document.getElementById('txtIP'); const Inputs = document.getElementById('txtInputs'); // This variable stores all the data. let data = '\\rName : ' + name.value + '\\r\\n' + 'Email ID : ' + email.value + '\\r\\n' + 'Test Type : ' + test.value + '\\r\\n' + 'Product Type : ' + product.value + '\\r\\n' + 'Protocol Type : ' + protocol.value + '\\r\\n' + 'IP Address : ' + IP.value + '\\r\\n' + 'Chasis Inputs : ' + Inputs.value; if(name.value =='' || email.value == '' || test.value =='' || product.value =='' || IP.value == ''|| Inputs.value == ''){ alert("Please fill all the fields!"); return; } const reg = /^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,4})$/; if (reg.test(email.value) == false) { alert('Invalid Email Address'); return false; } var ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; if (ipformat.test(IP.value) == false) { alert('Invalid IP Address'); return false; } if(name.value.length<3){ alert("Name must be having atleast 3 Characters"); return; } if(name.value == ''){ alert("Enter the name First"); } // Convert the text to BLOB. const textToBLOB = new Blob([data], { type: 'text/plain' }); const sFileName = 'formData.yaml'; // The file to save the data. let newLink = document.createElement("a"); newLink.download = sFileName; if (window.webkitURL != null) { newLink.href = window.webkitURL.createObjectURL(textToBLOB); } else { newLink.href = window.URL.createObjectURL(textToBLOB); newLink.style.display = "none"; document.body.appendChild(newLink); } newLink.click(); } var disable_options = false; document.getElementById('selProd').onchange = function () { //alert("selected value = "+this.value); if(this.value == "RAID") { document.getElementById('selProto').removeAttribute('disabled'); } else { document.getElementById('selProto').setAttribute('disabled', true); } } function submitInfo(){ var test = document.getElementById('selTest').value; var product = document.getElementById('selProd').value; if(product == "EBOD" && test== "BFT"){ window.location ="confirm.html"; } } </script> </body> </html>

2 answers

solution1
 0 ACCPTED  2020-01-23 07:48:37

You could use the window.open method - like so:

function submitInfo(){
    var test = document.getElementById('selTest').value;
    var product = document.getElementById('selProd').value;

    if( product == "EBOD" && test== "BFT" ){
        window.open( "confirm.html", "Confirm", "fullscreen=yes,location=no,menubar=yes,resizable=no,scrollbars=no,status=no,toolbar=no" );
    }
}

solution2
 0  2020-01-23 07:48:41

you have a

<form name="myForm" action="confirm.html" method="POST" >

which, on form submit, your browser will look for confirm.html file. I don't know whether you have file named confirm.html, but I think you do. otherwise it'll show 404 error.

As you instructed in your form, browser'll look for confirm.html , and on redirect, it'll show what's in confirm.html file.

you should remove your js script from this file and put it inside confirm.html file. or just replace action="confirm.html" with action=""

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Dynamic Confirmation Message on a confirm.html Window.confirm and html form Open new tab or window using confirm() form how to open a new page from link in a box instead of new tab or new window in HTML5? Javascript Confirm in HTML Form not working When i click in logout button open a confirm alert. When i cancel it will redirect login page but i want to redirect current page. How i can do it? Python/Flask/HTML - Render HTML in new window instead of home page Variable from html form not passing to Javascript window confirm In HTML5 want to validate password and confirm password Open a static html in a new window
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM