JavaScript Tutorials
- What is Javascript?
- What is BOM?
- What is DOM?
- Variable
- check variable value is empty
- JavaScript Output
- Functions
- Javascript Events
- Input Events
- onchange Event
- Javascript Output methods
- If else statement
- Arrays
- Pattern Validation
- Form Validation
- Inner Html Form Validation
- Inline Form Validation
- Checkbox Validation
- Inline Inner Html Form Validation
- Server side php Validation
- Validate a HTML Form with PHP
- window and window location
- Get Text Value
- Get hidden field value
- JavaScript & PHP
- Date Format
- get php value in javascript
- Redirect page & Autoredirect page
- Auto Refresh page & Div
- How to get select text value from Dropdown box
- How to clear browser history in javascript
- Checkbox Problems
- Select option problems
- Popup Contact Form
- Sidebar Contact Form
- How to use a multistep Form or Form wizard
- Auto Calculate Price
- print Application Form
- Auto Calculate GST in Javascript by select price
- Calculate GST by input value in text box Jquery
- Calculate Discount
- onClick Checkbox
- autofil form data click on checkbox
- Show subcategory list
- Show city list as per state
- Show district list as per country and state
- Show good morning good night wish
- image upload with preview image
- Print Div Content
- Show modal popup on page load
- filter table data usign javascript.
- Character Limit Validation.
- Validate File 5MB Upload
- Validate Special character
- More File Upload
- Call JavaScript Function After Page Load
- Drop Down First option Value Disabled --- Please Select ---
- How to Disable Submit Button After Form Submission
- How to disable browser back button using Jquery?
- How to Remove selected item from second & third dropdown list?
- Interview Questions of JavaScript.
Important Link
Javascript Checkbox Problems
How to get multiple checkbox value usign javasceipt and mysql
File name : index.php
<?php
session_start();
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function()
{
$('#btnSubmit').click(function() {
var slvals = []
$('input:checkbox[name=chkcountry]:checked').each(function() {
slvals.push($(this).val());
})
//alert('Selected Checkbox values are: ' + slvals)
//document.write(slvals);
$('#str').val(JSON.stringify(slvals));
})
});
</script>
</head>
<body>
<?php
include 'db.php';
if(isset($_POST['submit']))
{
$str = json_decode($_POST['str'], true);
//print_r($str);
$k = count($str);
$arr = array();
for($i=0;$i<$k;$i++)
{
//$ar = $str[$i]." ";
$arr[$i] = $str[$i].",";
}
$data = implode(" ",$arr); // convert array to string.
$kk = substr($data, 0, -1); // remove last comma from string.
//echo $kk;
//$_SESSION['ses_data'] = $kk;
//$session_data = $_SESSION['ses_data'];
//echo $session_data;
$qry = "insert into size_info (size_name) values('$kk')";
$result = mysqli_query($con,$qry);
}
?>
<?php
include 'db.php';
$qry = "select * from sizes where id='1'";
$res = mysqli_query($con,$qry);
$row = mysqli_fetch_array($res);
$siz = $row['pro_size'];
$ressize = explode(",",$siz);
$n = count($ressize);
for($i=0;$i<$n;$i++)
{
?>
<input type="checkbox" name="chkcountry" id="chk" value="<?php echo $ressize[$i];?>" /><?php echo $ressize[$i];?>
<?php
}
?>
<form action="" method="post">
<input type="hidden" id="str" name="str" value="" />
<input type="submit" id="btnSubmit" name="submit" value="Get Selected Values" />
<a href=""></a>
</form>
</body>
</html>
How to get selected checkbox value and text using javascript.
File name : index.php
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var ckbox = $("input[name='ips']");
var chkId = '';
$('input').on('click', function() {
if (ckbox.is(':checked')) {
$("input[name='ips']:checked").each ( function() {
chkId = $(this).val() + ",";
chkId = chkId.slice(0, -1);
});
alert ( $(this).val() ); // return all values of checkboxes checked
alert(chkId); // return value of checkbox checked
}
});
});
</script>
</head>
<body>
<input type="checkbox" name="ips" value="12520">Black
<input type="checkbox" name="ips" value="12521">white
<input type="checkbox" name="ips" value="12522">Blue
</body>
</html>
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Values of Selected Checboxes</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
var favorite = [];
$.each($("input[name='sport']:checked"), function(){
favorite.push($(this).val());
});
alert("My favourite sports are: " + favorite.join(", "));
});
});
</script>
</head>
<body>
<form>
<h3>Select your favorite sports:</h3>
<label><input type="checkbox" value="football" name="sport"> Football</label>
<label><input type="checkbox" value="baseball" name="sport"> Baseball</label>
<label><input type="checkbox" value="cricket" name="sport"> Cricket</label>
<label><input type="checkbox" value="boxing" name="sport"> Boxing</label>
<label><input type="checkbox" value="racing" name="sport"> Racing</label>
<label><input type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
</body>
</html>
File name : index.php
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#check').change(function(){
if($(this).prop('checked') === true){
$('#show').text($(this).attr('value'));
}else{
$('#show').text('');
}
});
});
</script>
<form>
<input type="checkbox" id="check" value="1" />Hello</form>
<div id="show"></div>
File name : index.php
<?php
session_start();
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function()
{
$('#btnSubmit').click(function() {
var slvals = []
$('input:checkbox[name=chkcountry]:checked').each(function() {
slvals.push($(this).val());
})
//alert('Selected Checkbox values are: ' + slvals)
//document.write(slvals);
$('#str').val(JSON.stringify(slvals));
})
});
</script>
</head>
<body>
<b>Sample checkbox inputs :</b>
<!-- <input type="checkbox" name="chkcountry" id="chkindia" value="India" />India
<input type="checkbox" name="chkcountry" id="chkusa" value="USA" />USA
<input type="checkbox" name="chkcountry" id="chkAustralia" value="Australia" />Australia
<input type="checkbox" name="chkcountry" id="chkMalaysia" value="Malaysia" />Malaysia
<button id="btnSubmit">Get Selected Values</button><br/> -->
<?php
include 'db.php';
if(isset($_POST['submit']))
{
$str = json_decode($_POST['str'], true);
//print_r($str);
//$chkoption = explode(",",$str);
$k = count($str);
$arr = array();
for($i=0;$i<$k;$i++)
{
$ar = $str[$i]." ";
//echo $ar;
//$_SESSION['sizes'] = $ar;
$arr[$i] = $str[$i].",";
//echo $arr[$i];
}
$data = implode(" ",$arr);
//$kk = rtrim($data, ",");
//echo $kk;
$kk = substr($data, 0, -1);
echo $kk;
//echo $data;
/* $items = array();
foreach($str as $data) {
$items[] = $data;
}
print_r($items);
*/
$qry = "insert into size_info (size_name) values('$data')";
$result = mysqli_query($con,$qry);
}
?>
<?php
include 'db.php';
$qry = "select * from sizes where id='1'";
$res = mysqli_query($con,$qry);
$row = mysqli_fetch_array($res);
$siz = $row['pro_size'];
$ressize = explode(",",$siz);
$n = count($ressize);
for($i=0;$i<$n;$i++)
{
?>
<input type="checkbox" name="chkcountry" id="chk" value="<?php echo $ressize[$i];?>" /><?php echo $ressize[$i];?>
<?php
}
?>
<form action="" method="post">
<input type="hidden" id="str" name="str" value="" />
<input type="submit" id="btnSubmit" name="submit" value="Get Selected Values" />
<a href=""></a>
</form>
</body>
</html>
File name : index.php
<html>
<head>
<title>Pass JS array to PHP.</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<h3>Pass JavaScript array into PHP.</h3>
<!-- <form action="<?php //echo base_url('admin/js2php_proc'); ?>" method="post"> -->
<form action="" method="post">
<input type="hidden" id="str" name="str" value="" />
<input type="submit" id="btn" name="submit" value="Submit" />
</form>
<script>
var jsarray = new Array();
jsarray[0] = "Saab";
jsarray[1] = "Volvo";
jsarray[2] = "BMW";
$(document).ready(function(){
$('#btn').click(function(){ // prepare button inserts the JSON string in the hidden element
$('#str').val(JSON.stringify(jsarray));
});
});
</script>
</body>
</html>
<?php
if(isset($_POST['submit']))
{
$str = json_decode($_POST['str'], true);
var_dump($str);
}
?>
File name : index.php
<html>
<head>
<title>Pass JS array to PHP.</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<h3>Pass JavaScript array into PHP.</h3>
<!-- <form id="myForm" action="<?php //echo base_url('admin/js2php_proc'); ?>" method="post"> -->
<form id="myForm" action="" method="post">
<input type="hidden" id="str" name="str" value="" />
<input type="submit" id="btn" name="submit" value="Submit" />
</form>
<span id="result"></span>
<script>
var jsarray = new Array();
jsarray[0] = "Saab";
jsarray[1] = "Volvo";
jsarray[2] = "BMW";
$(document).ready(function(){
$("#btn").click( function() {
$.post( $("#myForm").attr("action"),
$('#str').val(JSON.stringify(jsarray)),
//$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
});
$("#myForm").submit( function() {
return false;
});
});
</script>
</body>
</html>
<?php
$str = json_decode($_POST['str'], true);
echo json_encode($str);
//Capture data array from AJAX and process it...
/*
function js2php_proc() {
$str = json_decode($_POST['str'], true);
echo json_encode($str);
}
*/
?>
File name : index.php
<!DOCTYPE html>
<html>
<head>
<title>jQuery With Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.btnGetAll').click(function () {
if ($('.chkNumber:checked').length) {
var chkId = '';
$('.chkNumber:checked').each(function () {
chkId += $(this).val() + ",";
});
chkId = chkId.slice(0, -1);
alert(chkId);
}
else {
alert('Nothing Selected');
}
});
$('.chkSelectAll').click(function () {
$('.chkNumber').prop('checked', $(this).is(':checked'));
});
$('.chkNumber').click(function () {
if ($('.chkNumber:checked').length == $('.chkNumber').length) {
$('.chkSelectAll').prop('checked', true);
}
else {
$('.chkSelectAll').prop('checked', false);
}
});
});
</script>
</head>
<body>
<div>
<input type="checkbox" class="chkNumber" value="1" />One<br />
<input type="checkbox" class="chkNumber" value="2" />Two<br />
<input type="checkbox" class="chkNumber" value="3" />Three<br />
<input type="checkbox" class="chkNumber" value="4" />Four<br />
<input type="checkbox" class="chkNumber" value="5" />Five<br /><br />
</div>
<button type="button" class="btnGetAll">Get Selected Value</button><br>
<input type="checkbox" class="chkSelectAll" />SelectAll
</body>
</html>
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Values of Selected Checboxes</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
var favorite = [];
$.each($("input[name='sport']:checked"), function(){
favorite.push($(this).val());
//favorite.push($(this).text());
});
alert("My favourite sports are: " + favorite.join(", "));
});
});
</script>
</head>
<body>
<form>
<h3>Select your favorite sports:</h3>
<label><input type="checkbox" value="1" name="sport"> Football</label>
<label><input type="checkbox" value="2" name="sport"> Baseball</label>
<label><input type="checkbox" value="3" name="sport"> Cricket</label>
<label><input type="checkbox" value="4" name="sport"> Boxing</label>
<label><input type="checkbox" value="5" name="sport"> Racing</label>
<label><input type="checkbox" value="6" name="sport"> Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
</body>
</html>
File name : index.php
File name : index.php