I have developed a PHP loop that creates a register form everyday for each user in my database. Each form has one div which contains a variety of dropdowns and this is placed directly over one which shows has what has been submitted that day. When one of the dropdown boxes is selected I have used jQuery to make the top div disappear and show the answer on the div below. If a mistake is made then there is a reset button which puts an x into the database.
I have also created a PHP query that finds the most recent input for each user every day (whether it is an x or what they were registered that day). This is then echoed into a div on to the top div (I use CSS to hide it).
What I want to have happen is that when somebody loads the page that it will show the people that have already been registered that day. I want to do this by having a function that hides the top div for anybody who's string length is >2. I have tried multiple ways to do this but can't get any to work. Is there a way to create unique id's and then transfer these to jQuery?
I have attached a simplified version of the code below that shows what I have so far. Any help would be really appreciated.
I have tried using a counter but I think I have implemented it wrong. Can anybody see how to fix it so that I can call unique ids? Here is the script I have tried.
<script>
$(document).ready(function() {
if ($("#needed<?= $i ?>").text().length > 3) {
$("#needed<?= $i ?>").parentsUntil(".submitted").addClass("hidediv");
$("#needed<?= $i ?>").parentsUntil(".submitted").removeClass("showdiv");
}
});
<!DOCTYPE html>
<html>
<head>
<?php include 'dbconnection.php'; ?>
<link href="hidphptest.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".cars").change(function(){
$(this).parentsUntil(".submitted").addClass("hidediv");
$(this).parentsUntil(".submitted").removeClass("showdiv");
});
});
</script>
<script>
$(document).ready(function(){
$(".go45").click(function(){
$(this).siblings().addClass("showdiv");
$(this).siblings().removeClass("hidediv");
});
});
</script>
<script>
$(document).ready(function() {
if ($("#needed<?= $i ?>").text().length > 3) {
$("#needed<?= $i ?>").parentsUntil(".submitted").addClass("hidediv");
$("#needed<?= $i ?>").parentsUntil(".submitted").removeClass("showdiv");
}
});
</script>
<body>
<br>
<form method="post" action="testplace3.php">
<select name="classu" >
<option disabled="disabled" selected="selected">Select Class</option>
<?php
$selectclass=$connect->query("SELECT DISTINCT class FROM `firstnametest` ");
while($rows=$selectclass->fetch_array())
{
?>
<option value="<?php echo $rows['class']; ?>"><?php echo $rows['class']; ?>
</option>
<?php
}
?>
<input type="submit" value="Add Group" style="width: 317px; height: 45px"/>
</select>
</form>
<?php
$query=mysqli_query($connect,"SELECT * from firstnametest where class =
'group1'" );
// Initiate counter variable
$i = 1;
while ($row=mysqli_fetch_array($query))
{
?>
<div class="submitted ">
<button id="butest" type="button" class="go45 btn btn-info " value="<?php
echo$row["id"]; ?>">Go Back</button>
<div class="todo "><br><span id="needed<?= $i ?>"><?php
echo$row["surname"]; ?></span><br>
<select class="cars" >
<option disabled="disabled" selected="selected">Group </option>
<option value="Group 1">Group 1</option>
<option value="Group 2">Group 2</option>
<option value="Group 3">Group 3</option>
<option value="Group 4">Group 4</option>
</select>
<br>
<div >
</div>
</div>
</div>
<!-- Counter increment -->
<?php
$i++;
}
?>
</body>
</html>
` or `
` — your ` ` (your select is closed _after_ the form is closed) etc. Improper structure of the HTML leads to the browser trying to "fix" it and the resulting DOM structure is unpredictable, so your CSS and jQuery selectors may not do what you intend. – Stephen P Jul 25 '17 at 22:54