Initialize Javascript In Php Script For A Contact Form

Hi there working on a simple contact form.

Solution 1:

Is it possible to change the button innerhtml to sent after the php script is successfully done?

If you reload the same template you can have the button rendered as sent. You have to track the state of the form though on the backend. YOu could change your form to submit through javascript using ajax. After a successful response is received you can change the innerHTML.

Also how can I avoid the redirection to the mail.php?

Don't submit the form. Use javascript to collect values and make an ajax request.

Solution 2:

You should use an XHR (AJAX) request.

Rather than writing plain javascript like in your example, you'll get further faster with a javascript framework such as jQuery.

Something like this should do the trick:

$('form#formId').submit(function(){

    //set submit label to sending
    $('form#formId #submit').html('sending');

    $.post('mail.php', function(){
        //set submit label to sent
        $('form#formId #submit').html('sent');
    });

    //returning false to prevent native submission of form.returnfalse;

});

You'll need to give your form an ID attribute so that you can selectively select it.