2015-01-09 142 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