首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML: JavaScript:阻止表单提交并调用Javascript函数

HTML: JavaScript:阻止表单提交并调用Javascript函数
EN

Stack Overflow用户
提问于 2013-01-23 12:40:32
回答 6查看 104.2K关注 0票数 29

当表单中的提交按钮被按下时,我想进行AJAX调用。InFact我不能删除<form>,因为我也想做客户端验证。我试过这个代码。

代码语言:javascript
复制
<form name="search" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit" onclick="makeSearch()"/>
</form>

JS

代码语言:javascript
复制
function makeSearch(){
alert("Code to make AJAX Call");
}

使用此代码后,alert()不会显示,但页面会重新加载。我想阻止页面重载并调用JS函数。

谢谢

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2013-01-23 13:16:47

onsubmit属性添加到form标记:

代码语言:javascript
复制
<form name="search" onsubmit="return makeSearch()" >
  Name: <input type="text" name="name1"/>
  Age: <input type="text" name="age1"/>
  <input type="submit" name="Submit" value="Submit"/>
</form>

和javascript在末尾添加return false

代码语言:javascript
复制
function makeSearch() {
  alert("Code to make AJAX Call");
  return false;
}
票数 46
EN

Stack Overflow用户

发布于 2013-01-23 12:43:06

正确的jQuery方式应该是:

代码语言:javascript
复制
$("form").on('submit', function (e) {
   //ajax call here

   //stop form submission
   e.preventDefault();
});

正如您所说的,您还可以删除<form>元素,只需将ajax调用绑定到按钮的click事件。

票数 30
EN

Stack Overflow用户

发布于 2013-01-23 13:12:20

使用 jQuery.post,并更改提交按钮。

提交按钮是为通过POST (native method, not ajax)将数据发送到服务器而创建,我建议仅在特殊情况下使用它,例如上传文件时。

如果你继续使用提交按钮来处理ajax请求,你会遇到很多IE的问题。

代码语言:javascript
复制
    <html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script language="javascript">
            function makeSearch()
            {
                if(validateIdata())
                {
                    alert("send ajax request");
                    return;
                    $.ajax({    
                      type: 'POST',
                      url: url, //- action form
                      data: {name1:$('#name1').val(),age1:$('#age1').val()},
                      success: function(){
                        alert('success');
                      }
                    });
                }
            }

            function validateIdata()
            {
                if($('#name1').val() =='')
                {
                    alert("Invalid Name");
                    return false;
                }

                if($('#age1').val() =='')
                {
                    alert("Invalid Age");
                    return false;
                }

                return true;
            }
        </script>
    </head>
    <body>
        <form name="search" >
        Name: <input type="text" id="name1" name="name1"/>
        Age: <input type="text" id="age1" name="age1"/>
        <input type="button" name="Submit" value="Submit" onclick="makeSearch()"/>
    </form>
    </body>
    </html>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14472583

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档