javascript - html，js，关于表单提交的问题-PHP中文网问答

搜索

微信公众号

首页文章专题 AI工具学习编程手册下载最近更新

文章 web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具 AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载 js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

javascript - html，js，关于表单提交的问题

伊谢尔伦 2017-04-10 16:33:03

[JavaScript讨论组]

894

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>test04</title>
</head>
<body>
<form action="http://www.baidu.com">
    <label>输入1跳转到百度&nbsp&nbsp</label><input type="text" id="input">
    <input type="submit" value="提交" id="button">
</form>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#button").click(function(){
        var val = $("#input").val();
        if(val == 1){
            return true;
        }else{
            return false;
        }
    })
})
</script>
</html>

上面这个写法不是很理解，return的值被谁接收到了，是按钮中的属性还是表单中的什么属性，求哪位大大告诉我上面我点击按钮后浏览器具体的实现思路或者步骤，怎么提交的表单

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(4)

怪我咯2017-04-10 16:35:03 4楼

1）return true/false的目的在于阻住form表单的默认提交
2）type为submit的按钮的点击默认行为就是提交表单，如果回调函数不返回值或返回true，那就提交表单
否则默认行为不发生
3）和调用event.preventDefault方法同样的效果

<script type="text/javascript">
$(function(){
    $("#button").click(function(event){
        var val = $("#input").val();
        if(val!=1){
           event.preventDefault();
        }
    })
})
</script>

赞 +0

添加回复

黄舟2017-04-10 16:35:03 3楼

我也不太清楚，但是你可以改写成click（true）和click（false）试试

赞 +0

添加回复

迷茫2017-04-10 16:35:03 2楼

return的值是给submit的啦，如果真则提交，否则不提交

赞 +0

添加回复

黄舟2017-04-10 16:35:03 1楼

这个事件用错了。。。

$("#button").click(function(){
        var val = $("#input").val();
        if(val == 1){
            return true;
        }else{
            return false;
        }
    })

阻止/同意表单提交的事件是onsubmit而不是onclick，你的jq代码写法相当于原生的：

 window.onload=function(){
        document.getElementById('button').onclick=function(){
            var val=document.getElementById('input').value;
            val==1?return true:return false;
        }
  }

这样提交是错误的，正确的应该是：

window.onload=function(){
            document.getElementById('button').onsubmit=function(){
                var val=document.getElementById('input').value;
                val==1?return true:return false;
            }
      }

也就是jq的：

$(function(){
     $('#button').on('submit',function(){
          $('#input').val()==1?return true:return false;
     });
})

这样return的布尔值是代表是否提交，true为同意提交，false为阻止提交

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>