• 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 = '[email protected]';

            $headers = 'From: [email protected]';

            /*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 = '[email protected]';

            $headers = 'From: [email protected]';

            /*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”);
            }
            });

            });
            });

          • Bud Hines

            Thank you so much for this validation demo. I have been looking all over for an example just like this. You saved me.
            thanks

  • 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?

  • david

    where do i put the email were i want the message to be delivered?

  • Darren

    Hi. If I update to the latest version of bootstrap, the modal popup no longer appears. Any thoughts on what I need to do will be appreciated. Thanks

    • anils

      $(“#your-form-id”).removeClass(‘hide’);

  • js zombie

    javascript alert failure on your code?
    you should have tested it before posting?

  • Demixovsky

    My process.php can’t get POST data from other include file. It’s problem..

  • http://www.wall-c.com/userinfo.php?uid=850215 Christian Louboutin Online

    I loved as much as you will receive carried out right here.
    The sketch is attractive, your authored subject matter stylish.
    nonetheless, you command get got an edginess over that you wish
    be delivering the following. unwell unquestionably come further formerly again as exactly the same nearly very often inside case you shield this hike.