I have three dropdown by default. The first dropdown value will affect the visibility of the 2nd and 3rd dropdown. For example, choose option one, hide 3rd dropdown, show 2nd dropdown. 2nd and 3rd dropdown will hold the value of the same column in database.
<select class="ui fluid selection dropdown dd" name="category1" id="category1">
<i class="dropdown icon"></i>
<option value="">Which category does this fall into?</option>
<option value="1">Gestures</option>
<option value="2">Etiquette</option>
</select>
<?php if(isset($_POST['category1'])) { $category1 = $_POST['category1']; }?>
<div class="category2" >
<select class="ui fluid selection dropdown dd" name="category2" id="category2" >
<i class="dropdown icon"></i>
<option value="">Be specific...</option>
<option value="1">Friendly gestures</option>
<option value="2">Gestures of respect</option>
<option value="3">Salutes</option>
<option value="4">Celebratory gestures</option>
<option value="5">Finger-counting</option>
<option value="6">Obscene gestures</option>
<option value="7">Taunts</option>
<option value="8">Head motions</option>
<option value="9">Other gestures</option>
</select>
</div>
<?php if(isset($_POST['category2'])) { $category2 = $_POST['category2']; }?>
<div class="category3" style="display:none!important;">
<select class="ui fluid selection dropdown dd" name="category3" id="category3">
<i class="dropdown icon"></i>
<option value="">Be specific...</option>
<option value="10">Greetings</option>
<option value="11">Making payment</option>
<option value="12">Visiting someone's house</option>
<option value="13">Gifts and gift-giving</option>
<option value="14">Table manners</option>
<option value="15">Eating and drinking</option>
<option value="16">Funerals</option>
<option value="17">Bars and restaurants</option>
<option value="18">Driving</option>
<option value="19">Business etiquette</option>
<option value="20">Hierarchy and honoring the elder</option>
</select>
</div>
<?php if(isset($_POST['category3'])) { $category3 = $_POST['category3']; }?>
Now, $category2 and $category3 represent the same column in database. If I were to make an insert query, how do I make sure either dropdown value is posted and will be stored?
mysqli_query($link,"INSERT INTO practices(category1,category2) VALUES('$category1','$category2 or $category3')")
I tried this, and
<?php if(isset($_POST['category2'])) { $category2 = $_POST['category2']; }?>
<?php if(isset($_POST['category3'])) { $category2 = $_POST['category3']; }?>
This one worked for one of the dropdown only, and error inserting for another. Any help would be appreciated
Save previously posted value in a hidden field and then post again with the second dropdown list.
<div class="category3" style="display:none!important;">
<?php if(isset($_POST['category2']))
{
echo'<select name="pre_category" >
<option selected="selected" value="'.$_POST['category2'].'">'.$_POST['category2'].' </option>
</select>';
} ?>
<select class="ui fluid selection dropdown dd" name="category3" id="category3">
<i class="dropdown icon"></i>
<option value="">Be specific...</option>
<option value="10">Greetings</option>
<option value="11">Making payment</option>
<option value="12">Visiting someone's house</option>
<option value="13">Gifts and gift-giving</option>
<option value="14">Table manners</option>
<option value="15">Eating and drinking</option>
<option value="16">Funerals</option>
<option value="17">Bars and restaurants</option>
<option value="18">Driving</option>
<option value="19">Business etiquette</option>
<option value="20">Hierarchy and honoring the elder</option>
</select>
</div>
Now you can find the value from pre_category
Related
i'm unable for success in how to show gender and state from below coading
please solve this.
$gender = $html->getElementById("cpBody_rbtnListGender")->getAttribute("value");
$state = $html->getElementById("cpBody_ddlState")->getAttribute("value");
this is for gender
<span id="cpBody_rbtnListGender" class="form-control pull-left radio-input"><input id="cpBody_rbtnListGender_0" type="radio" name="ctl00$cpBody$rbtnListGender" value="MALE" checked="checked" tabindex="3"><label for="cpBody_rbtnListGender_0">Male</label><input id="cpBody_rbtnListGender_1" type="radio" name="ctl00$cpBody$rbtnListGender" value="FEMALE" tabindex="3"><label for="cpBody_rbtnListGender_1">Female</label><input id="cpBody_rbtnListGender_2" type="radio" name="ctl00$cpBody$rbtnListGender" value="TRANSGENDER" tabindex="3"><label for="cpBody_rbtnListGender_2">Transgender</label><input id="cpBody_rbtnListGender_3" type="radio" name="ctl00$cpBody$rbtnListGender" value="OTHER" tabindex="3"><label for="cpBody_rbtnListGender_3">Other</label></span>
and this is for state
<div class="input-group">
<label class="control-label label-fixed">State</label>
<select name="ctl00$cpBody$ddlState" id="cpBody_ddlState" tabindex="15" class="form-control">
<option value="0">--SELECT STATE--</option>
<option value="1">ANDAMAN & NICOBAR ISLANDS</option>
<option value="2">ANDHRA PRADESH</option>
<option value="3">ARUNACHAL PRADESH</option>
<option value="4">ASSAM</option>
<option value="5">BIHAR</option>
<option value="6">CHANDIGARH</option>
<option value="7">CHHATTISGARH</option>
<option value="8">DADRA & NAGAR HAVELI</option>
<option value="9">DAMAN & DIU</option>
<option value="10">DELHI</option>
<option value="11">GOA</option>
<option value="12">GUJARAT</option>
<option value="13">HARYANA</option>
<option value="14">HIMACHAL PRADESH</option>
<option value="15">JAMMU AND KASHMIR</option>
<option value="16">JHARKHAND</option>
<option value="17">KARNATAKA</option>
<option value="18">KERALA</option>
<option value="19">LAKSHADWEEP</option>
<option value="20">MADHYA PRADESH</option>
<option value="21">MAHARASHTRA</option>
<option value="22">MANIPUR</option>
<option value="23">MEGHALAYA</option>
<option value="24">MIZORAM</option>
<option value="25">NAGALAND</option>
<option value="26">ORISSA</option>
<option value="27">PONDICHERRY</option>
<option value="28">PUNJAB</option>
<option selected="selected" value="29">RAJASTHAN</option>
<option value="30">SIKKIM</option>
<option value="31">TAMIL NADU</option>
<option value="32">TELANGANA</option>
<option value="33">TRIPURA</option>
<option value="34">UTTAR PRADESH</option>
<option value="35">UTTARAKHAND</option>
<option value="36">WEST BENGAL</option>
</select>
</div>
state and gender is not showing using getAttribute("value");
You could make use of find.
One option to get the state could be to use the id and get the selected option #cpBody_ddlState option[selected]
$state = $html->find('#cpBody_ddlState option[selected]', 0)->plaintext;
echo $state; //RAJASTHAN
To get the selected radio button you might use #cpBody_rbtnListGender input and loop though the items until the attribute checked matches:
foreach ($html->find('#cpBody_rbtnListGender input') as $input) {
if ($input->hasAttribute("checked")) {
echo $input->getAttribute("value"); // MALE
}
}
idk why you're doing this with php.'
in javascript u can create a p to pass the value to it:
<body onload="pageloaded()">
<p id="display"></p>
in javascript:
var p = document.getElementById("display");
var value = document.getElementById("cpBody_rbtnListGender").value;
function pageloaded(){
p.innerHTML = value;
}
u can do the same for ur other needs
I have setup a function with jQuery that hides and un-hides related select's after a has changed the first one. The problem is that if a user chooses one value and then changes it to another value in a different relates select then the first one he chose stays selected and they both get submitted with the form.
How can I reset the hidden select values if the user changes his mind?
Here's my code:
/*Setup jQuery Function to hide/unhide selects */
<script>
$(document).ready(function(){
var $topSelect = $('select[name="dropdownmain"]');
var $nestedSelects = $('select[name!="dropdownmain"]');
showApplicableSelect();
$topSelect.change(showApplicableSelect);
function showApplicableSelect() {
$nestedSelects.hide();
$('select[name="' + $topSelect.val() + '"]').show();
}
});
</script>
/* Example of the select items and how they are related */
<select class=" form-textbox validate[required]" onChange="change()" name="dropdownmain" id="" title=""> <option selected="selected" value="PLEASE SELECT">PLEASE SELECT</option>
<option value="1">Accommodation and Food Services</option>
<option value="2">Administrative / Support / Waste Management / Remediation Services</option>
<option value="3">Agriculture / Forestry / Fishing / Hunting</option>
<option value="4">Arts / Entertainment / Recreation</option>
<option value="5">Automotive</option>
<option value="6">Construction</option>
<option value="7">Educational Services</option>
<option value="8">Finance and Insurance</option>
<option value="9">Health Care and Social Assistance</option>
<option value="10">Information</option>
<option value="11">Manufacturing</option>
<option value="12">Other</option>
<option value="13">Other Services</option>
<option value="14">Professional / Scientific and Technical Services</option>
<option value="15">Real Estate and Rental and Leasing</option>
<option value="16">Retail Trade</option>
<option value="17">Transportation and Warehousing</option>
</select>
<select class=" form-textbox validate[required]" name="PLEASE SELECT" id="2" title=""> <option value=""> </option> </select>
<select class=' form-textbox validate[required]' name='1' id='' title=''> <option selected='selected' value='PLEASE SELECT'>PLEASE SELECT</option>
<option value='1'>Bakery / Cafes</option>
<option value='2'>Bed and Breakfast Inns</option>
<option value='3'>Carryout restaurants</option>
<option value='4'>Casual Dining Restaurant $$-</option>
<option value='5'>Coffee Shop</option>
<option value='6'>Drinking Places (Alcoholic Beverages)</option>
<option value='7'>Fast-food Restaurants</option>
<option value='8'>Fine Dining Restaurant $$$+</option>
<option value='9'>Full Service Restaurant</option>
<option value='10'>Hotels and Motels</option>
<option value='11'>Other food related services</option>
<option value='12'>Travel Agencies</option>
<option value='27'>Other</option>
</select>
Use jQuery to
reset selected property and
force value to initial value
Code:
$nestedSelects
.prop("selected", false)
.val("-1") // or .val("PLEASE SELECT")
.hide();
I have updated your HTML dropdown initial value from "PLEASE SELECT" to -1.
<option selected='selected' value='-1'>PLEASE SELECT</option>
jsfiddle
Tested form in w3schools :)
I have requirement to get date between particular years so I have put two dropdown “from year” and “to Year” but I want to make validation for that “to dropdown” value must be great than “form dropdown”
Below is my html code
<div class="graph-filter">
<label>From</label>
<select onchange="change_data_year();" id="from_data_year" name="from_data_year" class="graph-select">
<option selected="" value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
</select>
<label>To</label>
<select id="to_data_year" name="to_data_year" class="graph-select">
<option selected="" value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
</select>
<input type="submit" value="Submit">
Try like this
function change_data_year(){
$('#to_data_year option').prop('disabled',false);
var from_data_year=$('#from_data_year').val();
var to_data_year=$('#to_data_year').val();
$('#to_data_year option').filter(function() {
return $(this).val() < from_data_year;
}).prop('disabled', true);
}
I hope that is like you need it.
I'm Developing a php file for performing 2 drop down list values.
In my Drop down list, i have list of categories like Item1,Item2,Item3,Item4,...
And in another drop down list i have sub categories for each categories in the 1st List as A, B,C,D,E,F,...
My idea is, while changing the value of the 1st list, i need to pass the Value to the 2nd List...
Which means, if i change the value in 2nd list, it must fetch the value which selected in the 1st list...
The Sub category is same for all the Categories. But in my calculation, i used price for each category and sub-category..
So,..
Item 1 -> A = 100
Item 2 -> A = 75
Item 1 -> B = 198
Item 2 -> B = 146
Item 1 -> C = 160
Item 2 -> C = 175
I need to fetch the Selected item, to retrieve the amount for my calculation...
How could i achieve this...
<select name="Category1" size="1" id="Category1" >
<option value="Item1">Item1</option>
<option value="Item2">Item2</option>
<option value="Item3">Item3</option>
<option value="Item4">Item4</option>
<option value="Item5">Item5</option>
<option value="Item6">Item6</option>
</select>
<select name="Category2" size="1" id="Category2" onchange=function()>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
</select>
Here i need to fetch the selected value of Category1, in the function()...
Your syntax is wrong try
<select name="Category2" size="1" id="Category2" onchange="function(document.getElementById('Category1').value);">
pass value of category1 as argument when change happens to select.
OP Comment Response
<script type="text/javascript">
function changeFunction(cat)
{
alert(cat);
}
</script>
<select name="Category1" size="1" id="Category1" >
<option value="Item1">Item1</option>
<option value="Item2">Item2</option>
<option value="Item3">Item3</option>
<option value="Item4">Item4</option>
<option value="Item5">Item5</option>
<option value="Item6">Item6</option>
</select>
<select name="Category2" size="1" id="Category2" onchange="changeFunction(document.getElementById('Category1').value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
</select>
above code is tested now check i am sure it will work.
While my answer is similar to Devang's, the slightly more proper way to do this could be like so:
<select id="category" onchange="calculatePrice">
...
</select>
<select id="subCategory" onchange="calculatePrice">
...
</select>
<input id="price">
<script>
function calculatePrice() {
var category = document.getElementById('category').value,
subCategory = document.getElementById('subCategory').value;
if (category && subCategory) {
document.getElementById('price').value = ...;
}
}
</script>
How can I create an array of items from a generated list using a select box to order the items and deliminate them by a comma.
Example...
I have a list of items generated by the id in the database with a select box associated with the item.
<?php
$sql = mysql_query("SELECT id, title FROM songs WHERE id='$id' ORDER BY title ASC");
while($row = mysql_fetch_array($sql)){
$id = $row['id'];
$title = $row['title'];
$song_chart .= '
<div id="$id">
<select>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
//etc...
</select>
'.$title.'
</div>';
}
$song_chart .= '<button></button>';
echo $song_chart;
?>
I have multiple items that I would like to select a value for.
If the value is greater than 0 than I want to grab the 'id' from the item the select is associated with and order all of the items by the selection (not the id).
Then I would like to post the information and place it into a comma delimited array to insert into my database.
I currently do not have any code that I have actually tried, I am really not sure how to go about this. Any help would be greatly appreciated. Thanks in advance!
EDIT
The output of the above would look like this...
<div id="1">
<select>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
//etc...
</select>
one
</div>
<div id="2">
<select>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
//etc...
</select>
two
</div>
<div id="3">
<select>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
//etc...
</select>
three
</div>
<div id="4">
<select>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
//etc...
</select>
four
</div>
<button></button>
Then on submit I would like to reorganize the generated id's accourding to the selected value and place then in an array/string like so...
var arr = '2, 3, 1, 4';
and post them to the database.
OK, in this situation, it's easier to encode the data in the value of the OPTION
<div id="3">
<select>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
//etc...
</select>
three
</div>
Becomes:
<div id="3">
<select>
<option val="3,1">1</option>
<option val="3,2">2</option>
<option val="3,3">3</option>
<option val="3,4">4</option>
//etc...
</select>
three
</div>
Embed the ID in the data. Comma separated.
I came with a solution with the help from Diodeus (Thanks).
$(document).ready(function(){
$('.selection').value(""); // clears the values
$('selection option').click(function(){ // when option is clicked
s=new Array(); // create array
$("select option:selected").each(function(){
// check to see which values are selected
var v = $(this).val();
if(v != ""){ // if the value is not empty.
s.push(v);
}
});
});
$("#submitList").click(function(){
if(s != ""){
alert(s);//or submit the list
}
});
});
I also changed a few things in the html output.
<div id="3">
<select class='selection'>
<option></option>
<option val="1,id">1</option>
<option val="2,id">2</option>
<option val="3,id">3</option>
<option val="4,id">4</option>
//etc...
</select>
three
</div>