I have an html form which is supposed to appear only after clicking a submit button. I have added simple JavaScript to display the same on click.
Intention is show the update form on click of the button above it. Can anyone help me out to find what I did wrong?
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>Try the below changes in your code.
In CSS:
remove .hidden from .UpdateForm-section.hidden
In JS:
use querySelector instead of getElementByClass and wrap the name of the class in quotes.
Wokring code:
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>I suggest you to have the following approach: define a desired style when your element will be shown:
.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;
}
Then in your javascript, you just add the "active" class to the element when you want it to show:
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
}
You just need to save your form in a variable, and you can easyly change it after it. You will need to remove .hidden from your css.
You need to use form[0], because when you make getElementsByClassName, you are getting an array:
function showForm() {
alert('Form has been submitted');
var form = document.getElementsByClassName("UpdateForm-section");
form[0].style.display = 'block'
}