I have a HTML form of 2 dropdowns and 1 input field within a "div". I have a add more button for which the same div will be added (Eg. In job portals you add another qualification by clicking "Add other").
I want to get all the values(all the divs added by the user) to PHP email form. I have googles but didn't find appropriate answer. I am able to get only the last added div values.
Appreciate your help.
I am a PHP learner currently.
<?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
";
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
";
}
}
// 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("
", $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>
