I have a drop down which has many options. I want that when I select any
option then it calls a function through JavaScript.
the code which I used is here
<select name="aa" onchange="report(this.value)"> <--- this is function in .js
<option value="daily">daily</option>
<option value="monthly">monthly</option>
</select>
I want when I select daily then function(daily) is invoked
and vice versa.
function report(daily)<-- js function {
loadXMLDoc('script/d_report.php','responseTag');
document.getElementById('responseTag').style.visibility='visible';
document.getElementById('list_report').style.visibility='hidden';
document.getElementById('formTag').style.visibility='hidden';
}
function report(monthly) {
document.getElementById('responseTag').style.visibility='visible';
loadXMLDoc('script/m_report.php','responseTag');
document.getElementById('list_report').style.visibility='hidden';
document.getElementById('formTag').style.visibility='hidden';
}
<select name="aa" onchange="report(this.value)">
<option value="">Please select</option>
<option value="daily">daily</option>
<option value="monthly">monthly</option>
</select>
using
function report(period) {
if (period=="") return; // please select - possibly you want something else here
const report = "script/"+((period == "daily")?"d":"m")+"_report.php";
loadXMLDoc(report,'responseTag');
document.getElementById('responseTag').style.visibility='visible';
document.getElementById('list_report').style.visibility='hidden';
document.getElementById('formTag').style.visibility='hidden';
}
Unobtrusive version:
<select id="aa" name="aa">
<option value="">Please select</option>
<option value="daily">daily</option>
<option value="monthly">monthly</option>
</select>
using
window.addEventListener("load",function() {
document.getElementById("aa").addEventListener("change",function() {
const period = this.value;
if (period=="") return; // please select - possibly you want something else here
const report = "script/"+((period == "daily")?"d":"m")+"_report.php";
loadXMLDoc(report,'responseTag');
document.getElementById('responseTag').style.visibility='visible';
document.getElementById('list_report').style.visibility='hidden';
document.getElementById('formTag').style.visibility='hidden';
});
});
jQuery version - same select with ID
$(function() {
$("#aa").on("change",function() {
const period = this.value;
if (period=="") return; // please select - possibly you want something else here
var report = "script/"+((period == "daily")?"d":"m")+"_report.php";
loadXMLDoc(report,'responseTag');
$('#responseTag').show();
$('#list_report').hide();
$('#formTag').hide();
});
});
Greetings
if i get you right you need a JavaScript function that doing it
function report(v) {
//To Do
switch(v) {
case "daily":
//Do something
break;
case "monthly":
//Do somthing
break;
}
}
Regards
<script type="text/javascript">
function report(func)
{
func();
}
function daily()
{
alert('daily');
}
function monthly()
{
alert('monthly');
}
</script>
Related
I am using a jquery code found on Stakeoverflow to remove duplication value in the dropdown. my problem is the jquery code worked for the first dropdown but will not work for the second dropdown any help will be welcome
1st dropdown
<select id="AssetStoredWhere" name="AssetStoredWhere" class="form-control js-example-disabled-results
select">
<option value="#ViewBag.AssetStoredWhere">#ViewBag.AssetStoredWhere</option>
<option value="UK">UK</option>
<option value="EU">EU</option>
<option value="Worldwide">Worldwide</option>
</select>
2bd Dropdown
<select asp-for="Dpiaavailable" id="Dpiaavailable" name="Dpiaavailable" class="form-control js-
example-disabled-results select">
<option value="#ViewBag.Dpiaavailable">#ViewBag.DpiaavailableValue</option>
<option value="False">No</option>
<option value="True">Yes</option>
</select>
Jquery code
var seen = {};
jQuery('.select').children().each(function () {
var txt = jQuery(this).attr('value');
if (seen[txt]) {
jQuery(this).remove();
} else {
seen[txt] = true;
}
});
You need another loop to iterate through the select elements themselves, not through the option elements of every select as one. Try this:
$('.select').each(function() {
var seen = {};
$(this).children().each(function() {
var $option = $(this);
if (seen[$option.val()]) {
$option.remove();
} else {
seen[$option.val()] = true;
}
});
});
So I have a select element with four options.
I want to select different options so that different functions can fire , but the onclick method is not working.
let select = document.getElementById('pbvalue');
select.addEventListener('click', dodo);
function dodo(e) {
if (e.target.value == 1) {
alert('hi')
} else {
alert('no')
}
}
<select id="pbvalue" tabindex="4">
<option value="0">""</option>
<option value="1">100</option>
<option value="2">200</option>
<option value="3">300</option>
</select>
how to select different options, so different functions can fire according to that.
Do this:
let select = document.getElementById('pbvalue');
select.onchange = function () {
// get the selected option
var value = select.options[select.selectedIndex].value
}
// get all options:
for ( int i = 0; i < select.options.length; i++ ) {
console.log( select.options[i].value )
}
This should give you an idea of how to proceed.
use onchange event.
<select id="pbvalue" tabindex="4" onchange="dodo(event)">
<option value="0" disabled>choose</option>
<option value="1">100</option>
<option value="2">200</option>
<option value="3">300</option>
</select>
<script>
function dodo(e){
switch(e.target.value){
case "1":
alert(1);//do what ever you want
break;
case "2":
alert(2);
break;
case "3":
alert(3);
break;
default:
alert("default");
break;
}
}
</script>
You can add onChange event on the select element.
<script>
function onSelectChange() {
const element = document.getElementById('pbvalue');
console.log('Selected Index: ', element.selectedIndex);
console.log('Selected Value: ', element.value);
}
</script>
<select id="pbvalue" tabindex="4" onchange="onSelectChange()">
<option value="0">""</option>
<option value="1">100</option>
<option value="2">200</option>
<option value="3">300</option>
</select>
I would like to put multiple values in tag within select, so I could adress precisely one or few items.
Example:
<select id="select1">
<option value="pf, nn">NN</option>
<option value="pf, x2, jj">JJ</option>
<option value="pf, uu">UU</option>
<option value="pf, x2, oo">OO</option>
<option value="tt">TT</option>
<option value="rr">RR</option>
</select>
In my js I got that one function that depend on one value that is common for many items:
if (document.getElementById("select1").value = "pf";) {
// do something;
}
if (document.getElementById("select1").value = "x2";) {
// do some-other-thing;
}
But I don't want to use (cos' and with more options gonna get messy)
var sel1 = document.getElementById("select1").value
if (sel1="nn" || sel1="jj" || sel1="uu" || sel1="oo") {
// do something;
}
if (sel1="jj" || sel1="oo") {
// do some-other-thing;
}
Neverthelesst I need to be able to set item by precise one value
if (document.somethingelse = true) {
document.getElementById("select1").value = "oo";)
}
Is there a nice way to achieve this? Maybe use some other "value-like" attribute of option (but which?)?
Only JS.
I think you can do what you want with selectedOpt.value.split(",").includes("sth") code:
$(document).ready(function(e){
selectedChange($("#select1")[0])
});
function selectedChange(val) {
var selectedOpt = val.options[val.selectedIndex];
var status1 = selectedOpt.value.split(",").includes("x2");
var status2 = selectedOpt.value.split(",").includes("pf");
console.log(status1);
console.log(status2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1" onchange="selectedChange(this)">
<option value="pf,nn">NN</option>
<option value="pf,x2,jj">JJ</option>
<option value="pf,uu">UU</option>
<option value="pf,x2,oo">OO</option>
<option value="tt">TT</option>
<option value="rr">RR</option>
</select>
I have two selection boxes in the form listing below, Both have different id "language" and "time". Now the problem is my script is not showing error correctly. I put Border color to show error.
Can someone help me with this?
<div class="field_wrap">
<select name="language" id="language" onblur="validateSelect(language)" class="select_promo">
<option value="0" disabled selected>Prefered Language</option>
<option value="1">English</option>
<option value="2">Hindi</option>
<option value="3">Tamil</option>
<option value="4">Malayalam</option>
</select></div>
<div class="field_wrap">
<select name="time" id="time" onblur="validateSelect(time)" class="select_promo">
<option value="0" disabled selected>Time to Contact</option>
<option value="1">8 - 10 AM</option>
<option value="2">10 - 12 AM</option>
<option value="3">12 - 2 PM</option>
<option value="4">2 - 5 PM</option>
<option value="5">5 - 8 PM</option>
</select></div>
</div>
My Script :
function validateSelect(language) {
var myValue = document.getElementById('language').value;
if(myValue > 0) {
document.getElementById('language').style.borderColor ='#80c75a';
document.getElementById('languageError').style.display = "none";
return true;
} else {
document.getElementById('language').style.borderColor ='#e35152';
return false;
}
}
function validateSelect(time) {
var myValue = document.getElementById('time').value;
if(myValue > 0) {
document.getElementById('time').style.borderColor ='#80c75a';
document.getElementById('timeError').style.display = "none";
return true;
} else {
document.getElementById('time').style.borderColor ='#e35152';
return false;
}
}
// Validate Select
if (!validateSelect(document.getElementById('language'))) {
document.getElementById('languageError').style.display = "block";
error++;
}
if (!validateSelect(document.getElementById('time'))) {
document.getElementById('timeError').style.display = "block";
error++;
}
You have some errors in your code:
you declare function validateSelect twice
you pass there an element while an element id is expected in the function
onblur event handler in your selects should accept parameter in quotes
Here is what your javascript should look like:
function validateSelect(id){
var el = document.getElementById(id),
myValue = el.value;
if(myValue > 0){
el.style.borderColor ='#80c75a';
document.getElementById(id+'Error').style.display = "none";
return true;
}else{
el.style.borderColor ='#e35152';
return false;
}
}
// Validate Select
validateSelect('time');
validateSelect('language');
Your onblurs should look like:
onblur="validateSelect('language')" and onblur="validateSelect('time')"
Check fiddle: JS Fiddle
I am having trouble getting this validation to work. I am validating that a selectbox has been chosen and not left on the default option within my form.
Form:
<label for="reason">How can we help?</label>
<select name="reas">
<option value="Please Select">Please Select</option>
<option value="Web Design">Web Design</option>
<option value="branding">Branding</option>
<option value="rwd">Responsive Web Design</option><span id="dropdown_error"></span>
</select>
Onclick event:
$(document).ready(function(){
$('#contactForm').submit(function(){
return checkSelect();
});
});
Function:
function checkSelect() {
var chosen = "";
var len = document.conform.reas.length;
var i;
for (i = 0; i < len; i++){
if (document.conform.reas[i].selected){
chosen = document.conform.reas[i].value;
}
}
if (chosen == "Please Select") {
document.getElementById("dropdown_error").innerHTML = "No Option Chosen";
return false;
}
else{
document.getElementById("dropdown_error").innerHTML = "";
return true;
}
}
I also get this error in the console:
Uncaught TypeError: Cannot set property 'innerHTML' of null
I am really new to javascript, so, I am learning and trying some simple examples at the moment, but I cannot see what is causing this not to validate.
Any help appreciated
First, you can't have your error span inside the <select>. Move it outside of the <select> HTML, and that will make the JS error go away.
<label for="reason">How can we help?</label>
<select name="reas">
<option value="select">Please Select</option>
<option vlaue="Web Design">Web Design</option>
<option vlaue="branding">Branding</option>
<option vlaue="rwd">Responsive Web Design</option>
</select>
<span id="dropdown_error"></span>
Then, since you are already using jQuery, you could shorten your whole validation function to just this:
function checkSelect() {
var chosen = $('select[name="reas"]').val();
if (chosen == "select") {
$("dropdown_error").text("No Option Chosen");
return false;
} else {
$("dropdown_error").text("");
return true;
}
}
Change your default selection to an optgroup:
<optgroup>Please Select</optgroup>
Then it won't be selectable
https://developer.mozilla.org/en-US/docs/HTML/Element/optgroup
Your default value is "select" and you are checking "Please Select". Use the same value.
Change this
<option value="select">Please Select</option>
to
<option value="Please Select">Please Select</option>
EDIT: I would use the following code. To fix javascript issue, make sure you put the script just before closing body tag. Your script is executing before the document is parsed
<label for="reason">How can we help?</label>
<select id="reas" name="reas">
<option value="">Please Select</option>
<option vlaue="Web Design">Web Design</option>
<option vlaue="branding">Branding</option>
<option vlaue="rwd">Responsive Web Design</option><span id="dropdown_error"> </span> </option>
function checkSelect() {
var chosen = document.getElementById["reas"].value;
if (chosen == "") {
document.getElementById("dropdown_error").innerHTML = "No Option Chosen";
return false;
}
else{
document.getElementById("dropdown_error").innerHTML = "";
return true;
}
}