• BigD

    I have been looking around for a solution like this for hours. Muchly appreciated.
    How would you call the Ajax from a form to start off with and then get the Thanks message (succces) from the process.php to appear in the modal?

    • krizna

      success: function(msg){
      $(“#thanks-msg-from-process”).html(msg)
      $(“#form-thanks”).modal(‘open’);
      }

      Get the results to id “thanks-msg-from-process” and show the modal

      • BigD

        Ah, I nearly had it. Got my ajax the wrong way around. Thanks :)

  • jigs

    hi is there any way to call thanks message in same model box.. i have created my custom process.php. but not able call thanks message in same model box when i sumbit it’s hiding $(“#form-content”).modal(‘hide’);

    • krizna

      Remove “thanks” div and add it before the form like below

      -------------------------


      and remove $(“#form-content”).modal(‘hide’); from the script

      • jigs

        Ah.. thanks..

        • jigs

          hi krizna is there any easy way to add Validation?

          • krizna

            start with this simple validation plugin

            http://jqueryvalidation.org/documentation/

            Include these js files
            http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js
            http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js

            Example script

            $(‘.contact’).validate({ // initialize the plugin
            rules: {
            Email: {
            required: true,
            email: true
            },
            name: {
            required: true,
            minlength: 5
            }
            },
            submitHandler: function (form) { // for demo
            alert(‘valid form submitted’); // for demo
            return false; // for demo
            }
            });

            check this

            http://jsfiddle.net/VuPPy/

          • jigs

            thanks.. this are helping me.. can i Validated empty fields .Here is the example html code


            Script

            $(‘#validationform’).validate({ // initialize the plugin

            rules: {

            Email: {

            required: true,

            email: true

            },

            name: {

            required: true,

            minlength: 5

            }

            },

            $(function() {

            //twitter bootstrap script

            $(“button#submit”).click(function(){

            $.ajax({

            type: “POST”,

            url: “habitusprocess.php”,

            data: $(‘form.contact’).serialize(),

            success: function(msg){

            $(“#thanks”).html(msg)

            },

            error: function(){

            alert(“failure”);

            }

            });

            });

            });


            html

            Name

            Phone

            Email

            PROJECT

            option01

            option02

            option03

            option04

            PLEASE SHARE SOME DETAILS ABOUT YOUR PROJECT REQUIREMENTS

            process.php

            <?php

            /* subject mail variable*/

            $emailsubject = 'INQUIRY';

            $webMaster = 'addyourname@gmail.com';

            $headers = 'From: user@yourdomain.com';

            /*gatherning data variable*/

            $name = $_POST['name'];

            $phone = $_POST['phone'];

            $emailid = $_POST['emailid'];

            $projecttype = $_POST['projecttype'];

            $details = $_POST['details'];

            $body = <<<EOD

            Name:

            $name

            ContactNumber:

            $phone

            Email:

            $emailid

            ProjectType:

            $projecttype

            Details:

            $details

            EOD;

            $headers = “From: $mailrn”;

            $headers .= “Content-type: text/htmlrn”;

            $success = mail($webMaster, $emailsubject, $body, $headers);

            /*html*/

            $theResults = <<<EOD

            THANK YOU

            EOD;

            echo “$theResults”;

            ?>

          • jigs

            process.php

            <?php

            /* subject mail variable*/

            $emailsubject = 'INQUIRY';

            $webMaster = 'addyourname@gmail.com';

            $headers = 'From: user@yourdomain.com';

            /*gatherning data variable*/

            $name = $_POST['name'];

            $phone = $_POST['phone'];

            $emailid = $_POST['emailid'];

            $projecttype = $_POST['projecttype'];

            $details = $_POST['details'];

            $body = <<<EOD

            Name:

            $name

            ContactNumber:

            $phone

            Email:

            $emailid

            ProjectType:

            $projecttype

            Details:

            $details

            EOD;

            $headers = "From: $mailrn";

            $headers .= "Content-type: text/htmlrn";

            $success = mail($webMaster, $emailsubject, $body, $headers);

            /*html*/

            $theResults = <<<EOD

            THANK YOU

            EOD;

            echo "$theResults";

            ?>

          • jigs

            kind of solution example code..

            html code
            ========================
            added a empty div inside modal-body

            ==================

            Script code

            added if statement

            ========================

            if($(“#name”).val()==”" ||$(“#phone”).val() ==”" || $(“#emailtype”).val()==”")
            $(“#ack”).html(“Username and Phone, Email are mandatory fields Please Enter”);
            else

            ==========================

            $(function() {

            //twitter bootstrap script

            $(“button#submit”).click(function(event){

            event.preventDefault();
            if($(“#name”).val()==”" ||$(“#phone”).val() ==”" || $(“#emailtype”).val()==”")
            $(“#ack”).html(“Username and Phone, Email are mandatory fields Please Enter”);
            else
            $.ajax({
            type: “POST”,
            url: “process.php”,
            data: $(‘form.contact’).serialize(),
            success: function(msg){
            $(“#thanks”).html(msg)
            },
            error: function(){
            alert(“failure”);
            }
            });

            });
            });

  • Chris

    Hi Krisna. I send the data to a php controller and if I return an error I want to be able to display it in the same modal and hide when the controller returns a valid input. How can I do that?

  • Frank

    Great tutorial. But I’m having a problem. The JavaScript you’ve provided at the end of form is bypassing my validation. Any suggestions?

  • Rishabh Jain

    Thank you so much , This was a great tutorial.

  • JR

    Is there a way to hide the submit button after a successful registration?
    I use a double opt-in signup and put the return messages from my signup script in the same modal just above the form.
    When I get a successful signup I show the message “Please go and check you email” and would like to remove/hide the submit button, otherwize if the click again they get a “This email is already registered” message.

  • Guest

    alert failure?