Reputation: 41
How do I add an array of values to this javascript so it lists them in the drop down lists? I've got this far and I am really stuck, I think it must be a small addition to javascript.
Any help would be great.
JAVASCRIPT
var counter = 0;
function addNew() {
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
// Create a new text input
var newText = document.createElement('select');
newText.type = "select";
//for testing
newText.value = counter++;
// Create buttons for creating and removing inputs
var newAddButton = document.createElement('input');
newAddButton.type = "button";
newAddButton.value = " + ";
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = " - ";
// Append new text input to the newDiv
newDiv.appendChild(newText);
// Append new button inputs to the newDiv
newDiv.appendChild(newAddButton);
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
// Add a handler to button for deleting the newDiv from the mainContainer
newAddButton.onclick = addNew;
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
};
}
HTML
<select name="text">
<option value="t1">t1</option>
<option value="t2">t2</option>
<option value="t3">t3</option>
</select>
<input type="button" value=" + " onClick="addNew();">
EDIT PHP
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$number = $_POST['number'];
$Occasion = $_POST['Occasion'];
$Venues = $_POST['Venues'];
$date = $_POST['date'];
$guests = $_POST['guests'];
$custom = $_POST['custom'];
$from = $email;
$to = '[email protected]';
$subject = 'New Menu Order';
$human = $_POST['human'];
$body = "From: $name\n Contact Number: $number\n E-Mail: $email\n Occasion: $Occasion\n
Venues Looked At: $Venues\n Event Date: $date\n Number of Guests: $guests\n Custom
Menu:\n $custom";
if ($_POST['submit']) {
if ($name != '' && $email != '') {
if ($human == '4') {
if (mail ($to, $subject, $body, $from)) {
echo '<h4>Your message has been sent!</h4>';
} else {
echo '<h4>Something went wrong, go back and try again!</h4>';
}
} else if ($_POST['submit'] && $human != '4') {
echo '<h4>You answered the anti-spam question incorrectly!</h4>';
}
} else {
echo '<h4>You need to fill in all required fields!!</h4>';
}
}
?>
Cheers
Upvotes: 1
Views: 157
Reputation: 10142
To get the values from previous select box. Add below code right after the function addNew() {
function addNew() {
var countAll = document.getElementsByTagName("select").length - 1;
var lastSelectBox = document.getElementsByTagName("select")[countAll];
var items = lastSelectBox.innerHTML;
Here i'm getting the last selectbox created in the document.
And add new html of items
after:
var newText = document.createElement('select');
newText.type = "select";
//Attribute Name use for form elements
newText.setAttribute('name', 'text['+counter+']');
//Attribute id
newText.setAttribute('id', 'text_' + counter);
newText.innerHTML = items;
You can see working jsfiddle
Upvotes: 1