动态生成HTML元素到PHP电子邮件表单

时间:2018-07-12 11:30:13

标签: javascript php

我在“ div”中有2个下拉列表和1个输入字段的HTML形式。我有一个添加更多按钮,将为其添加相同的div(例如,在工作门户网站中,您可以通过单击“添加其他”来添加另一个资格)。

我想获取所有值(用户添加的所有div)到PHP电子邮件表单。我有Google,但是找不到合适的答案。我只能获取最后添加的div值。

感谢您的帮助。

我目前是一名PHP学习者。

<?php
$from = 'order form';
$sendTo = 'xxx@gmail.com';
$subject = 'Order from website  form';

$fields = array('name' => 'Name', 'type' => 'Product', 'color' => 'Color','quantity' => 'Quantity', 'install' => 'Installation required', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message'); 

// message that will be displayed when everything is OK :)
$okMessage = 'Your order has been successfully sent. Thank you, we will get back to you soon!<br><br><a href="internet-of-things.php"> Click here</a> to go back to the page';

// If something goes wrong, we will display this message.
$errorMessage = 'There was an error while submitting the form. Please try again later';






/*
 *  LET'S DO THE SENDING
 */

// if you are not debugging and don't need error reporting, turn this off by error_reporting(0);
error_reporting(E_ALL & ~E_NOTICE);

try
{

    if(count($_POST) == 0) throw new \Exception('Form is empty');

    $emailText = "You have a new order from your websites's IoT order form\n";

    foreach ($_POST as $key => $value) {
        // If the field exists in the $fields array, include it in the email 
        if (isset($fields[$key])) {
            $emailText .= "$fields[$key]: $value\n";
        }
    }

    // All the neccessary headers for the email.
    $headers = array('Content-Type: text/plain; charset="UTF-8";',
        'From: ' . $from,
        'Reply-To: ' . $from,
        'Return-Path: ' . $from,
    );

    // Send email
    mail($sendTo, $subject, $emailText, implode("\n", $headers));

    $responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
    $responseArray = array('type' => 'danger', 'message' => $errorMessage);
}


// if requested by AJAX request return JSON response
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);

    header('Content-Type: application/json');

    echo $encoded;
}
// else just display the message
else {
    echo $responseArray['message'];
}


<div class="row" style="">
       <div class="panel panel-default" style="background:none; border:none; margin-bottom:0px;">
        <div class="panel-body">
            <div id="add_more">          
            </div>
            <div class="col-sm-3" style="padding-left:0px;">
                <div class="form-group">
                    <div class="input-group">
                      <select class="form-control" name="type">               
                        <option value="one-gang">1 Gang Switch</option>
                        <option value="two-gang">2 Gang Switch</option>
                        <option value="three-gang">3 Gang Switch</option>
                        <option value="socket">Socket</option>
                      </select>
                      <div class="input-group-btn" style="display:table-column;">
                        <button class="btn btn-success" type="button"  onclick="add_more();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
                      </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3" style="padding-left:0px;">
              <div class="form-group">
                <div class="input-group">
                  <select class="form-control"  name="color">         
                    <option value="black">Black</option>
                    <option value="white">White</option>
                  </select>
                                <div class="input-group-btn" style="display:table-column;">
                    <button class="btn btn-success" type="button"  onclick="add_more();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-sm-3" style="padding-left:0px;">
              <div class="form-group">
                <div class="input-group">
                 <input id="form_quantity" type="text" class="form-control" id="quantity" name="quantity" value="" placeholder="Enter quantity">
                  <div class="input-group-btn">
                    <button class="btn btn-success" type="button"  onclick="add_more();"> <span class="glyphicon glyphicon-plus" aria-hidden="true" style="right:5px;"></span> </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="clear"></div>
        </div> <!-- panel-body -->          
    </div> <!-- panel-default -->






      </div> <!-- row -->
<script type="text/javascript">
        var room = 1;
    function add_more() {

        room++;
        var objTo = document.getElementById('add_more')
        var divtest = document.createElement("div");
        divtest.setAttribute("class", "form-group removeclass"+room);
        var rdiv = 'removeclass'+room;
        divtest.innerHTML = '<div class="col-sm-3" style="padding-left:0px;"> <div class="form-group"> <div class="input-group"> <select class="form-control" id="type" name="type[]"> <option value="one-gang">1 Gang Switch</option> <option value="two-gang">2 Gang Switch</option> <option value="three-gang">3 Gang Switch</option> <option value="socket">Socket</option> </select> <div class="input-group-btn" style="display:table-column;"> <button class="btn btn-success" type="button"  onclick="add_more();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> </div> </div> <div class="col-sm-3" style="padding-left:0px;"> <div class="form-group"> <div class="input-group"> <select class="form-control" id="color" name="color[]"> <option value="black">Black</option> <option value="white">White</option> </select> <div class="input-group-btn" style="display:table-column;"> <button class="btn btn-success" type="button"  onclick="add_more;"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> </div> </div> <div class="col-sm-3" style="padding-left:0px;"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" id="quantity" name="quantity[]" value="" placeholder="Enter quantity"> <div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_add_more('+ room +');"><span class="glyphicon glyphicon-minus" aria-hidden="true"  style="right:5px;"></span></button> </div> </div> </div> </div> <div class="clear"></div>';

        objTo.appendChild(divtest)
    }
       function remove_add_more(rid) {
           $('.removeclass'+rid).remove();
       }
    </script>

0 个答案:

没有答案