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>
<!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>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.
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>