2017-08-05 106 views
1

我正在工作的联系人表单,我想发送表单中的用户字段到邮件的信息, 我写了php页面发送给服务器,但我可以'不懂是怎么写的jQuery中的功能,我真的会appricate,如果有人能够给我一个建议 这是JavaScript:jquery到服务器问题

$('.x-contact-form').on('submit', function(e) { 
e.preventDefault(); 
var confere = new Confere({ 
rules: this 
}) 

confere.validate().then(function() { 

//submit your form 

}).catch(function(err) { 

//remove all errors notifications 
Object.keys(confere.options.rules).map(function(key){ 
    $(`.${key}-group`).removeClass('has-error'); 
    $(`.${key}-group`).addClass('has-success'); 
    $(`#${key}_error`).text(''); 
}); 

//add errors on fields that failed validation 
Object.keys(err.result).map(function(key) { 
    $(`.${key}-group`).addClass('has-error'); 
    $(`#${key}_error`).text(err.result[key][0].message); 
}); 
}); 
}); 

这是PHP:

<?php 
if (isset($_POST['submit'])) { // Checking for submit form 

$my_email = '[email protected]'; // Change with your email address 

if ($_POST['submit'] == 'add') { 
    $name  = trim(strip_tags(addslashes($_POST['name']))); 
    $email  = trim(strip_tags(addslashes($_POST['email']))); 
    $message = trim(strip_tags(addslashes($_POST['message']))); 
      $phone   = trim(strip_tags(addslashes($_POST['phone']))); 

      $pattern_name = '/^[a-zA-Z]{2}/'; 
    $pattern_email = '/^[^\W][a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4}$/'; 
     $pattern_message = '/^[a-zA-Z0-9]{2}/'; 
      $pattern_phone = '/^([0-9]{9,10})/'; 



    if ($email != '' && $message != '' && $phone != ''&& $name != '') { 
     if (preg_match($pattern_email, $email)&& preg_match($pattern_name, $name)&& preg_match($pattern_message, $message)&& preg_match($pattern_phone, $phone)) { 
      $headers = 'From: ' . $email . "\r\n"; 
      $subject = 'Message from ' . $name; 
          $message_phone= $message.'Phone number: '.$phone; 


      mail($my_email, $subject, $message_phone, $headers); 

        echo 'success|<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Thank you! We will contact you shortly.</div>'; 

        } 
      elseif(!preg_match($pattern_email, $email)) { 
      echo 'error|<div class="email_error"></i></button>Please enter a valid email address.</div>'; 
     } 
        elseif(!preg_match($pattern_name, $name)) { 
      echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Name must be more then 2 letters.</div>'; 

     } 
        elseif(!preg_match($pattern_phone, $phone)) { 
      echo 'error|<div class="phone_error"></i></button>Phone must be 9-10 digits.</div>'; 

     } 
        elseif(!preg_match($pattern_message, $message)) { 
      echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Message must be more than 2 letters.</div>'; 

     } 
    } elseif ($name== ''&& $message != '' && $phone != '' && $email != '') { 
     echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill name</div>'; 
    } 
      elseif ($phone== ''&& $message != '' && $name != '' && $email != '') { 
     echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill Phone number</div>'; 
    } 
      elseif ($message== '' && $phone != ''&& $name != '' && $email != '') { 
     echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill Massage</div>'; 
    } 
      elseif ($email== ''&& $message != '' && $phone != ''&& $name != '') { 
     echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill Email address</div>'; 
    } 
      else{ 
       echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill all the fields</div>'; 
      } 
} 

} else { // Submit form false 
header('Location: index.html'); 
} 
?> 

的HTML:

<form class="x-contact-form" style="max-width: 300px; margin: 10px"> 
<div class="form-group name-group"> 
<label>Name</label> 
<input class="form-control" name="name" data-rule="required|min:2|max:254" 
/> 
<span id="name_error" class="text-danger"></span> 
</div> 
<div class="form-group email-group"> 
<label>Email</label> 
<input class="form-control" name="email" data-rule="required|email|max:254" 
/> 
<span id="email_error" class="text-danger"></span> 
</div> 
<div class="form-group phone-group"> 
<label>Phone</label> 
<input class="form-control" name="phone" data-rule="required|min:9|max:10" 
/> 
<span id="phone_error" class="text-danger"></span> 
    </div> 
<div class="form-group message-group"> 
    <label>Message</label> 
<textarea class="form-control" name="message" data- 
rule="required|min:2|max:254"></textarea> 
<span id="message_error" class="text-danger"></span> 
</div> 
<input type="submit" class="btn btn-primary" id="btn" value="Send" /> 
</form> 

回答

0

我也不太清楚,因为我不知道Confere,但我认为下面应该为你

$('.x-contact-form').on('submit', function(e) { 
    e.preventDefault(); 
    var confere = new Confere({ 
     rules: this // not sure if this is correct 
    }); 
    confere.validate().then(() => { 
     this.submit(); 
     Object.keys(confere.options.rules).map(function(key){ 
      $(`.${key}-group`).removeClass('has-error'); 
      $(`.${key}-group`).addClass('has-success'); 
      $(`#${key}_error`).text(''); 
     }); 
    }).catch(function(err) { 
     Object.keys(err.result).map(function(key) { 
      $(`.${key}-group`).addClass('has-error'); 
      $(`#${key}_error`).text(err.result[key][0].message); 
     }); 
    }); 
}); 
+0

感谢您的回答,我如何将它连接到php页面以便将按摩发送到邮件? –

+1

您需要在表单上设置正确的操作,并链接到pho文件@RO.IT – baao

+0

可以告诉我如何做到这一点? –

0

工作,你需要在HTML表单上的action属性设置的URL你的PHP文件。您还需要将方法属性设置为POST