Html Question posted in
Some basic documentation can be found here.

Html – Cannot get JavaScript to submit a form when conditional is met

I am trying use JavaScript to make sure the four inputs in a tag all match each other and if they do to submit the form or at least allow the form to submit. However, even if the else condition is satisfied the form will not submit.

$(document).ready(function() {
  $('#bca').submit(function(e) {
    var form = bca;
    e.preventDefault();
    // Check Passwords are the same
    if ($('#InitialsP1').val() != $('#InitialsP2').val() || $('#InitialsP2').val() != $('#InitialsP3').val()) {
      alert('Fields do not match. Correct Fields where necessary');
    } else {
      document.getElementById("bca").submit();
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="invoice-box">
  <form id="bca" action="bca" method="post">
    <input id="InitialsP1" name="InitialsP1" type="text"
          placeholder="Initials" size="5" value="" required 
          style=”float: right”>
    <input id="InitialsP2" name="InitialsP2" type="text"
          placeholder="Initials" size="5" value="" required 
          style=”float: right”>
    <input id="InitialsP3" name="InitialsP3" type="text"
          placeholder="Initials" size="5" value="" required 
          style=”float: right”>
    <input id="InitialsP4" name="InitialsP4" type="text"
          placeholder="Initials" size="5" value="" required 
          style=”float: right”>
    <div class="form-group">
      <div class="col-md-12 text-center">
        <button id="submit" type="submit" class="btn btn-primary btn-lg">Submit</button>
      </div>
    </div>
  </form>
</div>
Tags:

3

Answers


  1. 0

    You have an initial problem in that onclick="getSignature();" is throwing an error because it doesn’t exist.

    You’re also getting an error "submit is not a function" in your console log when you submit the form (you can see this when you submit the form from your code snippet):

    {
  "message": "Uncaught TypeError: document.getElementById(...).submit is not a function",
  "filename": "https://stacksnippets.net/js",
  "lineno": 46,
  "colno": 38
}

    It’s some kind of conflict with the id="submit" on your submit button causing the form not to submit. If you change your submit button html to

    <button id="btn-submit" type="submit" class="btn btn-primary btn-lg">Submit</button>

    it should work.

    Login or Signup to reply.
  2. 0

    Your form already using automatic HTML5 validation (use of the required attribute)
    you must add your equality validation on your 4 elements.

    proceed as follows:

    const
  myForm = document.querySelector('#bca')
, errMsg = { badField : `this Field doesn't match.` }
, setError = elm =>
    {
    elm.setCustomValidity( errMsg.badField );
    elm.oninput =_=>
      {
      elm.setCustomValidity(''); // clear error message
      elm.oninput = null;        // self remove setError assignation
      }
    };

myForm.onsubmit = e =>
  {
  let ErrField = null;  

  if ( badEQ( myForm.InitialsP2 )
    || badEQ( myForm.InitialsP3 )
    || badEQ( myForm.InitialsP4 )
    ) {
    setError( ErrField );
    myForm.reportValidity();
    return false
    }
  
  function badEQ( fielElm )
    {
    let notEQ = myForm.InitialsP1.value !== fielElm.value;
    if (notEQ) ErrField = fielElm;
    return notEQ;
    }
  }
    label {
  display   : block;
  margin    : .6rem 0;
  font-size : .8rem;
  }
label > input {
  display   : block;
  font-size : 1rem;
  width     : 8rem;
  padding   : 0 1rem;
  }
button {
  width: 5em;
  }
    <form id="bca" action="bca" method="post">
  <label> 
    Initials:
    <input name="InitialsP1" type="text" value="" autocomplete="off" required >
  </label>
  <label> 
    Initials:
    <input name="InitialsP2" type="text" value="" autocomplete="off" required >
  </label>
  <label> 
    Initials:
    <input name="InitialsP3" type="text" value="" autocomplete="off" required >
  </label>
  <label> 
    Initials:
    <input name="InitialsP4" type="text" value="" autocomplete="off" required >
  </label>

  <button>Submit</button>
  <button type="reset">Reset</button>
</form>
    Login or Signup to reply.
  3. 0

    If you want to do validations first then form will be submitted so this could be done by changing submit event to button’s click event.

    $(document).ready(function() {
  $('#submit').click(function(e) {
    // Check Passwords are the same
    if ($('#InitialsP1').val() != $('#InitialsP2').val() || $('#InitialsP2').val() != $('#InitialsP3').val()) {
      alert('Fields do not match. Correct Fields where necessary');
    } else {
      document.getElementById("bca").submit();
    }
  });
});
    <button id="submit" class="btn btn-primary btn-lg">Submit</button>

    And there is no need of onclick="getSignature();"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search