In checkbox within selectbox how to get the checked value? - javascript

Here is my code i tried to print the selected value from selected box.But its printing only the first value of selected item.I don't know how to get the length of selected value.any one help me for this problem
<html>
<head>
<title>jQuery Dropdown CheckList</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.13.custom.css">
<link rel="stylesheet" type="text/css" href="ui.dropdownchecklist.themeroller.css">
<style>
table td { vertical-align: top }
dd { padding-bottom: 15px }
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="ui.dropdownchecklist-1.4-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#s10").dropdownchecklist( { forceMultiple: true
, onComplete: function(selector) {
var values = "";
for( i=0; i < selector.options.length; i++ )
{
if (selector.options[i].selected && (selector.options[i].value != ""))
{
if ( values != "" )
values += ";";
values += selector.options[i].value;
}
}
alert(values);
}
, onItemClick: function(checkbox, selector)
{
var justChecked = checkbox.prop("checked");
var checkCount = (justChecked) ? 1 : -1;
for( i = 0; i < selector.options.length; i++ ){
if (selector.options[i].selected )
checkCount += 1;
}
}
});
});
</script>
</head>
<body>
<div id="content">
<table>
<tr>
<td>
<select id="s10">
<option value=""></option>
<option value='a'>Alice</option>
<option value='b'>Bob</option>
<option value='c'>Christian</option>
<option value='d'>Daniel</option>
<option value='e'>Elizabeth</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
for taking the length of checkbox selected item I did this but i don't know it only giving 1 as alert message
onItemClick: function (checkbox, selector)
{
$("input:checked").each(function()
{
alert($(this).val().length);
});
} });

Try this, Hope it will work
<select id="s10" multiple="multiple">
<script type="text/javascript">
$(document).ready(function() {
var foo = [];
$('#s10:selected').each(function(i, selected){
foo[i] = $(selected).text();
});
});
</script>

get the selected option with :selected:
$('#s10 option:selected').val();
What i meant to say is this: http://jsfiddle.net/T4UDu/
$('#s10').change(function(){
alert($('option:selected',this).val());
});

$('#checkboxId').change(function(){
alert($('option:selected',this).val());
});

Related

how to auto update date for three days in dropdown using php

