`
moqiang02
  • 浏览: 530665 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
文章分类
社区版块
存档分类
最新评论

type='button'和'submit'的区别

 
阅读更多

今天在对表单的项目进行删除时出现了问题,原因就出现在点击input按钮时,这个input属性是type='button'还是type=‘submit'。


代码大致如下:

<script type="text/javascript">
    //获得选中文件的文件名
    function GetCheckfolderItem() {
        var allSel = '';
        if (document.form1.deleteid.value) //如果document.form1.deleteid不是数组,只是一个元素,那么直接返回这个元素的值
        {
            return document.form1.deleteid.value;
        }
        for (i = 0; i < document.form1.deleteid.length; i++) //length属性可获取数组中元素的个数
        {
            if (document.form1.deleteid[i].checked) {
                if (allSel == ''){ allSel = document.form1.deleteid[i].value;}
                else { allSel = allSel + "," + document.form1.deleteid[i].value;}
            }
        }
        return allSel;
    }

    function DoSubmit(myfolder) {
        var selid = GetCheckfolderItem(); //获取选中邮件的id
        if (selid == '') {
            alert("你没选中任何信息!");
            return false;
        }
        if (window.confirm("你确定要删除这些消息么?")) {
            location = "pm.php?dopost=del&ids=" + selid + "&folder=" + myfolder; //folder判断要删的是收件箱还是发件箱的邮件
        }
    }
</script>
<form action="pm.php" method="post" name="form1">
    <input type='hidden' name='dopost' value='del' />
    <table>
        <tr>
            <th>标题</th>
            <th>收件人</th>
            <th>状态</th>
            <th>发送时间</th>
        </tr>
        {dede:datalist}<!--遍历邮件-->
        <tr>
            <td>
                <input name="deleteid" type="checkbox" value="{dede:field.id/}" /> 一个邮件
            </td>
            <td>mqiang02</td>
            <td>已阅读</td>
            <td>2013-7-7</td>
        </tr>
        {/dede:datalist}
        <tr>
            <td>
                <input type="submit" value="删除选中" onclick="DoSubmit('<?php echo $folder; ?>')"/>
                <button type="button" onclick="DoSubmit('<?php echo $folder; ?>')">删除选中</button>
            </td>
        </tr>
    </table>
</form>
先在pm.php中下一个断点die();阻止pm.php对页面的重定向。
结果当我选中某个邮件后,单击第一个按钮时,浏览器的url是:http://localhost/dede/member/pm.php(所选邮件无法删除)
单击第二个按钮时,浏览器的url是:http://localhost/dede/member/pm.php?dopost=del&ids=10&folder=outbox(邮件正常删除)
通过比较可知type='submit'只执行提交表单这一操作,没有执行location这个跳转链接;而type='button'则在执行完onclick()后,跳转文件在 js文件里控制。

分享到:
评论

相关推荐

    JS中type="button"和type="submit"的区别

    Submit是专门用于提交表单的Button,与Button的区别主要有两点:type=button 就单纯是按钮功能,type=submit 是发送表单。下面通过本文给大家分享JS中type="button"和type="submit"的区别,感兴趣的的朋友一起看看吧

    JS中type=”button”和type=”submit”的区别

    Submit是专门用于提交表单的Button,与Button的区别主要有两点:  type=button 就单纯是按钮功能   type=submit 是发送表单  (1)Submit将表单提交(form.submit())作为其onclick后的默认事件,Button并非如此  ...

    JavaScript在form表单中使用button按钮实现submit提交方法

    submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上。 在javaScript中关于submit和button的...

    button没有指定type为submit点击按钮跳转不到指定url

    今天由于项目需求,需要js控制form的提交,在submit前先进行数据的验证和处理。 html的代码如下: 复制代码代码如下: &lt;div class=”test-ft”&gt; &lt;h3 class=”shouji”&gt;手机号码凶吉&lt;/h3&gt; &lt;form needcheck=”1″ ...

    Ecshop 一键发货

    = 1 && $order.order_status == 1 }&lt;input name="invoice_no" type="text" style="color:#00F" value="" /&gt;&lt;input name="to_shipping" type="submit" style="color:#F00" value="快速发货" class="button"/&gt;{/if}

    JS button按钮实现submit按钮提交效果

    然而form表单的 submit 且一旦提交则全部提交,所以想到的实现方法就是 使用button实现,代码实现见如下: form设置: &lt;form method=”post” name=”linkform”&gt; 隐藏的act方法设置,代码如下: &lt;input ...

    如何去除表单的回车即提交即回车!=提交

    默认情况下,单个输入框,无论按钮的type="submit"还是type="button"类型,回车即提交。 1.当type="submit"时,无论有几个type="text"输入框,回车均表示提交。(submit) 2.当type="button"时,且存在多个输入框...

    js技巧代码

    &lt;input type=button name="Submit1" value="郭强" size=10 class=s02 style="background-color:rgb(235,207,22)"&gt; 3.鼠标移入移出时颜色变化 &lt;input type="submit" value="找吧" name="B1" onMouseOut=this.style....

    200多个实用JS代码

    &lt;input type=button name="Submit1" value="郭强" size=10 class=s02 style="background-color:rgb(235,207,22)"&gt; 3.鼠标移入移出时颜色变化 &lt;input type="submit" value="找吧" name="B1" onMouseOut=this.style....

    js技巧200多例 帮助你完成更好的js效果

    &lt;input type=button name="Submit1" value="郭强" size=10 class=s02 style="background-color:rgb(235,207,22)"&gt;3.鼠标移入移出时颜色变化&lt;input type="submit" value="找吧" name="B1" onMouseOut=this.style....

    html表单<form></form>

    &lt;input name="uid" type="text" value="" maxlength="20"/&gt; ... &lt;input type="button" value="HH" onclick="alert('!@#$%^&*()_+')"/&gt; &lt;input type="submit" /&gt; &lt;input type="reset"&gt; &lt;/form&gt;

    200个js技巧代码

    1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 ...&lt;input type=button name="Submit1" value="郭强" size=10 class=s02 style="background-color:rgb(235,207,22)"&gt;

    asp 批量添加

    &lt;input type="button" value="增加一条数据" onclick="addIt()" /&gt; &lt;form method="post" action="test.asp" id="myForm"&gt; &lt;input type="text" id="prname" name="prname" /&gt; &lt;input type="submit" value=...

    js调用Action

    方法一: 用js函数让网页重定向,window.location.href=‘action...&lt;input type= "button " value= "查询" onclick= "formSubmit('actionName.action?paraName=arg0') "/&gt; 同样,paraName是需要在action中定义过的

    在javaScript中关于submit和button的区别介绍

    submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上,submit会提交表单,button不会提交表单. 两者主要区别在于: submit默认为form提交,可以提交表单

    最常用的200个JS代码.rar

    站长常用的200个JS代码 ... 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 ...input type=button name="Submit1" value="郭强" size=10 class=s02style="background-color:rgb(235,207,22)"&gt; 3。。。。。。

    button在IE6/7下的黑边去除方案

    好久没有处理过IE6下的兼容问题了,今天有朋友碰到过input[type="submit"]和button[type="submit"]在IE6-7下会出现黑边,就算是你在样式中重置了一个border属性也是如此。真是蛋疼的很。后来经过查找相关的资料,...

    CSS 文本域和按钮对齐不一致解决方案

    文字要包含在label标签中,并设置行高,否则文字会与文本框的顶 端对齐。...input type=”submit” name=”button” id=”button” value=”提交” /&gt; &lt;/form&gt; //CSS 代码 复制代码代码

Global site tag (gtag.js) - Google Analytics