CODEWITHSUNDEEP
javascriptphpjqueryhtml
hOOks7
hOOks7

Reputation: 71

PHP email form that responds to current html rather than opening a 'thank you' page

I've set up an email form on my website and right now it sends users to a thank you page using header('Location:emailConfirmation.html');. I want to try something else and replace the html of the form with a message using javascript. i.e. call a function like this

function emailConfirmed()
{
    $('#email').load('emailConfirmation.html');
}

Something less intrusive, that doesn't leave the main page. Is something like this possible?

Here's my current form code.

<form method="POST" name="contactform" action="scripts/contact-form-handler.php">
    <p>
        <label for='name'>Your Name:</label> <br>
        <input type="text" name="name">
    </p>
    <p>
        <label for='email'>Email Address:</label> <br>
        <input type="text" name="email"> <br>
    </p>
    <p>
        <label for='message'>Message:</label> <br>
        <textarea name="message" maxlength="600" cols="25" rows="6" style="margin: 2px; width: 300px; height: 110px;resize:none;"></textarea>
    </p>
    <input type="submit" value="Submit"><br>
</form>

<script language="JavaScript">
    var frmvalidator  = new Validator("contactform");
    frmvalidator.addValidation("name","req","Please provide your name");
    frmvalidator.addValidation("email","req","Please provide your email");
    frmvalidator.addValidation("email","email","Please enter a valid email address");
</script>

Upvotes: 0

Views: 141

Answers (3)

Renish Khunt
Renish Khunt

Reputation: 5824

you want to load html file. done using this code i hope this is working for you.

$( "#email" ).load( "emailConfirmation.html", function() {
         alert( "Load was performed." );
});

please try and More Detail

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

Then you should use $.ajax() to send mail like,

SCRIPT

$(function(){
    $('#submit').on('click',function(){
        $.ajax({
           url:$('form[name="contactform"]').attr('action'),
           data:$('form[name="contactform"]').serialize(),
           type:'POST',
           success:function(){
              $('#email').load('emailConfirmation.html');
           }
        });
    });
});

Add an id to your submit button like,

<input type="submit" value="Submit" id="submit"><br>

Also to get the the message in #email add a div after your form like,

<form ...>
   ....
</form>
<div id="email"></div><!-- Element to get the message afte ajax success callback -->

Upvotes: 2

Birrel
Birrel

Reputation: 4834

If the main part of the page is within a div (say, "main") then you can do something like this:

$('#main').html("Thank you.<br/><br/>Your form has been sent.");

If you'd like to include more content, you can load it from an external file or even just hard-code it into the JavaScript.

Upvotes: 0

Related Questions