CODEWITHSUNDEEP
javascriptjquerycsshtml
Simon Kiely
Simon Kiely

Reputation: 6050

Update displayed div on form submit using JQuery

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.

Upvotes: 1

Views: 1181

Answers (2)

PlantTheIdea
PlantTheIdea

Reputation: 16369

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.

Upvotes: 1

Jackson Egan
Jackson Egan

Reputation: 2735

Replacing the HTML for the form should do it.

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

Upvotes: 0

Related Questions