CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
user2162270
user2162270

Reputation:

How to prevent the button from submission the form after sending it?

For some reason the following form is sending the submission many times, I have also noticed that even when you fill it up and click send, the button will be disabled using CSS "i.e. the colour will change and it will have a default courser" but every time you click the button again it will send again and again. Is it something to do with preventing to send again once sent? if so how do I do that? what I am doing wrong?

Live preview: loaistudio.com/contact

HTML: 

<form id="contactForm" action="email.php" method="post" name="contactForm">
    <div class="name">
        <label>Your Name</label>
        <input id="name" type="text" placeholder="Enter Name" required>
    </div>
    <div class="email">
        <label>Email Address</label>
        <input id="email" type="email" placeholder="Enter Email" required>
    </div>
    <div class="message">
        <label>Message</label>
        <textarea id="message" required></textarea>
    </div>
    <button id="submit" type="submit">Send</button>
</form>

JavaScript:

$("#contactForm").submit(function (event) {

    /* stop form from submitting normally */
    event.preventDefault();

    /* get some values from elements on the page: */
    var $form = $(this),
        $submit = $form.find('button[type="submit"]'),
        name_value = $form.find('input[id="name"]').val(),
        email_value = $form.find('input[id="email"]').val(),
        message_value = $form.find('textarea[id="message"]').val(),
        url = $form.attr('action');

    /* send the data using post */
    var posting = $.post(url, {
        name: name_value,
        email: email_value,
        message: message_value,
        ajax: 1
    });

    posting.done(function (data) {
        $form.find('span.error').remove();

        if (data == "1") {

            /*Change the button text.*/
            $submit.text('Sent. Thank You!');
            $submit.addClass("sent");

        } else {
            $submit.after('<span style="display: inline-block; padding: 20px 5px; color: #bd3d3d" class="error">Failed to send the message, please check your entries and try again.</span>');
            /*Change the button text.*/
            $submit.text('Try Again');
        }
    });
});

PHP

<?php

    if(isset($_POST['name']) && $_POST['email'] && $_POST['message']) {

    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    $to = "[email protected]";
    $subject = "New Message From: $name";
    $message .= "$messege";

    $headers  = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
    $headers .= 'From: '.$email . "\r\n";
    $mailed = ( mail($to, $subject, $message, $headers) );

    if( isset($_POST['ajax']))
        $response = ($mailed) ? "1" : "0";
    else
        $response = ($mailed) ? "<h2>Success!</h2>" : "<h2>Error! There was a problem with sending.</h2>";
        echo $response;
        }
    else
        {
        echo "Form data error!";
    }
?>

CSS: 

/*Contact Form*/
#contactForm {
    width: 45%;
    display: inline-block;
    vertical-align: middle;
}

    #contactForm label {
        display: block;
        margin-bottom: 10px;
    }

    #contactForm input, #contactForm textarea {
        color: #999999;
        border: 1px solid #CED1D6;

        width: 100%;
        padding: 10px 10px;
        margin-bottom: 15px;

        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;

        -webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -ms-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
    }

        #contactForm input:hover, #contactForm input:focus, 
        #contactForm textarea:hover, #contactForm textarea:focus {
            color: #49AB8E;
            border: 1px solid #49AB8E;
        }


        #submit {
            color: #FFFFFF;
            background: #C0C4CA;

            width: 100%;
            padding: 10px 10px;

            border-radius: 2px;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
        }

            #submit:hover, 
            #submit:active {
                background: #49AB8E;
            }


            /*Disable The Contact Form When Sent*/
            .sent {
                color: #F2F2F2;
                cursor: default;
            }

                #submit.sent:hover, 
                #submit.sent:active {
                    background: #C0C4CA;
                }

Upvotes: 0

Views: 636

Answers (5)

ngDev
ngDev

Reputation: 69

Once the for successfully sent, Then add the following line of code there 

$("#submit").attr('disabled', 'disabled');

///
if (data == "1") {

        /*Change the button text.*/
        $submit.text('Sent. Thank You!');
        $submit.addClass("sent");
       $("#submit").attr('disabled', 'disabled');


 }

I am sure this is going to help you..

Upvotes: 1

Anup
Anup

Reputation: 9738

This will look Nice :-

$("#submit").attr('disabled', 'disabled');
$("#submit").attr("value", "Please Wait...");

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can use

$("#contactForm").submit(function (event) {
$("#submit").attr("disabled", true);
}

Upvotes: 0

James Hibbard
James Hibbard

Reputation: 17775

Disabling the button using CSS is not enough.

Try this:

$("#contactForm").submit(function (event) {
  $("#submit").attr('disabled', true);
  ...
});

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

$("#contactForm").submit(function (event) {
   $("#submit").hide();  // add this line right after the above line

This will hide the submit button immediately after its clicked on once, so it won't allow for double, triple, etc clicks.

Upvotes: 0

Related Questions