Update displayed div on form submit using JQuery

Question

I have a form as follows :

    <div class="myForm">
        <input name="fname" id="fname" value="First Name" onfocus="if (this.value == 'First Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'First Name';}" type="text"  />
        <input type="button" value="Submit" id="btnSubmit">
    </div>

Then, in my JQuery header I have a script defined as follows :

<script>
             $(document).ready(function(){ 
                 $("#btnSubmit").click(function(){
                     var fname = $("#fname").val();
                     $.ajax({
                         url : "updateDb.php", // php file where you write your mysql query to store value
                         type : "POST", // POSTmethod
                         data : {"fistname":fname},
                         success : function(n){
                                                 alert("works"); //function goes here
                         } 
                     });
                 });

What I want is so that when the user presses submit, the form disappears and a simple screen saying "your details have been entered" appears in its stead. I'm thinking the best way of doing this is to have two divs, one as about and another simple

Your details have been entered

kind of jobby. Then when the function is called I could change one of the divs to collapsed and the other to visible.

Is that the best way for me to do this? What are my alternatives? How can I write the code to accomplish this ?

Thanks a lot.

Answer 1

It depends on whether the form will be used again. If not, you can just empty it and provide the text:

$('.myForm').empty().text('Your details have been entered.');

Something simple like that just empties the div and plugs in the text. If you're curious why I didn't use .html() , its just personal preference (I think its more transparent this way), but it is also remarkably faster .

If you want to reload the form to be used multiple times, I would create another div, set it to display:none; , and toggle them:

HTML:

<div class="myFormResponse">Your details have been entered.</div>

CSS:

.myFormResponse {
    display:none;
}

jQuery:

$('.myForm,.myFormResponse').toggle();

This also sets up calling that exact same function if you want to load the form again.

That should handle either scenario.

Answer 2

替换表单的HTML应该可以。

$('#complete-message').html("<h1>Form Submitted!</h1><h2>We will be in touch soon.</h2><img id='checkmark' src='image' />");