通过回调提交带有ajax的表单

时间:2016-09-15 09:29:14

标签: javascript php jquery ajax forms

我想在点击gcapcha时提交表单。我尝试用我知道的(我的傻)jquery函数提交。但它不起作用。

这是我的代码(它有什么问题)。 的的Javascript

var verifyCallback = function(e) {
document.getElementById("form-contact").submit();
 $.ajax({
    type : 'POST',
    url  : 'inc/contact_sent.php',
    data : $(this).serialize(),
        success :  function(data){
            $("#contact").html(data);
        }
    });
return false;
};
var onloadCallback = function() {
    grecaptcha.render("captcha", {
        sitekey: "xxx",
        callback: verifyCallback
    })
};

HTML

<div id="contact" class="contact-form">
    <form class="ajaxForm detailedsearch inline-style" method="post" id="form-contact">
        <input type="text" class="form-control" name="cntc_name" placeholder="Your name" required>    
        <input type="email" class="form-control" name="cntc_email" placeholder="Your email" required>
        <input type="text" class="form-control" name="cntc_tel" placeholder="Your phone">    
        <input type="text" class="form-control" name="cntc_subj" placeholder="Subject" value="<?=(isset($_POST['ptitle']))?"Queries for $_POST[ptitle]":""?>"  required>    
        <textarea class="form-control" name="cntc_desc" rows="6" placeholder="Your Detail" required></textarea>
        <div class="form-group">                    
            <div id="captcha" class="center-captcha"></div>
            <div id="gcaptcha" style="transform:scale(0.50);-webkit-transform:scale(0.50);transform-origin:0 0;-webkit-transform-origin:0 0;"></div>
            <span class="text-danger">*Please complete the form to proceed.</span>
        </div>
        <!-- <button type="submit" class="btn btn-success btn-block"><i class="fa fa-envelope-o"></i>&nbsp;Submit Form</button> -->
    </form>
</div>

1 个答案:

答案 0 :(得分:0)

你应该这样做....

//register a event for form submit
$( "form" ).submit(function( e ) {
  e.preventDefault();
  $.ajax({
    type : 'POST',
    url  : 'inc/contact_sent.php',
    data : $(this).serialize(), //serialize the form data
    success :  function(data){
       $("#contact").html(data);
    }
  });
});

var verifyCallback = function(e) {

 //submit form
 $("#form-contact").submit();

 return false;
};

var onloadCallback = function() {
  grecaptcha.render("captcha", {
      sitekey: "xxx",
      callback: verifyCallback
  })
};