Develop Reference

Select tag status check with javascript?

I have two select tags now what i want is that only one should be selected at a time that is from two select tags user should only select one and if the user select from both the tags then it should display error that only one should be selected
What i am using
var $institution=document.getElementById('institutionselect').value;
var $section=document.getElementById('sectionselect').value;
if($institution.selectedIndex = 0 && $section.selectedIndex = 0){
alert('please select one amongst two');
return false;
}else if($institution.selectedIndex = null && $section.selectedIndex = null){
alert('please select one amongst two');
return false;
}
Please help in correcting the code Thank you!

Problem is you are assigning instead of comparing. Use == instead of =.
if($institution.selectedIndex = 0 && $section.selectedIndex = 0)
Also update this line removing .value in order to use .selectedIndex:
var $institution=document.getElementById('institutionselect');
var $section=document.getElementById('sectionselect');
An example:
var check = function() {
var $institution = document.getElementById('institutionselect');
var $section = document.getElementById('sectionselect');
if ($institution.selectedIndex == 0 && $section.selectedIndex == 0) {
alert('please select one amongst two');
return false;
}
};
<select id='institutionselect'>
<option>Select</option>
<option>Item 1</option>
<option>Item 2</option>
</select>
<select id='sectionselect'>
<option>Select</option>
<option>Item 1</option>
<option>Item 2</option>
</select>
<button onclick="check();">Check</button>

All you need to do is checking for both value in one condition like so :
var $institution = document.getElementById('institutionselect').value;
var $section = document.getElementById('sectionselect').value;
// if both variable have values
if ( $institution && $section ){
alert('please select one amongst two');
return;
}
// do something here
DEMO

Calling another function and setting if statement in Javascript

I am wondering if i can call another function also pass in if statement instruction within another function.
I need to do it this way, because i am also allowing users to select the value from a select button.
<script>
$(document).one("pageshow", "#testpage", function () {
var status = getURLParameter("status");
var status2 = status.substring(0, status.indexOf('?'));
if (status2 == "ready") {
getComboA(3)
}
});
function getComboA(sel) {
var value = sel.value;
if (value == 1) {
alert("1 is working");
}
if (value == 2) {
alert("2 is working");
}
if (value == 3) {
alert("3 is working");
}
}
</script>
<select name="select-native-1" id="statusselect" onchange="getComboA(this)" style="width: 300px;">
<option value="1" id="radio-choice-h-222">Not Ready</option>
<option value="2" id="radio-choice-h-2a">Sent</option>
<option value="3" id="radio-choice-h-2b">Ready</option>
</select>
The getComboA(3) part isnt working at the moment, it isnt triggering the getComboA

change
var value = sel.value;
to
var value = sel.value || sel;
so if sel.value was undefined it will use sel

The answer that another user provided worked, but that whole answer got deleted. But if i use getComboA({value:3}); it works.

Hide Element with JS due to two conditions

