0
326
VistasHow can I make an HTML Form be hidden when entering the webpage?
I am trying to make a form that opens upon clicking a button, and close upon clicking a button.
To achieve this, I made the following code:
function showForm() {
document.getElementById('testForm').style.display = 'block';
}
function closeForm() {
document.getElementById('testForm').style.display = 'none';
}<button type="button" class="btn btn-primary shadow" onclick="showForm()">Add Expense</button>
<form id="testForm">
<input type='text' placeholder="Test">
<button onclick="closeForm()">Close Form</button>
</form>However, the form is automatically displayed upon entering the website, instead of being automatically hidden and displaying the form upon clicking the Add Expense button. How would I approach this?
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
You can add a custom class or style attribute on your to be hidden on page load like below.
<form id = "testForm" style="display:none;">
<input type = 'text' placeholder = "Test">
<button onclick = "closeForm()">Close Form</button>
</form>
·
Juan Pablo Isaza
Denunciar
0
Add default styling to your form.
Either do it inline:
<form id="testForm" style="display: none;">
<input type='text' placeholder="Test">
<button onclick="closeForm()">Close Form</button>
</form>
Or in a css file/tag:
#testForm {
display: none;
}
This will cause your form to be hidden by default. Then when your "showForm()" function is triggered, the style gets overridden and the form is displayed.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta