Javascript结果需要在php中捕获到电子邮件

时间:2015-07-25 07:15:54

标签: javascript php jquery

我有一个表格,我总共有11个复选框供用户选择。我希望能够捕获用户选择的特定复选框,并能够通过电子邮件发送出去。我目前正在使用php来做到这一点。

我能够捕获该值并使用Javascript将其显示为警报。但是,我无法弄清楚如何使用javascript捕获特定数据并将其传递给PHP。

我对PHP非常不熟悉并尝试传递变量但失败了。请参阅我的代码的链接。

<!-- Modal Body -->
<div class="modal-body">

    <p>Please fill out the information below.</p>

    <form class="j-forms" style="box-shadow: none;"
          id="TSCreatePackageForm" role="form" method="post"
          action="php/customPackage.php">

        <!-- Company Name -->
        <div class="span6 unit">
            <label class="label">Company Name</label>

            <div class="input">
                <label class="icon-right" for="tscpCompanyName">
                    <i class="fa fa-user"></i>
                </label>
                <input type="text" id="tscpCompanyName" name="tscpCompanyName"
                       placeholder="e.g XYZ Company">
            </div>
        </div>

        <!-- Business Entity Type -->
        <div class="span6 unit">
            <label class="label">Business
                Entity Type</label>

            <div class="input">
                <label class="icon-right" for="tscpBusinessType">
                    <i class="fa fa-user"></i>
                </label>
                <input type="text" id="tscpBusinessType" name="tscpBusinessType"
                       placeholder="(I.E. Corporation, LLC,ETC)">
            </div>
        </div>

        <!--Years in Business -->
        <div class="span6 unit">
            <label class="label">Years In Business</label>

            <div class="input">
                <label class="icon-right" for="tscpYears">
                    <i class="fa fa-user"></i>
                </label>
                <input type="text" id="tscpYears" name="tscpYears" placeholder="e.g. 5">
            </div>
        </div>

        <!-- Number of Units -->
        <div class="span6 unit">
            <label class="label">Number of units Owned/Managed</label>

            <div class="input">
                <label class="icon-right" for="tscpNumberOfUnits">
                    <i class="fa fa-briefcase"></i>
                </label>
                <input type="text" id="tscpNumberOfUnits" name="tscpNumberOfUnits"
                       placeholder="e.g. 525">
            </div>
        </div>

        <!-- First Name -->
        <div class="span6 unit">
            <label class="label">First Name</label>

            <div class="input">
                <label class="icon-right" for="tscpFirstName">
                    <i class="fa fa-user"></i>
                </label>
                <input type="text" id="tscpFirstName" name="tscpFirstName"
                       placeholder="e.g John">
            </div>
        </div>

        <!-- Last Name -->
        <div class="span6 unit">
            <label class="label">Last Name</label>

            <div class="input">
                <label class="icon-right" for="tscpLastName">
                    <i class="fa fa-user"></i>
                </label>
                <input type="text" id="tscpLastName" name="tscpLastName"
                       placeholder="e.g Doe">
            </div>
        </div>

        <!-- Email -->
        <div class="span6 unit">
            <label class="label">Email</label>

            <div class="input">
                <label class="icon-right" for="tscpEmail">
                    <i class="fa fa-mail"></i>
                </label>
                <input type="text" id="tscpEmail" name="tscpEmail"
                       placeholder="e.g John@therrd.com">
            </div>
        </div>

        <!-- Phone Number -->
        <div class="span6 unit">
            <label class="label">Phone</label>

            <div class="input">
                <label class="icon-right" for="tscpNumber">
                    <i class="fa fa-phone"></i>
                </label>
                <input type="text" placeholder="phone/mobile" id="tscpNumber"
                       name="tscpNumber">
                <span class="tooltip tooltip-right-top">Your contact phone number</span>
            </div>
        </div>

        <!-- Services -->
        <div class="span12 unit">
            <label class="label">Please Select Services You're Interested In:</label>

           <div class="span6">
               <label class="checkbox-toggle">
                   <input type="checkbox" name="tscpService[]" id="tscpService1"
                          value="Incident Reporting Database" checked>
                   <i></i>
                   Incident Reporting Database
               </label>
               <label class="checkbox-toggle">
                   <input type="checkbox" name="tscpService[]" id="tscpService2"
                          value="Rapsheet (National Criminal Background Search)">
                   <i></i>
                   Rapsheet (National Criminal Background Search)
               </label>
               <label class="checkbox-toggle">
                   <input type="checkbox" name="tscpService[]" id="tscpService3"
                          value="Social Security Number Validation">
                   <i></i>
                   Social Security Number Validation
               </label>
               <label class="checkbox-toggle">
                   <input type="checkbox" name="tscpService[]" id="tscpService4"
                          value="Sex Offender Database Check">
                   <i></i>
                   Sex Offender Database Check
               </label>
               <label class="checkbox-toggle">
                   <input type="checkbox" name="tscpService[]" id="tscpService5"
                          value="Evictions, Liens, and Judgment Search">
                   <i></i>
                   Evictions, Liens, and Judgment Search
               </label>
               <label class="checkbox-toggle">
                   <input type="checkbox" name="tscpService[]" id="tscpService6"
                          value="Trans Union And Equifax Credit Report">
                   <i></i>
                   Trans Union And Equifax Credit Report
               </label>

           </div>

           <div class="span6">
               <label class="checkbox-toggle">
                   <input type="checkbox" name="tscpService[]" id="tscpService7"
                          value="FICO Score">
                   <i></i>
                   FICO Score
               </label>
               <label class="checkbox-toggle">
                   <input type="checkbox" name="tscpService[]" id="tscpService8"
                          value="Bankruptcy Report">
                   <i></i>
                   Bankruptcy Report
               </label>
               <label class="checkbox-toggle">
                   <input type="checkbox" name="tscpService[]" id="tscpService9"
                          value="ID Mismatch Alert">
                   <i></i>
                   ID Mismatch Alert
               </label>
               <label class="checkbox-toggle">
                   <input type="checkbox" name="tscpService[]" id="tscpService10"
                          value="Equifax Credit Report">
                   <i></i>
                   Equifax Credit Report
               </label>
               <label class="checkbox-toggle">
                   <input type="checkbox" name="tscpService[]" id="tscpService11"
                          value="Sex Offender Search (Meagan’s Law)">
                   <i></i>
                   Sex Offender Search (Meagan’s Law)
               </label>
           </div>
       </div>

       <!-- Captcha -->
       <div class="span12 unit">
           <div class="captcha-group">
               <div class="input">
                   <label class="icon-right" for="captcha_code">
                       <i class="fa fa-unlock-alt"></i>
                   </label>
                   <input type="text" id="captcha_code" name="human"
                          placeholder="solve the captcha">
                   <span class="tooltip tooltip-right-top">Enter sum of the digits</span>
               </div>
               <label class="captcha" for="captcha_code">
                   2 + 3 = ?
               </label>
           </div>
       </div>

       <!-- Buttons -->
       <div class="span6 unit">
           <button type="submit" name="submit" value="Send"
                   class="btn btn-lg btn-theme-bg">Send
           </button>
           <a class="btn btn-lg btn-primary" data-dismiss="modal">Close</a>
       </div>

       <!-- Last Name -->
       <div class="span6 unit hidden">
           <label class="label">Last Name</label>

           <div class="input">
               <label class="icon-right" for="vals">
                   <i class="fa fa-user"></i>
               </label>
               <input type="text" id="vals" name="vals">
           </div>
       </div>


   </form>

   <!-- Validation -->
   <script>

       var vals = [];

       /**CheckBox Value Function **/
       var $checkes = $('input:checkbox[name="tscpService[]"]').change(function () {
           var vals = $checkes.filter(':checked').map(function () {
               return this.value;
           }).get();
           alert(JSON.stringify(vals));
       });


       $('#TSCreatePackageForm').validate({

           /* @validation states + elements */
           errorClass: 'error-view',
           validClass: 'success-view',
           errorElement: 'span',

           rules: {
               tscpCompanyName: {
                   required: true,
                   letterswithbasicpunc: true
               },
               tscpBusinessType: {
                   required: true,
                   letterswithbasicpunc: true
               },
               tscpYears: {
                   required: true,
                   digits: true,
                   min: 1
               },
               tscpNumberOfUnits: {
                   required: true,
                   digits: true,
                   min: 1,
                   max: 99999
               },
               tscpFirstName: {
                   required: true
               },
               tscpLastName: {
                   required: true
               },

               tscpEmail: {
                   required: true,
                   email: true
               },

               tscpNumber: {
                   required: true,
                   phoneUS: true
               },

               captcha_code: {
                   required: true
               }
           },

           // Add class 'error-view'
           highlight: function(element, errorClass, validClass) {
               $(element).closest('.input').removeClass(validClass).addClass(errorClass);
               if ( $(element).is(':checkbox') || $(element).is(':radio') ) {
                   $(element).closest('.check').removeClass(validClass).addClass(errorClass);
               }
           },
           // Add class 'success-view'
           unhighlight: function(element, errorClass, validClass) {
               $(element).closest('.input').removeClass(errorClass).addClass(validClass);
               if ( $(element).is(':checkbox') || $(element).is(':radio') ) {
                   $(element).closest('.check').removeClass(errorClass).addClass(validClass);
               }
           },
           // Error placement
           errorPlacement: function(error, element) {
               if ( $(element).is(':checkbox') || $(element).is(':radio') ) {
                   $(element).closest('.check').append(error);
               } else {
                   $(element).closest('.unit').append(error);
               }
           }
       });

   </script>

PHP代码

<?php
if ($_POST["submit"]) {
   $companyName = $_POST['tscpCompanyName'];
   $businessType = $_POST['tscpBusinessType'];
   $yearsBusiness = $_POST['tscpYears'];
   $numberOfUnits = $_POST['tscpNumberOfUnits'];
   $firstName = $_POST['tscpFirstName'];
   $lastName = $_POST['tscpLastName'];
   $email = $_POST['tscpEmail'];
   $number = $_POST['tscpNumber'];
   $human = intval($_POST['human']);

   $from = "From:senderEmail@senderEmail.com";
   $to = "recieverEmail@recieverEmail.com";
   $subject = 'Custom Package Request';

   $body ="Company Name: $companyName\n\n Business Type: $businessType\n\n Years In Business: $yearsBusiness\n\n First Name: $firstName\n\n Last Name: $lastName\n\n Email: $email\n\n Number: $number\n\n Services: $selected\n\n";

   //Check if simple anti-bot test is correct
   if ($human !== 5) {
       $errHuman = 'Your anti-spam is incorrect';
   }
   // If there are no errors, send the email

   if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
       if (mail ($to, $subject, $body, $from)) {
           header("Location: /thank-you/mortgage-lending.html");
       } else {
           header("Location: /Error.html");
       }
   }
   else {
       header("Location: /error.html");
   }
}
?>

2 个答案:

答案 0 :(得分:1)

为什么不使用隐藏字段表单并将数据发送到隐藏字段值。

`<input type="hidden" name="sth" id="sth">

现在您可以将javascript值发送到此输入字段

如上所述,您已获取复选框的值 让我们假设您已将复选框值作为js

中名为vals的变量

现在你可以做到

 <script>
//if your value from checkbox is placed on variable vals
    $('#sth').val(vals)
    </script>

使用此功能,您可以使用任何post方法

获取值

答案 1 :(得分:0)

我想出了一种获取价值的方法,并能够使用PHP将其发送出去。

以下是代码:

     <!-- Checkbox Value -->
     <script>

       var vals = [];
       document.getElementsByName('vals').value = vals;

       /**CheckBox Value Function **/
      var $checkes = $('input:checkbox[name="tscpService[]"]').change(function () {
          var vals = $checkes.filter(':checked').map(function () {
               return this.value;
               }).get();
         alert(JSON.stringify(vals));
        document.getElementById('vals').value = JSON.stringify(vals);
      });
     <!-- Checkbox Value -->