I attempted to search for something similar but came up empty-handed.
I have two buttons. When I click one of them, I want to hide a certain division, but it's not working as expected. The divs d2 and d3 are initially hidden when the page opens, which is fine. However, when I try to click on one of the buttons, nothing happens. Is there another way to achieve what I'm trying to do? Am I making a mistake somewhere?
<head><title>Add Education and Work Experience</title>
<script type='text/javascript'>
function Funz1()
{
document.getElementById("d1").style.display = "none";
document.getElementById("d2").style.display = "none";
document.getElementById("d3").style.display = "block";
}
function Funz2()
{
document.getElementById("d1").style.display = "none";
document.getElementById("d2").style.display = "block";
document.getElementById("d3").style.display = "none";
}
function checkForm3()
{
// Checking that all fields in the registration are filled
if(document.registration_form.luogo.value == '' ||
document.registration_form.titolo.value == '' ||
document.registration_form.anno.value == ''
)
{
alert('Please fill in all required fields');
return false;
}
// If we reach here, everything is okay
return true;
}
function checkForm4()
{
// Checking that all fields in the registration are filled
if(document.registration_form.luogo2.value == '' ||
document.registration_form.ruolo.value == '' ||
document.registration_form.anno2.value == ''
)
{
alert('Please fill in all required fields');
return false;
}
// If we reach here, everything is okay
return true;
}
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<br>
<div id="d1">
<button type="button" onclick="Funz1()" >Add Work Experience</button>
<button type="button" onclick="Funz2()" > Add Study Experience</button>
</div>
<div id="d2" style= display:none>
<br><form name='studio_form' action='Esperienze.php' method='post'
onsubmit='return checkForm3()' >
<div class='row'>
<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='titolo'>Title</label>
<input type='text' name='titolo'>
</div>
<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='year'>Year</label>
<input type='text' name='anno'>
</div>
<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='location'>Location</label>
<input type='date' name='luogo'>
</div>
<div class='form-group col-xs-12 col-md-12 col-sm-12 col-lg-12'>
<input name='submit' type='submit' value='Add'>
</div>
</div>
</form>
</div>
<div id="d3" style= display:none>
<form name='work_form' action='Esperienze.php' method='post'
onsubmit='return
checkForm4()' disabled>
<div class='row'>
<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='role'>Role</label>
<input type='text' name='ruolo'>
</div>
<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='year2'>Year</label>
<input type='text' name='anno2'>
</div>
<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='location2'>Location</label>
<input type='date' name='luogo2'>
</div>
<div class='form-group col-xs-12 col-md-12 col-sm-12 col-lg-12'>
<input name='submit' type='submit' value='Add'>
</div>
</div>
</form>
</div>
</body>
</html>