I'm making an html page with images, where the user clicks their image, to log in to their invoice page. This is what I have so far:
<script type="text/javascript">
function showHideForm(formid)
{
var _form = document.getElementById(formid);
_form.style.display = (_form.style.display != "block") ? "block" : "none";
return false;
}
</script>
<p>
<a href="#" onclick="return showHideForm('hiddenForm1');">
<img src="" width="150" height= "150" />
</a>
</p>
<form id="hiddenForm1" style="display: none;" method="post" action="user1_login.php">
<input type="text" name="user" placeholder="Name" required /><br />
<input type="text" name="pass" placeholder="Password" required/><br />
<input type="submit" name="Submit" value="Submit" />
</form>
<p>
<a href="#" onclick="return showHideForm('hiddenForm2');">
<img src="" width="150" height="150" />
</a>
</p>
<form id="hiddenForm2" style="display: none;" method="post" action="user2_login.php">
<input type="text" name="user" placeholder="Name" required /><br />
<input type="text" name="pass" placeholder="Password" required/><br />
<input type="submit" name="Submit" value="Submit" />
</form>
It works nicely except that if you click on other images, you get several instances open at the same time.
Is it possible to tack a bit of code to the beginning of the javascript to close any open instances before it runs the code to open a new form?