无法将我的表单重定向到新的 html 页面.相反，我希望它在新窗口中打开确认.html它会 localhost:3000

在下面的代码中，单击"保存数据"后，我希望该页面转到另一个htm页面"confrim.html"。相反，正在发生的事情只是显示"localhost:3000/confirm.html"而不是打开新页面。任何人都可以帮助解决此问题，并附上代码以供参考。我尝试通过提交信息((函数实现以下内容谢谢

<!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 + 'rn' +
		  'Email ID : ' + email.value + 'rn' +
		  'Test Type : ' + test.value + 'rn' +
		  'Product Type : ' + product.value + 'rn' +
		  'Protocol Type : ' + protocol.value + 'rn' +
		  'IP Address : ' + IP.value + 'rn' +
		  '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>

您可以使用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" );
}
}

你有一个

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

在表单提交时，您的浏览器将查找确认.html文件。我不知道您是否有名为 confirm.html 的文件，但我认为您有。否则它会显示 404 错误。

按照您在表单中的指示，浏览器将查找确认.html，在重定向时，它将显示确认.html文件中的内容。

您应该从此文件中删除您的 JS 脚本并将其放入 confirm.html 文件中。或者只是将 action=">confirm.html" 替换为 action=">">

相关内容

最新更新

热门标签：