Develop Reference

Input field doesn't appear after changing the selection field

Once the user selects 'Cancelled' in the drop-down menu, the input field should appear to the user, so that the user can enter their reason for cancellation.
But it's not working.
By default, the input field is disabled, and doesn't appear to the user.
I tried to use onselect but to no avail.
HTML
<div>
<select placeholder="Status?" onselect="closeReasonAction" name="changeStatus" id="changeStatus" disabled>
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>
if (document.getElementById('changeStatus').value != "Cancelled") {
document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
}
else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
once the user clicks on cancelled the input field disabled here should just be abled and appear for the user to enter

I think you missed the onchange function what happens when you change the select. Modify the onselect function to onchange function and add opacity:0 into input style and make it disabled initially.
function closeReasonAction() {
if (document.getElementById('changeStatus').value != "Cancelled") {
document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
}
else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
}
<div>
<select placeholder="Status?" onchange="closeReasonAction()" name="changeStatus" id="changeStatus" >
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px; opacity:0" disabled />
</div>

You have missed your onchange function.
function func(){
if (document.getElementById('changeStatus').value != "Cancelled")
{
document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
}
else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
}
func()
<div>
<select placeholder="Status?" onselect="closeReasonAction" name="changeStatus" id="changeStatus" onchange="func()">
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>

You have to remove disabled from the select element, and place disabled on the closeReason element, otherwise users will not be able to interact with this element.
You need to add opacity: 0 to the closeReason element, otherwise it will be visible when the page loads.
You need to change onselect to onchange. onselect can only be used for <input type='text'> and <textarea> in forms.
You need to add () to the end of onchange=closeReasonAction so that it becomes onchange=closeReasonAction() since you are trying to call a function on its change event.
You actually need to wrap your JS code in a function called closeReasonAction, otherwise you're trying to call a non-existent function.
Example
function closeReasonAction(){
if (document.getElementById('changeStatus').value != "Cancelled") {
document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
}
else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
}
<div>
<select placeholder="Status?" onchange="closeReasonAction()" name="changeStatus" id="changeStatus">
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px; opacity: 0;" disabled>
</div>

The if condition should be inside a function and the function should be called on change event of the select box
function closeReasonAction() {
if (document.getElementById('changeStatus').value != "Cancelled") {
//document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
} else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
}
<div>
<select placeholder="Status?" onchange="closeReasonAction()" name="changeStatus" id="changeStatus">
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>

You should change onselect with onchange:
function closeReasonAction($el) {
var $reason = document.getElementById("closeReason");
if ($el.value != "Cancelled") {
$reason.disabled = true;
} else if ($el.value == "Cancelled") {
$reason.style.opacity = 1;
$reason.disabled = false;
}
}
<div>
<select placeholder="Status?" onchange="closeReasonAction(this)" name="changeStatus" id="changeStatus">
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>

You should use the onchange function, rather than onclick on each individual option.
Use a value attribute on each option to store the data, and use an instance of this to assign the change (or event.target)
You have no ID on your text field
You're missing the end quote for your onclick function
<select name="" onchange="myFunction(event)">
<option disabled selected>Choose Database Type</option>
<option value="Green">green</option>
<option value="Red">red</option>
<option value="Orange">orange</option>
<option value="Black">black</option>
</select>
And the function:
function myFunction(e) {
document.getElementById("myText").value = e.target.value
}

How to disable another select option when i get value of cash from a select option

I have this code i want to enabled or disable a certain select box for transaction.
I don't know what code is correct for this one hope you can lend me a hand.
<select id="paymenttype" class="paymenttype" name="input-paymenttype" onChange="changetextbox()">
<option value="Cash">Cash</option>
<option value="Installment">Installment</option>
</select>
<select id="paymentterms" class="" name="input-paymentterms" disabled="true">
<option value="3">3x</option>
<option value="4">6x</option>
<option value="6">12x</option>
</select>
<script type="text/javascript">
function changetextbox()
{
var e = document.getElementById("paymenttype");
var value = e.options[e.selectedIndex].value;
if (value == "Cash") {
alert('I need to disable payment terms');
}
else{
alert('I need to enable payment terms');
document.getElementById("paymentterms").disable =='false';
}
}
</script>

Use this to remove attribute:
document.getElementById("paymentterms").removeAttribute("disabled");

