How to fix html form from submitting with onsubmit method?

Question

I'm creating an HTML form that need to be first reviewed by javascript and then if a checkbox is selected it process PHP code.

<form class="form" method="POST" action="index.php" onsubmit="return 
gdpr(e)">   

<input class="form-check-input" type="checkbox" value="" name="gdpr" 
id="gdpr_privacy">


<input class="btn btn-primary btn-block" type="submit" name="submit" 
placeholder="Send" id="submit"></input>

</form>

Javascript:

function gdpr(e){
 e.preventDefault();
 e.stopPropagation();
let privacy = document.getElementById('gdpr_privacy').checked;

if(privacy == false){
    window.alert("false");
    return false;
}
else{
     window.alert("true");
    return true;
}
}

Right now the pages refresh too if the checkbox is selected or not selected, it should execute index.php only when return is true.

Answer 1

You have a simple syntax error in the listener:

<form ... onsubmit="return gdpr(e)"> 

There is no global e variable, so the handler throws an error, the code doesn't return false and submission isn't stopped. If you want to pass the associated event object, you have to use event.

<form ... onsubmit="return gdpr(event)"> 

But you really don't care about the event anyway, returning false does the job.

You also have a form control with a name of gdpr. It is a legacy feature that names and ids of elements are made global properties (a very bad idea but it stuck), so the control with name gdpr masks the same-named function in browsers that support the legacy feature, so change its name. Matching the ID is the typical strategy (but IDs on form controls are not really necessary).

function gdpr(e) {
  console.log(`I'm a ${e.type} event`);
  return false;
}

<form onsubmit="return gdpr(event)">
  <input type="checkbox" value="" name="gdpr_privacy" id="gdpr_privacy">
  <input class="btn btn-primary btn-block" type="submit">
</form>

Answer 2

Just use different function name and remove e.preventDefault(); and e.stopPropagation(); , as it is conflicting with other attributes inside your form.

function checkval(event) {

  var privacy = document.getElementById('gdpr_privacy').checked;

  if (privacy == false) {
    window.alert("false");
    return false;
  } else {
    window.alert("true");
    return true;
  }
}

<form class="form" method="POST" action="index.php" onsubmit="return checkval(event);">

  <input class="form-check-input" type="checkbox" value="" name="gdpr" id="gdpr_privacy">


  <input class="btn btn-primary btn-block" type="submit" name="submit" placeholder="Send" id="submit"></input>

</form>

Answer 3

Rename your gdpr function to gdpr1 and also there is no need of object e, so remove it.

Checkout the following code:

function gdpr1(){
 
  let privacy = document.getElementById('gdpr_privacy').checked;

  if(privacy == false){
      window.alert("false");
      return false;
  }
  else{
       window.alert("true");
      return true;
  }
}

<form class="form" method="POST" action="index.php" onsubmit="return gdpr1()">   

  <input class="form-check-input" type="checkbox" value="" name="gdpr" id="gdpr_privacy">


  <input class="btn btn-primary btn-block" type="submit" name="submit" placeholder="Send" id="submit" />

</form>

Answer 4

I guess you are doing something wrong by calling you validation function in onsubmit event. You can try by making the function call onClick event of submit button. Change the button type to button instead of submit and submit it from JavaScript code from where you are returning it true.

try changing you code to following:

HTML:

    <form name="form1" class="form" method="POST" action="index.php">   

    <input class="form-check-input" type="checkbox" value="" name="gdpr" 
    id="gdpr_privacy">


    <input class="btn btn-primary btn-block" type="button" name="submit" 
    placeholder="Send" id="submit" onclick="gdpr(e)></input>

    </form>

JavaScript:

    function gdpr(e){
     e.preventDefault();
     e.stopPropagation();
    let privacy = document.getElementById('gdpr_privacy').checked;

    if(privacy == false){
        window.alert("false");
        return false;
    }
    else{
         document.forms["form1"].submit();
         window.alert("true");
        return true;
    }
    }

Answer 5

Why not use jquery to get the gdpr_privacy value? Or, you can write an onsubmit function

func onsubmit(){
  let gdpr_privacy = $('#gdpr_privacy').val();
  $.post('api/',gdpr_privacy)
  // todo 
}

Answer 6

Remove onsubmit from form tag .

Add onclick=""gdpr(e)" on submit button.

Answer 7

change name attribute of input

<input class="form-check-input" type="checkbox" value="" name="gdpr" id="gdpr_privacy">

to something other than gdpr that's a weird bug, which fixes this issue.