function SetUtcTimeZone() {
var UTCTimeZone = document.getElementById("txtPortorAnchorDeparture").value;
document.getElementById('ddlUTCTimeZone').selectedIndex = UTCTimeZone;
}
how can we set textbox value to dropdownlist using dropdownlist id
I guess it would look like this:
function SetTxt() {
var indx = document.getElementById('ddlUTCTimeZone').selectedIndex;
var val = document.getElementById('ddlUTCTimeZone').options[indx].text;
document.getElementById("txtPortorAnchorDeparture").value = val;
}
Just replace .selectedIndex by .value it will be done
Try this
function SetUtcTimeZone() {
var UTCTimeZone = document.getElementById("txtPortorAnchorDeparture").value;
document.getElementById('ddlUTCTimeZone').value = UTCTimeZone;
}
<!-- Simple example -->
<select id="ddlUTCTimeZone">
<option value="1">USA</option>
<option value="2">Egypt</option>
<option value="0">GMT</option>
</select>
<input id="txtPortorAnchorDeparture" type="text" />
<button type="button" onclick="SetUtcTimeZone()">Go</button>
Here is a simple function
function dropdownToTextbox(dropdown, textbox) {
var selectedOption = dropdown.options[dropdown.selectedIndex];
textbox.value = selectedOption.value;
}
Related
I want calculate a sum with the selected ID so I get all ID in different var then call them by find() my code is not work :
$(window).load(function(){
function doStuff() {
var uone= $("#ud").children(":selected").attr("id") == 'a';
var utwo= $("#ud").children(":selected").attr("id") == 'b';
var uthree= $("#ud").children(":selected").attr("id") == 'c';
var bone= $("#bt").children(":selected").attr("id") == 'd';
var btwo= $("#bt").children(":selected").attr("id") == 'e';
var getValue;
if ($(uone).find(bone)) {
getvalue = 75;
}
if ($(uone).find(btwo)) {
getvalue = 70;
}
if ($(utwo).find(bone)) {
getvalue = 81;
}
if ($(uthree).find(bone)) {
getvalue = 79;
}
var shw = $('#inputamount').val();
var total = getvalue * shw ;
$(".totalop").html(total);
}
$("#inputamount").on('keyup', doStuff);
$("#ud").on('change', doStuff);
$("#bt").on('change', doStuff);
});
<select name="sucompn" id="ud">
<option id="a">a</option>
<option id="b">b</option>
<option id="c">c</option>
</select>
<select name="ducompn" id="bt">
<option id="d">d</option>
<option id="e">e</option>
</select>
<input autocomplete="off" name="inputamount" id="inputamount" value="" type="text">
<span id="ttotal"></span>
Actually I want to create a result users input and select based. Something like when user select 'a' and 'd' then 'input=1' so result come = 75 .It will change when user change any option or input .
You should use value attributes:
<select name="sucompn" id="ud">
<option value="1" id="a">a</option>
<option value="2" id="b">b</option>
<option value="3" id="c">c</option>
</select>
And then access it via jQuery:
var gvalue = $('#ud').val();
If you'd like to overwrite it with the selected value of the other select element, you could simply do the same for the other one and overwrite it:
var otherValue = $('#sd').val();
if (otherValue) gvalue = otherValue
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>
I have a small bit of a delema.
I have the following static select box below, however, the database will compare its cell value to that of the select box and select it.
My question to you is how can I design a function that would dynamically add a new select option (at the end of the existing list) if it already isn't in the list?
This doesn't seem to be working for me?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
//document.getElementById('name').innerHTML = "test"
document.getElementById('name').text = "test"
}
</script>
</head>
<body>
<select id="name">
<option value=""></option>
<option value="John">John</option>
<option value="Patrick">Patrick</option>
<option value="Jean">Jean</option>
<option value="Jackie">Jackie</option>
<option value="Stephanie">Stephanie</option>
<option value="Nicole">Nicole</option>
<option value="Lucie">Lucie</option>
</select>
<input id="btn1" type="button" value="testme" onclick="test()" />
</body>
</html>
You'll have to check each one:
function test() {
var checkWhat = 'test'; // value to check for
var options = document.getElementById('name').getElementsByTagName('option'),
exists = false;
for (var i=options.length; i--;) {
if ( options[i].value == checkWhat ) {
exists = true; // an option with that value already exists
break;
}
}
if (!exists) {
var option = document.createElement('option');
option.value = 'test';
option.innerHTML = 'test';
document.getElementById('name').appendChild(option);
}
}
You could create a function which loops through all the options in the select element and if the option value doesn't already exist, append it to the select tag.
var addOption = function(value){
var select = document.getElementById('name'), // get the select tag
options = select.getElementsByTagName('option'), // get all option tags within that select
alreadyExists = false;
for(var i = 0, l = options.length; i < l; i++){ // loop through the existing options
if(options[i].value == value) // check if value already exists
alreadyExists = true;
}
if(!alreadyExists){ // if value doesn't already exist
var newOption = document.createElement('option');// create a new option and add it to the select
newOption.value = value;
newOption.innerHTML = value;
select.appendChild(newOption);
}
};
Demo: http://jsfiddle.net/2TZ45/
I have a form. The user will fill it out, and at the bottom of that form I am trying to display a value based values inserted into the form page.
I'm so far not getting any kind of output at all, here is my attempt:
HTML FORM:
<form id="myform">
<select
name="sv_313"
onchange="calculate()"
id="sv_313"
>
<option value="Select One">Select One</option>
<option value="0.1">A</option>
<option value="0.2">B</option>
<option value="0.3">C</option>
</select>
<br/>
<input
type="number"
name="sv_312"
size="10"
maxlength="10"
onblur="calculate()"
id="sv_312"
/>
Calculated value
<div id="coverage"> </div>
</form>
The javascript:
<script>
//define an array for the possible values input via select menu
var spv = new Array();
spv["A"]=0.1;
spv["B"]=0.2;
spv["C"]=0.3;
//function to get the value from select menu
function getSAMprevalence()
{
var SAMprevalence=0;
var theForm = document.forms["myform"];
var selectedSAMprevalence = theForm.elements["sv_313"];
SAMprevalence = spv[selectedSAMprevalence.value]
return SAMprevalence;
}
//function to get the value from input field
function getInputvalue()
{
var Inputvalue=0;
var theForm = document.forms["myform"];
var Inputvalue = theForm.elements["sv_312"];
return Inputvalue;
}
//function to calculate using these two functions, and output into div named coverage:
function calculate()
{
var treatmentCoverage = getSAMprevalence() + getInputvalue();
document.getElementById('coverage').innerHTML =
""+treatmentCoverage;
}
</script>
I am really not experienced with javacsript or anything really, any pointers would be very appreciated. Thanks!
EDIT: here is a jsfiddle with it set up in, illustrating the lack of any output :(
http://jsfiddle.net/rHu8J/3/
Try using jQuery ..
DEMO
$(function() {
$('#sv_313').on('change', function() {
calculate();
});
$('input[name=sv_312]').on('blur', function() {
calculate();
});
});
function calculate() {
var $select = $('#sv_313').val();
var $text = $('input[name=sv_312]').val();
if ($select == undefined || $select == '' ||$select == 'Select One') {
$select = 0;
}
else {
$select = parseFloat($select);
}
//
if ($text == undefined || $text == '') {
$text = 0;
}
else {
$text = parseFloat($text);
}
$('.coverage').html($select + $text);
}
HTML:
<form id="myform">
<select name="sv_313" onchange="calculate()" id="sv_313">
<option value="0">Select One</option>
<option value="0.1">A</option>
<option value="0.2">B</option>
<option value="0.3">C</option>
</select>
<br/>
<input type="number" id="sv_312" size="10" maxlength="10" onchange="calculate()"/>
</form>
Calculated value
<div id="coverage"></div>
Javascript:
function calculate() {
var myForm = document.forms['myform'];
var selectVal = myForm.elements['sv_313'].value;
var inputVal = myForm.elements['sv_312'].value;
if(!inputVal) inputVal = 0;
document.getElementById('coverage').innerHTML = parseFloat(selectVal) + parseInt(inputVal);
}
I believe your error is when you get the selected option. Try this instead:
SAMprevalence = spv[selectedSAMprevalence.options[selectedSAMprevalence.selectedIndex].text]
thanks to:
Get selected value in dropdown list using JavaScript?
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>