You can use .removeAttribute() you can check it here
function changetextbox()
{
var e = document.getElementById("paymenttype");
var value = e.options[e.selectedIndex].value;
if (value == "Cash") {
alert('I need to disable payment terms');
}
else{
alert('I need to enable payment terms');
document.getElementById("paymentterms").removeAttribute('disabled');
}
}
<select id="paymenttype" class="paymenttype" name="input-paymenttype" onChange="changetextbox()">
<option value="Cash">Cash</option>
<option value="Installment">Installment</option>
</select>
<select id="paymentterms" class="" name="input-paymentterms" disabled="true">
<option value="3">3x</option>
<option value="4">6x</option>
<option value="6">12x</option>
</select>

Thank you so much for the answer. I tried and test all your answer. It is quite impressive I finish it with your help. So i decided to paste the final code here.
<select id="paymenttype" class="paymenttype" name="input-paymenttype" onChange="changetextbox()">
<option value="Cash">Cash</option>
<option value="Installment">Installment</option>
</select>
<select id="paymentterms" class="" name="input-paymentterms" disabled="true">
<option value="3">3x</option>
<option value="4">6x</option>
<option value="6">12x</option>
</select>
<script type="text/javascript">
function changetextbox()
{
var e = document.getElementById("paymenttype");
var value = e.options[e.selectedIndex].value;
if (value == "Cash") {
document.getElementById("paymentterms").disabled = true;
} else
{
document.getElementById("paymentterms").disabled = false;
}
}
</script>

if option is not selected statement

I have dropdown select and options like this:
<div class="input-field">
<span class="icon-area"></span>
<select>
<option value="0">list 0</option>
<option value="1">list 2</option>
<option value="2">list 3</option>
</select>
and if list 0 is not selected I want to add css style it but my js code doesn't work
$("select").blur(function() {
$(this).parents(".input-field").removeClass("form-border");
$(this).parents(".input-field").find(".icon-area").removeClass("form-background");
if(this.value){
$(this).parents(".input-field").addClass("form-border");
$(this).parents(".input-field").find(".icon-area").addClass("form-background");
return false;
}else{
$(this).parents(".input-field").removeClass("form-border");
$(this).parents(".input-field").find(".icon-area").removeClass("form-background");
return false;
}
});
what is wrong ?

try replacing with this:
$("select").change(function() {
$(this).parents(".input-field").removeClass("form-border");
$(this).parents(".input-field").find(".icon-area").removeClass("form-background");
if(this.value==0){
$(this).parents(".input-field").addClass("form-border");
$(this).parents(".input-field").find(".icon-area").addClass("form-background");
return false;
}else{
$(this).parents(".input-field").removeClass("form-border");
$(this).parents(".input-field").find(".icon-area").removeClass("form-background");
return false;
}
});

How to check if an item is selected from an HTML drop down list?

I have a drop drown list and I am having trouble checking whether or not a value has been selected from the drop down list
Below is my HTML Code :
<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br/>
Below is my JavaScript Code :
var card = document.getElementByName("cards")[0].value;
if (card.value == selectcard) {
alert("Please select a card type");
}

Well you missed quotation mark around your string selectcard it should be "selectcard"
if (card.value == selectcard)
should be
if (card.value == "selectcard")
Here is complete code for that
function validate()
{
var ddl = document.getElementById("cardtype");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "selectcard")
{
alert("Please select a card type");
}
}
JS Fiddle Demo

<script>
var card = document.getElementById("cardtype");
if(card.selectedIndex == 0) {
alert('select one answer');
}
else {
var selectedText = card.options[card.selectedIndex].text;
alert(selectedText);
}
</script>

You can check if the index of the selected value is 0 or -1 using the selectedIndex property.
In your case 0 is also not a valid index value because its the "placeholder": <option value="selectcard">--- Please select ---</option>
LIVE DEMO
function Validate()
{
var combo = document.getElementById("cardtype");
if(combo.selectedIndex <=0)
{
alert("Please Select Valid Value");
}
}

function check(selId) {
var sel = document.getElementById(selId);
var dropDown_sel = sel.options[sel.selectedIndex].text;
if (dropDown_sel != "none") {
state=1;
//state is a Global variable initially it is set to 0
}
}
function checkstatevalue() {
if (state==1) {
return 1;
}
return false;
}
and html is for example
<form name="droptest" onSubmit="return checkstatevalue()">
<select id='Sel1' onchange='check("Sel1");'>
<option value='junaid'>Junaid</option>
<option value='none'>none</option>
<option value='ali'>Ali</option>
</select>
</form>
Now when submitting a form first check what is the value of state if it is 0 it means that no item has been selected.

<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard" selected="selected">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br />
<script>
var card = document.getElementById("cardtype");
if (card.options[card.selectedIndex].value == 'selectcard') {
alert("Please select a card type");
return false;
}
</script>

