could someone help me fix my code?
My problem is how to disable another drop box when selected one?
I am using PHP and JavaScript programming language.
I hope that anyone can help me because it is very important.
Here's my code:
<head>
<script type = "text/javascript">
function disableDrop(){
if(frmMain.sltMain.options[1].selected){
frmMain.sltSecondary.disabled = true;
}
else{
frmMain.sltSecondary.disabled = false;
}
}
</script>
</head>
<form ID = "frmMain">
<select ID = "sltMain" onchange = "disableDrop();">
<option value = "onetime" selected>One-Time</option>
<option value = "recurring">Recurring</option>
</select>
<select ID = "sltMain" onchange = "disableDrop();">
<option value = "onetime">One-Time</option>
<option value = "recurring" selected>Recurring</option>
</select>
</form>
Try This : Demo
HTML CODING :
<select ID = "sltMain" onchange = "disableDrop(this);">
<option value = "onetime" selected>One-Time</option>
<option value = "recurring">Recurring</option>
</select>
<select ID = "sltSecondary" onchange = "disableDrop1(this);">
<option value = "onetime">One-Time</option>
<option value = "recurring" selected>Recurring</option>
</select>
</form>
JAVASCRIPT:
function disableDrop(elem) {
if(elem.value == 'recurring'){
document.getElementById('sltSecondary').disabled = true;
}
else{
document.getElementById('sltSecondary').disabled = false;
}
}
function disableDrop1(elem) {
if(elem.value == 'onetime'){
document.getElementById('sltMain').disabled = true;
}
else{
document.getElementById('sltMain').disabled = false;
}
}
whre is the "sltSecondary" ID ??
the second item has the same id i think you mean
<form ID = "frmMain">
<select ID = "sltMain" onchange = "disableDrop();">
<option value = "onetime" selected>One-Time</option>
<option value = "recurring">Recurring</option>
</select>
<select ID = "sltSecondary" onchange = "disableDrop();">
<option value = "onetime">One-Time</option>
<option value = "recurring" selected>Recurring</option>
</select>
</form>
Related
I am trying to get my code to read a value based off the selected item from a select list in my form, but it says it's undefined. When I simply give the function a value and tell it to return the value, it reads, but won't take values from the form.
The following is the code I'm using
for the form (in html):
<form action="" id="orderForm" name="orderForm" onsubmit="return false;">
<select id="item" name='item' onchange="calculateCost()">
<option value="None">Select Item</option>
<option value="Candlestick">Candlestick ($10)</option>
<option value="Bowl">Bowl ($10)</option>
<option value="Burl_Bowl">Burl Bowl ($20)</option>
<option value="Clock">Clock ($15)</option>
<option value="Vase">Vase ($5)</option>
<option value="Pen">Pen ($2)</option>
<option value="Top">Spinning Top ($1)</option>
</select>
<div id="totalPrice">hallo</div>
</form>
and the javascript reads
function calculateCost()
{
var orderPrice = getItemPrice();
document.getElementById('totalPrice').innerHTML = orderPrice;
}
var item_prices= new Array();
item_prices["None"]=0;
item_prices["Candlestick"]=10;
item_prices["Bowl"]=10;
item_prices["Burl_Bowl"]=20;
item_prices["Clock"]=15;
item_prices["Vase"]=5;
item_prices["Pen"]=2;
item_prices["Top"]=1;
function getItemPrice()
{
var itemPrice = 0;
var theForm = document.forms["orderForm"];
var selectedItem = theForm.elements["item"];
itemPrice = item_prices[selectedItem.value];
return itemPrice;
}
HTMLCollection.item() is method of HTML select element Returns the specific node at the given zero-based index into the list. Returns null if the index is out of range.
theForm.elements["item"] will return function expression of the HTMLCollection.item and which is causing the undefined value as theForm.elements["item"] does not have property value
Either pass this in inline-event or use other id and name attribute to select element than item
function calculateCost(elem) {
var orderPrice = getItemPrice(elem.value);
document.getElementById('totalPrice').innerHTML = orderPrice;
}
var item_prices = [];
item_prices["None"] = 0;
item_prices["Candlestick"] = 10;
item_prices["Bowl"] = 10;
item_prices["Burl_Bowl"] = 20;
item_prices["Clock"] = 15;
item_prices["Vase"] = 5;
item_prices["Pen"] = 2;
item_prices["Top"] = 1;
function getItemPrice(val) {
var itemPrice = 0;
itemPrice = item_prices[val];
return itemPrice;
}
<form action="" id="orderForm" name="orderForm" onsubmit="return false;">
<select id="item" name='item' onchange="calculateCost(this)">
<option value="None">Select Item</option>
<option value="Candlestick">Candlestick ($10)</option>
<option value="Bowl">Bowl ($10)</option>
<option value="Burl_Bowl">Burl Bowl ($20)</option>
<option value="Clock">Clock ($15)</option>
<option value="Vase">Vase ($5)</option>
<option value="Pen">Pen ($2)</option>
<option value="Top">Spinning Top ($1)</option>
</select>
<div id="totalPrice">hallo</div>
</form>
Edit: Or just use getElementById => var selectedItem = document.getElementById('item'); to access the select element.Fiddle here
This entire operation could be simplified a bit as well.
var item_prices= new Array();
item_prices["None"]=0;
item_prices["Candlestick"]=10;
item_prices["Bowl"]=10;
item_prices["Burl_Bowl"]=20;
item_prices["Clock"]=15;
item_prices["Vase"]=5;
item_prices["Pen"]=2;
item_prices["Top"]=1;
EDIT, you should use an object here if you want to be correct.
item_prices = {
None: 0,
Candlestick: 10
};
// etc...
document.getElementById('item').addEventListener('change', function (event) {
document.getElementById('totalPrice').innerHTML = item_prices[event.target.value];
});
Drop down not working when I select same option second time.
This is my code:
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
alert(x);
}
</script>
</body>
</html>
First time select any care eg:Audi, then it alerts Audi, after alert again select Audi then there is no alert coming. Could anybody help me whats wrong in this?
Since you select the same option TWICE so there is no change in selected object of Dropdown.
Try like below
Updated Answer
var dd = document.getElementById('mySelect');
var storeLstSlct = document.getElementById('checkIndx');
var slctdValue = '';
if(dd.selectedIndex == 0)
{
return false;
}else if(storeLstSlct.value == dd.options[dd.selectedIndex].value)
{
storeLstSlct.value = 'garbage';
return false;
}else
{
slctdValue = dd.options[dd.selectedIndex].value;
alert(slctdValue);
storeLstSlct.value = slctdValue;
}
Fiddle is HERE
The event is onchange when you try to select the item already selected change event wont fire.
Are you looking for this??
Add the following code
$('option').click(function(){
alert($(this).text());
});
Unfortunately, the above method will not work in "Chrome", try in "Internet Explorer" or "Mozialla" (atleast IE is being used for this reason :p )
you forgot to close option tags and to do this you need to attach onclick event handler to all of the options in the dropdown, see below:
var x = document.getElementById("mySelect");
//attach onclick event handlers to options
for (var i = 0; i < x.options.length; i++)
{
if (x.options[i].addEventListener)
{
/*all other browsers*/
x.options[i].addEventListener("click", function() {mysFunction(this)}, false);
}
else if (x.options[i].attachEvent) /*ie < 9*/
{
x.options[i].attachEvent("click", function() {mysFunction(this)});
}
}
//execute my alert box on item select
function mysFunction(elem) {
alert(elem.value);
}
<select id="mySelect">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
Update with Demo : http://jsbin.com/hujavalayu/1/edit
I hope this will satisfy your requirement, Please check the link
Trigger the event when selected the same value in dropdown?
<p>Select a new car from the list.</p>
<select id="ddList" onClick="onSelect()">
<option value="0">Select Me</option>
<option value="List1">List1</option>
<option value="List2">List2</option>
<option value="List3">List3</option>
</select>
<script>
var prevIndex = "";
function onSelect() {
var currIndex = document.getElementById("ddList").selectedIndex;
if (currIndex > 0) {
if (prevIndex != currIndex) {
alert("Selected Value = " + document.getElementById("ddList").value);
prevIndex = currIndex;
} else {
prevIndex = "";
}
}
}
</script>
you should use onclick="this.value=null" and define your onchange as well,
so every time you select any option it will clear the selected item and you can select same option again ;).
Here is the sample Code:
$serial_no = 0;
<select id="<?php echo $serial_no++; ?>" onclick="this.value=null" onchange="update_value(this.value,this.id)" class="form-control" required>
<option><?php echo $row['card']; ?></option>
<option>---------</option>
<option>Pending</option>
<option>Deliver</option>
</select>
update_value(item){
alert(item);
}
I have a select with loads of options. (Code below shortened for sake of example).
I want it to set the value of the input textfield "hoh" to "10" when you click/select all dropdown options, except one, that should set it to 50.
I imagined something like this would work, but its not. What am I doing wrong here?
<select>
<option onselect="document.getElementById('hoh').value = '50'">Hey</option>
<option onselect="document.getElementById('hoh').value = '10'">Ho</option>
<option onselect="document.getElementById('hoh').value = '10'">Lo</option>
....
</select>
<input type="text" id="hoh" value="10">
Something like this should work:
<script>
function myFunc(val) {
if (val == '50') {
document.getElementById('hoh').value = val;
} else {
document.getElementById('hoh').value = '10';
}
}
</script>
<select onchange="myFunc(this.value)">
<option value="1">one</option>
<option value="2">two</option>
<option value="50">fifty</option>
</select>
http://jsfiddle.net/isherwood/LH57d/3
The onselect event refers to selecting (or highlighting) text. To trigger an action when a dropbox selection changes, use the onchange event trigger for the <select> element.
E.g. Since you didn't already set the value attribute of your option tags.
<select id="myselect" onchange="myFunction()">
<option value="50">Hey</option>
<option value="10">Ho</option>
<option value="10">Lo</option>
....
</select>
and somewhere inside of a <script> tag (presumably in your HTML header) you define your javascript function.
<script type="text/javascript>
function myFunction() {
var dropbox = document.getElementById('myselect');
document.getElementById('hoh').value = dropbox[dropbox.selectedIndex].value;
}
</script>
I'm not sure it's wise to repeat the same value among different options in a droplist, but you could expand on this to implement the result other ways, such as if the sole option which will have value 50 is in a certain position, you could compare the selectedIndex to that position.
you could add an onchange event trigger to the select, and use the value of an option to show in the textbox
see http://jsfiddle.net/Icepickle/5g5pg/ here
<select onchange="setValue(this, 'hoh')">
<option>-- select --</option>
<option value="10">Test</option>
<option value="50">Test 2</option>
</select>
<input type="text" id="hoh" />
with function setValue as
function setValue(source, target) {
var tg = document.getElementById(target);
if (!tg) {
alert('No target element found');
return;
}
if (source.selectedIndex <= 0) {
tg.value = '';
return;
}
var opt = source.options[source.selectedIndex];
tg.value = opt.value;
}
Try this code
var inp = document.getElementById('hoh');
sel.onchange = function(){
var v = this.value;
if( v !== '50'){
v = '10';
}
inp.value = v;
};
My problem is I want to create a category selecting system with javascript but when I choose an option it displays all divs; it should show only one div.
For example : if value = emlak then show div id=emlak
JS
function getData(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value = 'emlak'){
document.getElementById("emlak").style.display = "block";
}
if(value = 'vasita'){
document.getElementById("vasita").style.display = "block";
}
}
HTML
<select name="kategori" onChange="getData(this);">
<option value="hat" onClick="">Hat</option>
<option value="emlak">Shirt</option>
<option value="vasita">Pants</option>
</select>
<select id="emlak" name="currentList" onChange=";" style="display:none;">
<option value="hat">Hat</option>
<option value="emlak">Shirt</option>
<option value="pants">Pants</option>
</select>
<select id="vasita" name="currentList" onChange="" style="display:none;">
<option value="hat">Otomobil</option>
<option value="emlak">Shirt</option>
<option value="pants">Pants</option>
</select>
Try this, Your problem is in if condition your are not using ==
function getData(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'emlak'){
document.getElementById("emlak").style.display = "block";
document.getElementById("vasita").style.display = "none";
}
if(value == 'vasita'){
document.getElementById("vasita").style.display = "block";
document.getElementById("emlak").style.display = "none";
}
}
Demo
Update Demo
I would like to change the style of a text field based on the value selected in a combo box. Specifically, what I'd like to do is make the txtDepartment field gray and marked as "read only" if the option value selected in cboSource is 1. I've tried the code below, but I imagine my style code at least is wrong, if not other things. Any help appreciated. Thanks!
<select name="cboSource" id="cboSource" onClick="displayDepartment(this);">
<option value = 1>Source 1</option>
<option value = 2>Source 2</option>
</select>
<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>
<script>
function displayDepartment(obj)
{
var selectedValue = obj.value;
var txtDepartment = document.getElementById("txtDepartment");
if (selectedValue == "1")
{
txtDepartment.style.display = "Disabled style='background-color:#E8E8E8'";
}
}
</script>
txtDepartment.style.backgroundColor = "#E8E8E8";
txtDepartment.disabled = 'disabled';
with jQuery your whole function gets a lot smaller:
function displayDepartment(obj)
{
if($(obj).value=="1") {
$("#txtDepartment").css('background-color','#E8E8E8');
$("#txtDepartment").disabled ='disabled'
}
}
First, use onchange on cboSource.
Then:
if(selectedValue == "1")
txtDepartment.disabled = 'disabled';
Set the disabled attribute for your element
// on
txtDepartment.setAttribute("disabled","disabled")
// off
txtDepartment.removeAttribute("disabled")
possible solution using jQuery:
<style>
.disabled {
background-color:#E8E8E8;
}
</style>
<script language="javascript">
$(document).ready(function() {
var txtDepartment = $("#txtDepartment");
var cboSource = $("#cboSource");
cboSource.change(function() {
txtDepartment.removeClass().removeAttr("disabled");
if (cboSource.val() == 1) {
txtDepartment.addClass("disabled").attr("disabled", true);
}
});
});
</script>
<select name="cboSource" id="cboSource">
<option value = 0>Choose</option>
<option value = 1>Source 1</option>
<option value = 2>Source 2</option>
</select>
<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>
In my opinion onclick is more suitable as on change has different meaning for different browser
Try this
<select name="cboSource" id="cboSource" onClick="displayDepartment(this);">
<option value = 1>Source 1</option>
<option value = 2>Source 2</option>
</select>
<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>
<script>
function displayDepartment(obj)
{
var txtDepartment = document.getElementById("txtDepartment");
txtDepartment.disabled = false;
txtDepartment.style = "";
if (obj.value == "1")
{
txtDepartment.style = "background-color:#E8E8E8";
txtDepartment.disabled = true;
}
}
</script>