Reputation: 520
here is my code:
<input type="text" name="text" id="text">
<input type="button" name="but" id="but" value="click" onClick="click1()">
<div id="show_result"></div>
<?php
echo "<br><input type='checkbox' name='type' id='all' class='type' value='all' onChange='check_change()'> All<br>";
$gp=0;
while($gp<5)// this 5 is for example
//it will vary in my original code based on DB values,
//also $gp is not a number its actually a variable in my code.
{
echo "<input type='checkbox' name='type' id=".$gp." class='type' value=".$gp." onChange='check_change()'> ".$gp."<br>";
$gp++;
}
?>
<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function check_change()
{
var a=[];
if(document.getElementsByClassName('type')[0].checked)
{
$(".type").attr("checked", true);
a[0]=document.getElementsByClassName('type')[0].value;
}
else
{
var x = document.getElementsByClassName('type');
var i,j=0;
for (i = 0; i < x.length; i++) {
if(document.getElementsByClassName('type')[i].checked)
{
a[j]=document.getElementsByClassName('type')[i].value;
j++;
}
}
}
display(document.getElementById('text').value,document.getElementsByClassName('type').value);
}
$(function()
{
$(".type").attr("checked", true);
});
function click1()
{
display(document.getElementById('text').value,document.getElementsByClassName('type').value);
}
function display(c,d) {
$.post("s.php?c="+c+"&d="+d,{data : "some data"}, function(response){
$("#show_result").html(response);
});
}
</script>
i am having a textbox and a button and a dynamic list of checkboxes. I need to pass the value of the textbox and all the checked checkboxes using ajax call on two events one is button click and other is onChange
of checkbox values and print those values inside a div.
s.php
is the file i called using Ajax
S.php:
<?php
$c=$_GET['c'];
$d=[];
$d=$_GET['d'];
echo $d;
echo $c;
?>
Is it possible to pass these checked checkbox values using array? if so how to do it? or give me any other suggestion.
EDIT:
$(function()
{
$(".type").attr("checked", true);
});
var checkedArray = array();
function check_change()
{
$('.type:checked').each(function() {
checkedArray.push($(this).attr("id"));
display(document.getElementById('text').value);
});
}
function click1()
{
display(document.getElementById('text').value);
}
function display(c) {
$.post("s.php?c="+c+"&d="+checkedArray,{data : "some data"}, function(response){
$("#show_result").html(response);
});
}
Upvotes: 0
Views: 2376
Reputation: 2700
<script src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
<input type='text' id='txt'>
<input type='button' id='btn1' value='click'>
<?php
echo "<br><input type='checkbox' name='type' id='all' class='type' value='all' onChange='$(this).check_change()'> All<br>";
$gp=0;
while($gp<5)
{
echo "<input type='checkbox' name='type' id=".$gp." class='type' value=".$gp." onChange='$(this).check_change()'> ".$gp."<br>";
$gp++;
}
?>
<script>
$(document).ready(function(){
$.fn.check_change = function(){
$("#btn1").trigger("click");
}
$("#all").click(function(){
if($(this).prop('checked')) {
$('.type').each(function() {
$(this).attr("checked","checked");
});
}
else {
$('.type').each(function() {
$(this).prop("checked",false);
});
}
$("#btn1").trigger("click");
});
$("#btn1").click(function(){
txt = $("#txt").val();
chechedArray = Array();
$('.type:checked').each(function() {
chechedArray.push($(this).attr("id"));
});
$.post('s.php',{txt:txt,check:chechedArray},function(data,status){
alert('Response from server\n' + data );
});
});
});
</script>
<?php
if(isset($_POST['txt']))
echo $_POST['txt'];
if(isset($_POST['check']))
print_r($_POST['check']);
?>
Upvotes: 1