I believe this is the most simple in all aspects unless you call the validate function be other means. With no/null/empty value to your first option is easier to validate. You could also eliminate the first option and start with the most popular card type.
<form name="myForm">
<select id="cardtype" name="cards">
<option value="">--- Please select ---</option>
<option value="mastercard" selected="selected">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br />
<input type="submit" name="submit" class="button" value="SUBMIT" onmouseover="validate()"></form>
<script>
function validate() {
if (document.myform.cards.value == "") {
alert("Please select a card type");
document.myForm.cards.focus();
}
</script>

function checkSelected() {
if (optionsId.selectedIndex < 0) {
alert("Please select an item from options");
return false;
}}

Select select = new Select(_element);
List<WebElement> selectedOptions = select.getAllSelectedOptions();
if(selectedOptions.size() > 0){
return true;
}else{
return false;
}

onChange event on two select option

is it possible to change the limit the value of the dropdown2 when the dropdown1 changes?
here is my code
<!--DROPDOWN 1-->
<p class="">From</p>
<select name="From" id="From" onChange="displayVal(this)">
<option value="any">Any</option>
<option value="none">None</option>
<option value="10000">£10,000</option>
<option value="20000">£20,000</option>
<option value="30000">£30,000</option>
<option value="40000">£40,000</option>
<option value="50000">£50,000</option>
<option value="60000">£60,000</option>
<option value="70000">£70,000</option>
<option value="80000">£80,000</option>
<option value="90000">£90,000</option>
<option value="100000">£100,000</option>
<option value="110000">£110,000</option>
<option value="120000">£120,000</option>
<option value="130000">£130,000</option>
<option value="140000">£140,000</option>
<option value="150000">£150,000</option>
<option value="150001">£150,000+</option>
</select>
<!--DROPDOWN 2-->
<p class="">To</p>
<select name="To" id="To">
<option value="any">Any</option>
<option value="none">None</option>
<option value="10000">£10,000</option>
<option value="20000">£20,000</option>
<option value="30000">£30,000</option>
<option value="40000">£40,000</option>
<option value="50000">£50,000</option>
<option value="60000">£60,000</option>
<option value="70000">£70,000</option>
<option value="80000">£80,000</option>
<option value="90000">£90,000</option>
<option value="100000">£100,000</option>
<option value="110000">£110,000</option>
<option value="120000">£120,000</option>
<option value="130000">£130,000</option>
<option value="140000">£140,000</option>
<option value="150000">£150,000</option>
<option value="150001">£150,000+</option>
</select>
I want is when I change dropdown1 to none the dropdown2 option will only show none and no other more.
And I also want is if I change the value of dropdown1 to an amount, for example 30000, dropdown2 will show only the values that are greater that 30000 including the option any.
Is there a way to do this in javascript or jQuery?
sorry. I'm new at javascript and jQuery.. Thank you in advance!

Demo: http://jsfiddle.net/LsaLA/1/
Code:
function setTo() {
var f = $('#From').val();
var t = $('#To');
t.children().hide();
if( f == 'none' ) {
t.children('[value="none"]').show();
t.val('none');
}
else if( t == 'any' ) {
t.children().show();
t.val('any');
}
else {
f = parseInt(f, 10);
t.children().each(function() {
if( $(this).val() == 'any' ) {
$(this).show();
t.val('any');
}
else {
var v = parseInt($(this).val(), 10);
if(!isNaN(v) && v >= f) {
$(this).show();
}
}
});
t.val('any');
}
}
$('#From').change(setTo);
//call it on load as well
setTo();

try this: http://jsfiddle.net/F6xnL/4/
$("#From").change(function() {
$("#To").attr("disabled", false).children().each(function() {
$(this).attr('disabled', false);
});
if ($(this).val() === 'any') return;
if ($(this).val() === 'none') {
$("#To").val("none").attr("disabled", true);
return;
}
var pound = parseInt($(this).val());
$("#To").children().each(function() {
var val = $(this).val();
if (val === 'none' || val === 'any') {
$(this).attr('disabled', true); return;
}
if (parseInt($(this).val()) <= pound) {
$(this).attr('disabled', true);
}
});
});​

$('#From').change(function(){
if($(this).val() == 'none'){
$('#To').prop('disabled', true);
}else if((true == $('#To').prop('disabled')) && ($(this).val() != 'none')){
$('#To').prop('disabled', false);
}
$('#To option').each(function(){
if($(this).val() < $('#From').val()){
$(this).hide(0);
}else{
if($(this).css('display') == 'none'){
$(this).show(0);
}
}
});
});
Untested, but this should work. I'm a bit verbose.