Problems processing a form using bootstrapValidator plugin

JavaScript
1

I can’t seem to get this form to process. When the form submits the page just reloads without making to to the php script.

Here is the html

<form id="defaultForm" method="post" class="defaultForm contact-form">
              
    <div class="form-group">
        <label class=" control-label">First Name</label>
        <input type="text" class="form-control" name="firstName" />
        
    </div>

    <div class="form-group">
        <label class="control-label">Last Name</label>
        <input type="text" class="form-control" name="lastName" />
        
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>

    </div>
 </form>

here is the js:

$('.defaultForm').bootstrapValidator({
    message: 'This value is not valid',
    live: 'disabled',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    submitHandler: function(validator, form, submitButton) {

         //alert("made it to submit handler block!");
        
        $.ajax({
          type: "POST",
          url: "assets/php/process.php",
          data: $('.defaultForm').serialize(),
          success: function(msg){
            
              alert("made it to success block!");
              //alert(msg);
              //document.location.href = 'form.php';
          },
          error: function(){
            alert("We found an error in your data.  Please return to home page and try again.");
          }
        });//close ajax
    },
    fields: {
        firstName: {
              
            validators: {
                notEmpty: {
                    message: 'The first name is required and cannot be empty'
                }
            }
        },
        lastName: {
            
            validators: {
                notEmpty: {
                    message: 'The last name is required and cannot be empty'
                }
            }
        },
    } // end field
});// bootstrapValidator

I’m not getting any errors in the console.
any ideas?

2

Is it Id defaultForm or Class defaultForm causing a problem ??

3

Is the path to the php processing script correct?

4

Yea, I just went in and simplified it add moved the php to the same directory as the contact page.

$('#form').bootstrapValidator({
    message: 'This value is not valid',
    live: 'disabled',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    submitHandler: function(validator, form, submitButton) {

         //alert("made it to submit handler block!");
        
        $.ajax({
          type: "POST",
          url: "process.php",
          data: $('#form').serialize(),
          success: function(msg){
            
              alert("made it to success block!");
              alert(msg);
              //document.location.href = 'form.php';
          },
          error: function(){
            alert("We found an error in your data.  Please return to home page and try again.");
          }
        });//close ajax
    },
    fields: {
        firstName: {
              
            validators: {
                notEmpty: {
                    message: 'The first name is required and cannot be empty'
                }
            }
        },
        lastName: {
            
            validators: {
                notEmpty: {
                    message: 'The last name is required and cannot be empty'
                }
            }
        },
    } // end field
});// bootstrapValidator

I also changed the id name just in case:

<form id="form" method="post" class="contact-form">

and simplified the php script to just echo a message back

<?php
echo "made it to php";
5

Oh and here is the link:

http://aaronhaas.com/waterford/contact.html

6

I’m still having problems with this form. Any help would be greatly appreciated :slight_smile:

7

What changes have you tried?

Where are you at now?

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.