We Keep Coding

im having a problem in javascript output it is not showing

I want to solve this question with CSS, form, javascript and I tried to do javascript and included 3 if statements but it not really showing me the output
is it because the if statements should each be closed with brackets? or maybe there is a mistake in the way I write the variables I tried many things, and it's not working please help I'm still a beginner programmer and I can't figure it out
function myFunction(){
var Fname= document.getElementById("fname").value;
var Lname= document.getElementById("lname").value;
var Name = Fname + " " + Lname;
var date= document.getElementById("date").value;
var tr= document.getElementById("t").value;
var tour= document.getElementById("tour").value;
var request= document.getElementById("request").value;
var v = Number(document.getElementById("visitor").value);
var city = document.getElementById("city").value;
var x="";
var y="";
var z="";
var total=x+y+z;
{
if (v<=0){
v=prompt(" minimum visitors are 1 try again");
}
else if (city == "Amman $50") {
x = v * 50;
}
else if (city == "Salt $20") {
x = v * 20;
}
else {
x = v * 10;
}
}
{
if ( tour==Yes )
{
y= 50;
}
else {
y=x;
}
}
{
if (trans==Car)
{
z= 30;
}
else{
z=20;
}
}
document.getElementById("result").innerHTML = "Arrival date" + date + "<br>"
+ Name.toUpperCase() +
"<br>"+" City " + city + v + "visitors"
+"<br>" + " transportation " + tr +
"<br>" + "tour leader :" + tour
"<br>"+ "any medical:" + request +
"<br>" +"Amount=$ " + total ;
return false;
};
body{
margin:20px;
text-align:center;
}
form{
background-color:orange;
}
div.sec {
margin-left:300px;
}
div.transpo {
margin-right:450px;
}
<h3 style="text-align:center"> <span style="color:red;font-size:40px;">V</span>isit <span style="color:red;font-size:40px;">J</span> ordan </h3>
<form>
<div class="transpo">
<input type="text" id="fname" size="30" placeholder="First Name">
<br><br>
<select id="city">
<option value="select your city "> Select your city </option>
<option value="50 ">Amman $50</option>
<option value="20 ">Salt $20</option>
<option value="10 ">Jarash $10</option>
</select>
<br><br>
<label><b>Number of visitors</b></label>
<br>
<input type="number" id="visitor">
<br><br>
<label style="margin-right:10px;"><b> Transportation</b></label>
<br>
<input type="radio" id="car" name="transportation" value="car" id="t">
<label id="car" for="car">car $30</label>
<input type="radio" id="bus" name="transportation" value="bus" id="t">
<label for="bus">bus 20$</label><br>
</div>
<div class="sec">
<input type="text" id="lname" size="30" placeholder="Last Name">
<br><br>
<label><b>Arrival Date:</b></label><br>
<input type="date" id="date">
<br><br>
<label><b> Any medical Request:</b></label>
<br>
<textarea rows="1" cols="20" id="request"></textarea>
<br><br>
<label><b> Tour Leader $50</b></label>
<br>
<input type="radio" id="yes" name="tour" value="yes" id="tour">
<label for="yes">yes</label>
<input type="radio" id="no" name="tour" value="no" id="tour">
<label for="no">no</label><br>
</div>
<button type="button" onclick="myFunction()"> PREVIEW </button>
<button type="submit" onClick=""> Submit </button>
</form>
<p style="background-color:#99ccff;width:420px;font-weight: bold;" id="result"> </p>
<p style="background-color:#99ccff;width:420px;font-weight: bold;" id="result2"> </p>

If you open your console in your browser (pressing F12 as default) you can see that the Javascript is returning an error.
Uncaught SyntaxError: "" string literal contains an unescaped line break
This refers two missing quote marks on row 174 and row 176, both are missing on the end of the file.
However your code still don't work, if you press preview you get another error
<input type="radio" id="car" name="transportation" value="car" id="t">
<input type="radio" id="bus" name="transportation" value="bus" id="t">
on these two lines you specify id twice which is not allowed.
Tips so you can more easily solve these issues on your own:
You should start to use the console to find errors in your code.
Try to reread your code and look for small errors like a missing "
If you are unsure how something works like a html or javascript feature use websites like w3school to look up well expained documentation.
Good luck in your future coding adventures.

