Tengo un formulario html que se supone que aparece solo después de hacer clic en el botón Enviar. He agregado JavaScript simple para mostrar lo mismo al hacer clic.
La intención es mostrar el formulario de actualización al hacer clic en el botón que se encuentra arriba. ¿Alguien puede ayudarme a encontrar lo que hice mal?
function showForm() { alert('Form has been submitted'); document.getElementByClass(UpdateForm - section).style.display = 'block'; } .UpdateForm-section.hidden { display: none; } <input type="submit" name="delete" class="button-1" value="Update" onclick="showForm();" /> <br><br><br> <!-- Update details form here --> <div> <form action="" method="post" class="UpdateForm-section"> <label>Car Name</label> <input type="text" value="" name="ev_name" placeholder="Model name"><br> <label>Manufacturer</label> <input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br> <label>Year</label> <input type="number" value="" name="ev_year" placeholder="YYYY"><br> <label>Battery size</label> <input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br> <label>Range</label> <input type="number" value="" name="ev_range" placeholder="Range in Km"><br> <label>Cost</label> <input type="number" value="" name="ev_cost" placeholder="Price in €"><br> <label>Power</label> <input type="number" value="" name="ev_power" placeholder="Power in Kw"><br> <br> <input type="submit" id="update_submit" value="Update details" name="submit_button" /> </form> </div>Pruebe los siguientes cambios en su código.
En CSS: elimine .hidden de .UpdateForm-section.hidden
En JS: use querySelector en lugar de getElementByClass y envuelva el nombre de la clase entre comillas.
Código de trabajo:
function showForm() { alert('Form has been submitted'); document.querySelector('.UpdateForm-section').style.display = 'block'; } .UpdateForm-section { display: none; } <input type="submit" name="delete" class="button-1" value="Update" onclick="showForm();" /> <br><br><br> <!-- Update details form here --> <div> <form action="" method="post" class="UpdateForm-section"> <label>Car Name</label> <input type="text" value="" name="ev_name" placeholder="Model name"><br> <label>Manufacturer</label> <input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br> <label>Year</label> <input type="number" value="" name="ev_year" placeholder="YYYY"><br> <label>Battery size</label> <input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br> <label>Range</label> <input type="number" value="" name="ev_range" placeholder="Range in Km"><br> <label>Cost</label> <input type="number" value="" name="ev_cost" placeholder="Price in €"><br> <label>Power</label> <input type="number" value="" name="ev_power" placeholder="Power in Kw"><br> <br> <input type="submit" id="update_submit" value="Update details" name="submit_button" /> </form> </div>Le sugiero que tenga el siguiente enfoque: defina un estilo deseado cuando se muestre su elemento:
.UpdateForm-section { // here we set the default style of the div -> not displayed display: none; } .UpdateForm-section.active { // here the CSS selector is stronger, so it will override the previous statement display: block; }Luego, en su javascript, simplemente agregue la clase "activa" al elemento cuando desee que se muestre:
function showForm() { alert('Form has been submitted'); document.querySelector(".UpdateForm-section").classList.add('active'); // Prefer to use an id to select an unique element to avoid miss coding }Solo necesita guardar su formulario en una variable, y puede cambiarlo fácilmente después. Deberá eliminar .hidden de su css.
Debe usar form[0] , porque cuando getElementsByClassName , obtiene una matriz:
function showForm() { alert('Form has been submitted'); var form = document.getElementsByClassName("UpdateForm-section"); form[0].style.display = 'block' }