Form Submit with Fade Out Message using Jquery Ajax PHP

Php

Video is ready, Click Here to View ×


In this video you can show form submit with fade out message using Jquery Ajax in php. Source Code – http://www.webslesson.info/2016/04/form-submit-with-fade-out-message-using-jquery-ajax-php.html

34 thoughts on “Form Submit with Fade Out Message using Jquery Ajax PHP

  1. it,s not working man please someone help me….!!! very argent plsz plsz plsz

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script&gt;
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script&gt;
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    </head>
    </body>
    <div class="col-md-6">
    <div class="c-contact">
    <div class="c-content-title-1">
    <h3 class="c-font-uppercase c-font-bold text-info" >Contact Us</h3>
    <form id="contactFormAdvanced" enctype="multipart/form-data">
    <input type="hidden" value="true" name="emailSent" id="emailSent">

    <div class="form-group">
    <input type="text" value="" data-msg-required="Please enter your name." placeholder="Your Name…" maxlength="100" class="form-control c-square c-theme input-lg" name="name" id="yname" required="">
    </div>
    <div class="form-group">
    <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." placeholder="Your Email…" maxlength="100" class="form-control c-square c-theme input-lg" name="email" id="yemail" required="">
    </div>
    <div class="form-group">
    <input type="phone" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." placeholder="Your Phone No…" maxlength="100" class="form-control c-square c-theme input-lg" name="phone" id="yphone" required="">
    </div>
    <div class="form-group">
    <textarea maxlength="5000" data-msg-required="Please enter your message." rows="6" class="form-control c-square c-theme input-lg" placeholder="Your Message…" name="message" id="ymessage" required=""></textarea>
    </div>
    <div class="row">
    <div class="col-md-6" style="margin-top: 10px;"> <span class="frmsuccess" id="frmsuccess" style="color: rgb(140, 188, 71); font-weight: bold; font-size: 16px; font-family: cursive; display: none;">Welcome Back..!!!!</span> </div>
    <!–<div class="col-md-6" style="margin-top: 10px;"> <span class="error-message" id="error-message" style="color: rgb(140, 188, 71); font-weight: bold; font-size: 16px; font-family: cursive; display: none;">Welcome Back..!!!!</span> </div>
    <div class="col-md-6" style="margin-top: 10px;"><span class="text-danger" id="frmsuccess" ></span></div>
    <div class="col-md-6" style="margin-top: 10px;"><span class="tex-success" id="error-message"></span></div>
    –>
    <div class="col-md-6">
    <input type="submit" name="submit" id="contactFormSubmit" value="Send Message" class="btn btn-green btn-lg pull-right c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square send" data-loading-text="Loading…">
    </div>
    </div>
    </form>
    </div>
    </div>
    </body>
    <script type="text/javascript" src="scriptt.js"></script>
    </html>

    script.js

    $(document).ready(function(){
    $("#contactFormSubmit").click(function(){
    var name = $("#yname").val();
    var email = $("#yemail").val();
    var phone = $("#yphone").val();
    var message = $("#ymessage").val();
    if(name == '' || email == '' || phone == '' || message == ''){
    $("#error-message").html("All fields are required");
    return false;
    }else{
    $("#error-message").html("");
    $ajax({
    url:"insert.php",
    method:"POST",
    data:{name:name, email:email, phone:phone, message:message},
    success:function(data){
    $("form").trigger("reset");
    $("#frmsuccess").fadeIn().html(data);
    setTimeout(function(){
    $("#frmsuccess").fadeOut("slow");
    },8000)
    }
    });
    }
    });

    });

    insert.php

    <?php

    $conn = mysqli_connect("localhost","root","","mydb");

    if(isset($_REQUEST['submit'])){

    $name = $_REQUEST['name'];

    $email = $_REQUEST['email'];

    $phone = $_REQUEST['phone'];

    $message = $_REQUEST['message'];

    $query = "INSERT INTO `mydata`( `name`, `email`, `phone`, `message`, `date`) VALUES

    ('$name','$email','$phone','$message', NOW())";

    $sql = mysqli_query($conn,$query);

    // if($sql){

    // echo "THANKS FOR CONTACT US";

    // }else{

    // echo "SOMTHING IS WRONG";
    // }

    header('Access-Control-Allow-Origin: *');

    $to = "jafershajahan3@gmail.com";

    $subject ="A Person Need To appointment";

    $message = $_REQUEST['message'];

    $headers = "MIME-Version: 1.0" ."rn";

    $headers .= "Content-type:text/html;charset=UTF-8" . "rn";

    $headers .= 'From: <jafershajahan3@gmail.com>' . "rn";

    $headers .= 'Cc: jafershaju@gmail.com' . "rn";

    // More headers and mail

    //$headers .= 'From: <info@deetaanalytics.com>' . "rn";

    //$headers .= 'Cc: jyo@digitalanalystteam.com' . "rn";

    if(mail($to,$subject,$message,$headers)){

    echo "send";

    }else{

    echo "mail-not send";
    }

    }
    ?>

  2. i have used this code but … it insert empty values in the table
    $(document).ready(function(){
    $("#submit").click(function(e){
    var name = $("#name1").val();
    var np = $("#people1").val();
    var dt= $("#timenddate1").val();
    var msg = $("#msg1").val();

    if(name ==''|| np=='' || dt=='' || msg==''){
    alert("Some fields are blank");
    }
    else{

    // Returns successful data submission message when the entered information is stored in database.
    $.post("info.php",{
    name:name,
    np: np,
    dt: dt,
    msg: msg
    },
    function(data) {
    alert(data);
    $('#form2')[0].reset(); //To reset form fields after submission

    });

    e.preventDefault();
    }

    });

    });

  3. Hello , if the user dosen't fill the form and he clicks submit it will display it the error that's okay but the data is gonna be inserted into the database anyway ! there is nothing that gonna stop it from executing the Sql code

  4. Hi, it works! but my form is at the bottom of my page so when I hit the submit button it goes to the top of the page. how do i make it stay on the bottom after hitting the submit button so the form is still in view so the user can see the error or success message?

  5. This guy made some mistakes…he didn't write 'return false;' after if condition when name and message fields r empty..and he forgot to put curleybraces('( )') after setTimeOut function..

  6. i wanted to diss on this video about the voice but after i watched the whole tut, i can say its the best tutorial i had today… good work bro… very understandable

  7. I have a question. about $.ajax ();

    Data{name:name,message:message}

    the first is the name of my field in html and the second is the value of the .val() ?

    so , jquery will assign in the html field called 'name' the value of the name? ($('#name').val() ) ?

    Could you explain the communication between html form, php and jquery. I mean the whole process /mechanism / technique

    thank you for your time

Leave a Reply

Your email address will not be published. Required fields are marked *