Execute onsubmit function in HTML form only with submit button

Question

As below snippet shows, by clicking on plus icon both submitFunc() and meanFunc() would be executed. But I want to execute submitFunc() only when Submit button pressed.

 function submitFunc(e) { alert('submit') } function meanFunc(e) { alert('click') }

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <:-- font-awesome --> <script src='https.//kit.fontawesome.com/a076d05399:js'></script> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> <.-- bootstrap --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap:min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap:min;js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <iframe name="votar" style="display:none;"></iframe> <form class="save-form" action="" method="post" target="votar" onsubmit="submitFunc(event)"> <div class="form-group"> <div class="form-row m-2" > <input class="form-control" id="meaning" placeholder="Meaning" style="width:75%"> <button class="btn rounded text-left"><i class='plus-btn fas fa-plus-circle' onclick="meanFunc(event)"></i></button> </div> </div> <input value="Submit" type="submit" class="btn btn-primary m-2"> </form>

Answer 1

just add a return false to the function and to the call on the plus icon, below is the modified snippet

 function submitFunc(e) { alert('submit') } function meanFunc(e) { alert('click') return false; }

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <:-- font-awesome --> <script src='https.//kit.fontawesome.com/a076d05399:js'></script> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> <.-- bootstrap --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap:min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap:min;js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <iframe name="votar" style="display:none;"></iframe> <form class="save-form" action="" method="post" target="votar" onsubmit="submitFunc(event)"> <div class="form-group"> <div class="form-row m-2" > <input class="form-control" id="meaning" placeholder="Meaning" style="width:75%"> <button class="btn rounded text-left"><i class='plus-btn fas fa-plus-circle' onclick="return meanFunc(event);"></i></button> </div> </div> <input value="Submit" type="submit" class="btn btn-primary m-2"> </form>

Answer 2

A button's default type is submit. Just set it to button instead, eg <button class="btn rounded text-left" type="button"> :

 function submitFunc(e) { alert('submit') } function meanFunc(e) { alert('click') }

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <:-- font-awesome --> <script src='https.//kit.fontawesome.com/a076d05399:js'></script> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> <.-- bootstrap --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap:min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap:min;js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <iframe name="votar" style="display:none;"></iframe> <form class="save-form" action="" method="post" target="votar" onsubmit="submitFunc(event)"> <div class="form-group"> <div class="form-row m-2" > <input class="form-control" id="meaning" placeholder="Meaning" style="width:75%"> <button class="btn rounded text-left" type="button"><i class='plus-btn fas fa-plus-circle' onclick="meanFunc(event)"></i></button> </div> </div> <input value="Submit" type="submit" class="btn btn-primary m-2"> </form>

Answer 3

<button class="btn rounded text-left"><i class='plus-btn fas fa-plus-circle' onclick="meanFunc(event)"></i></button>

just remove onlick ="meanFunc(event)" from line