Estoy tratando de ocultar el formulario al enviar y mostrar la tabla de resultados. Pero cada vez que hago clic en enviar, todo desaparecerá y mi tabla no se mostrará. ¿Podría alguien ser amable de iluminarme ya que soy nuevo en html, css y javascript? Gracias
JS
function onFormSubmit() { var formData = readFormData(); insertNewRecord(formData); document.getElementById('catalogform').style.display='none'; document.getElementById('employeeList').style.display='block'; }HTML
<div class="container"> <form name="catalogform" id = "catalogform" method="GET" onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off"> <div class="item"> <label for="whendate"><b>When</b></label> <input id="whendate" type="date" name="whendate" required/></div> <div class="item"> <label for="whoaccount"><b>Who</b></label> <input id="whoaccount" type="text" name="whoaccount" required/></div> <div class="item"> <label for="comment"><b>Comment</b></label> <textarea rows="3" id="commenttext"></textarea></div> <div class="item"> <label for="about"><b>About</b></label> <input id="about" type="text" name="about" required/></div> <div class="form-action-buttons"> <input type="submit" value="Submit"> </form> <div class="tables"> <table class="list" id="employeeList"> <tr> <th>When</th> <th>Who</th> <th>Comment</th> <th>About</th> <th>Media</th> <th>What</th> <th>Whom</th> <th>Reference ID</th> </tr> <tbody> </tbody> </table>su HTML es incorrecto, no está cerrando <div class="form-action-buttons"> después de la entrada, por lo que su tabla es parte del formulario. Además, su <div class="container"> y <div class="tables"> no están cerrados...
Mira esto:
function onFormSubmit() { document.getElementById("catalogform").style.display = "none"; document.getElementById("employeeList").style.display = "block"; return false; } #employeeList { display: none; } <div class="container"> <form name="catalogform" id="catalogform" method="GET" onsubmit="return onFormSubmit();" autocomplete="off"> <div class="item"> <label for="whendate"><b>When</b></label> <input id="whendate" type="date" name="whendate" /> </div> <div class="item"> <label for="whoaccount"><b>Who</b></label> <input id="whoaccount" type="text" name="whoaccount" /> </div> <div class="item"> <label for="comment"><b>Comment</b></label> <textarea rows="3" id="commenttext"></textarea> </div> <div class="item"> <label for="about"><b>About</b></label> <input id="about" type="text" name="about" /> </div> <div class="form-action-buttons"> <input type="submit" value="Submit"> </div> </form> <div class="tables"> <table class="list" id="employeeList"> <tr> <th>When</th> <th>Who</th> <th>Comment</th> <th>About</th> <th>Media</th> <th>What</th> <th>Whom</th> <th>Reference ID</th> </tr> </table> </div> </div>