在PHP表单中添加一个字段

时间:2015-01-09 19:28:44

标签: php forms twitter-bootstrap validation

我是PHP的新手;将此表单http://myprogrammingblog.com/2013/08/27/how-to-make-a-contact-form-with-bootstrap-3-jqueryphphtml5jqbootstrapvalidation/集成到我的Bootstrap页面中。效果很好,但我想弄清楚如何添加一个名为" Organization"到表单(一方面是PHP方面,很明显;我理解如何将输入添加到表单中)。谁能帮我吗?

编辑:我从教程的评论中收集到了我需要执行以下操作: 1.向表单本身添加输入 2.将新var添加到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:me@example.com?Subject=Message_Me">me@example.com</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 = 'me@myprogrammingblog.com'; 
 // 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: contacts@myprogrammingblog.com\n"; 
 $headers .= "Reply-To: $email_address";     

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

1 个答案:

答案 0 :(得分: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},

使用if子句替换php脚本中的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的元素organization的值并将其存储到变量中。此变量将添加到ajax调用的数据字符串中。实际上是一个转换为post变量的对象。因此,后变量organization现已添加到请求中。 PHP现在可以使用$_POST['organization']检索新的post变量。