If else not working in Document Ready function
Question
I am creating a page that selects a different form for running different functions when a user selects different select options. What I am having trouble with is keeping the form displayed when I submit the form for my second function, even though the one for the first function works perfectly. So that leads me to believe the problem is in my conditions in my document.ready function.
$(document).ready(function() {
<?php
$function = $_POST['function'];
if($function === 'nameFunc'){
echo "$('.funcDisplay').show();";
echo "$('.output').html('$output');";
}
else if($function === 'hamFunc'){
echo "$('#hFunc').show();";
echo "$('.output').html('$output');";
}
?>
});
This is where I feel like the problem lies.
<!DOCTYPE html>
<?php
if(isset($_POST['submit']))
{
if($_POST['function']== 'nameFunc')
{
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$output = "Hi $fname $lname, welcome to my PHP challenge";
}
if($_POST['function']== 'hamFunc') {
$output = 3;
}
}
?>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bebk9hPHP.css">
<script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="contentWrapper">
<h1 id="header">PHP Sample Project</h1>
<h3 id = "sText">Form Selection</h3>
<div class="custom-select">
<select id="dropdown">
<option selected disabled hidden>Select a function</option>
<option value="1">Function 1</option>
<option value="2">Function 2</option>
<option value="3">Function 3</option>
<option value="4">Function 4</option>
</select>
</div>
<div class="funcDisplay" id="funcDisp">
<h3>Name Function:</h3>
<form action="bebk9hPHP.php" method="post">
<input type="text" name="fname" class="name" id="fieldOne" placeholder="First name...">
<input type="text" name="lname" class="name" id="fieldTwo" placeholder="Last name...">
<input type="text" name="function" value="nameFunc" class="hidField">
<div class="submits">
<input type="submit" value="Submit" class="clear nsubmit" name="submit">
<input type="button" value="Clear" class="clear nclear">
</div>
</form>
<h2 class = "output"></h2>
</div>
<div class="hfuncDisplay" id="hFunc">
<h3>Hamming Number Function:</h3>
<form action="bebk9hPHP.php" method="get">
<input type="text" name="hnum" class="hnum" placeholder="Enter Possible Hamming Number">
<input type="text" name="function" value="hamFunc" class="hidField">
<div class="submits">
<input type="submit" value="Submit" class="clear nsubmit" name="submit">
<input type="button" value="Clear" class="clear nclear">
</div>
</form>
<h2 class="output"></h2>
</div>
</div>
<script>
$("#hidField").hide();
$(".funcDisplay").hide();
$(".hfuncDisplay").hide();
$("#dropdown").change(function(){
if($("#dropdown :selected").val() == 1) {
$(".funcDisplay").show();
$(".hfuncDisplay").hide();
$('.output').html("");
}
else if($("#dropdown :selected").val() == 2) {
$("#hFunc").show();
$(".funcDisplay").hide();
$('.output').html("");
}
})
$(document).ready(function() {
<?php
$function = $_POST['function'];
if($function === 'nameFunc'){
echo "$('.funcDisplay').show();";
echo "$('.output').html('$output');";
}
else if($function === 'hamFunc'){
echo "$('#hFunc').show();";
echo "$('.output').html('$output');";
}
?>
});
</script>
</body>
</html>
And here is all of my html. Thanks for any help!
1 answers
solution1
0 2019-10-24 02:50:27
Move all of this into your document ready function before anything else runs in it:
$("#hidField").hide();
$(".funcDisplay").hide();
$(".hfuncDisplay").hide();
$("#dropdown").change(function(){
if($("#dropdown :selected").val() == 1) {
$(".funcDisplay").show();
$(".hfuncDisplay").hide();
$('.output').html("");
}
else if($("#dropdown :selected").val() == 2) {
$("#hFunc").show();
$(".funcDisplay").hide();
$('.output').html("");
}
})
You declare hidField as a CSS class yet refer to in the jQuery selector as a CSS id. Correct this:
$("#hidField").hide();
to
$(".hidField").hide();
Carefully go thru your code to weed out any other mistakes. Consider renaming your identifiers to something that indicates more clearly as to what type of DOM elements they are. This will help you debug better.
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.