Submit form when Clicking "Enter" button, with validation

Question

Here I have a form , I need to submit the form when "enter" key Pressed, I have given the button type as "submit" , so that the form is submitted when enter pressed, at the same time ,i am calling a function with validation and confirmation, it not asking for the confirmation message and closed and submitted, My expected result is , when i press enter it should show the confirmation/Validation msg and I press enter again it should submit. Below is my code

            <form name="form1" id="form1" action="SizeMaster.php" enctype="multipart/form-data" method="post">
             <input type="text" class="form-control" name="txtSizeName"  value="" />
             <button type="submit" onClick="return fnSave()" class="btn btn-success waves-effect"><i class="material-icons">save</i><span>SAVE</span></button>
             </form>


              function fnSave(){
              if(form1.txtSizeName.value==""){
                alert("Please Enter size");
                return false;
              }
                  (!confirm("Are You Sure Want to confirm the Request?")){
              return false;
              }
              form1.action="SizeMaster.php?Mode=SAVE";
 }

ChangeonClick to onsubmit (https://www.w3schools.com/jsref/event_onsubmit.asp) — Sukanya Purushothaman, Aug 28 '19 at 05:56
What have you tried to debug your problem? Is there any handler registered for `onSubmit`? The code only shows a handler for an `onClick` event for the button, which is obviously not triggered when you do not click on that button — Nico Haase, Aug 28 '19 at 06:00

Nijin P J · Answer 1 · 2019-08-28T06:24:01.683

2

$(document).on("submit", "form#form1", function (event) {
event.preventDefault();
//put your conditions here
if(form1.txtSizeName.value==""){
     alert("Please Enter size");
      return false;
    }
});

//OR


$(document).keypress(function (e) {
        if (e.which == 13) {
            $('form#form1').submit();
        }
    });

edited Aug 28 '19 at 06:24

answered Aug 28 '19 at 06:18

Nijin P J

1,302
1
9
15

score 0 · Answer 2 · answered Aug 28 '19 at 06:04

Please call your function on onClick event. And you have a missing if before confirm.

Try this.

 <form
  name="form1"
  id="form1"
  onSubmit="return fnSave()"
  action="SizeMaster.php"
  enctype="multipart/form-data"
  method="post"
>
  <input type="text" class="form-control" name="txtSizeName" value="" />
  <button type="submit" class="btn btn-success waves-effect">
    <i class="material-icons">save</i><span>SAVE</span>
  </button>
</form>

<script>
  function fnSave() {
    if (form1.txtSizeName.value == "") {
      alert("Please Enter size");
      return false;
    }
    if (!confirm("Are You Sure Want to confirm the Request?")) {
      return false;
    }
    form1.action = "SizeMaster.php?Mode=SAVE";
  }
</script>

score -1 · Answer 3 · answered Aug 28 '19 at 05:58

-1

Make use of onsubmit

<form onsubmit="return fnSave()" name="form1" id="form1" action="SizeMaster.php" enctype="multipart/form-data" method="post">
     <input type="text" class="form-control" name="txtSizeName" value="" /> 
    <button type="submit" class="btn btn-success waves-effect"><i class="material-icons">save</i><span>SAVE</span></button> 
</form>

answered Aug 28 '19 at 05:58

tom

9,550
6
30
49

One should better use proper JS handlers nowadays instead of mixing that up in the markup – Nico Haase Aug 28 '19 at 06:01
The SO asked why the function does not behave as expected not for best practice. – tom Aug 28 '19 at 06:41

score -1 · Answer 4 · answered Aug 28 '19 at 05:59

-1

you should add the action listener on the form element's onSubmit attribute

<from onSubmit='fnSave()' > ...

then on the fnSave() function you will get the event object on the this variable. then call this.preventDefault() to stop the form from submitting. after that you can do your validation and other action

answered Aug 28 '19 at 05:59

Zemichael Tesfaye

125
7

One should better use proper JS handlers nowadays instead of mixing that up in the markup – Nico Haase Aug 28 '19 at 06:01

Submit form when Clicking "Enter" button, with validation

4 Answers4