JavaScript代码停止提交表单

2020/10/15 01:01 · javascript ·  · 0评论

停止提交表单的一种方法是从JavaScript函数返回false。

单击提交按钮后,将调用验证功能。我有一个表单验证案例。如果满足该条件,则调用一个名为returnToPreviousPage()的函数

function returnToPreviousPage() {
    window.history.back();
}

我正在使用JavaScript和Dojo Toolkit

而不是返回上一页,它提交了表单。如何终止提交并返回上一页?

您可以使用函数的返回值来防止表单提交

<form name="myForm" onsubmit="return validateMyForm();"> 

和功能像

<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>

如果Chrome 27.0.1453.116 m如果上述代码不起作用,请将事件处理程序的参数的returnValue字段设置为false,以使其正常工作。

感谢Sam共享信息。

编辑:

感谢Vikram的解决方法,如果validateMyForm()返回false:

 <form onsubmit="event.preventDefault(); validateMyForm();">

其中validateMyForm()是一个函数,如果验证失败,该函数将返回false。关键是使用名称事件。我们不能用于egepreventDefault()

使用防止默认

Dojo工具包

dojo.connect(form, "onsubmit", function(evt) {
    evt.preventDefault();
    window.history.back();
});

jQuery的

$('#form').submit(function (evt) {
    evt.preventDefault();
    window.history.back();
});

香草JavaScript

if (element.addEventListener) {
    element.addEventListener("submit", function(evt) {
        evt.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(evt){
        evt.preventDefault();
        window.history.back();
    });
}

到目前为止,以下各项有效(在Chrome和Firefox中测试):

<form onsubmit="event.preventDefault(); validateMyForm();">

validateMyForm()是一个函数,false如果验证失败,该函数将返回关键是要使用名称event我们不能用于e.preventDefault()

只需使用简单button的按钮而不是提交按钮即可。并调用一个JavaScript函数来处理表单提交:

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

script标签内的功能

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

您也可以尝试 window.history.forward(-1);

做一件简单事情的许多困难方法:

<form name="foo" onsubmit="return false">

基于@Vikram Pudi的答案,我们也可以使用纯Javascript做到这一点

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

<script type="text/javascript">

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


    }
</script>

您所有的答案都可以使用。

最终,这对我有用:(如果您不选择至少一个复选框,它会警告并停留在同一页面上)

<!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>

我建议不要使用onsubmit脚本,而是在脚本中附加事件。

var submit = document.getElementById("submitButtonId");
if (submit.addEventListener) {
  submit.addEventListener("click", returnToPreviousPage);
} else {
  submit.attachEvent("onclick", returnToPreviousPage);
}

然后使用preventDefault()(或returnValue = false用于较旧的浏览器)。

function returnToPreviousPage (e) {
  e = e || window.event;
  // validation code

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}

假设您有一个与此类似的表格

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

这是ConfirmAction函数的javascript

<script type="text/javascript">
    function confirmAction(e)
    {
        var confirmation = confirm("Are you sure about this ?") ;

        if (!confirmation)
        {
            e.preventDefault() ;
            returnToPreviousPage();
        }

        return confirmation ;
    }
</script>

这适用于Firefox,Chrome,Internet Explorer(edge),Safari等。

如果不是这种情况,请通知我

Hemant和Vikram的答案对我来说不太适合在Chrome中使用。event.preventDefault(); 脚本阻止页面提交,无论通过还是未通过验证。相反,我不得不移动event.preventDefault();。进入if语句,如下所示:

    if(check if your conditions are not satisfying) 
    { 
    event.preventDefault();
    alert("validation failed false");
    returnToPreviousPage();
    return false;
    }
    alert("validations passed");
    return true;
    }

感谢Hemant和Vikram使我走上正轨。

例如,如果您在表单上有提交按钮,为了停止其传播,只需编写event.preventDefault();即可。在单击提交按钮或输入按钮时调用的功能中。

简单地做...。

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

这是您的JQuery

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});
本文地址:http://javascript.askforanswer.com/javascriptdaimatingzhitijiaobiaodan.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!