Load Modal on form submission

Question

I am trying to load a "thank you" modal when submitting my form.

I have 3 files, magic.js (which does the JQ magic), index.html and process.php.

Below is the code for each of the 3 files, and I can't for the life of me get it to work.

When the form is submitted it just loads the process.php page and displays success = true

if I remove the action="process.php" from the form tag I just get a Method Not Allowed error.

index.html:



    Look I'm AJAXing!
     
     
     




    Processing an AJAX Form

    
    

        
        
            Name
            
            
        

        
        
            Email
            
            
        

        
        
            Superhero Alias
            
            
        

        

    


 
  
    

      
      
        
          
           Login
        
        
           Thank you for your submission!
        
        
          
          Not a member? Sign Up
          Forgot Password?

magic.js:

$(document).ready(function() {

    // process the form
    $('form').submit(function(event) {

        $('.form-group').removeClass('has-error'); // remove the error class
        $('.help-block').remove(); // remove the error text

        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        var formData = {
            'name'              : $('input[name=name]').val(),
            'email'             : $('input[name=email]').val(),
            'superheroAlias'     : $('input[name=superheroAlias]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'process.php', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'json', // what type of data do we expect back from the server
            encode      : true
            success: function (msg) {
                $("#thanks").html(msg)
                $("tyModal").modal('hide');
            },
            error: function () {
                alert("failure");
            }
        })
            // using the done promise callback
            .done(function(data) {

                // log data to the console so we can see
                console.log(data); 

                // here we will handle errors and validation messages
                if ( ! data.success) {

                    // handle errors for name ---------------
                    if (data.errors.name) {
                        $('#name-group').addClass('has-error'); // add the error class to show red input
                        $('#name-group').append('' + data.errors.name + ''); // add the actual error message under our input
                    }

                    // handle errors for email ---------------
                    if (data.errors.email) {
                        $('#email-group').addClass('has-error'); // add the error class to show red input
                        $('#email-group').append('' + data.errors.email + ''); // add the actual error message under our input
                    }

                    // handle errors for superhero alias ---------------
                    if (data.errors.superheroAlias) {
                        $('#superhero-group').addClass('has-error'); // add the error class to show red input
                        $('#superhero-group').append('' + data.errors.superheroAlias + ''); // add the actual error message under our input
                    }

                } else {

                    // ALL GOOD! just show the success message!
                    $('form').append('' + data.message + '');

                    // usually after form submission, you'll want to redirect
                    // window.location = '/thank-you'; // redirect a user to another page

                }
            })

            // using the fail promise callback
            .fail(function(data) {

                // show any errors
                // best to remove for production
                console.log(data);
            });

        // stop the form from submitting the normal way and refreshing the page
        event.preventDefault();
    });

});

process.php:

Darren Willows · Accepted Answer

You never actually create the modal on forum submit.

You only hide on success.

$("tyModal").modal('hide');

You also have not created the modal on the page either, as myModal is the only one that exists. Not tyModal.

Another issue is that #thanks does not exists, so you are technically populating the data with nothing.

success: function(data) {
    $("#thanks").html(data);
    jQuery("#myModal").modal('show');
}

This is the code that I use.

HTML

JS

function showModal() {
   $( "#myAjaxModal .modal-content" ).html('test');
    $('#myAjaxModal').modal('show');
}

Load Modal on form submission

Answers (2)

Related Questions