I am trying to do something where you can search for flights within a database based on the departure/arrival airport and departure/return flight. There are two radio buttons where you can click whether it's round-trip or one-way. What I am having trouble with is, I want to hide the return flight thing whenever the one-way radio button has been clicked but it won't budge. Everything remains on screen no matter what button is pushed. Here is my code, any help would be appreciated!
<!DOCTYPE html>
<html>
<head>
<script>
function tripCheck(){
if (document.getElementById('round').checked){
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
}
</script>
</head>
<body>
<form action="/post" method="POST">
<!-- Radio Buttons -->
<input type="radio" onclick="javascript:tripCheck();" name="oneround" id="round" checked>Round Trip
<input type="radio" onclick="javascript:tripCheck();" name="oneround" id="oneway">One Way<br>
<!-- Source and Destination Locations -->
<input type="text" name = "source" placeholder="Enter an origin" required/>
<input type="text" name = "dest" placeholder="Enter a Destination" required/><br>
<!-- Departure and Return Dates -->
Departure Date:
<input type="date" id="departure" name="ddate"
value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01" required>
<div id="toggle">Return Date:
<input type="date" id="return" name="rdate"
value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01">
</div>
<!-- Submit Button -->
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
CodePudding user response：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="/post" method="POST">
<!-- Radio Buttons -->
<input type="radio" onchange="tripCheck()" name="oneround" id="round" checked>Round Trip
<input type="radio" onchange="tripCheck()" name="oneround" id="oneway">One Way<br>
<!-- Source and Destination Locations -->
<input type="text" name="source" placeholder="Enter an origin" required/>
<input type="text" name="dest" placeholder="Enter a Destination" required/><br>
<!-- Departure and Return Dates -->
Departure Date:
<input type="date" id="departure" name="ddate" value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01" required>
<div id="toggle">Return Date:
<input type="date" id="return" name="rdate" value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01">
</div>
<!-- Submit Button -->
<br>
<input type="submit" value="Submit">
</form>
<script>
function tripCheck() {
if (!document.getElementById('round').checked) {
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
}
}
</script>
</body>
</html>CodePudding user response：
You have one error on the above code. Your function doesn't have the closing bracket. If you want to view javascript error you can right click and go to inspect or simply press f12 and go to console menu.
CodePudding user response：
Try entering this, a function Travel_Control
<script>
function Travel_Control() {
if (!document.getElementById('round').checked) {
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
} }
</script>
CodePudding user response：
In your code one closing bracket is missing in function tripCheck(). and you need to revert the condition in if(!condition) statement. you can replace below function in your code and it will work as expected.
function tripCheck()
{
if (!document.getElementById('round').checked)
{
document.getElementById('toggle').style.display = 'none';
} else
{
document.getElementById('toggle').style.display = 'block';
}
}