I am running dataTables plugin for a project.
Could you please show me where I am doing it wrong (it is extremely simple and it doesn't show any errors):
<select name="DataTables_Table_0_length" aria-controls="DataTables_Table_0" class="form-control input-sm">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
Basically that is what I have generated. So I want to select the 50 and 100 values to all the tables on the page and show the footer of the generated tables only when these two results are selected.
I tried the following (just for value="50"):
var selected_result = $('select option:nth(2)');
var tfoot = $('tfoot');
tfoot.hide();
if (selected_result.is(':selected')) { tfoot.show(); }
Thank you
Use .change() then check if it's selected to either show/hide the footer.
$(document).ready(function() {
$("#tfoot").hide();
$("select").change(function() {
if ($("select option:nth(2)").is(":selected")) {
$("#tfoot").show();
} else {
$("#tfoot").hide();
}
});
});
http://jsfiddle.net/rcLrf18j/
function showOptionValue() {
var optionSelected = document.getElementById("select_test");
var optionSelected_value = optionSelected.options[optionSelected.selectedIndex].value;
alert(optionSelected_value);
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form action = "" method = "post">
<select name = "select_test" id = "select_test" >
<option value = "10">10</option>
<option value = "25">25</option>
<option value = "50">50</option>
<option value = "100">100</option>
</select>
<input type = "button" value = "show option value" onclick = "showOptionValue()"/>
</form>
</body>
</html>
This code show you the current value of the option when clicking on the button. I let you use this one to modify the function to do what you want to do (meaning, showing your footer).
Hope it helps !
Presumably the footer is hidden by default. If you want to show the footer if either 50 or 100 are selected, then:
$(document).ready(function() {
$('select[name=DataTables_Table_0_length]').change(function() {
if (this.value == '50' || this.value == '100') {
$("#tfoot").show();
} else {
$("#tfoot").hide();
}
});
});
or
$(document).ready(function() {
$('select[name=DataTables_Table_0_length]').change(function() {
this.value == '50' || this.value == '100'? $("#tfoot").show() : $("#tfoot").hide();
});
});
or even:
$(document).ready(function() {
$('select[name=DataTables_Table_0_length]').change(function() {
$("#tfoot")[this.value == '50' || this.value == '100'? 'show' : 'hide']()
});
});
Related
I created this code in javascript, this code work fine, the code use drop-down to select item.
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</head>
<body><br><div id="id6"></div>
Select an item from the following list:<br />
<select id="select" onchange="myFuntam()">
<option value="">choose
<option value="var_1">car1
<option value="var_2">car2
<option value="var_3">car3
<option value="var_4">car4
</select>
<script>
function myFuntam() {
var x = document.getElementById("select").value;
url="http//domain1.com";
ur2="http//domain2.com";
ur3="http//domain3.com";
ur4="http//domain4.com";
var link_1;
if (x == "var_1") {
link_1=url;
}
if (x == "var_2") {
link_1=ur2;
}
if (x == "var_3") {
link_1=ur3;
}
if (x == "var_4") {
link_1=ur4;
}
document.getElementById("id6").innerHTML = "You selected: " + link_1;
}
</script>
</body>
</html>
Now i need to call variable link_1 out of function, allow me to use this variable with another function or any where out the function.
i try to use this code
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</head>
<body><br><div id="id6"></div>
Select an item from the following list:<br />
<select id="select" onchange="myFuntam()">
<option value="">choose
<option value="var_1">car1
<option value="var_2">car2
<option value="var_3">car3
<option value="var_4">car4
</select>
<script>
function myFuntam() {
var x = document.getElementById("select").value;
url="http//domain1.com";
ur2="http//domain2.com";
ur3="http//domain3.com";
ur4="http//domain4.com";
var link_1;
if (x == "var_1") {
link_1=url;
}
if (x == "var_2") {
link_1=ur2;
}
if (x == "var_3") {
link_1=ur3;
}
if (x == "var_4") {
link_1=ur4;
}
return link_1;
}
document.getElementById("id6").innerHTML = "You selected: " + link_1;
</script>
</body>
</html>
but this code not correct, link_1 is undefined, so how i use link_1 out of function.
The basics to get it done :
var link_1 = 'foobar';
function ....() { something with link_1; }
console.log(link_1);
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="id6"></div>
Select an item from the following list:<br />
<select id="select" onchange="myFuntam()">
<option value="">choose
<option value="var_1">car1
<option value="var_2">car2
<option value="var_3">car3
<option value="var_4">car4
</select>
<script>
function myFuntam() {
var x = document.getElementById("select").value;
url="http//domain1.com";
ur2="http//domain2.com";
ur3="http//domain3.com";
ur4="http//domain4.com";
var link_1;
if (x == "var_1") {
link_1=url;
}
if (x == "var_2") {
link_1=ur2;
}
if (x == "var_3") {
link_1=ur3;
}
if (x == "var_4") {
link_1=ur4;
}
return link_1;
}
function secondfunction(){
var linkvalue=myFuntam();
alert(linkvalue);
}
document.getElementById("id6").innerHTML = "You selected: " + myFuntam();
</script>
</body>
</html>
An alternative to using a variable, is to store the information in the DOM. You will save some code logic by storing those URL strings in each of the option nodes, as HTML5 data attributes.
The selected URL is then quite easily available.
var sel = document.getElementById('select');
function myFuntam() {
console.log(sel.options[sel.selectedIndex].dataset.url);
return sel.options[sel.selectedIndex].dataset.url;
}
Select an item from the following list:<br>
<select id="select" onchange="myFuntam()">
<option value="">choose
<option value="var_1" data-url="http//domain1.com">car1</option>
<option value="var_2" data-url="http//domain2.com">car2</option>
<option value="var_3" data-url="http//domain3.com">car3</option>
<option value="var_4" data-url="http//domain4.com">car4</option>
</select>
You can of course still decide to store that URL in a global variable, but as you can see, you don't need a lot of logic any more to retrieve it dynamically. Calling the function will just give you the URL you need without much hassle.
You have to declare the var outside the function so the function changes its declared value and you can keep using it the way you wanted after your function is done.
var link_1;
function myFunction() {
link_1 = 'www.anysite.com';
}
myFunction();
//now the var can be used outside
console.log(link_1);
//Anothe option could be
var link;
function myFunction2() {
link = 'www.otherwebsite.com';
return link;
}
link_2 = myFunction2();
console.log(link_2);
The third option could be using localStorage if the other ones did not work.
localStorage.setItem('link_1', link_1_value);
var aLink = localStorage.getItem('link_1');
Choose the one that suits your needs.
I am have been searched too much on net but nothing found.
I have 2 select options tag.
I want to show option value in the input tag by multiplying option tag value whatever it is.
and selecting 2nd option tag I want to assign 2nd option tag value to 1st option tag value.
and I also want to multiply that values as the 1st options value have before.
how to do this?
here is my code.
My 1st options tag.
<select name="" id="test">
<option selected="" value="0" disabled='disabled'>Select Duration</option>
<option value="1">1/month</option>
<option value="2">2/month</option>
<option value="3">3/month</option>
<option value="6">6/month</option>
<option value="12">12/month</option>
</select>
<input type="text" data-val="9" id="price_value" style="border:1px solid #0a0; padding:1px 10px; color: #f90;" value="0" size="5"/><br>
Here is 2nd option tag.
<select id="plan">
<option value='Basic'>Basic</option>
<option value='Standard'>Standard</option>
<option value='Professional'>Professional</option>
<option value='Enterprice'>Enterprise</option>
</select>
here is JS.
$('#test').on('change',function(e){
var input = $(this).next('input[type="text"]');
var value = $(this).find('option:selected').val();
input.val( input.data('val') * parseInt(value) );
});
$('#plan').on('change',function(e) {
var plan = $(this).find('option:selected').val();
var price_value = $('#price_value');
if (plan == "Basic") {
price_value.removeAttr('data-val');
price_value.attr('data-val','9');
}
else if (plan == "Standard"){
price_value.removeAttr('data-val');
price_value.attr('data-val','19');
}
else if (plan == "Professional"){
price_value.removeAttr('data-val');
price_value.attr('data-val','29');
}
else if (plan == "Enterprice") {
price_value.removeAttr('data-val');
price_value.attr('data-val','59');
}
});
Here is Demo
Changes
Use $(this).val() instead of $(this).find('option:selected').val() to fetch select value. or even better use this.value
use .data() to set value like price_value.data('val', 9); instead of price_value.attr('data-val','9');
No need to use price_value.removeAttr('data-val');
Code
$('#test').on('change',function(e){
var input = $(this).next('input[type="text"]');
var value = $(this).val(); //Or this.value
input.val( input.data('val') * parseInt(value, 10) );
});
$('#plan').on('change',function(e) {
var plan = $(this).val();
var price_value = $('#price_value');
if (plan == "Basic") {
price_value.data('val',9);
}
else if (plan == "Standard"){
price_value.data('val',19);
}
else if (plan == "Professional"){
price_value.data('val',29);2
}
else if (plan == "Enterprice") {
price_value.data('val',59);
}
$('#test').trigger('change'); //Trigger $('#test') change event
});
DEMO
This solution would work if you are okay with changing your HTML a bit:
<select id="plan">
<option value='9'>Basic</option>
<option value='19'>Standard</option>
<option value='29'>Professional</option>
<option value='59'>Enterprise</option>
</select>
Then simply use:
$('#test, #plan').on('change',function() {
var valueOne = $('#test').val();
var valueTwo = $('#plan').val();
$('#price_value').val(parseInt(valueOne) * parseInt(valueTwo));
});
That's all!
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;
};
This is a follow up question. I am trying to get a input box to be hidden when a pull-down menu has the value "tid and acc". I am at a loss why this code isn't working, any help would much appreciated! Here is a link on jfiddle: http://jsfiddle.net/Mm7c7/
<script>
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
</script>
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc">
Your script is being evaluated before your element is ready. Placing the script in a $(document).ready() or after the content it affects will solve the problem
http://jsfiddle.net/Wx8Jf/2
$(document).ready(function(){
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
});
Couple problems:
You'll either need to wrap the function in $(function(){}) to ensure DOM is ready, or drop it below your HTML (the former is recommended). If you don't wrap it (or drop it), then the script is executed before the elements have actually been rendered, causing $('#rule-type') to be undefined.
Your logic is incorrect (according to your explanation). Your current logic says to hide the input box when anything other than tid and acc is selected.
Working version:
<script>
$(function(){
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').hide();
}
else {
$('#tid-acc').show();
}
});
});
</script>
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc" />
http://jsfiddle.net/dbrecht/QwkKf/
Take a look here for a working sample: http://jsfiddle.net/Mm7c7/1/
HTML:
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc">
Javascript:
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
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>