Question

我目前有一个DIV，用于显示客户何时点击收据页面并允许他们更新密码。我已经设置了一个简单的方法来更新密码和功能，但是一旦我点击提交，它将像往常一样刷新，它将清除收据内容的页面。

<form method="post" action="#" runat="server" name="edit_password_form">
    <div id="edit_password_popup">
        <table width="390" align="center" padding="10">
            <tr>
                <td><span class="error_field">*</span>Password:<br>
                    <input type="password" name="password_1" id="password_1" size="19" >
                </td>
                <td><span class="error_field">*</span>Confirm Password:<br>
                    <input type="password" name="password_2" id="password_2" size="19">
                </td>
            </tr>

             <tr>
                <td><input type="submit" value="Add Password" id="add_pass" alt="Add Password"></td>
                <td><input type="button" value="No Thanks" id="no_thanks" alt="No Thanks"></td>
             </tr>
        </table>
    </div>
</form>

我有第二个div，它显示提交按钮时只是告诉客户它是否成功但我不希望删除收据页面的内容。

我的问题是如何在不刷新页面的情况下提交表单内容以更新密码？

感谢任何帮助，谢谢。

Answer 1

我假设处理添加密码按钮的方法在你的c＃代码后面。在更新面板中包装此div的内容，并使“提交”按钮不是提交类型，而只是一个使用[save password]方法作为其OnClick处理程序的按钮。 HTML：

<div id="edit_password_popup">
    <asp:UpdatePanel id="PasswordPopup" runat="server" UpdateMode="Conditional"><ContentTemplate>
    <table width="390" align="center" padding="10">
        <tr>
            <td><span class="error_field">*</span>Password:<br>
                <input runat="server" type="password" name="password_1" id="password_1" size="19" >
            </td>
            <td><span class="error_field">*</span>Confirm Password:<br>
                <input runat="server" type="password" name="password_2" id="password_2" size="19">
            </td>
        </tr>

         <tr>
            <td><button id="add_pass" OnClick="add_passClick" AutoPostBack="true" alt="Add Password">Submit</button></td>
            <td><input type="button" value="No Thanks" id="no_thanks" alt="No Thanks"></td>
         </tr>
    </table>
    </ContentTemplate></asp:UpdatePanel>
</div>

在您的C＃代码中，您可能在Page_Load上有一些页面操作，只需确保您测试if (!IsPostBack)，这样就不会重置任何信息。在add_passClick事件处理程序中，如果将runat="server"属性添加到密码输入中，则可以直接从输入本身读取其内容（在runat属性后面的代码中实例化）。

Answer 2

要在不刷新页面的情况下提交表单，请使用jQuery preventDefault（）

$(document).ready(function(){
 $("form").submit(function(e){
        e.preventDefault();
    });
}

供参考

https://api.jquery.com/event.preventdefault/

可能重复 Using JQuery - preventing form from submitting

Answer 3

这里是执行该操作的代码

    <form method="post" action="#" runat="server" name="edit_password_form" id="edit_password_form">
    $(document).on('click', '#add_pass', function(){
        $.ajax({
      type: "POST",
      url: url,
      data: $("#edit_password_form").serialize(),
      success: function(data){//read data back from server and do what ever you want},
      dataType: dataType
    });

}) ;

在ASP.NET中单击“提交”按钮时，表单不会刷新

3 个答案: