Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to get checkbox value using javascript

How to get multiple checkbox value usign javasceipt and mysql

File name : index.php

<?php
session_start();
?>
<html xmlns="http://www.ittutorial.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.ittutorial.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>





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link