Hide plaintext text based on send result

Question

Firstly, I apologize for opening the question, which can be considered as the main one, but he studies himself, and SO really helped me when I got stuck, as it is now.

I have a link that opens modalbox, then I use some JQUERY and ajax to prevent the modal from closing after the user has submitted the form

Image 1 form BEFORE shipping

Image 2 of the form AFTER submitting

My problem

In image1, the text circled should NOT be displayed when the modal file is open.

Depending on the result of submitting the form, the text in image2 should be displayed, or by displaying:

• Successful performance
• Bad view

HTML FORMAT

 <div id="inline3" style="width:400px;display: none;">
        <h3>Withdraw</h3>
        <form name="withdrawForm" action="" id="withdraw-form" method"post">
        Amount<br /> <input type="text" name="amount" value="" /><br />
        <input type="submit" value="Withdraw" name="withdraw" class="buttono" />
        </form>
        <div class="form-feedback">
        Thank You We will Get Back to you 
        </div>
         <div class="form-feedback">
        Ooops....Something Went Wrong
        </div>
       <div> 

JQuery

$(function(){
    $("#withdraw-form").submit(function(e){
    e.preventDefault(); 

    $form = $(this);

    $.post(document.location.url, $(this).serialize(), function(data){
        $feedback = $("<div>").html(data).find(".form-feedback").hide();
        $form.prepend($feedback)[0].reset();
        $feedback.fadeIn(1500)
    })

    });
})

, ,

- , , , :

Answer 1

@Daniel , , display:none div . , , , display:none

Answer 2

, , html-

    <div class="form-feedback">
    Thank You We will Get Back to you 
    </div>
     <div class="form-feedback">
    Ooops....Something Went Wrong
    </div>
   <div> 

.

$feedback

$feedback = $('<div></div>').html(data)

Answer 3

, ( ) . , .

• 1. " ", , , .

• 2. ( CSS) / / , .

• 3. - (.. HTML- ).

,

" ", , - :

    // Ajax form submission                  
            submitHandler: function(form)
            {
                $(form).ajaxSubmit(
                {
                    beforeSend: function()
                    {
                        $('sample-form button[type="submit"]').attr('disabled', true);
                    },
                    success: function()
                    {
                        $("#sample-form").addClass('submitted');
                    }
                });
            }

2, , "" CSS , . ".ajaxSubmit" , , . http://jquery.malsup.com/form/

, "" "" CSS- .

    /* initial state */
.sample-form .message {
    display: none;
    }

    /* submitted state */
.sample-form.submitted .message {
    display: block;
    padding: 25px 30px;
    background: transparent;
    font: 300 18px/27px 'Open Sans', Helvetica, Arial, sans-serif;
    text-align: center;
    }

, , 3 HTML , , javascript-.

<!-- Sample Form-->
            <form action="sample-form-process.php" method="post" id="sample-form-1" class="sample-form">

                <fieldset>                  
                    <section>
                        <label class="input">
                            <input type="text" name="name" id="name" placeholder="Your name">
                        </label>
                    </section>

                    <section>
                        // next form input field...
                    </section>

                </fieldset>

                <footer>
                    <p class="text-center">
                    <button type="submit">Fill the form to download!</button>
                    </p>

                </footer>

            <!-- Your Message Block -->
                <div class="message">
                    <p>Thank you for your info! Bla bla bla...</p>
                </div>

            </form>         
            <!-- End Sample Form-->

Notice how we added the “submitted” class to our request form after a successful callback to the form and how we used CSS to distinguish ourselves from the “hide” and “show” states of our message. Finally, use the “div” to hold our message block for viewing on the Internet.

We hope this helps you improve your thinking and problem-solving skills when processing events using AJAX forms.