Как отделить HTML от Javascript в этой форме?

Question

НЕТ, это топи c не отвечает на мой вопрос вообще. Пожалуйста, прочитайте вопрос, прежде чем что-либо делать.

У меня есть форма с 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, если установлен первый флажок, или на checkbox.html?cb2=on, если установлен второй флажок, или на 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() для решения проблемы. По сути, это то же самое, что и return true внутри атрибута элемента HTML, например onsubmit, это предотвращает поведение по умолчанию, которое обычно происходит. Если вы хотите, чтобы ваше пользовательское поведение, открывающее некоторые 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 .)