PHP loop with jquery on dynamic select boxes
Question
Any help on this would be great I am driving myself mad and cannot find anything in the posts that I can make sense of. I am trying to create a form which works the same as excel in a php do loop. The jquery to dynamically change the grade depending on what is selected in the subject. I have got this far but the grade changes in all 10 rows when first subject is selected. http://www.gogettersgo-learn.com/ggluser/gglcandidatemulti_form.php
Any help will be great!!!
Here is the code I am using:
FORM PAGE:
<?PHP include_once dirname(__FILE__).'/gglprotectedmain.php'; ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>GoGetters Go Learn Candidate Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" />
<link type="text/css" href="../css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<meta name="ROBOTS" content="NOINDEX,NOFOLLOW">
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$( ".datepicker[]" ).datepicker({
minDate: new Date(<?php echo $startyear = 1920; ?>, <?php echo $startmonth = 1; ?> - 1, <?php echo $startday = 1; ?>), maxDate: new Date(<?php echo $endyear = 1994; ?>, <?php echo $endmonth = 12; ?> - 1, <?php echo $endday = 31;?>),
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
yearRange: '1920:1994'
});
filter('.datepicker').removeClass('hasDatepicker').datepicker();
});
</script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>
<body>
<img src="../images/GoGettersGo-Learn-Logo.png" width="412" height="119">
<?PHP require_once ('dbphp.php'); $ID = $_SESSION['email'];?>
<table width="3000px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<form name="candidateform" method="post" action="../ggluser/gglcandidate_form_code.php">
<input type="hidden" value="<?PHP echo $ID;?>" name="ID">
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td valign="top" width="230px">
<font color="#000000" size="2" face="Arial, Helvetica, sans-serif">family name:</font><br>
</td>
<td valign="top" width="230px">
<font color="#000000" size="2" face="Arial, Helvetica, sans-serif">full names:</font><br>
</td>
<td valign="top" width="170px">
<font color="#000000" size="2" face="Arial, Helvetica, sans-serif">date of birth:</font><br>
</td>
<td valign="top" width="110px">
<font color="#000000" size="2" face="Arial, Helvetica, sans-serif">gender:</font><br>
</td>
<td valign="top" width="470px">
<font color="#000000" size="2" face="Arial, Helvetica, sans-serif">Subject:</font><br>
</td>
<td valign="top" width="230px">
<font color="#000000" size="2" face="Arial, Helvetica, sans-serif">Grade:</font><br>
</td>
<td width="100px">
<font color="#000000" size="2" face="Arial, Helvetica, sans-serif">Teacher:</font>
</td>
<td width="100px">
<font color="#000000" size="2" face="Arial, Helvetica, sans-serif">Special needs candidate:</font>
</td>
<td width="100px">
<font color="#000000" size="2" face="Arial, Helvetica, sans-serif">Publish results:</font>
</td>
</tr>
</table>
<?php
$i = 0;
do {
echo" <table border=\"1\" cellspacing=\"0\" cellpadding=\"5\">";
echo"<tr>";
echo"<td valign=\"top\" width=\"230px\">";
echo"<input class=\" \" name=\"familyname[]\" id=\"familyname\" type=\"text\" maxlength=\"250\" size=\"30\" />";
echo"</td>";
echo"<td valign=\"top\" width=\"230px\">";
echo"<input name=\"fullname[]\" id=\"fullname\" type=\"text\" maxlength=\"250\" size=\"30\" />";
echo"</td>";
echo"<td valign=\"top\" width=\"170px\">";
echo"<p><input type=\"text\" class=\"datepicker\" id=\"datepicker\" name=\"datepicker[]\"></p>";
echo"</td>";
echo"<td valign=\"top\" width=\"110px\">";
echo"<label>";
echo"<input type=\"radio\" name=\"gender[]\" value=\"male\" id=\"gender_0\">";
echo"m</label>";
echo"<label>";
echo"<input type=\"radio\" name=\"gender[]\" value=\"female\" id=\"gender_1\">";
echo"f</label>";
echo"<br>";
echo"</td>";
echo"<td valign=\"top\" width=\"470px\">";
$subject_title = subject_subject();
echo"<div class=\"subject_title\" id=\"subject_title\">";
echo "<select class=\"s_title\" id=\"s_title\" name=\"subject[]\">";
echo "<option value=\"\"></option>";
foreach($subject_title as $subject_title):
$subject_title = $subject_title['subject_title'];
echo "<option value=\"$subject_title\">";
echo $subject_title;
echo "</option>";
endforeach;
echo "</select>";
echo $i;
echo"</div>";
echo"</td>";
echo"<td width=\"230px\">";
echo"<div class=\"subject_grade\" id=\"subject_grade\"> ";
echo $i;
echo "</div>";
echo"</td>";
echo"<td width=\"100px\">";
echo"<input name=\"teacherchk[]\" id=\"teacherchk\" type=\"checkbox\" value=\"yes\"><br>";
echo"<div id=\"teacherd\">";
include_once ('../ggluser/gglteachers_details.php');
echo"</div>";
echo"</td>";
echo"<td width=\"100px\">";
echo"<input name=\"spcchk[]\" id=\"spcchk\" type=\"checkbox\" value=\"yes\"><br>";
echo"<div id=\"spcd\">";
include_once ('../ggluser/gglspecial_details.php');
echo"</div>";
echo"</td>";
echo"<td width=\"100px\">";
echo"<input name=\"pubres[]\" id=\"publres\" type=\"checkbox\" value=\"yes\"><br>";
echo"</td>";
echo"</tr>";
echo"</table>";
++$i;
echo $i;
} while ($i < 10);
?>
<table width="300">
<tr>
<td width="50">
<input type="submit" name="subok" value=" submit " />
</td>
<td width="50" align="left">
<input name="reset" type="reset" value=" reset " />
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
JQUERY PAGE:
$(document).ready(function(){
$('.s_title').change(function(){
$.post(
'../ggluser/gglpopulate_subjectphp.php',
{ subject_title:$('.s_title').val()},
function(res){
$('.subject_grade').html(res);
}
);
});
});
$(document).ready(function(){
//Hide div w/id extra
$(".subject_title").css("display","yes");
// Add onclick handler to checkbox w/id checkme
$(".subjectchk").click(function(){
// If checked
if ($(".subjectchk").is(":checked"))
{
//show the hidden div
$(".subject_title").show("fast");
$('.subject_grade').html(res);
}
else
{
//otherwise, hide it
$(".subject_title").hide("fast");
$(".subject_grade").hide("fast");
}
});
});
PHP FUNCTIONS PAGE:
function subject_subject(){
$con = dbConnect();
$qry = "SELECT * FROM tblgosubjectdetails GROUP BY subject_title";
if(!$result = mysql_query($qry)){
echo mysql_error();
return false;
}
$result = tablearray($result);
mysql_close();
return $result;
}
function subject_grade($subject_title){
$con = dbConnect();
$qry = "SELECT * FROM tblgosubjectdetails WHERE subject_title = '$subject_title' GROUP BY subject_grade";
if(!$result = mysql_query($qry)){
echo mysql_error();
return false;
}
$result = tablearray($result);
mysql_close();
return $result;
}
THANKS IN ADVANCE!!! :)
1 answers
solution1
0 2011-11-06 14:02:56
For the problem you mention, you probably want to make your change function something like this
$('.s_title').change(function(){
var $self = $(this);
$.post(
'../ggluser/gglpopulate_subjectphp.php',
{ subject_title: $self.val() },
function(res){
$self.closest('tr').find('.subject_grade').html(res);
}
);
});
As you have it, it is matching all elements with the class subject_grade
A few more suggestions
- I think
$('.datepicker[]')will give you an error. You probably want$('.datepicker') - Make sure you don't assign the same
idto more than one HTML element, which you appear to do often in yourdo...whileloop. - Consider at the least putting all your javascript code in one place, either in a separate file or at the bottom of your page.
- You can wrap all your jQuery code in one single
$(document).ready(function() { ... })block.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
PHP/Jquery issue populating 3 dynamic select boxes
Dynamic dependent select boxes (PHP+JQuery+AJAX)
Create dynamic select boxes in php
Dynamic Chained SELECT Boxes using jQuery
jQuery/Ajax/PHP chained select boxes help
php ajax, how to display dynamic values on dynamic select boxes
Dynamic select boxes with drupal
Validating dynamic select boxes
how to hold values of two dynamic dependent select boxes in php , mysqli
php - how to send all selected option values of 3 select boxes with for loop?
Related Tags