处理表单时无法获得$ .ajax调用

时间:2015-07-15 13:19:23

标签: jquery

我正在使用jQuery bootstrapValidator插件来验证表单并处理表单。验证似乎正在起作用,但是submitHandler内部的ajax调用不起作用。为了简化我将php文件放在与联系表单相同的目录中,并让它回显一条消息。

当您点击提交按钮时,页面只会重新加载。

这是html:

<form id="form" method="post" class="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">
        <label class="control-label">Company Name</label>
        <input type="text" class="form-control" name="company" />  
    </div>

    <div class="form-group">
        <label class="control-label">Phone </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>

这是javascript:

$('#form').bootstrapValidator({
    message: 'This value is not valid',
    live: 'enabled',
    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);

          },
          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

这是一个演示 http://aaronhaas.com/waterford/contact.html

非常感谢任何帮助 谢谢,

亚伦

0 个答案:

没有答案