如何在此表单中将HTML与Javascript分离

Question

不，这个主题根本不能回答我的问题。做任何事情之前请先阅读问题

我有一个使用Javascript的表单，它可以按预期工作：

<script>
function checkForm(form)
{
if(form.cb1.checked) {
window.open('http://google.com/','_blank');
}
if(form.cb2.checked) {
window.open('http://yahoo.com/','_blank');
}
return true;
}
</script>
<form onsubmit="return checkForm(this);">
<label for="cb1">G</label>
<input name="cb1" type="checkbox">
<label for="cb2">Y</label>
<input name="cb2" type="checkbox">
<input type="submit" value="Submit">
</form>

但如果我试图将HTML与JS分离，它就会停止工作。

单击Submit后，如果选中了第一个复选框，则url将变为checkbox.html?cb1=on；如果选中了第二个复选框则url将更改为checkbox.html?cb2=on；如果同时选中了这两个复选框的话，则url会变为checkbox.html?cb1=on&cb2=on。但是带有url的标签页无法打开。

我的分离尝试看起来像：

document.getElementById('cbx').addEventListener(
'submit', function checkForm(event) {
if (form.cb1.checked) {
window.open('http://google.com/', '_blank');
}
if (form.cb2.checked) {
window.open('http://yahoo.com/', '_blank');
}
return true;
});

<form id="cbx">
	
	<label for="cb1">G</label>
	<input name="cb1" type="checkbox">
	
	<label for="cb2">Y</label>
	<input name="cb2" type="checkbox">
	
	<input type="submit" value="Submit">
	
</form>
<script type="text/javascript" src="form.js"></script>

Answer 1

使用event.preventDefault()来解决问题。它本质上与在像onsubmit这样的HTML元素属性中执行return true相同，它防止了通常会发生的默认行为。如果您希望您的自定义行为(即在新选项卡中打开某些URL(发生，则必须首先覆盖默认行为。

此外，请确保表单变量是在某个地方定义的，不确定它是否在代码中，因为它不在第二个示例中。

document.getElementById('cbx').addEventListener(
'submit', function checkForm(event) {
	
//Prevents default action that would normally happen onsubmit
	event.preventDefault();

//Define the form element
var form = document.getElementById("cbx");
if (form.cb1.checked) {
window.open('http://google.com/', '_blank');
}
if (form.cb2.checked) {
window.open('http://yahoo.com/', '_blank');
}
return true;
});

<form id="cbx">
	
	<label for="cb1">G</label>
	<input name="cb1" type="checkbox">
	
	<label for="cb2">Y</label>
	<input name="cb2" type="checkbox">
	
	<input type="submit" value="Submit">
	
</form>

该代码经过测试并正常工作。(由于代码段对在新选项卡中打开URL的反应，它在代码段中不起作用，但这里有一个有效的JSFiddle。(