Dynamic Update of checkbox on php form

Question

THis is my project , i have to select the section , then acording to that , if its "A" then checkbox from 1 50 will be displayed , and if its "B" then from 51 to 100

this is my main code :

<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="jsDatePick.min.1.3.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function(){
    new JsDatePick({
        useMode:2,
        target:"inputField",
        dateFormat:"%d-%M-%Y"
    });
};
</script>
</head>
<?php
$dept =$_COOKIE[dept];
include_once("../Include/connectdb.php");
include_once("../Include/data_menu.php");
include_once '../Include/pagemaker.php';

?>
<script type="text/javascript">
$(document).ready(function()
{
$(".batch").change(function()
{
var id=$(this).val();
var dataString = 'year_join='+ id;

$.ajax
({
type: "POST",
url: "ajax_subject.php",
data: dataString,
cache: false,
success: function(html)
{
$(".subject").html(html);
} 
});

});
});
</script>





<script type="text/javascript">
$(document).ready(function()
{
    $(".section").change(function()
    {
        alert('asdfa');
        var id=$(this).val();
        var dataString = 'section='+ id;

        $.ajax
        ({
                type: "POST",
                url: "ajax_absent.php",
                data: dataString,
                cache: false,
                success: function(html)
                {
                    $(".absent").html(html);
                } 
        });

    });
});
</script>
</head>

<body>
<fieldset class="cbox"><legend>New Attendence System</legend>
<form name="frm" action=<?php print "edit_attendencePHP_NEW.php"; ?> method="GET"    
id="content">
<br><br>

