CODEWITHSUNDEEP
javascriptc#htmlasp.net
Learn12
Learn12

Reputation: 216

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

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.

Upvotes: 0

Views: 5663

Answers (3)

user4843530
user4843530

Reputation:

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

Upvotes: 2

Alaa Abuzaghleh
Alaa Abuzaghleh

Reputation: 1009

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

}) ;

Upvotes: 0

Lunny
Lunny

Reputation: 852

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

Upvotes: 0

Related Questions