I have two comboboxes:
Enable monitoring: Yes/No
and
Operation mode: Client/Server
The default value of the first one is 'No' and the second should be hidden. When I change it to Yes, I want the second combobox to be visible. How can I do that?
<tr>
<td width="25%" class="titulos" nowrap>Enable monitoring:</td>
<td width="75%" class="dados" nowrap>
<select class="dados" name="proxyconf" onchange="showOptions ();">
<option value="1" selected>No</option>
<option value="2" >Yes</option>
</select>
</td>
</tr>
<tr>
<td width="25%" class="titulos" nowrap>Operation Mode:</td>
<td width="75%" class="dados" nowrap>
<select class="dados" name="proxyconf" onchange="showOptions ();">
<option value="1" selected>No</option>
<option value="2" >Yes</option>
</select>
</td>
</tr>
You can do that with Javascript.
Give the second option box an ID, and then use Javascript to show/hide it:
<script type="text/javascript">
function showOptions() {
var elem = document.getElementById("id_of_second_box");
elem.style.display = "block";
}
</script>
You can pass in the option box to the function by reference if you like, and there are many different ways of showing/hiding elements using Javascript and CSS, but something along the lines of the above should help.
I would do it this way: http://jsfiddle.net/qtHc3/ (the example uses jQuery).
Using JavaScript:
function showOptions(elem){
if(elem.value == "2"){
document.getElementById("second").style.visibility = "visible";
}else{
document.getElementById("second").style.visibility = "hidden";
}
}
And the first combobox:
<select class="dados" name="proxyconf" onchange="showOptions(this);" id="first">
<option value="1" selected>No</option>
<option value="2" >Yes</option>
</select>
And the second one:
<select class="dados" name="proxyconf" onchange="" id="second" style="visibility:hidden">
<option value="1" selected>No</option>
<option value="2" >Yes</option>
</select>
But this may not be cross browser compatible so check carefully.
Related
Here is my code snippet
foreach( $issueCheckPointConfig in $issueCheckPointConfiguration )
<tr class="elements-row grey-rows-on-edit " data-row_id="vfvfs5ks2" id="$i">
<td headers="coyxsnmhe" class=""><div>$issueCheckPointConfig.getCheckPoint()</div></td>
<td headers="bgd3200zb" class="">
<div>
<select name="status" id="status" >
<option value="Select">Select</option>
<option selected>$issueCheckPointConfig.getStatus()</option>
<option value="YES" >YES</option>
<option value="NO" >NO</option>
<option value="NA" >NA</option>
</select>
</div>
</td>
end
From the above code dropdown is having the save data as selected once the page is loaded.But the problem here is , if the saved data is "YES", then after loading the page i can see 2 YES values.
Same is case with any values, if "NO" is selected and saved then "NO" appears twice.
Please suggest me a way to keep the saved value as selected by avoiding the duplicates.
So I have these <select><option>s which I put in two different table cells and no matter what the second one doesn't work the way it should. It kinda shows up as the select object on the page but I can't proceed any further actions (choose any option from the dropdown).
Code:
<table>
<tr>
//... other cells
<form action="./users.php" method="POST">
<td class="sex">
<select name="sex">
<option value="m">Male</option>
<option value="f">Female</option>
<option value="o">Other</option>
</select>
</td>
<td class="language">
<select name="language">
<option value="french">French</option>
<option value="german">German</option>
</select>
</td>
</form>
</tr>
</table>
I´m using the code below to get an input textfield next to each option in a multiple select, but what I get is a total mess. The first option is in the multiple select but the rest shows out of the select list.
Does somebody knows how can I make that? I´m sorry I can not post images.
I hope somebody can help.
Thanks.
<select name="cars" multiple>
<option value="audi">Audi</option>
<input type="text" name="Audi" value""/>
<option value="bmv">BMV</option>
<input type="text" name="BMV" value""/>
<option value="honda">Honda</option>
<input type="text" name="honda" value""/>
<option value="peugueot">Peugueot</option>
<input type="text" name="peugueot" value""/>
<option value="volkswagen">Volkswagen</option>
<input type="text" name="volkswagen" value""/>
<option value="opel">Opel</option>
<input type="text" name="opel" value""/>
</select>
Do your drop down list but put a generic textbox afterwards. On the submit action, get the value of the count and apply it to the selected value.
<select name="cars" multiple>
<option value="audi">Audi</option>
<option value="bmv">BMV</option>
<option value="honda">Honda</option>
<option value="peugueot">Peugueot</option>
<option value="volkswagen">Volkswagen</option>
<option value="opel">Opel</option>
</select>
<input type="text" name="Count" value""/>
That only allows 1 count per save. If you want to be able to submit counts for ALL models, use a label and an input for each kind: like so
<table>
<tr>
<td>
Audi
</td>
<td>
<input type="text" name="audi" value""/>
</td>
</tr>
<option value="bmv">BMV</option>
<tr>
<td>
BWV
</td>
<td>
<input type="text" name="bmw" value""/>
</td>
</tr>
</table>
I have got these two drop down tabs/options and I was hoping someone could help me fix my little problem. I am trying to select an option inside category and then only be able to select options related inside the subcategory instead of been able to select everything. Trying to parent the options related to each other to be displayed basically..
<tr>
<td align="right">Category</td>
<td><label>
<select name="category" id="category">
<option value="" selected="selected"></option>
<option value="Clothing">Clothing</option>
<option value="Headwear">Headwear</option>
</select>
</label></td>
</tr>
<tr>
<td align="right">Subcategory</td>
<td>
<select name="subcategory" id="subcategory">
<option value="" selected="selected"></option>
<option value="beanie">beanie</option>
<option value="Cap">cap</option>
<option value="Shirts">Shirt</option>
</select>
</td>
</tr>
If you are using jquery try this, jsFiddle Example
$('#category').change(function(event){
var subcategory = $(this).closest('tr').next().find('#subcategory');
var selectedCat = $(this).val();
if(selectedCat != false) {
$(subcategory).prop('disabled', false).val(0);;
$(subcategory).find("[data-target='" + selectedCat + "']").show()
$(subcategory).find("[data-target!='" + selectedCat + "']").hide()
} else {
$(subcategory).prop('disabled', true).val(0);
}
});
Also, disable the subcategory and add data-target="category-name"
<select name="subcategory" id="subcategory" disabled="true">
<option value="" selected="selected"></option>
<option value="beanie" data-target="headwear">beanie</option>
<option value="cap" data-target="headwear">cap</option>
<option value="shirts" data-target="clothing">Shirt</option>
</select>
I'm trying to figure out how to create a test area where the user can either select from a list of items, or add to a textarea. Is this possible? Something like the following, except restrict the user to either selecting from the list, or entering into the textarea.
<tr>
<td width="100" class="formNames">Frequency</td>
<td colspan="2" class="cellColor">
<select name="yr" class="textbox">
<option value="0">-</option>
<option value="30">1</option>
<option value="30">2</option>
<option value="30">3</option>
<option value="30">4</option>
<option value="30">5</option>
</select>
</td>
<td width="10" class="formNames"> -or- </td>
<td class="formNames">
<input type="text" name="scheduletitle" class="textbox" value="default" />
</td>
</tr>
disable the other when data is changed in one. Using jQuery:
(function(){
var elements = $('select[name=yr],input[name=scheduletitle]');
elements.bind('change', function(){
var self = this;
elements.attr('disabled', false);
$(this).val() && elements.filter(function(){ return this != self; }).attr('disabled', true);
}
})();