2015-01-09 148 views
0

我是PHP新手;将这个表格http://myprogrammingblog.com/2013/08/27/how-to-make-a-contact-form-with-bootstrap-3-jqueryphphtml5jqbootstrapvalidation/整合到我的Bootstrap页面中。很好,但我想弄清楚如何在表单中添加一个名为“Organization”的字段(显然,PHP是一个方面,我知道如何将输入添加到表单中)。谁能帮我吗?将字段添加到PHP表格

编辑: 1.添加一个输入窗体本身 2.新变种添加到JS验证 3.在PHP中捕捉客户端输入:我从我需要做下面的教程意见收集并添加变量保存客户端输入到邮件功能

我试图做到这一点,但表单现在不发送信息。

<form class="well" id="contactForm" name="sentMessage" novalidate="">Contact me 
     <!-- Full Name --> 
<div class="control-group"> 
<div class="controls"> 
     <input class="form-control" id="name" type="text" placeholder="Full Name" required="" data-validation-required-message="Please enter your name" /> 

</div> 
</div> 
     <!-- Email --> 
<div class="control-group"> 
<div class="controls"> 
     <input class="form-control" id="email" type="email" placeholder="Email" required="" data-validation-required-message="Please enter your email" /></div> 
</div> 
     <!--Message --> 
<div class="control-group"> 
<div class="controls"></div> 
</div> 
<div id="success"></div> 
<!-- For success/fail messages --> 
<button class="btn btn-primary pull-right" type="submit">Send</button> 

</form> 

/* 
    Jquery Validation using jqBootstrapValidation 
    example is taken from jqBootstrapValidation docs 
    */ 
$(function() { 

$("input,textarea").jqBootstrapValidation(
    { 
    preventSubmit: true, 
    submitError: function($form, event, errors) { 
     // something to have when submit produces an error ? 
     // Not decided if I need it yet 
    }, 
    submitSuccess: function($form, event) { 
     event.preventDefault(); // prevent default submit haviour 
     // get values from FORM 
     var name = $("input#name").val(); 
     var email = $("input#email").val(); 
     var message = $("textarea#message").val(); 
     var firstName = name; // For Success/Failure Message 
      // Check for white space in name for Success/Fail message 
     if (firstName.indexOf(' ') >= 0) { 
     firstName = name.split(' ').slice(0, -1).join(' '); 
     } 
    $.ajax({ 
       url: "./bin/contact_me.php", 
       type: "POST", 
       data: {name: name, email: email, message: message}, 
       cache: false, 
       success: function() { 
       // Success message 
        $('#success').html("</pre> 
<div class="alert alert-success">"); 
$('#success > .alert-success').html("<button class="close" type="button" data-dismiss="alert">×") 
.append("</button>"); 
$('#success > .alert-success') 
.append("<strong>Your message has been sent. </strong>"); 
$('#success > .alert-success') 
.append('</div> 
<pre> 
'); 

      //clear all fields 
      $('#contactForm').trigger("reset"); 
      }, 
     error: function() { 
     // Fail message 
     $('#success').html("</pre> 
<div class="alert alert-danger">"); 
$('#success > .alert-danger').html("<button class="close" type="button" data-dismiss="alert">×") 
.append("</button>"); 
$('#success > .alert-danger').append("<strong>Sorry "+firstName+" it seems that my mail server is not responding...</strong> Could you please email me directly to <a href="'mailto:[email protected]?Subject=Message_Me">[email protected]</a> ? Sorry for the inconvenience!"); 
$('#success > .alert-danger').append('</div> 
<pre> 
'); 
     //clear all fields 
     $('#contactForm').trigger("reset"); 
     }, 
      }) 
     }, 
     filter: function() { 
        return $(this).is(":visible"); 
     }, 
     }); 

     $("a[data-toggle=\"tab\"]").click(function(e) { 
        e.preventDefault(); 
        $(this).tab("show"); 
     }); 
    }); 

/*When clicking on Full hide fail/success boxes */ 
$('#name').focus(function() { 
    $('#success').html(''); 
    }); 

<?php 
// check if fields passed are empty 

if(empty($_POST['name']) ||  
    empty($_POST['email']) || 
    empty($_POST['message'])|| 
    !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))  
    {  
     echo "No arguments Provided!"; return false;  
    } 

    $name = $_POST['name']; 
    $email_address = $_POST['email']; 
    $message = $_POST['message'];  

// create email body and send it  
$to = '[email protected]'; 
// put your email 
$email_subject = "Contact form submitted by: $name"; $email_body = "You have received a new message. \n\n".     
        " Here are the details:\n \nName: $name \n ".     
        "Email: $email_address\n Message \n $message"; 
$headers = "From: [email protected]\n"; 
$headers .= "Reply-To: $email_address";  

mail($to,$email_subject,$email_body,$headers); return true;    
?> 
+0

你想在哪里输出变量组织?就像在电子邮件正文中或在哪里? – Neat 2015-01-09 19:31:47

+0

到目前为止您尝试过什么?另外,你的帖子中间是与你的问题相关的大jQuery部分,还是你只问PHP? – dg99 2015-01-09 19:34:45

+0

@KoenHoeijmakers,是的,我希望它在电子邮件正文中输出,例如。电子邮件:$ email_address \ n组织:$ organization \ n消息:\ n $ message – grownupteeth 2015-01-09 19:35:44

回答

1

您需要修改的几行代码在你的Ajax调用,并在你的PHP代码。 我相信你会将变量添加到电子邮件主题。

HTML

<div class="controls"> 
    <input class="form-control" id="organization" type="text" placeholder="Organization" required="" data-validation-required-message="Please enter your organization" /></div> 
</div> 

添加到您的Ajax调用

var organization = $("input#organization").val(); 

变化的数据线:

data: {name: name, email: email, organization : organization, message: message}, 

替换你的PHP脚本中的if语句if语句与此:

if(empty($_POST['name']) ||  
    empty($_POST['email']) || 
    empty($_POST['message'])|| 
    empty($_POST['organization'])|| 
    !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))  
{  
    echo "No arguments Provided!"; return false; 
} 

并添加以下行:

$organization = $_POST['organization']; 

说明:

创建的控制是由验证器进行评价。当一切都很好时,调用函数ajax。在这个函数中,元素input的id值为organization的值被检索并存储到一个变量中。这个变量被添加到ajax调用的数据字符串中。哪一个实际上是一个对象转换为后变量。因此,帖子变量organization现在被添加到请求中。 PHP现在可以用$_POST['organization']检索新的post变量。

+0

感谢您的帮助!我做了其他更改,但错过了数据线。非常感激 :) – grownupteeth 2015-01-09 19:43:25