Building a Sheets Emailer

The Idea:
User selects “Email” from menu which opens the Google Sidebar.
It prompts the user to select their field office location with radio buttons and add their additional message for the email body with a text area
User clicks Submits and “FFO_Email” function runs
“FFO_Email” function will do the following
Determines the Field Office Location based on the radio selection
Determines the list of emails based on Field Office Location ('FFO-IS'!A3:A12) and emails to the right in “FFO-IS” sheet ('FFO-IS'!B3:H12)
Creates email subject
Creates email body (which will incorporate the additional message from text area in sidebar
Finally sending email to individuals and displaying the message the email has been sent successfully in the sidebar
The problems I’m having
The selected radio Field Office Location and Additional Message are not passing to the FFO_Email.gs function. Thus not sending the email to the individuals.
Sheet can be found here
https://docs.google.com/a/cougars.ccis.edu/spreadsheets/d/1PK18AXMlfC2reKRP7IJWHRT9TEnDzfWa3g-uavgsxUk/edit?usp=sharing
FFO_email.html
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function onSuccess(fieldOffice, AdditionalMessage) {
var div = document.getElementById('fieldOfficeFFO');
div.innerHTML = 'Email for ' + fieldOffice + ' has been sent successfully.';
}
google.script.run.withSuccessHandler(onSuccess)
.FFO_Email();
</script>
</head>
<body>
<form id=fieldOfficeFFO>
<fieldset style="background-color:LightGray;width:250px">
<div>
<label for="Field Office Select">Please select your field office below.</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="ARK_E_TEXAS">
<label for="ARK_E_TEXAS">ARK_E_TEXAS</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="BORDER_EAST">
<label for="BORDER_EAST">BORDER_EAST</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="BORDER_WEST">
<label for="BORDER_WEST">BORDER_WEST</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="CENTRAL_TEXAS">
<label for="CENTRAL_TEXAS">CENTRAL_TEXAS</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="DALLAS">
<label for="DALLAS">DALLAS</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="FORT_WORTH">
<label for="FORT_WORTH">FORT_WORTH</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="GULF_COAST">
<label for="GULF_COAST">GULF_COAST</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="LOUISIANA">
<label for="LOUISIANA">LOUISIANA</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="NEW_MEXICO">
<label for="NEW_MEXICO">NEW_MEXICO</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="OKLAHOMA">
<label for="OKLAHOMA">OKLAHOMA</label>
</div>
</fieldset>
<br>
<br>
<fieldset>
<div class="form-group">
<label for="AdditionalMessage">Additional Message</label>
<textarea id="AdditionalMessage" rows="3" style="width:250px"></textarea>
</div>
</fieldset>
</form>
<div class="block">
<button class="blue" onclick="onSuccess(fieldOfficeFFO,AdditionalMessage)">Submit</button>
<button onclick="google.script.host.close()">Close</button>
</div>
</body>
</html>
FFO_Email.gs
function FFO_Email(fieldOfficeFFO, AdditionalMessage) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('FFO-IS')
var firstRow = 3;
var lastRow = 10;
var dataRange = sheet.getRange(firstRow, 1, lastRow, 8);
var myDate = new Date();
var hrs = myDate.getHours();
//Determines the row the Field Office is in
for (var j = 0; j < dataRange.length; j++) {
if (dataRange[j][0] == fieldOfficeFFO) {
Logger.log((j + 1))
return j + 1;
}
}
//Create the greeting based on the time of day
var greeting;
if (hrs < 12)
greeting = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
greeting = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
greeting = 'Good Evening';
// Fetch values for each row in the Range.
var data = dataRange.getValues();
for (i in data) {
var row = data[i];
var field_Office = fieldOfficeFFO;
var PT_Director = dataRange.getValues(j, 2);
var PT_Manager = dataRange.getValues(j, 3);
var PT_Management_Specialist = dataRange.getValues(j, 4);
var Area_Supervisory_AM = dataRange.getValues(j, 5);
var Area_AM = dataRange.getValues(j, 6);
var SC_Senior_Property_Manager = dataRange.getValues(j, 7);
var AMS = dataRange.getValues(j, 8);
var email_Subject = field_Office + " FFO / Income Statement Report is ready for viewing";
var message_Body = greeting + "," +
"<br> <br>" +
"The " + field_Office + " <b>FFO / Income Statement Report is ready for viewing in</b> the <i>AMS Standard Reports - R07 Google Folder</i>" +
" located at https://drive.google.com/drive/u/0/folders/0Bx1aKS2V9K-kb0tNLXFfbGtmalE" +
"<br> <br>" +
"<br> <br>" +
//Additional Message from html side added here
AdditionalMessage +
"<br> <br>" +
"Thank you." +
"<br> <br>" +
AMS;
//Send email
MailApp.sendEmail({
to: SC_Senior_Property_Manager + "," + Area_AM + "," + AMS,
cc: PT_Director + "," + PT_Manager + "," + PT_Management_Specialist + "," + Area_Supervisory_AM,
replyTo: AMS,
subject: email_Subject,
htmlBody: message_Body
});
return fieldOfficeFFO
SpreadsheetApp.flush();
Utilities.sleep(1000);
}
}

