在表单提交上显示隐藏的div

Question

我有两个botton的html表单。 一种是提交主要表单，另一种是上传文件。

我想在表单提交中显示一个隐藏的div，它起作用，但是当您单击文件上传按钮时，它也显示了一个隐藏的div，这是我不想的。

另外，如果我在任何表单字段中单击以输入文本，则会显示div。

我如何才能将隐藏的内容仅显示在主要提交按钮上

这是表格

<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>

这是JavaScript

<script type="text/javascript">
    function showHide() {
            document.getElementById("loading").style.display = "block";
    }
</script>

Answer 1

onclick是错误的。 应该是onsubmit 。 另外，您还具有关闭/>标记，请从<form>标记中删除/ 。

更改

<form onclick="showHide()"/> //wrong

对此

<form onsubmit="showHide()">
------^^^^^^^^------------^^