How to make a javascript or php SUCCESS message appear after optin form has been submitted

Question

I am using a custom optin page with a form , Currently the form works like this USER SUBMITS > PAGE REFRESHES FOR HIM > I GET AN EMAIL WITH THE SUBMITTED DATA.

But the user does not get a confirmation message, So most of the times , Users re submit the form thinking it did not worked at the 1st time.

I want to add a Popup/Javascript Success Message to it OR After hitting submit , the user gets redirected to another page .

This is the current form code

<div class="form fix ">
                    <p class="form-text">Fill This Out and See Your <br>Timeshare Report</p>
                    <form name="contactform" action="mail-script.php" method="POST">
                        <label for="fname">First Name:
                            <input type="text" name="fname" id="fname" />
                        </label><br>
                        <label for="lname">Last Name:
                            <input type="text" name="lname" id="lname" />
                        </label><br>
                        <label for="email">Email Address:
                            <input type="text" name="email" id="email" />
                        </label><br>
                        <label for="phone">Phone Number:
                            <input type="text" name="phone" id="phone" />
                        </label><br>
                        <label for="phone">Alternate Phone:
                            <input type="text" name="phone" id="aphone" />
                        </label><br>
                        <label for="resort">Resort Name:
                            <input type="text" name="resort" id="resort" />
                        </label><br>
                        <label for="amount">Amount Owed? $:
                            <input type="number" name="amount" id="amount" />
                            <p style="font-size: 12px !important;margin-top: -14px;padding-right: 30px;text-align:right;">
                            If Paid Off Leave Zero, Else Put Amount</p>
                        </label><br>
                        <div class="checkbox">
                            <div class="check-text fix">
                                <p>I'm Considering To</p>
                            </div>
                            <div class="check-one fix">
                                <input type="checkbox" name="call" id="" value="sell"/> Sell It <br>
                                <input type="checkbox" name="call" id="" value="buy"/> Buy It <br>
                                <input type="checkbox" name="call" id="" value="rent "/> Rent  It 
                            </div>
                            <div class="check-two fix">
                                <input type="checkbox" name="call" id="" value="cancel"/> Cancel Mortgage <br>
                                <input type="checkbox" name="call" id="" value="ownership"/> End Ownership <br>
                                <input type="checkbox" name="call" id="" value="give"/> Give It Back
                            </div>
                        </div>

                                                 <p class="captcha">
                            <img src="captcha_code_file.php?rand=<?php echo rand(); ?>" id='captchaimg' ><br>
                            <label for='message'>Enter the code above here :</label><br>
                            <input id="6_letters_code" name="6_letters_code" type="text"><br>
                            <small>Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh</small>
                        </p>
                        <input id="submit" type="submit" value="" />
                        <p class="submit-text">Ensure all fields are completed and correct, allowing you more benefits, while preventing abuse of our data.</p>
                    </form>
                </div>
            </div>

This is the online url of the form http://timesharesgroup.com/sell/index.html

**********************UPDATE******************************

Solution 1

If you want just a normal pop up button, you could do the following :

$('form').on('submit',function(){
           alert('submitted');
});

If you want a fancier way to do things, you can use AJAX. You could add to your HTML a hidden div with id success, and you do the following:

<span class="success">Thank's for submitting the form</span>

and AJAX is :

$(document).ready(function() {
    $("form[name='contactform']").submit(function() {

        // do the extra stuff here
        $.ajax({
            type: "POST",
            url: "mail-script.php",
            data: $(this).serialize(),
            success: function() {
                $('.success').fadeIn(100).show();

            }
        })

    })
})

Solution 2

You can give appropriate message on form submit event through below function. you can even stop form submitting through event.preventDefault(); if you mentioned inside function.

$( "form" ).submit(function( event ) {
alert( "Handler for submit() called." );
window.location.href="another html page";
});

Comments

[Lost Sould]

Where do I put $('form').on('submit',function(){ alert('submitted'); }); , In the same index page or in another page ?

[callback]

Yes, in the same page where there is the form.

[Lost Sould]

Does not works, I added it just after the form , It showed up on the page too and did not work, Then I added it to the end of the page it still did not worked, then I added it to the mailscript page and after hitting submit I get a blank page

[callback]

What is the behavior you are expecting from it? Dont you get an alert at all when you click the button.?

[callback]

Can you show in your question text how you put the script above?

[callback]

Your quotation mark in can't read the image is breaking your whole code. Fix that and it should be fine.

[Lost Sould]

Thank You figured it out , i had to define the jquery usage in <head>