I'm not that familiar with JavaScript. What I was doing so far was to hide a part of my form (see below: "Memo"), when someone changed an input-text-field via onchange (field-name: "ordernumber").
Therefore I'm using this funktion:
<script language="JavaScript" type="text/javascript">
function takeawayfield()
{ dok=0;
if (document.getElementById("ordernumber").changed == true) dok=1
if (dok==0)
{document.getElementById("Memo").style.display = "none";}
else
{document.getElementById("Meno").style.display = "inline";}
}
</script>
This works pretty fine, but now I'd like to add another condition from a dropdown (select option). In other words: When you change ordernumber AND select a certain option, "Memo" should disappear. I tried a lot, but I can't get it to work properly. This was my latest try:
function takeawayfield()
{ dok=0;
if (document.getElementById("ordernumber").changed == true && document.getElementById("system").value == "sys1") dok=1
if (dok==0)
{document.getElementById("Memo").style.display = "none";}
else
{document.getElementById("Memo").style.display = "inline";}
Two things are not working right with this one: It performs when only one of the conditions is true (although I used &&) and it seems to be unrelevant which option from the dropdown ist selected. Right now it performs with every option, but it should only perform with "sys1".
BTW: I added onchange="javascript:takeawayfield()" to both of the affected form-elements (input text and select option). I guess that's right?
What am I doing wrong?
Thanks in advance!
EDIT:
Here are the html-tags:
<input type="text" name="ordernumber" id="ordernumber" value="<?php echo htmlspecialchars($ordernumber); ?>" onchange="javascript:takeawayfield()">
<select name="system" id="system" onchange="javascript:takeawayfield()">
<option value="sys1">System 1</option>
<option value="sys2">System 2</option>
<option value="sys3">System 3</option>
</select>

Try this:
var dok = 0,
initialValue = "",
ordernumber = null,
system = null,
memo = null;
window.onload = function() {
// get dom objects
ordernumber = document.getElementById("ordernumber");
system = document.getElementById("system");
memo = document.getElementById("Memo");
// set initial value
initialValue = ordernumber.value;
};
function takeawayfield() {
if (ordernumber.value != initialValue && system.value == "sys1") {
dok = 0;
memo.style.display = "none";
} else {
dok = 1;
memo.style.display = "inline";
}
};
jsFiddle

If you want to react to changes by the user after the page has loaded you could listen to the keyup event of the input box and the dropdown.
Here's an example:
window.onload = function() {
document.getElementById("ordernumber").addEventListener('keyup', takeawayfield, false);
document.getElementById("system").addEventListener('change', takeawayfield, false);
function takeawayfield()
{
if (document.getElementById("system").value == "sys1") {
toggleMemo(false);
}
else {
toggleMemo(true);
}
}
function toggleMemo(show) {
var memo = document.getElementById("Memo");
if (show) {
memo.style.display = "inline";
}
else {
memo.style.display = "none";
}
}
};
http://jsfiddle.net/je5a7/

If your dropdown (select/option) have values in the option tag then the code below should be work fine. (after the user selects)
The select for example:
<select id="system">
<option value="sys1">system 1</option>
</select>
Your code
document.getElementById("system").value == "sys1"
OR you change your code:
if (document.getElementById("ordernumber").changed == true) dok=1;
else dok=0;
if (document.getElementById("system").value == "sys1") dok=1
else dok=0;

Alert or message on specific option selected in select menu

I have a select drop down menu. The menu is just for show and doesn't contribute anything to the form. However, I want option "b" to display an alert/message when it is selected/clicked BUT then I want option "a" selected after the user closes the alert (similar to disabled).
<select name="fake">
<option name="a">a</option>
<option name="b">b</option>
</select>
I found other javascript code, but nothing that suits my particular need.
EDIT
This is half way to what I need:
<select onchange="selectChangeHandler(this)">
<option>a</option>
<option>b</option>
</select>
<script>
function selectChangeHandler(selectNode) {
if (selectNode.selectedIndex !== 2) {
alert("I'm alert option!");
}
}
</script>
However, when the user selects option "b" and the alert is displayed, I want the option to revert back to option "a"

you can call a javascript function on call onchange() event.
HTML
<select name="fake" onchange="change(this);">
<option value="a" name="a">a</option>
<option value="b" name="b">b</option>
</select>
javascript,
<script>
function change(selBox) {
for(var i, j = 0; i = selBox.options[j]; j++) {
if(i.value == "b" && selBox.selectedIndex != 0) {
alert("you've clicked b");
selBox.selectedIndex = 0;
}
}
}
</script>

$('#chk').change(function(){
if($(this).val() === 'a')
alert("You Clicked a!");
});
where chk is the id of select element
if you are using name then
$('#chk').change(function(){
if($(this).attr('name') === 'a')
alert("You Clicked a!");
});
where chk is the id of select element

How to HIDE element based on IF statement when onClick is used

I need to be able to hide an image that appears when clicking on an option within a select field ONLY if the value="" (nothing inside quotes). If the value="some_url" inside the option, then I want the image to show.
I have used the following code to SHOW the image when an option is clicked. But when using onClick, it shows the image even if the option value="".
Here is the Javascript I'm using:
function showImage() {
document.getElementById('openimg').style.display = 'block';
Here is the html:
<select name="" >
<option value="url" onclick="showImage();">Some_option_1</option>
<option value="">Some_option_2</option>
<option value="">Some_option_3</option>
</select>
<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>
I only inserted one onClick command inside one option, just to show that it works. It seems I need an if statement to "show if" or "hide if" along with the onClick command within each option.

this is how I would do it:
<script type="text/javascript">
function showImage()
{
var choice = document.getElementById('myDropDown').value;
if(choice.length > 0)
{
document.getElementById('openimg').style.display = 'block';
}
else
{
document.getElementById('openimg').style.display = 'none';
}
}
</script>
<select id="myDropDown" onchange="showImage()">
<option value="url">Some_option_1</option>
<option value="">Some_option_2</option>
<option value="">Some_option_3</option>
</select>
<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>

Um, are you asking how to use an if or how to determine what is selected?
First of all, use onchange event in the dropdown.
This is the LONGHAND way of doing it for illustration purposes.
function onChange(){
var mySelect = document.getElementById("my-select");
var selectedValue = "";
for( var i = 0; i < mySelect.length;i++){
if( mySelect[i].selected)
selectedValue = mySelect[i].value;
}
if( selectedValue == "whatever")
{
//do something
}
if( selectedValue == "ugh")
// do something else
}