I have simple dropdown option for three days to select one date but i want that the date will auto update for last three days and it must be in dropdown.
here is my code...
<select class="col-md-7" name="dateinfo">
<option value="02-11-2018">02-11-2018</option>
<option value="03-11-2018">03-11-2018</option>
<option value="04-11-2018">04-11-2018</option>
</select>
Here is my another code in which i have used datepicker ....
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({ minDate: -3, maxDate: "0" });
} );
</script>
<p>Date: <input type="text" id="datepicker"></p>
I want this in dropdown...
Here I have tried a manual way of adding dates for next 3days when you select a date from input box.
You can get new dates by adding the number of days in the date object
Example:
var d1 = new Date(newDate);
d1.setDate(d1.getDate() + 2);
it gets the date of day after tomorrow.
So, you want to get the next 3 day dates in the select box. So, make a loop for 3 times and append the date to the option field.
$("#getdate").on('change', function() {
$('#dates').find('option').remove().end();
var newDate=this.value;
for(var i=0;i<3;i++)
{
var d1 = new Date(newDate);
d1.setDate(d1.getDate() + i);
$("#dates").append('<option>'+d1.getDate()+'-'+(d1.getMonth()+1)+'-'+d1.getFullYear()+'</option>');
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-git.js"></script>
<input type="date" id="getdate"></input>
<select id="dates">
</select>
</body>
</html>
Edit
//$("#getdate").on('change', function() {
//$('#dates').find('option').remove().end();
//var newDate=this.value;
var newDate = new Date();
console.log(newDate.getDate());
for(var i=0;i<3;i++)
{
var d1 = new Date(newDate);
d1.setDate(d1.getDate() - i);
$("#dates").append('<option>'+d1.getDate()+'-'+(d1.getMonth()+1)+'-'+d1.getFullYear()+'</option>');
}
//});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-git.js"></script>
<select id="dates">
</select>
</body>
</html>
How about below,
$(document).ready(function() {
for (var i = 0; i < 3; i++) {
var d = new Date();
d.setDate(d.getDate() - i);
var optionValue = $.datepicker.formatDate('dd-mm-yy', d)
//OR var optionValue = d.getDate() +'-'+ (d.getMonth()+1) +'-'+ d.getFullYear();
$("#dateinfo").append("<option value=" + optionValue + ">" + optionValue + "</option>");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<select class="col-md-7" id="dateinfo">
</select>
$.datepicker.formatDate is a functionality of jQuery UI. If you don't want to use jQuery UI, just remove the commented code and it will work as expected.
Run the below code It will work.
<?php
$date=date('Y-m-d');
$Dates[0]=date('Y-m-d', strtotime('-1 day', strtotime($date)));
$Dates[1]=date('Y-m-d', strtotime('-2 day', strtotime($date)));
$Dates[2]=date('Y-m-d', strtotime('-3 day', strtotime($date)));
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var js_DateArray = new Array();
<?php
$i=0;
if (!empty($Dates))
{
foreach ($Dates as $key=>$value)
{
echo "js_DateArray[$i]=new Array('".$value."');\n" ;
$i++;
}
}
?>
var html = [];
for (i = 0; i < js_DateArray.length; i++)
{ html.push("<option>" + js_DateArray[i] + "</option>") }
$("#dropdown").html(html);
});
</script>
</head>
<body>
<select id="dropdown">
</select>
</body>
</html>
let's try someting like this
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<select class="col-md-7" name="dateinfo">
<option value="02-11-2018">02-11-2018</option>
<option value="03-11-2018">03-11-2018</option>
<option value="04-11-2018">04-11-2018</option>
</select>
<script>
var dates = {
selected : '',
dateArr : []
}
$( function() {
$( "#datepicker" ).datepicker(
).on("change", function (e) {
dates.selected = new Date(e.target.value);
var optDate = new Date();
optDate.setDate(dates.selected.getDate() - 1);
dates.dateArr.length = 0;
var i;
for (i = 1; i < 4; i++) {
var optDate = new Date();
optDate.setDate(dates.selected.getDate() - i);
dates.dateArr.push(optDate)
}
var str;
dates.dateArr.forEach(function (date) {
str += "<option value='"+ date.toISOString().split('T')[0]+ "'>"+ date.toISOString().split('T')[0]+ "</option>";
})
$(".col-md-7").html("").append(str);
// console.log(dates)
})
} );
</script>
<p>Date: <input type="text" id="datepicker"></p>

Cannot fetch data from json using select in javascript

I am new in Json and javascript . What I want is a select tag with option, thus by selecting the options - that particular object will be fetched from JSON and will be displayed , I have used Nested JSON .
data.json:
var data = {
"abc":{
"color":["rgb(4,45,97)","rgb(255,122,0)"],
"font":"Interface Thin",
"logo":"<img src='logo.png' width='200' height='150'>"
}
}
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="data.json"></script>
</head>
<body>
<!--document.getElementById('color').innerHTML += '<div style="border:1px solid black;padding:2px;width:100px;background-color:'+data.AllenandHanburys[j]+';height:100px"></div>'-->
<p id="demo"></p>
<p id="color"></p>
<p id="logo"></p>
<select id="brand" onChange="run()">
<option>Select Option</option>
<option value="abc">abc</option>
</select>
</body>
<script>
var i;
function run() {
var brand_name=document.getElementById('brand').value;//
for(x in data)
{
if(x==brand_name)
{
for(j in data.brand_name)
{
document.getElementById('demo').innerHTML +=j+":"+data.abc[j]+"<br>";
if(j=='color')
{
for(i=0;i<data.abc.color.length;i++)
{
document.getElementById('color').innerHTML +='<div style="border:1px solid black;padding:2px;width:100px;background-color:'+data.abc.color[i]+';height:100px"></div>'+"<br>";
}
}
}
}
}
}
</script>
</html>
this line is wrong,
for(j in data.brand_name) //because `brand_name` property is not exist in the object
change it to
for(j in data[brand_name]) //data[brand_name] will parsed as data['abc'] which is same as data.abc
Here's the demo
var data = {
"abc":{
"color":["rgb(4,45,97)","rgb(255,122,0)"],
"font":"Interface Thin",
"logo":"<img src='logo.png' width='200' height='150'>"
}
}
var i;
function run() {
var brand_name=document.getElementById('brand').value;//
for(x in data)
{
if(x==brand_name)
{
for(j in data[brand_name])
{
document.getElementById('demo').innerHTML +=j+":"+data.abc[j]+"<br>";
if(j=='color')
{
for(i=0;i<data.abc.color.length;i++)
{
document.getElementById('color').innerHTML +='<div style="border:1px solid black;padding:2px;width:100px;background-color:'+data.abc.color[i]+';height:100px"></div>'+"<br>";
}
}
}
}
}
}
<p id="demo"></p>
<p id="color"></p>
<p id="logo"></p>
<select id="brand" onChange="run()">
<option>Select Option</option>
<option value="abc">abc</option>
</select>

Multiple dynamic select option lists

I'm trying to populate 3 drop down exactly the same from each other but select name and option value. I found a simple javascript works fine for my demand; however, unable to make it work once I combo the select list. Below is what I have changed and no longer work correctly when changed. I'm not good with js so any help is appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="includes/jquery1.7.js"></script>
<script language="javascript">
$(function() {
var selectValues = {
"nokia": {
"N97": "http://www.google.com",
"N93": "http://www.stackoverflow.com"
},
"motorola": {
"M1": "http://www.ebay.com",
"M2": "http://www.twitter.com"
}
};
for (var i=1;i<4;i++) {
var $vendor+i = $('select.mobile-vendor'+i);
var $model+i = $('select.model'+i);
$vendor+i.change(function() {
$model+i.empty().append(function() {
var output = '';
$.each(selectValues[$vendor+i.val()], function(key, value) {
output += '<option value='+value+'>' + key + '</option>';
});
return output;
});
}).change();
}
});
</script>
<style type="text/css">
#download-link {
padding: 13px 15px 13px 15px;
font-size: larger;
font-decoration: underline;
background-color: #ffffbb;
border: 2px dashed red;
margin-top: 16px;
display: inline-block;
}
</style>
</head>
<body>
<p>
<form action="?" method="get">
<%for i=1 to 3%>
<select name="dvr_<%=i%>" class="mobile-vendor<%=i%>">
<option value="motorola">Motorola</option>
<option value="nokia">Nokia</option>
<option value="android">Android</option>
</select>
<select name="cam_<%=i%>" class="model<%=i%>">
<option></option>
</select>
<BR />
<%next%>
<input type="submit" value="submit" />
</form>
</p>
</body>
</html>
I think you can change these lines:
var $vendor+i = $('select.mobile-vendor'+i);
var $model+i = $('select.model'+i);
to
var $vendor = $('select.mobile-vendor'+i);
var $model = $('select.model'+i);
without the need to append the counter to the variable names. inside the function just refer to $vendor and $model
EDIT:
try this code
for (var i=1;i<4;i++) {
var $vendor = $('select.mobile-vendor'+i);
var $model = $('select.model'+i);
$vendor.change(function() {
var $o = $( this );
$o.next().empty().append(function() {
var output = '';
$.each(selectValues[$o.val()], function(key, value) {
output += '<option value='+value+'>' + key + '</option>';
});
return output;
});
}).change();
}
the error is not only how they named their variaves?
var $vendor+i = $('select.mobile-vendor'+i);
would not be so alone?
var $vendor = $('select.mobile-vendor'+i);

Create ordered list plus generate input field HTML & JS

I have here the complete code of what I have applied and tried. Using the JS below, I got the display of the ordered list wrongly. It must be in 1,2,3 ... (so on and forth). For this, it sticked to 1.,1.,1. .... Another is that, using the JS below, how to customize it that I will get dynamic input fields? Because what if I'll input 5? The result of the fields must be 5 in number also. But what happened, 5 fields are added/appended to the current number of fields (sample, I inputted 3 before and 3 fields displayed so when 5 is inputted, there are 8 fileds in all). What I want is the exact number of fields from the number being inputted. (not that good at JS but I am badly wanting to learn its nature).
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul").each(function() {
$(this).find("li").each(function(count) {
$(this)
.css("list-style-type", "none")
.prepend("<div class='listnumber'>" + (count + 1) + ".</div>");
});
});
})
</script>
<script type="text/javascript">
$(document).ready(function() {
$('[name="cand_no"]').on('change', function() {
if (this.value != '') {
var val = parseInt(this.value, 10);
for (var i = 0; i < val; i++) {
var $cloned = $('.template tbody').clone();
$('#studentTable tbody').append($cloned.html());
}
});
})
</script>
</head>
<body>
<p>
<label><strong>No.: </strong></label>
<label><input name="cand_no" type="number" placeholder="Enter no. of fields." /></label>
<div class="clear"></div>
</p>
<div class="cand_fields">
<table id="studentTable" width="630" border="0">
<tr>
<td>Name</td>
</tr>
<tr>
<td><input name="cand_name" type="text" placeholder="Name" required="required" /></td>
</tr>
</table>
</div>
<div class="template" style="display: none">
<table>
<tr >
<td><ul><li><input name="cand_name" type="text" placeholder="Name" required="required" /></li></ul></td>
</tr>
</table>
</div>
</body>
</html>
Thanks a million..
Try
$(document).ready(function () {
$(".template ul li").css("list-style-type", "none").prepend("<div class='listnumber'></div>");
})
$(document).ready(function () {
var $tmpl = $('.template tbody'),
$target = $('#studentTable tbody');
$('[name="cand_no"]').on('change', function () {
if (this.value != '') {
var val = (parseInt(this.value, 10) || 0) + 2;
var len = $target.children().length;
if (val < len) {
$target.children().slice(val).remove();
} else {
for (var i = len; i < val; i++) {
$($tmpl.html()).appendTo($target).find('.listnumber').text(i - 1);
}
}
}
});
})
Demo: Fiddle

How can use more than function in javascript?

My question is I have three select boxes and user select first select box's option than select second select box's option and finally the third select box's options will load by user selection. It works but when user select the third select box's option I want to display a text but It doesn't work here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script></script>
<script type="text/javascript">
var zero="0,00";
var one="0,01";
$(document).ready(function() {
$('#main').on('change', '.select-box', function() {
if ($(".select-box option[value='1']").prop('selected') && $(".select-box option[value='1986']").prop('selected')) {
$('#street').html("<option value='2'>test</option><option value='3'>test2</option>");
}
if ($(".select-box option[value='1']").prop('selected') && $(".select-box option[value='1986']").prop('selected') && $(".select-box option[value='3']").prop('selected')) {
document.getElementById("demo3").innerHTML=""+zero;
}
});
});
</script>
<script type="text/javascript">
var x="",i;
for(i=1986;i<2013;i++)
{
x=x + "<option value='"+i+"'> " + i + "</option>";
}
$(document).ready(function() {
document.getElementById("forloop").innerHTML="<select class='select-box'><option>Empty/option>"+x+"</select>";
});
</script>
</head>
<body>
<p id="forloop"></p>
<div id="main">
<select class="select-box">
<option value="1">Hello</option>
</select>
<p></p>
<select class="select-box" id="street">
<option>Empty<option>
</select>
</div>
<p id="demo3">
</body>
</html>
You have multiple HTML syntax errors in your string concatenation. You're already using jQuery; for sanity's sake (yours and ours) stop constructing HTML with strings.
var selectBox = $('<select>');
$('<option>')
.text('Empty')
.appendTo(selectBox);
for (var i = 1986; i < 2013; i++) {
$('<option>')
.text(i)
.val(i)
.appendTo(selectBox);
}
selectBox.appendTo($('#forloop'));

Categories