I have a html form with two bottons. One is the main form submit another is a file upload.
I want to reveal a hidden div on the form submit, which works but it also reveals the hidden div when you click the file upload button, which I dont want.
Also if I click in any form field for text entry the div is revealed....
How can I get the hidden only to reveal on the main submit button
Here's the form
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="/directory/submit.php" enctype="multipart/form-data" onclick="showHide()"/>
<label>Tel
<span class="small">Contact Telephone No.</span>
</label>
<input type="text" name="submitted_telephone" value="[var.submitted_telephone;htmlconv=no]"/>
<label>email*
<span class="small">Contact email</span>
</label>
<input type="text" name="submitted_email" value="[var.submitted_email;htmlconv=no]"/>
<label>Address
<span class="small">Postal Address</span>
</label>
<input type="text" name="submitted_address" value="[var.submitted_address;htmlconv=no]"/>
<label for="file">Filename
<span class="small">Upload image</span>
</label>
<input type="file" name="file" id="file">
<div class="spacer"></div>
<button type="submit" title="Submit Details">Submit</button>
<input type="hidden" name="form_submitted" value="yes"/>
<div class="spacer"></div>
<div id="loading" style="display:none">
<img src="[var.base_url]/directory/style_images/Animated_Loading_Gif.gif" />
</div>
</form>
here's the javascript
<script type="text/javascript">
function showHide() {
document.getElementById("loading").style.display = "block";
}
</script>
onclick
is wrong. It should be onsubmit
. Also you have closing />
tag, remove /
from <form>
tag.
Change
<form onclick="showHide()"/> //wrong
To this
<form onsubmit="showHide()">
------^^^^^^^^------------^^
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.