Radio inputs in the same group can't have the same id=.
Giving them the same name attribute is ok if that's how you want to group them.
Textarea has no name= attribute at all.

There are quite a few changes that need to be made:
I'd create a new function for the submission, I'm calling it sendInputInfo():
Script Tag:
<script>
function sendInputInfo() {
console.log('sendInputInfo ran!');//Open browsers console to see print out
//Get the form information to be sent
var theFormElement = document.getElementById('fieldOfficeFFO');
google.script.run.withSuccessHandler(onSuccess)
.FFO_Email(theFormElement);
};
function onSuccess(fieldOffice, AdditionalMessage) {
div.innerHTML = 'Email for ' + fieldOffice + ' has been sent successfully.';
};
</script>
Change the onclick attribute:
<button class="blue" onclick="sendInputInfo()">Submit</button>
Note that there are no values in the parenthesis being sent to the function. That's not needed. The form is being retrieved in the sendInputInfo() function.
Currently, the code is not passing any information to the server. There is nothing in the parenthesis of the server function:
Currently:
.FFO_Email();
There needs to be something in the parenthesis:
.FFO_Email(theFormElement);
Your .gs code has two arguments in the parenthesis. Apps Script will only accept one input on the server side if it is a form object. So, you'll need to change the function to:
function FFO_Email(theFormObject) {
Logger.log('theFormObject: ' + theFormObject);//Should be an object
Logger.log('theFormObject.fieldOfficeFFO: ' + theFormObject.fieldOfficeFFO);
for (var key in theFormObject) {//Loop through all the data in the form
Logger.log('key: ' + key);
Logger.log('value: ' + theFormObject[key]);
};

Trouble with innerHTML using Javascript

I am making a form with some fields that a user has to fill out. Once he/she fills it out, hits save, the form disappears and a new div appears with what the user filled out. Unfortunately, I cannot get the data to show in this second div that appears. I am not sure what I'm doing wrong, maybe you can help me? Also, I need to use pure Javascript, not jQuery or anything else.
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var state = document.getElementById('select_state');
var whichState = state.options[state.selectedIndex].text;
var parname = document.getElementById('pname');
var form = document.getElementById('form_div');
var edit = document.getElementById('view_div');
if (document.getElementById('m').checked == true) {
var Gender = 'Male';
} else {
Gender = 'female';
}
function showData() {
if (form.style.display != 'none') {
form.style.display = 'none';
edit.style.display = 'block';
} else {
form.style.display = 'block';
}
parname.innerHTML = [
firstName.name + " : " + firstName.value + "<hr>",
lastName.name + " : " + lastName.value + "<hr>",
state.name + " : " + state.options[state.selectedIndex].text + "<hr>"
].join("");
}
function editData() {
if (edit.style.display != 'none') {
edit.style.display = 'none';
form.style.display = 'block';
} else {
edit.style.display = 'block';
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="form_div">
<form>
First Name:
<input type="text" name="First Name" id="fname">Last Name:
<input type="text" name="Last Name" id="lname">
<input type="radio" name="Gender" id="m" value="male" checked>Male
<input type="radio" name="Gender" id="f" value="female">Female
<select name="state" id="select_state">
<option value="select">- Please Select -</option>
<option value="PA">Pennsylvania</option>
<option value="NJ">New Jersey</option>
<option value="WI">Wisconsin</option>
<option value="WA">Washington</option>
</select>
</form>
<input type="submit" value="Save" onclick="showData();">
</div>
<div id="view_div" style="display:none;">
<button id="edit" value="Edit" onclick="editData();"></button>
<p id="pname"></p>
</div>
<body>
</html>

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="form_div">
<form>
First Name:
<input type="text" name="First Name" id="fname">
Last Name:
<input type="text" name="Last Name" id="lname">
<input type="radio" name="Gender" id="m" value="male" checked>Male
<input type="radio" name="Gender" id="f" value="female">Female
<select name="state" id="select_state">
<option value="select">- Please Select -</option>
<option value="PA">Pennsylvania</option>
<option value="NJ">New Jersey</option>
<option value="WI">Wisconsin</option>
<option value="WA">Washington</option>
</select>
</form>
<input type="submit" value="Save" onclick="showData();">
</div>
<div id="view_div" style="display:none;">
<button type="button" id="edit" value="Edit" onclick="editData();">
<p id="pname"></p>
</div>
<script>
var firstName = document.getElementById('fname');
var lastName = document.getElementById('lname');
var state = document.getElementById('select_state');
var whichState = state.options[state.selectedIndex].text;
var parname = document.getElementById('pname');
var form = document.getElementById('form_div');
var edit = document.getElementById('view_div');
if (document.getElementById('m').checked == true) {
var Gender = 'Male';
} else {
Gender = 'female';
}
function showData() {
if (form.style.display != 'none') {
form.style.display = 'none';
edit.style.display = 'block';
} else {
form.style.display = 'block';
}
parname.innerHTML = [
firstName.name + " : " + firstName.value + "<hr>",
lastName.name + " : " + lastName.value + "<hr>",
state.name + " : " + state.options[state.selectedIndex].text + "<hr>"
].join("");
}
function editData() {
if (edit.style.display != 'none') {
edit.style.display = 'none';
form.style.display = 'block';
} else {
edit.style.display = 'block';
}
}
</script>
</body>
</html>
try this one I think it is working

try the below code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="form_div">
<form>
First Name:
<input type="text" name="First Name" id="fname">
Last Name:
<input type="text" name="Last Name" id="lname">
<input type="radio" name="Gender" id="m" value="male" checked>Male
<input type="radio" name="Gender" id="f" value="female">Female
<select name="state" id="select_state">
<option value="select">- Please Select -</option>
<option value="PA">Pennsylvania</option>
<option value="NJ">New Jersey</option>
<option value="WI">Wisconsin</option>
<option value="WA">Washington</option>
</select>
</form>
<input type="submit" value="Save" onclick="showData();">
</div>
<div id="view_div" style="display:none;">
<button type="button" id="edit" value="Edit" onclick="editData();">
<p id="pname"></p>
</div>
<script>
function showData() {
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var state = document.getElementById('select_state');
var whichState = state.options[state.selectedIndex].text;
var parname = document.getElementById('pname');
var form = document.getElementById('form_div');
var edit = document.getElementById('view_div');
if (document.getElementById('m').checked == true) {
var Gender = 'Male';
} else {
Gender = 'female';
}
if (form.style.display != 'none') {
form.style.display = 'none';
edit.style.display = 'block';
} else {
form.style.display = 'block';
}
parname.innerHTML = [
" First Name : " + firstName + "<hr>",
" Last Name : " + lastName + "<hr>",
" state : " + state.options[state.selectedIndex].text + "<hr>"
].join("");
}
function editData() {
if (edit.style.display != 'none') {
edit.style.display = 'none';
form.style.display = 'block';
} else {
edit.style.display = 'block';
}
}
</script>
</body>
</html>

var firstName = document.getElementById('fname');
var lastName = document.getElementById('lname');
Problem: you didn't target DOM objects, you have targeted their values, and later in code you try to get properties, like: firstName.name!
Change two lines at the top of your code to this, and everything should work fine.

One error is the fact that you are getting the values from the elements right after the page is rendered, thus they are all undefined.
You should get them after the save button is pressed. Moving the variable declarations inside the showData function will help that.
Also in your variables you are saving the element.value, thus saving the string entered by the user.
Later when creating the text you are trying to insert as HTML you access the value and name properties. That means you are trying to use element.value.value and element.value.name which undefined for strings.
Removing the value property in your variable declaration will give you the element, and later you can just get the value and name properties out of it.

I can't print a value from html select menu with if statements (javascript)

I've had trouble with these for a while, I can't figure out how to make the variable(seating) equal to either 'Balcony', 'Lower Area', Level One' or 'level Two'.
I have tried using .select, making some array that I failed on, .checked .
I need to be able to make the seating variable equal to one of the value according to what bit of the select menu they pick(I am using if statements)
I will add my html and Javascript below.
<div data-role="fieldcontain">
<label for="selectmenu" class="select">Preferred Seating:</label> <!-- Following drop down checkbox -->
<select name="selectmenu" id="selectmenu">
<option name="selectmenu" value="200" class="lowerLvl" id="lowerArea" >Lower Area($200)</option>
<option name="selectmenu" value="150" class="levelOne" selected="selected" id="levelOne">Level 1($150)</option>
<option name="selectmenu" value="100" class="levelTwo" id="levelTwo">Level 2($100)</option>
<option name="selectmenu" value="200" class="balcony" id="balcony">Balcony($200)</option>
</select>
</div>
<!--End of DropDownBoxes-->
<!--START OF CHECK BOXES-->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Prefered night:</legend>
<input type="radio" name="checkbox1" id="checkbox1_0" class="custom" value="" checked="checked" /></option>
<label for="checkbox1_0">Thursday</label>
<br />
<input type="radio" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1">Friday</label>
<br /><!--Break as on Example-->
<input type="radio" name="checkbox1" id="checkbox1_2" class="custom" value="" />
<label for="checkbox1_2">Saturday</label>
</fieldset><!-- Above are check boxes -->
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Subscribe to weekly newsletter: </legend>
<input type="checkbox" name="newletter" id="news" class="custom" value="" />
</fieldset>
</div>
<!--END OF CHECK BOXES-->
<!--Put a tick box here that asks for weekly mail-->
<button type="submit" value="Register" onClick="validateGalaOrder()"></button>
<p id="OrderInput"></p><!--USERS INPUT RETURNS TO THIS <P>-->
<p id="tktCost"></p>
<p id="orderErrorMsg"></p><!--INCORRECT INPUT MESSAGES RETURN TO THIS <P>-->
Below is my JavaScript.
Please note that some of the JavaScript is from other parts of html above the select menu.
At the moment I am getting the 'value' from the select menu(this is in the else statement under the variable cost)
function validateGalaOrder() {
var orderErrorMsg = "";
var OrderInput = "";
var ValidateOrderName = document.getElementById('txtOrderName').value;
var numTickets = document.getElementById('numTickets').value;
var Orderemail = document.getElementById('txtOrderEmail');
var filter = /*Email Symbol and letter Validator*/ /^([a-zA-Z0-9_.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; //This filters out the email input
var lowerLvl = document.getElementById('lowerArea').value;
var lvlOne = document.getElementById('levelOne').value;
var lvlTwo = document.getElementById('levelTwo').value;
var Balcony = document.getElementById('balcony').value;
var cost = '';
var seating = '';
var prefNight; //This will contain the prefered night and print it
var newsLetter; //Has details about if they have chosen the newsletter or not.
if (ValidateOrderName.length <= 2) {
orderErrorMsg += ("<b>-ERROR- Please enter a valid name with a length of at least 3 letters</b>");
document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
document.getElementById('txtOrderName').value = ''; //will clear input field if false.
document.getElementById('txtOrderName').focus(); //this Focuses on textbox if input is wrong.
//alert("-ERROR- Please enter a name more than one letter!");
document.getElementById('OrderInput').innerHTML = ''; //If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message
return false;
}
if (!filter.test(Orderemail.value)) {
orderErrorMsg += ("<b>-ERROR- Please provide a valid email address.</b>");
document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
document.getElementById('txtOrderEmail').value = '';
document.getElementById('txtOrderEmail').focus(); //this Focuses on textbox if input is wrong.
// alert('Please provide a valid email address');
document.getElementById('OrderInput').innerHTML = ''; //If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message
return false;
}
if (numTickets <= 0) {
orderErrorMsg += ("<b>-ERROR- Please enter an amount of tickets greater than zero</b>");
document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
document.getElementById('numTickets').value = '';
document.getElementById('numTickets').focus(); //this Focuses on textbox if input is wrong.
/*alert("-ERROR- Please enter a mobile number with exactly 10 numeric digits");*/
document.getElementById('OrderInput').innerHTML = ''; //If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message
return false;
} else {
if (document.getElementsById('lowerArea').checked == true) {
seating = "Lower Area";
}
if (document.getElementsById('levelOne').checked == true) {
seating = "Level One";
}
if (document.getElementsById('levelTwo').checked == true) {
seating = "Level Two";
}
if (document.getElementsById('balcony').checked == true) {
seating = "Balcony";
}
//Below is the checkbox printing
if (document.getElementById('checkbox1_0').checked == true) {
prefNight = 'Thursday';
}
if (document.getElementById('checkbox1_1').checked == true) {
prefNight = 'Friday';
}
if (document.getElementById('checkbox1_2').checked == true) {
prefNight = 'Saturday';
}
//Above is the checkbox printing
if (document.getElementById('news').checked == true) {
newsletter = "You wish to recieve our weekly E-mail";
}
if (document.getElementById('news').checked == false) {
newsletter = "You do not wish to recieve our weekly E-mail";
}
cost = parseInt(document.getElementById('selectmenu').value, 10) * numTickets; //This calculates the cost(selectMenu*numTickets)
var Orderemail = document.getElementById('txtOrderEmail').value; //This will grab the email value Inputed.
OrderInput += ("Your details are: <br />" + "Your E-mail address is: " + Orderemail + "<br />" + newsletter + "<br /> <br />" +
"You have the following tickets reserved: <br />" + numTickets + " on " + prefNight + " and your seating is :" + seating + "<br /> <br />" + "The total cost of your order will be: $" + cost);
document.getElementById('OrderInput').innerHTML = OrderInput; //This prints the users details to a html element.
document.getElementById('orderErrorMsg').innerHTML = ''; //Removes error messages when everything is correct.
}
return true;
}
Just a quick reminder of what I am trying to do:
I need to print a seating variable value to the OrderInput variable.
This Seating variable need to either be 'lower area', 'level one' 'balcony' or 'level two' Depending on what they click on(the options)

EDIT 2: seating = document.getElementById('selectmenu').options[document.getElementById('selectmenu').selectedIndex].text.split('(')[0]
Thanks to Teemu for catching that.
EDIT: After looking at your code, I guess you can just declare the variable as seating = document.getElementById('selectmenu').options[document.getElementById('selectmenu').selectedIndex].text.
Get the <select> element's .selectedIndex and use that to get its .options[selectedIndex].text, which is the text you want.
Here's a fiddle.

So #flowstoneknight has produced the correct answer. My new code is below. I now can get the value and multiply it by the number of tickets inputted aswell as Print the name of the seat in the orderInput
my html(It hasn't changed')
<div data-role="fieldcontain">
<label for="selectmenu" class="select">Preferred Seating:</label> <!-- Following drop down checkbox -->
<select name="selectmenu" id="selectmenu">
<option name="selectmenu" value="200" class="lowerLvl" id="lowerArea" >Lower Area($200)</option>
<option name="selectmenu" value="150" class="levelOne" selected="selected" id="levelOne">Level 1($150)</option>
<option name="selectmenu" value="100" class="levelTwo" id="levelTwo">Level 2($100)</option>
<option name="selectmenu" value="200" class="balcony" id="balcony">Balcony($200)</option>
</select>
</div>
<!--End of DropDownBoxes-->
<!--START OF CHECK BOXES-->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Prefered night:</legend>
<input type="radio" name="checkbox1" id="checkbox1_0" class="custom" value="" checked="checked" /></option>
<label for="checkbox1_0">Thursday</label>
<br />
<input type="radio" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1">Friday</label>
<br /><!--Break as on Example-->
<input type="radio" name="checkbox1" id="checkbox1_2" class="custom" value="" />
<label for="checkbox1_2">Saturday</label>
</fieldset><!-- Above are check boxes -->
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Subscribe to weekly newsletter: </legend>
<input type="checkbox" name="newletter" id="news" class="custom" value="" />
</fieldset>
</div>
<!--END OF CHECK BOXES-->
<!--Put a tick box here that asks for weekly mail-->
<button type="submit" value="Register" onClick="validateGalaOrder()"></button>
<p id="OrderInput"></p><!--USERS INPUT RETURNS TO THIS <P>-->
<p id="tktCost"></p>
<p id="orderErrorMsg"></p><!--INCORRECT INPUT MESSAGES RETURN TO THIS <P>-->
Here is the snippet of my Javascript, Please note I am only posting the select menu part which is in the else statement.
var seating = '';
seating = document.getElementById('selectmenu').options[document.getElementById('selectmenu').selectedIndex].text.split('(')[0]
cost = parseInt(document.getElementById('selectmenu').value,10) * numTickets;//This calculates the cost(selectMenu*numTickets)
var Orderemail = document.getElementById('txtOrderEmail').value;//This will grab the email value Inputed.
OrderInput +=("Thanks " + ValidateOrderName + " for your order!<br /> <br />" + "Your details are: <br />" + "Your E-mail address is: " + Orderemail + "<br />" + newsletter + "<br /> <br />" +
"You have the following tickets reserved: <br />" + numTickets +" on " + prefNight + " and your seating is :" + seating + "<br /> <br />" + "The total cost of your order will be: $" + cost);
document.getElementById('OrderInput').innerHTML = OrderInput;//This prints the users details to a html element.
document.getElementById('orderErrorMsg').innerHTML = '';//Removes error messages when everything is correct.
}
return true;
}

JQuery iterating over TextField_Counter

Can someone please help with collecting the form data from below. The following mark up is looked for x number of customers although I'm struggling to extract the data from the form successfully.
Many thanks,
James
<h5 id="Customer1">
<span>Customer 1</span>
</h5>
<div class="CustomerWrapper">
<input type="hidden" value="0" id="CustomerType0" name="CustomerType0">
<span class="TitleSelect">
<label for="CustomerTitle0">Title</label>
<select id="CustomerTitle0" name="CustomerTitle0">
<option value="-1"></option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Miss</option>
</select>
</span>
<span class="FirstInput">
<label for="FirstName0">First Name</label>
<input type="text" value="" name="FirstName0" id="FirstName0">
</span>
<span class="LastInput">
<label for="LastName0">Surname(s)</label>
<input type="text" value="" name="LastName0" id="LastName0">
</span>
My attempt is faily close as I just need the first and lastnames.
$('.PaxDetails .CustomerWrapper').each(function (index) {
var counter = ++index;
var firstName = "#FirstName" + counter;
var lastName = "#LastName" + counter;
var customerName = $(firstName).val() + ' ' + $(lastName).val();
alert(customerName);
});

Doku: .serialize()
$("<selector to get the form>").serialize();
Edit
If you only need the first and last name then you will have to do it by hand...
var customer = [];
$("div.CustomerWrapper").each(function(i, el) {
customer.push({
"FirstName": $("#FirstName" + i, el).val(),
"LastName": $("#LastName" + i, el).val()
});
});
console.log(customer);
jsfiddle