There are two tables in a page. One is for Friday and other is for Saturday. I want to set the choice limit of radio button selection from a table. User can not select more than 3 slots out of 4 slots from Friday table. How can I call a javascript function for a table? How can I do this? Here is my php code and javascript function.
This javascript function is working for both table. When I select 3 radio button from any table it shows "You can not add more than 3". But I want this only for Friday table not for Saturday.
PHP code:
for($time=0; $time<4; $time++){
$q.= "<td colspan='1' valign='top' width='25%'>";
$q.= "<table id='ash'>";
$q.= "<tr id='grey'>";
if($day==1){
if($time==0){
$q.= "<th width='50%'></th></tr>";
}else if($time==1){
$q.= "<th width='50%'></th></tr>";
}else if($time==2){
$q.= "<th>Reg.</th>";
$q.= "<th width='50%'>2:30 pm - 5:00 pm</th>";
$q.= "<th>Sec</th><th>Remaining</th></tr>";
}else{
$q.= "<th>Reg.</th>";
$q.= "<th width='50%'>5:00 pm - 7:30 pm</th>";
$q.= "<th>Sec</th><th>Remaining</th></tr>";
}
}
else{
$q.= "<th>Reg.</th>";
if($time==0){
$q.= "<th width='50%'>8:30 am - 11:00 am</th>";
}else if($time==1){
$q.= "<th width='50%'>11:00 am - 1:30 pm</th>";
}else if($time==2){
$q.= "<th width='50%'>2:30 pm - 5:00 pm</th>";
}else{
$q.= "<th width='50%'>5:00 pm - 7:30 pm</th>";
}
$q.= "<th>Sec</th><th>Remaining</th></tr>";
}
$query1 = "SELECT tab1.*, tab2.course_name, tab2.course_type FROM routine AS tab1, course_info AS tab2";
$result = mysql_query($query1);
if ($result && mysql_num_rows($result) > 0) {
while($row = mysql_fetch_assoc($result)){
$course = $row["course_code"];
$sec = $row["section"];
$type = $row["course_type"];
if(course_completed($std_id, $course)){
if(already_selected($course, $sec, $std_id, $year, $sem)){
$q.= "<tr bgcolor='#00FF33'><td><input type='radio' id='course_".$day."_".$time."' name='".$day.$time."' value='".$course.",".$sec.",".$type."' checked='checked' onclick='changeRadioValue(\"".$day."_".$time."\")' /></td>";
}
else{
$q.= "<tr bgcolor='#00FF33'><td><input type='radio' id='course_".$day."_".$time."' name='".$day.$time."' value='".$course.",".$sec.",".$type."' onclick='changeRadioValue(\"".$day."_".$time."\")' /></td>";
}
}
else{
if(already_selected($course, $sec, $std_id, $year, $sem)){
$q.= "<tr><td><input type='radio' id='course_".$day."_".$time."' name='".$day.$time."' value='".$course.",".$sec.",".$type."' checked='checked' onclick='changeRadioValue(\"".$day."_".$time."\")' /></td>";
}else{
$q.= "<tr><td><input type='radio' id='course_".$day."_".$time."' name='".$day.$time."' value='".$course.",".$sec.",".$type."' onclick='changeRadioValue(\"".$day."_".$time."\")' /></td>";
}
}
JavaScript function
$("input[type='radio']").change(function(){
var count = $("input[type='radio']:checked").length;
if(count>3){
$(this).prop('checked', false);
alert("You cannot add more than 3");
}
});
Try this:
<?php
if(condition) {
?>
<script>//JS Code</script>
<?php
}
?>
When you page loads, if the condition is true the js code between the script tags will run, you can also link another js file instead of writing code.
Solved my problem. I just changed my JS function
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
//table fri
$("#fri input[type='radio']").change(function(){
var count = $("#fri input[type='radio']:checked").length;
if(count>3){
$(this).prop('checked', false);
alert("You cannot add more than 3");
}
});
//table sat
$("#sat input[type='radio']").change(function(){
var count = $("#sat input[type='radio']:checked").length;
if(count>3){
$(this).prop('checked', false);
alert("You cannot add more than 3");
}
});
//refresh selection
$(".refresh").click(function(){
$("input[type='radio']").prop('checked', false);
});