Making a form not refresh when you hit the submit button in ASP.NET

Question

I currently have a DIV that is set to show when a customer hits the receipt page and allows them to update the password. I have set up a simple method that will update the password and the functionality works but once I hit the submit, it will refresh like usual and it will clear the page of the receipt content.

<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>

I have a second div that shows when the button is submitted just telling the customer that it was successful but I dont want the contents of the receipt page to be deleted.

My question is how would I submit the contents of the form to update the password without refreshing the page?

Any help is appreciated, thanks.

Hello again techspider, why not recommend using updatepanel? — Learn12, Apr 29 '16 at 21:20
True, why not? It's funny how some people choke on the extra network traffic (a few hundred bytes) but will use 300 dpi (or worse) pictures and icons on their page. — , Apr 29 '16 at 21:31
On the other hand, if you think that this little password form is going to be used A LOT, and you have tons of users hitting this, the increased traffic is something to consider. Update Panels are incredibly easy to use, but they do incur a little overhead. Like any tool, they are not the be-all end-all, but they do have their uses. I think your case is a good place to apply them. — , Apr 29 '16 at 21:45

score 2 · Accepted Answer · 2016-04-29T21:38:20.620

I am assuming the method to handle the add password button is in your c# code behind. Wrap the contents of this div in an update panel, and have the "submit" button not be a submit type but just be a button that uses your [save password] method as its OnClick handler. 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>

In your C# code behind, you probably have some page actions on the Page_Load, just make sure you test for if (!IsPostBack) so you don't reset any information. In your add_passClick event handler, if you add the runat="server" attribute to your password inputs, you can just read their contents straight from the input itself (instantiated in the code behind by the runat attribute).

No, he is using asp.net and c# code behind, if the tags are anything to go by. — , Apr 29 '16 at 21:24
oh, I see what you mean, but I think he is just using the post method to send that back to the server. The fact that he has asp.net and c# on his tags tells me that this is not just an html app — , Apr 29 '16 at 21:34

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

To submit the form without refreshing the page use the jQuery preventDefault()

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

For reference

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

Possible duplicate Using JQuery - preventing form from submitting

edited May 23 '17 at 12:31

Community

1
1

answered Apr 29 '16 at 20:50

Lunny

852
1
10
23

score 0 · Answer 3 · answered Apr 29 '16 at 21:14

here the code that do that

    <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
    });

}) ;

Making a form not refresh when you hit the submit button in ASP.NET

3 Answers3