Show Hide div on load page if, if statement is true
Question
You will quickly see that I'm new to this and don't have a clue. I'm going mental trying to help a friend out with this project. He wants to have a simple quote form that generates a quote to html then he will copy/paste to a private wordpress page for his client.
The form starts with if radio button is selected, div is shown
index.html:
<html>
<body>
<head>
<title>Demo Quote Creator</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("input[name='animalvillas']").click(function () {
if ($("#chkYes1").is(":checked")) {
$("#dvanimalvillas").show();
} else {
$("#dvanimalvillas").hide();
}
});
});
</script>
<script type="text/javascript">
$(function () {
$("input[name='animalkidani']").click(function () {
if ($("#chkYes2").is(":checked")) {
$("#dvanimalkidani").show();
} else {
$("#dvanimalkidani").hide();
}
});
});
</script>
</head>
<h2>Client Name</h2>
<form name="create" action="welcome.php" method="post" onsubmit="return validateForm();">
<strong>Last</strong>: <input type="text" name="last" required />, <strong>First</strong>: <input type="text" name="first" required />
<BR />
<h2><strong>Resorts to Include in Quote</strong></h2>
<span><strong>Animal Kingdom Villas</strong></span><BR />
<label for="chkYes1">
<input type="radio" id="chkYes1" name="animalvillas" />
Include
</label>
<label for="chkNo1">
<input type="radio" id="chkNo1" name="animalvillas" />
Exclude
</label>
<hr />
<div id="dvanimalvillas" style="display: none">
$<input type="text" name="ages" size="7" /> - Value Studio - Standard View (Parking View) | Studio Description: 316sf - One (1) queen bed and one (1) double-size sleeper sofa (Sleeps 4) <br>
</div>
<span><strong>Animal Kingdom Kidani</strong></span><BR />
<label for="chkYes2">
<input type="radio" id="chkYes2" name="animalkidani" />
Include
</label>
<label for="chkNo2">
<input type="radio" id="chkNo2" name="animalkidani" checked />
Exclude
</label>
<hr />
<div id="dvanimalkidani" style="display: none">
$<input type="text" name="ages" size="7" /> - Value Studio - Standard View (Parking View) | Studio Description: 316sf - One (1) queen bed and one (1) double-size sleeper sofa (Sleeps 4) <br>
</div>
<BR />
<input type="submit" />
</form>
</body>
</html>
Now, on the welcome.php, he only wants the relevent that was selected on the index.html. Obviously, this is not working, but hopefully you can see what we are trying to accomplish.
welcome.php
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="dvanimalvillas" <?php
if ($("#chkNo1").is(":checked")) { echo 'style="display:none;"'; } ?>>
The quote for Animal Kingdom Villas will show here when yes is selected
</div>
<div id="dvanimalkidani" <?php
if ($("#chkNo2").is(":checked")) { echo 'style="display:none;"'; } ?>>
The quote for Animal Kingdom Kidani will show here when yes is selected
</div>
</body>
Thank you for any direction you may have!
2 answers
solution1
0 ACCPTED 2016-07-12 18:36:44
In your index.html make following changes. You have to give some value to your radio buttons to fetch in other file
<label for="chkYes2">
<input type="radio" id="chkYes2" name="animalkidani" value="Y" />
Include
</label>
<label for="chkNo2">
<input type="radio" id="chkNo2" name="animalkidani" value="N" checked />
Exclude
</label>
In your welcome.php make following changes. We will use radio button value to hide and display div content.
<div id="dvanimalvillas" <?php echo ($_POST['animalkidani'] == "Y") ? 'style="display:none;"' : '' ; } ?>>
The quote for Animal Kingdom Villas will show here when yes is selected
</div>
<div id="dvanimalkidani" <?php echo ($_POST['animalkidani'] == "N") ? 'style="display:none;"' : '' ; } ?>>
The quote for Animal Kingdom Kidani will show here when yes is selected
</div>
solution2
0 2016-07-12 18:40:03
There are multiple things going on here:
You're not using radio buttons properly. Each radio selection needs a different value within each radio group having the same name. This value is what is sent with the form when it is submitted. See this link: http://www.echoecho.com/htmlforms10.htm
In welcome.php, you need to look at the form data that is sent from index.html, not at the actual checkboxes from the form. See this link: http://www.tutorialspoint.com/php/php_get_post.htm
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.