JavaScript code to stop form submission

前端未结

关注

 12  2091

感情败类

One way to stop form submission is to return false from your JavaScript function.

When the submit button is clicked, a validation function is called. I have a case i

相关标签:

12条回答

长发绾君心

2020-11-21 06:44

Base on @Vikram Pudi answer, we can also do like this with pure Javascript

<form onsubmit="submitForm(event)">
    <input type="text">
    <input type="submit">
</form>

<script type="text/javascript">

    function submitForm(event){
        event.preventDefault();


    }
</script>

0 讨论(0)

名媛妹妹

2020-11-21 06:44

All your answers gave something to work with.

FINALLY, this worked for me: (if you dont choose at least one checkbox item, it warns and stays in the same page)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
            <br>
            <br><b> MY LIKES </b>
            <br>
            First Name: <input type="text" name="first_name" required>
            <br />
            Last Name: <input type="text" name="last_name"  required />
            <br>
            <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
            <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
            <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
            <br>
            <input type="checkbox" name="c1" value="maths"     /> Maths
            <input type="checkbox" name="c1" value="physics"   /> Physics
            <input type="checkbox" name="c1" value="chemistry" /> Chemistry
            <br>

            <button onclick="submit">Submit</button>

            <!-- input type="submit" value="submit" / -->
            <script>
                <!---
                function valthisform() {
                    var checkboxs=document.getElementsByName("c1");
                    var okay=false;
                    for(var i=0,l=checkboxs.length;i<l;i++) {
                        if(checkboxs[i].checked) {
                            okay=true;
                            break;
                        }
                    }
                    if (!okay) { 
                        alert("Please check a checkbox");
                        event.preventDefault();
                    } else {
                    }
                }
                -->
            </script>
        </form>
    </body>
</html>

0 讨论(0)

逝去的感伤

2020-11-21 06:47
The following works as of now (tested in Chrome and Firefox):
```
<form onsubmit="event.preventDefault(); validateMyForm();">
```
Where validateMyForm() is a function that returns false if validation fails. The key point is to use the name event. We cannot use for e.g. e.preventDefault().
0 讨论(0)
发布评论:

提交评论
- 加载中...
北海茫月

2020-11-21 06:47
Lots of hard ways to do an easy thing:
```
<form name="foo" onsubmit="return false">
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
北荒

2020-11-21 06:48
You can use the return value of the function to prevent the form submission
```
<form name="myForm" onsubmit="return validateMyForm();"> 
```
and function like
```
<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>
```
In case of Chrome 27.0.1453.116 m if above code does not work, please set the event handler's parameter's returnValue field to false to get it to work.

Thanks Sam for sharing information.

EDIT :

Thanks to Vikram for his workaround for if validateMyForm() returns false:
```
 <form onsubmit="event.preventDefault(); validateMyForm();">
```
where validateMyForm() is a function that returns false if validation fails. The key point is to use the name event. We cannot use for e.g. e.preventDefault()
0 讨论(0)
发布评论:

提交评论
- 加载中...

悲&欢浪女

2020-11-21 06:50

Simply do it....

<form>
<!-- Your Input Elements -->
</form>

and here goes your JQuery

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});

0 讨论(0)

1 2 下一页