无法将我的表单重定向到新的 html 页面。它会转到 localhost:3000/confirm.html 而我希望它在新窗口中打开 confirm.html

Question

In the below code, after clicking on 'Save Data' I want the page to go to another htm page 'confrim.html'.在下面的代码中，单击“保存数据”后，我希望页面转到另一个 htm 页面“confrim.html”。 Instead what is happening is its just showing "localhost:3000/confirm.html" and not opening a new page.相反，发生的事情只是显示“localhost:3000/confirm.html”而不是打开新页面。 Can anyone help to fix this, attaching the code for the reference.任何人都可以帮助解决这个问题，附上代码以供参考。 I tried to implement the following through the submitInfo() function Thanks我尝试通过 submitInfo() 函数实现以下内容谢谢

 <!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>

Answer 1

You could use the window.open method - like so:您可以使用window.open方法 - 像这样：

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" );
    }
}

Answer 2

you have a你有一个

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

which, on form submit, your browser will look for confirm.html file.在表单提交时，您的浏览器将查找 confirm.html 文件。 I don't know whether you have file named confirm.html, but I think you do.我不知道您是否有名为 confirm.html 的文件，但我认为您有。 otherwise it'll show 404 error.否则会显示 404 错误。

As you instructed in your form, browser'll look for confirm.html , and on redirect, it'll show what's in confirm.html file.正如您在表单中所指示的那样，浏览器将查找confirm.html ，并且在重定向时，它将显示 confirm.html 文件中的内容。

you should remove your js script from this file and put it inside confirm.html file.您应该从该文件中删除您的 js 脚本并将其放入 confirm.html 文件中。 or just replace action="confirm.html" with action=""或者只是用action=""替换action="confirm.html "

无法将我的表单重定向到新的 html 页面。它会转到 localhost:3000/confirm.html 而我希望它在新窗口中打开 confirm.html

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-01-23 07:48:37

解决方案2
0 2020-01-23 07:48:41

无法将我的表单重定向到新的 html 页面。 它会转到 localhost:3000/confirm.html 而我希望它在新窗口中打开 confirm.html

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-01-23 07:48:37

解决方案2 0 2020-01-23 07:48:41

无法将我的表单重定向到新的 html 页面。它会转到 localhost:3000/confirm.html 而我希望它在新窗口中打开 confirm.html

解决方案1
0 已采纳 2020-01-23 07:48:37

解决方案2
0 2020-01-23 07:48:41