时间戳

首页 > 解决方案 > 无法将我的表单重定向到新的 html 页面。它转到 localhost:3000/confirm.html 而不是我希望它在新窗口中打开 confirm.html

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

问题描述

在下面的代码中，单击“保存数据”后，我希望页面转到另一个 htm 页面“confrim.html”。相反，它只是显示“localhost:3000/confirm.html”而不是打开新页面。任何人都可以帮助解决这个问题，附上参考代码。我尝试通过 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>

标签： javascripthtml

解决方案

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

推荐阅读