How to separate HTML from Javascript in this form?

Question

NO, this topic doesn't answer my question at all. Please read the question before doing anything.

I have a form with Javascript, which works as expected:

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

But if i try to separate HTML from JS it stops working.

After clicking on Submit an url changes to checkbox.html?cb1=on, if the first checkbox is checked, or to checkbox.html?cb2=on, if the second checkbox is checked, or to checkbox.html?cb1=on&cb2=on, if checked both. But tabs with urls don't open.

My separation try looks like:

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>

Try using this `event.preventDefault()` inside your handler, `return true` works only inside element attributes. — Dahou, Mar 26 '20 at 00:14

score 2 · Accepted Answer · answered Mar 26 '20 at 00:29

Use event.preventDefault() to solve the problem. It is essentially the same as doing return true inside an HTML element attribute like onsubmit, it prevents the default behavior that would normally occur. If you want your custom behavior, which is opening some URLs in a new tab, to occur, you must override the default behavior first.

Also, make sure your form variable is defined somewhere, not sure if it is in your code because it isn't in your second example.

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>

The code is tested and works. (It doesn't work in the snippet due to how snippets react to opening URLs in new tabs, but here's a working JSFiddle.)

How to separate HTML from Javascript in this form?

1 Answers1