我可以't使用if语句(javascript)打印html选择菜单中的值
I can't print a value from html select menu with if statements (javascript)
我在这些方面遇到了一段时间的麻烦,我不知道如何使变量(座位)等于"阳台"、"下部区域"、"一级"或"二级"。
我尝试过使用.select,制作一些失败的数组,检查过。
我需要能够使座位变量等于根据他们选择的选择菜单位的值之一(我使用的是if语句)
我将在下面添加我的html和Javascript。
<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>-->
下面是我的JavaScript。
请注意,有些JavaScript来自选择菜单上方html的其他部分。
目前,我正在从选择菜单中获取"值"(这是在变量cost下的else语句中)
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;
}
只是快速提醒我要做什么:
我需要将座位变量值打印到订单输入的变量中。
这个座位变量需要是"下层区域"、"一级"、"阳台"或"二级"取决于他们点击的内容(选项)
编辑2:seating = document.getElementById('selectmenu').options[document.getElementById('selectmenu').selectedIndex].text.split('(')[0]
感谢Teemu的捕捉。
编辑:看了您的代码后,我想您可以将变量声明为seating = document.getElementById('selectmenu').options[document.getElementById('selectmenu').selectedIndex].text
。
获取<select>
元素的.selectedIndex
,并使用它来获取它的.options[selectedIndex].text
,这就是您想要的文本。
这是一把小提琴。
所以@flowstoneknight给出了正确的答案。我的新代码在下面。我现在可以获得该值并将其乘以输入的机票数量,还可以打印订单中的座位名称输入
我的html(它没有改变)
<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>-->
这是我的Javascript片段,请注意,我只是发布了else语句中的选择菜单部分。
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;
}
- 使用javascript将动态表从一个html页面打印到另一个html页
- 打印预览没有应用程序页眉和页脚的html表格
- 如何在html中打印选择文本
- 如何在internjs中打印createpage中的HTML源代码
- 用Koa打印漂亮的HTML输出
- 如何在html元素中打印javascript变量
- 如何在php中使用echo来在html中打印文本
- 在 javascript 函数中打印 HTML JavaScript 代码
- 如何使用 JQuQuery 解析 JSON 对象并在 HTML 页面中以表格格式打印输出
- 修改html打印的页眉
- 将 html 打印到多个页面
- 使用自定义 html 打印高库存
- 数据在控制台中打印,分配给$scope但不以 HTML 打印
- 我怎么能在不渲染的情况下使用PHP将HTML打印到网站上呢
- 禁用HTML打印页面上的javascript
- Typescript:将字符串作为HTML打印到终端
- 如何让html打印javascript函数的返回值
- HTML打印限制仅限1页
- 使用javascript将图片添加到html打印输出
- 用JavaScript和HTML打印表情符号