zoukankan      html  css  js  c++  java
  • mvc中form表单提交的几种形式

    第一种方式:submit 按钮 提交

             <form action="MyDemand" method="post">
                 <span>关键字:</span>
                 <input  name="keywords" type="text" value="@keywords" />
                <input type="submit" value="搜索" />
           </form>

    第二种方式: $("#dataform").ajaxSubmit() 提交

            <form id="dataform" action="UpdateUserInfo" enctype="multipart/form-data" method="post">
                <table style="100%;border:0;" cellpadding="0" cellspacing="0">
                    <tbody>
                        <tr>
                            <td width="40">名字:</td>
                            <td><input type="text" name="nvc_name" id="nvc_name" value="@Model.nvc_name" /></td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center">
                                <input type="button" value="保存" id="btnsubmit" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="http://malsup.github.io/jquery.form.js"></script> //ajaxForm 依赖脚本
    <
    script type="text/javascript"> $(document).ready(function () { $("#btnsubmit").click(function () {if ($("[name='nvc_name']").val() == "") { alert("请填写名字"); $("[name='nvc_name']").focus(); return; } $("#dataform").ajaxSubmit(function (r) { alert(r.Msg); if (r.success) { location.reload(); } }) }) }); </script>

     第三种方式:post 提交

            <table style="100%;border:0px;" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td width="15%" align="right">手机号:</td>
                        <td><input type="text"placeholder="请输入手机号" id="nvc_user_name"/></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <input type="button" value="保存" id="btnsubmit" />
                        </td>
                    </tr>
                </tbody>
            </table>
    
    
    <script type="text/javascript">
    $(function () {
            $("#btnsubmit").click(function () {
                var nvc_user_name = document.getElementById('nvc_user_name');
                $.post('/Interface/ModefiyPwd', {
                    nvc_user_name: nvc_user_name.value,
                }, function (data) {
                    if (data.success) {
                        $("#successdiv").show();
                        $("#editdiv").hide();
                    }
                    else {
                        layer.msg(data.Msg);
                    }
                });
            });
        })
    </script>
     
    
    

     第四种方式:为from 中的button 添加 onclick事件 验证表单 后提交

                <form method="post" action="RecordEdit" id="dataForm">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td align="right">应用路径:</td>
                            <td>
                                <input type="text" name="nvc_app_path" id="nvc_app_path" >
                            </td>
                        </tr>
                        <tr class="b_tr2">
                            <td><input type="button"onclick="CheckForm();" value="保存"></td>
                        </tr>
                    </table>
                </form>
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>
    <script src="~/Scripts/layer/layer.js"></script>
    <script type="text/javascript">
        function CheckForm()
        {
            if ($("#nvc_app_path").val().length == 0) {
                layer.tips("应用路径不能为空", "#nvc_app_path");
                return;
            }
            $("#dataForm").submit();
        }
    </script>

     如果将上面的一行代码改成:

    <input type="button"id="submit" onclick="CheckForm();" value="保存">

    就会出现点击后,没有执行 function CheckForm() 的情况,所以在使用这种方法的时候,就不能在 <input type="button" >中添加  id="submit"

    如果添加的id不等于 “submit” 就没有问题。

    
    
  • 相关阅读:
    LeetCode 1110. Delete Nodes And Return Forest
    LeetCode 473. Matchsticks to Square
    LeetCode 886. Possible Bipartition
    LeetCode 737. Sentence Similarity II
    LeetCode 734. Sentence Similarity
    LeetCode 491. Increasing Subsequences
    LeetCode 1020. Number of Enclaves
    LeetCode 531. Lonely Pixel I
    LeetCode 1091. Shortest Path in Binary Matrix
    LeetCode 590. N-ary Tree Postorder Traversal
  • 原文地址:https://www.cnblogs.com/jinzhaoyoujiu/p/form.html
Copyright © 2011-2022 走看看