如何使用“提交”按钮在同一页面上检索选定的下拉值
[英]How to retrieve the selected drop down value on the same page using submit button
问题描述
I am working on a form that has 6 chkboxes and depending on the selection of chkboxes (multiple selection allowed) particular divs are getting displayed. 
我正在处理具有6个chkbox的表单，并且根据chkboxes的选择（允许多次选择），正在显示特定的div。 And each div contain some questions (In the form of dropdown boxes & these values are given hardcore & not from DB). 每个div都包含一些问题（以下拉框的形式，这些值是硬核的，而不是DB的）。 For this I used javascript. 为此，我使用了javascript。 Everything is going as expected. 一切都按预期进行。 But now I want to add submit button (on submit result should display on the same page) & on submitting the form I want to display the selected dropdown values. 但是现在我想添加提交按钮（提交结果应该显示在同一页面上）和提交表单时，我想显示所选的下拉值。
Please help me out. 请帮帮我。 Thanks in advance... 提前致谢...
Here is my tried code - 这是我尝试的代码-
<!DOCTYPE html>
<html>
<head>
<script>
var showClasses = { };
function fnchecked(blnchecked,className)
{
if(blnchecked)
{
showClasses[className] = true;
}
else
{
showClasses[className] = false;
}
var ps = document.getElementById("div-block").children;
var psNumber = ps.length;
for (var i = 0; i < psNumber; i ++) {
var have = hasClasses(ps[i], showClasses);
if (have) {
ps[i].style.display = "";
} else {
ps[i].style.display = "none";
}
}
}
function hasClasses(element)
{
var result = false;
for (var cls in showClasses) {
if (showClasses[cls]) {
if ((' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1) {
result = true;
}
}
}
return result
}
</script>
</head>
<body>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div>
<label>Technologies: </label></br>
<input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question1');" value="Kingspan Solar" /> Kingspan Solar</br>
<input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question2');" value="Solar PVT" /> Solar PVT</br>
<input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question3');" value="Insulation" /> Insulation</br>
<input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question4');" value="Gas boiler" /> Gas boiler</br>
<input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question5');" value="Oil boiler" /> Oil boiler</br>
<input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question6');" value="Heat recovery ventilation" /> Heat recovery ventilation</br>
<!--<input type="submit" name="formSubmit" value="Get The Info">--></br>
<input type="submit" name="submit" value="Submit"></p>
<?php
if(isset($_POST['submit']))
{
$tech = $_POST['technologies'];
if(empty($tech))
{
echo("You didn't select any Technologies.");
}
else
{
$N = count($tech);
echo("You selected $N Technology(s): ");
for($i=0; $i < $N; $i++)
{
echo($tech[$i] . " ");
}
}
}
?>
<div id="div-block" >
<p class=" question1 " style="display: none">
How many people live in the house ?
<select name="people">
<option value="">Click & Choose</option>
<option value="people1">1 to 3 (200 litre system)</option>
<option value="people2">3 to 4 (250 litre system)</option>
<option value="people3">4 to 6 (300 litre system)</option>
<option value="people4">6 to 9 (400 litre system)</option>
</select>
</p>
<p class="question1 question2 question3 question4 question5 question6 " style="display: none">
What type of house do you live in?
<select name="house_type">
<option value="">Click & Choose</option>
<option value="house_type1">Bungalow</option>
<option value="house_type2">2 story</option>
<option value="house_type3">Dormer</option>
<option value="house_type4">3 or 4 story</option>
<option value="house_type5">Apartment</option>
</select>
</p>
<p class="question1 question2 " style="display: none">
Is your house south facing?
<select name="house_face">
<option value="">Click & Choose</option>
<option value="house_face1">South</option>
<option value="house_face2">South east or South west</option>
<option value="house_face3">East or West</option>
<option value="house_face4">No</option>
</select>
</p>
<p class="question1 question2 question3 question4 question5 " style="display: none">
Was it built before 2006?
<select name="built">
<option value="">Click & Choose</option>
<option value="built1">Yes</option>
<option value="built2">No</option>
</select>
</p>
<p class=" question2 " style="display: none">
How many people live at the house ?
<select name="people">
<option value="">Click & Choose</option>
<option value="people1">1-2</option>
<option value="people2">3</option>
<option value="people3">4</option>
<option value="people4">4-6</option>
<option value="people4">6-8</option>
</select>
</p>
<p class=" question3 " style="display: none">
Is your house detached?
<select name="detached">
<option value="">Click & Choose</option>
<option value="detached1">Detached</option>
<option value="detached2">Semi D</option>
<option value="detached3">Mid Terrace</option>
<option value="detached4">Apartment</option>
</select>
</p>
<p class=" question4 question5 question6 " style="display: none">
How many bedrooms are in the house?
<select name="bedroom">
<option value="">Click & Choose</option>
<option value="bedroom1">1-2</option>
<option value="bedroom2">2-3</option>
<option value="bedroom3">3-4</option>
<option value="bedroom4">4-5</option>
<option value="bedroom5">5-8</option>
</select>
</p>
<p class=" question4 question5 " style="display: none">
Do you use gas or oil?
<select name="gas_oil">
<option value="">Click & Choose</option>
<option value="gas_oil1">Gas</option>
<option value="gas_oil2">Oil</option>
</select>
</p>
<p class=" question4 question5 " style="display: none">
House you like to upgrade your central heating controls to SEAI standards so you can claim a grant for the works?
<select name="upgrade">
<option value="">Click & Choose</option>
<option value="upgrade1">Yes</option>
<option value="upgrade2">No</option>
</select>
</p>
<p class=" question6 " style="display: none">
Is this a new build or total renovation?
<select name="upgrade">
<option value="">Click & Choose</option>
<option value="upgrade1">Yes</option>
<option value="upgrade2">No</option>
</select>
</p>
</div>
</div>
</body>
</html>
1 个解决方案
解决方案1
1 已采纳 2013-05-08 11:48:03
I've changed your code in jsfiddle. 我在jsfiddle中更改了您的代码。 Check this by clicking here 点击这里检查
$(document).ready(function(){
$('.checkme').click(function(){
if($(this).is(':checked')){
var val = $(this).attr('id');
$('.'+val).show();
}
});
$('.submit').click(function(){
var value = $('.firstCheck').val();
$('.finalvalue').html(value);
});
}); }）;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在不使用提交按钮的情况下获得下拉选择的值？ - How can I get the drop down selected value without using submit button?
如何保留下拉值作为提交后选择的值 - how to retain drop down values as the value selected after submit
从下拉列表中获取选定值并将选定值传递到 php 中的提交按钮 - Get selected value from drop down and pass selected value into submit button in php
使用PHP在同一页面上的下拉菜单的所选项目 - using the selected item of drop down menu on same page using php
如何根据选择的单选按钮更改下拉列表的值？ - How to change value of a drop down list depend on selected radio button?
在 2 个不同的 div ID 中有 2 个同名的 HTML 下拉列表，那么如何使用 AJAX/jQuery 提交特定 div ID 的下拉值 - There are 2 HTML drop downs with same name in 2 different div IDs, so how to submit drop down value of specific div ID using AJAX/jQuery
如何在PHP中按下提交按钮后保持下拉选择的值？ - how to keep drop down selected values after pressing submit button in php?
如何使用下拉列表中的选定值显示数据库中的列表 - How to display the list from database using selected value in drop down
如何使用php使用数据库值选择下拉选项 - how to make the drop down option selected with database value using php
如何在提交后选择下拉选项保持选中状态 - How to make selected drop down option stay selected after submit
相关标签