PL200 PL200 - 6 months ago 7
HTML Question

AJAX posted variable behaving unexpectedly

So I have an AJAX process that submits a variable from a select option in a HTML form, and then builds another select menu from that. Essentially what is supposed to happen is that, for example, if the user selects the month of Feburary, the variable sent to the PHP script will be '02' and then the new dropdown box will have 29 options. The problem is that, despite my script telling me that 02 has been sent, the days are all out of whack. The days don't seem to correlate to the months, however despite the days being wrong, they're always consistently wrong. For example, while Feburary doesn't print 29 days, it will always consistently print the '30' days option, no matter whether it's 30, or 8000.

Here is my javascript file:

$(document).ready(function() { //Makes sure page is loaded.

/* === LINKS ===
Controls the links (site behaviour) via JQuery (as
defined by the Assignment CRA).
*/
$('#home').html('<a href="./index.php">Home</a>');
$('#signup').html('<a href="./signup.php">Sign Up</a>');
$('#activities').html('<a href="./activities.php">Upcoming Activities</a>');
$('#feedback').html('<a href="./feedback.php">Student Feedback</a>');
$('#contact').html('<a href="./contact.php">Contact</a>');


/* === STAFF INFORMATION TOGGLE ===
Displays or hides information about
staff members on click.
*/
/*
$('#spongeimage').click(function() {
$("#spongeinfo").slideToggle("slow");

});*/

$(".staff").click(function() {
//alert("FUCK");
$(".staffinfo", this).slideToggle("slow");

});


$('#year').change(function() {
$("#month").slideToggle("slow");

});

$('#month').change(function() {
var month_var = $("#month").val();
var dataString = 'name1='+ month_var;
//Start

$.ajax({
type: "POST",
url: "./javascript/month_post.php",
data: dataString,
dataType: "text",
success: function(data) {
//alert(dataString);
$("#day").html(data);
$("#okay").html(dataString);
}
});



//End

$("#day").slideToggle("slow");

});




/* === 'FIRST NAME' FORM FOCUS
Focuses the cursor on the 'first name'
field when the Student Feedback page
is loaded.
*/
$('input[name="firstname"]').focus();



/* === HOVER EFFECTS ===
The effects that occur after hovering over
an item on the link bar (1.0) and one of
the two buttons on the Student Feedback
page (1.1).
*/

//(1.0)
$("li a").hover(function(){
$(this).css({"color": "#000000", "background-color": "#5590ff"});
}, function(){
$(this).css({"color": "#333", "background-color": "#FFFFFF"});
});

//(1.1)
$("formbutton").hover(function(){
$(this).css({"color": "#000000", "background-color": "#5590ff"});
}, function(){
$(this).css({"color": "#333", "background-color": "#FFFFFF"});
});

});


Here is my PHP file:

<?php
echo $name;

if(isset($_POST["name1"]))
{


$name = $_POST["name1"];
//echo $name;
// Here, you can also perform some database query operations with above values.
//echo "Welcome ". $name ."!"; // Success Message
$counter = 1;

//echo "<select name='gday'>";

if($name == 02)
{
$monthdays = 29;
}
if($name == 06 || $name == 09 || $name == 04 || $name == 11)
{
$monthdays = 30;
}
else
{
$monthdays = 31;
}


while ($counter <= $monthdays)
{

echo "<option value='hi'>".$counter."</option>";

$counter++;
}
//echo "</select>";


}


?>


And here is my HTML file:

<!DOCTYPE html>
<html>
<head>
<title>KIT411 - Homepage</title>
<link rel="stylesheet" href="./CSS/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="./javascript/script.js"></script>
</head>
<body>

<!-- TITLES -->
<div class="titles">
&zwnj; <!-- Blank character, to ensure the titles div extends to the top of the page. -->
<h1 class="title">KIT411</h1> <!-- Unit name. -->
<h2 class="subtitle">Sign Up</h2> <!-- Page name. -->
</div>
<div class="right">

<?php
include('login.php');
?>

</div>

<!-- PAGE LINKS
Links are controlled by JQuery, which is why
there are no <a></a> tags. -->
<?php
include('PHP/linkbar.php');
?>

<div class="center">
<div class="inline">
<?php
include('./db-connection/register.php');
?>
<div id="okay">TEST </div>
<form method="post" action="">
Username:<br>
<input type="text" name="usr" value="<?php echo $user; ?>"><br>
Password:<br>
<input type="password" name="pass" value="<?php echo $password; ?>"><br>
Retype Password:<br>
<input type="password" name="pass2" value="<?php echo $passwordTwo; ?>"><br>
Name:<br>
<input type="text" name="name" value="<?php echo $name; ?>"><br>
DOB:<br>

<select id="day" name="dobDay">
<?php
$counter = 1;


while($counter <= 31)
{
?>
<option value="<?php echo $counter; ?>"><?php echo $counter; ?></option>
<?php
$counter++;
}
?>
</select>


<select id="month" name="dobMonth">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select id="year" name="dobYear">
<?php
$counter = 1100;
while($counter <= 2016)
{
?>
<option class="yearClass" value="<?php echo $counter; ?>"><?php echo $counter; ?></option>
<?php
$counter++;
}
?>
</select>

<br>
Email:<br>
<input type="text" name="email" value="<?php echo $email; ?>"><br>

<input type="submit" name="submit" value="Sign Up">
</form>

</div>
</div>


<?php
include('PHP/footer.php');
?>
</body>
</html>


Any help would be greatly appreciated, and sorry if there's any swearwords in my code. Sometimes I do it for a bit of fun while testing and forget to remove them. Anyway, any help is progress.

Answer

The problem is in the PHP code, when you try to set up the number of days. You have one if and one if ... else, but doesn't behave as you expect.

You have first this if

if($name == 02)
{
    $monthdays = 29;
}

And after this one:

if($name == 06 || $name == 09 || $name == 04 || $name == 11)
{
    $monthdays = 30;
}
else
{
    $monthdays = 31;
}

This last one will set up the number of days to 30 or 31, because it only have two choices. Here you could use an elseif control structure. http://php.net/manual/en/control-structures.elseif.php

if ($name == 02)
{
    $monthdays = 29;
} 
else if ($name == 06 || $name == 09 || $name == 04 || $name == 11)
{
    $monthdays = 30;
}
else
{
    $monthdays = 31;
}