<div style="margin:80px">
<label>Batch :</label> <select name="batch" class="batch">
<option selected="selected">--Select Batch--</option>
<?php
    $result = mysql_query("select distinct year_joining from student_profile  
order by year_joining ")or die(mysql_error());

while($year = mysql_fetch_assoc($result)){
if($year[year_joining]!="" && $year[year_joining]>"2008"){

  print "<OPTION value='$year[year_joining]'>$dept $year[year_joining]</OPTION>";
}  }
 ?>
</select>

<label>Section :</label> 
<select name="section" class="section">
        <OPTION value='A'> A</OPTION>
        <OPTION value='B'> B</OPTION>
</select>

  Date :<input type="text" size="12" id="inputField" name="date"/>

  <label>Hours :</label> <select name="hour" >
        <OPTION value='1'> 1</OPTION>
        <OPTION value='1'> 2</OPTION>
        <OPTION value='1'> 3</OPTION>

</select>
</br></br>
<label>Subject :</label> <select name="subject" class="subject">
<option selected="selected">------------Choose Subject------------</option>

  </select>
 </br>
    <label>Mark the Absenties : </label> 
    <input type="checkbox" class="section">
  <br/></br>
  <div class="absent"></div>

            <input class="bluebutton" type="submit" value="Go">    
</form><br>

<label class="comment">select a batch frm the list and press "Go"</label>
</fieldset>


</body>
</html>

This is my ajax_absent.php which is working fine separately ..

<?php
include_once("../Include/connectdb.php");


if($_POST['section'])
{
$sec=$_POST['section'];
if($sec=="A")
    $j=1;
else if($sec=="B")
    $j=51;

    for($i=0;$i<=49;$i++)
        { $k=$j+$i;
        if($i%5==0)
        {   echo "</br>";       }   
            echo '<input type ="Checkbox" value="'.$i . '">'.$k .   
 '</option>';

        }



?>

the same dynamic concept i implemented for drop down menu .. in the same file , but the check box is coming with just one check box.

Your closing the input checkbox with </option>, just remove that and close the input as <input type="checkbox" value="' . $i . '"/> (note slash). — Sven van Zoelen
– Sven van Zoelen, Commented Aug 5, 2012 at 12:02
in ajaxcode you have use worng file name "url: "ajax_subject.php", " your file name should be ajax_absent.php — Abid Hussain
– Abid Hussain, Commented Aug 5, 2012 at 12:11

Abid Hussain · Accepted Answer · 2012-08-05 12:59:20Z

1

I have found some error:-

you have user below code in jquery

$(".section").change(function()

but section class missing in

<select name="section" >

replace

<select name="section" class="section">

one more bug in your code

you want to store output in absent class and u have use this code in jquery

$(".absent").html(html);

but absent class not exist in your html code please add in your code

<span class="absent"></span>

or

<span class="absent"></span>

try this

this is modify html code

<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="jsDatePick.min.1.3.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function(){
    new JsDatePick({
        useMode:2,
        target:"inputField",
        dateFormat:"%d-%M-%Y"
    });
};
</script>
</head>
<?php
$dept =$_COOKIE[dept];
include_once("../Include/connectdb.php");
include_once("../Include/data_menu.php");
include_once '../Include/pagemaker.php';

?>
<script type="text/javascript">
$(document).ready(function()
{
$(".batch").change(function()
{
var id=$(this).val();
var dataString = 'year_join='+ id;

$.ajax
({
type: "POST",
url: "ajax_subject.php",
data: dataString,
cache: false,
success: function(html)
{
$(".subject").html(html);
} 
});

});
});
</script>





<script type="text/javascript">
$(document).ready(function()
{
    $(".section").change(function()
    {
        alert('asdfa');
        var id=$(this).val();
        var dataString = 'section='+ id;

        $.ajax
        ({
                type: "POST",
                url: "ajax_absent.php",
                data: dataString,
                cache: false,
                success: function(html)
                {
                    $(".absent").html(html);
                } 
        });

    });
});
</script>
</head>

<body>
<fieldset class="cbox"><legend>New Attendence System</legend>
<form name="frm" action=<?php print "edit_attendencePHP_NEW.php"; ?> method="GET"    
id="content">
<br><br>

<div style="margin:80px">

<label>Section :</label> 
<select name="section" class="section">
        <OPTION value='A'> A</OPTION>
        <OPTION value='B'> B</OPTION>
</select>

  Date :<input type="text" size="12" id="inputField" name="date"/>

  <label>Hours :</label> <select name="hour" >
        <OPTION value='1'> 1</OPTION>
        <OPTION value='1'> 2</OPTION>
        <OPTION value='1'> 3</OPTION>

</select>
</br></br>
<label>Subject :</label> <select name="subject" class="subject">
<option selected="selected">------------Choose Subject------------</option>

  </select>
 </br>
    <label>Mark the Absenties : </label> 
    <input type="checkbox" class="section">
  <br/></br>
  <div class="absent"></div>

            <input class="bluebutton" type="submit" value="Go">    
</form><br>

<label class="comment">select a batch frm the list and press "Go"</label>
</fieldset>

out put enter image description here

if($_POST['section'])
{
$sec=$_POST['section'];
if($sec=="A")
    $j=1;
else if($sec=="B")
    $j=51;

    for($i=0;$i<=49;$i++)
        { $k=$j+$i;
        if($i%5==0)
        {   echo "</br>";       }   
            echo '<input type ="Checkbox" value="'.$i . '">';   


        }

edited Aug 5, 2012 at 12:59

answered Aug 5, 2012 at 11:55

Abid Hussain

7,7694 gold badges38 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ratan Kumar Over a year ago

Calling the ajax file with <label>Mark the Absenties : </label> <input type="checkbox" class="section"> is the right way ???

Ratan Kumar Over a year ago

thispart is working here also .. but i am not able to call this ajax page in main page when section is selected .

Abid Hussain Over a year ago

in ajaxcode you have use worng file name "url: "ajax_subject.php", " your file name should be ajax_absent.php

Ratan Kumar Over a year ago

I have section drop down , when i select "A" then checkbox should get dynamically loaded from 0 to 50 as name , and when selection "B" then checkbox should come from 51 to 100.

Ratan Kumar Over a year ago

@AbidHussain there are two diffrent dynamic update , look carefully .. both are correct.

|

Collectives™ on Stack Overflow

Dynamic Update of checkbox on php form

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related