Suspect I am doing something stupid, but I can't see for the wood for the trees just now. Another pair of eyes will probably fix this instantly.
<script>
function ChkStatus1() {
if (document.frm1.LabelReq_1.value = "1") {
document.frm1.LabelReason_1[0].selected = true;
document.frm1.LabelReason_1.disabled = true;
}
if(document.frm1.LabelReq_1.value = "0") {
document.frm1.LabelReason_1.disabled = false;
}
}
</script>
<Select name="LabelReq_1" onchange="ChkStatus1();">
<option value="1">Yes</option>
<option value="0">No</option>
</Select>
<Select name="LabelReason_1" disabled="disabled">
<option>[Please select why not required]</option>
<option>Reason 1</option>
<option>Reason 2</option>
<option>Reason 3</option>
<option>Reason 4</option>
<option>Reason 5</option>
</Select>
When I select the No, everything works as I would expect, but then when I choose 'Yes' it performs the 'LabelReason_1[0].selected = true;' but then doesn't change the LabelReq_1 combo box.
Can anyone see where I am going wrong?
Thanks in advance
Graeme
Change the = in your if statements to ==
= assigns the value, == denotes equality
<script>
function ChkStatus1() {
if (document.frm1.LabelReq_1.value == "1") {
document.frm1.LabelReason_1[0].selected = true;
document.frm1.LabelReason_1.disabled = true;
}
if(document.frm1.LabelReq_1.value == "0") {
document.frm1.LabelReason_1.disabled = false;
}
}
</script>
You need to use == or === instead of =:
<script>
function ChkStatus1() {
if (document.frm1.LabelReq_1.value == "1") {
document.frm1.LabelReason_1[0].selected = true;
document.frm1.LabelReason_1.disabled = true;
}
if(document.frm1.LabelReq_1.value == "0") {
document.frm1.LabelReason_1.disabled = false;
}
}
</script>
Related
Hello I am having problems with the select dropdown. I am trying to store the value but it's not working.
I have looked at other questions already but with no luck.
Here is a fiddle:
function selectCss(element) {
const a = element.options[element.selectedIndex].value;
document.getElementById("change").onchange = function() {
localStorage['colorPick'] = element.options[element.selectedIndex].value;
}
window.onload = function() {
if (localStorage['colorPick'])
document.getElementById("change").value = localStorage['colorPick'];
}
if (a == "Theme 1") {
document.body.style.background = "pink";
}
if (a == "Theme 2") {
document.body.style.background = "blue";
}
if (a == "Theme 3") {
document.body.style.background = "yellow";
}
}
body {
background: pink;
}
<select id="change" name="colorPick" onchange="selectCss(this)">
<option selected value="Theme 1">Theme 1</option>
<option value="Theme 2">Theme 2</option>
<option value="Theme 3">Theme 3</option>
</select>
The code has several issues:
The value of the select and the color should be set if there's an item in the localStorage. This should be done at first instead of doing it inside the function.
It's better to use else-if instead of comparing the value three times.
The listener is already set onchange in the html element, so it should not be declared in the function.
You can define the element once and use it all the time.
You can get the selected value using select.value where select is the html element in this example
The working solution with the proper modifications would be as follows:
let select = document.getElementById("change")
if (localStorage['colorPick']){
select.value = localStorage['colorPick'];
selectCss();
}
function selectCss() {
const a = select.value;
localStorage['colorPick'] = a;
if (a == "Theme 1") {
document.body.style.background = "pink";
}else if (a == "Theme 2") {
document.body.style.background = "blue";
}else if (a == "Theme 3") {
document.body.style.background = "yellow";
}
}
body {background: pink;}
<select id="change" name="colorPick" onchange="selectCss()">
<option selected value="Theme 1">Theme 1</option>
<option value="Theme 2">Theme 2</option>
<option value="Theme 3">Theme 3</option>
</select>
Use setItem method To store to local storage.
localStorage.setItem("colorPick", element.options[element.selectedIndex].value);
Use getItem method to retrieve
let colorPick = localStorage.getItem("colorPick")
Just new on javascript and I need to change the value of onclick on the button if the user selects the option 5.
I have this code:
function optionCheck(that) {
if (that.value == "op2") {
alert("Note: Thank You. Option 2!");
} else if (that.value == "op5") {
document.getElementById("oKay").onclick = "optionFive()";
} else {
document.getElementById("keycheck").style.display = "none";
}
}
HTML:
<select id="selections" onchange="optionCheck(this);">
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
<option value="op4">Option 4</option>
<option value="op5">Option 5</option>
</select>
<div class="col-lg-4">
<button type="button" class="btn btn-success" id="oKay" onclick="startOtherfunc()">Okay</button>
</div>
but my code seems not working.
assuming there is function called optionFive, you can set the click handler
function optionFive() {
alert('optionFive function')
};
document.getElementById("oKay").onclick = optionFive;
I think what you are looking for is the .innerHTML property? This will change the text inside the button. For example
function optionCheck(that) {
if (that.value == "op2") {
alert("Note: Thank You. Option 2!");
}
else if (that.value == "op5") {
document.getElementById("oKay").innerHTML = "new text";
}
else {
document.getElementById("keycheck").style.display = "none";
}
}
Okay so I think this should work: I just used an event listener instead of onClick. I'm not sure why it works this way and not the other way if I'm honest.
function doSomethingElse(){
console.log('Doing something else');
return false;
}
function doSomething(){
console.log('Doing something');
return false;
}
function optionCheck(that) {
if (that.value === "op2") {
alert("Note: Thank You. Option 2!");
}
else if (that.value === "op4") {
document.getElementById("oKay").addEventListener("click", doSomething);
// document.getElementById("oKay").onClick = doSomething();
}
else if (that.value === "op5") {
// document.getElementById("oKay").onClick = doSomethingElse();
document.getElementById("oKay").addEventListener("click", doSomethingElse);
}
else {
document.getElementById("keycheck").style.display = "none";
}
}
I'm trying to do validations with js, i have an input and a select, each one has an alert under it, those alerts appear when the input's value is less than 12, and when the user leaves the select empty, and there is a disabled button at the end of the form, it gets enabled if the value of the input == 12 or the select is not null, i tried something for the input only but i can't figure out how to put the select condition in the same function, here is my code:
$('#requiredInput').keyup(function () {
if ( document.getElementById("requiredInput").value.length == 12)
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredInput").value.length != 12 ) {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
p{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="requiredInput">
<p id="requiredAlert">Please fill out this field</p>
<select id="requiredSelect">
<option>Hi</option>
</select>
<p id="requiredSelectAlert">Please select</p>
<button disabled id="disabledButton">Submit</button>
If you need to have the select with a null value selected by default, you have to add one more option in the top. You can add <option selected disabled>Select Something</option>. The disabled attribute will make it unselectable by the user after they click another option.
Then we need to add values to the options. Add an empty value in the default option we added before so it becomes <option selected disabled value="">Select Something</option>. Then, when the field change event fires, you can check the value of the select field and make the magic happen. I have updated your snippet bellow and added the above advice.
$('#requiredInput').keyup(function () {
if ( document.getElementById("requiredInput").value.length == 12)
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredInput").value.length != 12 ) {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
$('#requiredSelect').change(function () {
if ( document.getElementById("requiredSelect").value != "")
{
document.getElementById("requiredSelectAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredSelect").value === "" ) {
document.getElementById("requiredSelectAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
p{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="requiredInput">
<p id="requiredAlert">Please fill out this field</p>
<select id="requiredSelect">
<option value="" disabled selected>Select something</option>
<option value="hi">Hi</option>
</select>
<p id="requiredSelectAlert">Please select</p>
<button disabled id="disabledButton">Submit</button>
This is my version of you request. Using jquery to find the :selected element and get the text into the option tag. Also in each option you can set an value and get the .val() and will works.
$('#requiredInput').keyup(function () {
if ( document.getElementById("requiredInput").value.length == 12 && $('#requiredSelect').find(":selected").text() != "default")
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredInput").value.length != 12 && $('#requiredSelect').find(":selected").text() == "default") {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="requiredInput">
<p id="requiredAlert">Please fill out this field</p>
<select id="requiredSelect">
<option>default</option>
<option>hi</option>
</select>
<p id="requiredSelectAlert">Please select</p>
<button disabled id="disabledButton">Submit</button>
You could add to the condition... Something like:
$('#requiredInput').keyup(function () {
if (document.getElementById("requiredInput").value.length == 12 || document.getElementByid("requiredSelect").value != "Hi")
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if (document.getElementById("requiredInput").value.length != 12 && document.getElementByid("requiredSelect").value == "Hi") {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
and add to your htm:
<select id="requiredSelect">
<option value='Hi'>Hi</option>
<option value='op1'>option 1</option>
<option value='opN'>option N</option>
</select>
On the other hand, you are using jQuery so you could change you code to:
$('#requiredInput').keyup(function () {
if ($("#requiredInput").val().length == 12 || $("#requiredSelect").val() != "Hi")
{
$("#requiredAlert").css("display" : "none");
$("#disabledButton")prop("disabled", false);
} else if ($("#requiredInput").val().length != 12 && $("#requiredSelect").val() == "Hi") {
$("#requiredAlert")css("display" : 'block');
$("#disabledButton")prop("disabled", true);
}
});
How do I get two selectboxes to work in reverse in angularjs?
I have this example.
<select id="srcCurrency" ng-model="params.srcCurrency">
<option>USD</option>
<option>KRW</option>
</select>
<select id="dstCurrency" ng-model="params.dstCurrency">
<option >USD/option>
<option >KRW</option>
</select>
I want to choose opposite to each other.
I have this example but I want a more efficient way.
$scope.$watch('params.srcCurrency', function (newValue, oldValue) {
if ($scope.params.srcCurrency == "USD") {
$scope.params.dstCurrency = "KRW";
} else {
$scope.params.dstCurrency = "USD";
}
}, true);
$scope.$watch('params.dstCurrency', function (newValue, oldValue) {
if ($scope.params.dstCurrency == "USD") {
$scope.params.srcCurrency = "KRW";
} else {
$scope.params.srcCurrency = "USD";
}
}, true);
<select id="srcCurrency" ng-model="params.srcCurrency" ng-change="switchCurrencies(params.srcCurrency, 'source')">
<option>USD</option>
<option>KRW</option>
</select>
<select id="dstCurrency" ng-model="params.dstCurrency" ng-change="switchCurrencies(params.dstCurrency, 'dest')">
<option >USD/option>
<option >KRW</option>
</select>
In your controller
$scope.switchCurrencies = function(resource, type){
if(type == 'source'){
$scope.params.dstCurrency = angular.copy(resource);
}else{
$scope.params.srcCurrency = angular.copy(resource);
}
}
You better to avoid using $watch. Instead of use ng-change
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>