Search code examples
javascripthtmljqueryconfirm

How do I redirect to same page


How should I change my javascript code to prevent it link to another page after click cancel on the window confirm()?

Or I should use jQuery to solve this problem?

Please help. Thanks

function checktext() {
  var x = document.forms["myTable"]["id"].value;
  if (isNaN(x)) {
    alert("Please check ID!");
    return false;
  }
}

function myFunction() {
  var check = confirm("Are You Confirm To Submit?");
  if (check == true) { 
      console.log("yes");
  }
}
<form name="table_field" id="insert_form" method="post" onsubmit="return checktext()" action="apply.inc.php">
  <hr>
  <h1 class="text-center">Overtime Table</h1>
  <hr>
  <table class="table table-bordered" id="myTable">
    <tr>
      <th>ID</th>
      <th>Full Name</th>
    </tr>
    <tr>
      <td><input class="form-control" name="id[]" type="text" id="id" required></td>
      <td><input class="form-control" name="name[]" type="text" id="name" required></td>
    </tr>
  </table>

  <b>Send To:</b>
  <select class="form-control" name="options">
    <option value="-----" id="-----" hidden>-----</option>
    <option value="Table_A">Table A</option>
    <option value="Table_B">Table B</option>
  </select>
  <input type="submit" name="save" id="save" value="Submit" onclick="myFunction()">
</form>


Solution

  • When you submit a form, a submit event is called. That event contains some information and actions that are stored in an SubmitEvent object. The object is available when you listen for the event through the onsubmit attribute, onsubmit property or through addEventListener.

    I would highly recommend to use addEventListener as the attribute version is just an old technology that does not want to seem to die and has weird side effects that addEventListener has not.

    When you don't want a form to submit while submitting, call the preventDefault() method on the event object. That will make sure that your form will not send and not reload the page when you want it to.

    var form = document.getElementById('insert_form');
    
    function onSubmit(event) {
      var x = event.target.elements["id"].value;
      if (isNaN(x)) {
        alert("Please check ID!");
        event.preventDefault();
        return false;
      }
      
      var check = confirm("Are You Confirm To Submit?");
      if (check == true) { 
        console.log("yes");
      } else {
        event.preventDefault();
      }
    }
    
    form.addEventListener('submit', onSubmit);
    <form name="table_field" id="insert_form" method="post" action="apply.inc.php">
      <hr>
      <h1 class="text-center">Overtime Table</h1>
      <hr>
      <table class="table table-bordered" id="myTable">
        <tr>
          <th>ID</th>
          <th>Full Name</th>
        </tr>
        <tr>
          <td><input class="form-control" name="id[]" type="text" id="id" required></td>
          <td><input class="form-control" name="name[]" type="text" id="name" required></td>
        </tr>
      </table>
    
      <b>Send To:</b>
      <select class="form-control" name="options">
        <option value="-----" id="-----" hidden>-----</option>
        <option value="Table_A">Table A</option>
        <option value="Table_B">Table B</option>
      </select>
      <input type="submit" name="save" id="save" value="Submit">
    </form>