Question

I think I have found an interesting problem (at least to me). I have a form that uses a click on a div inside the form to submit. I have used “document.forms.form.submit()” to make the div clickable to submit as suggested here this.form.submit() not working after clicking div element in form (thanks David Hedlund!)

However the form was working fine in chrome, ff. But for some unknown reason, running the form in localhost on chrome is not working now. ff is working fine. What makes the problem interesting is when I uploaded the form to a web-server it works in chrome! Any Idea why this is happening in local machine? I am using Xampp.

Here is the form-

<form name="form" action="login_process.php" method="POST">
<div>
  Username: <input style="width:100px;" name="login_client[]" type="text" />
  Password: <input style="width:100px;" name="login_client[]" type="password" />
</div>

<div  align="right" class="whitearial12" style="position:absolute;  font-size:10px; width:360px; height:17px; right:110px; top:35px;">
  Forgotten your <a href="#">password</a>, or need to <a href="#">register</a>? 
</div>
<!-- this is the div !-->
<div onClick="document.forms.form.submit()" align="center" class="whitearial12" style="cursor: pointer; position:absolute; padding-top:3px; padding-bottom:-3px; width:80px; height:17px; right:20px; top:10px; background-image: url(Images/button_blank.png); background-repeat:no-repeat">
    Log In
</div>
</form>

Update: Let me add what I noticed further. This form is included in index.php file from another php file named header.php. I have tried running only the header.php. The form works alright in that case in chrome. But including it in index.php does not work.

Answer 1

I would suggest including jQuery and reworking to resemble this

<form id="MyForm" action="login_process.php" method="post">
    <span onclick="javascript:$('#MyForm').submit();">Magical ponies await</span>
</form>

Using jquery can help with cross-browser issues a lot, but if you can’t do that, how about

<form id="XX" action="login_process.php" method="post">
  <span onclick="javascript:document.getElementById('XX').submit();">AVAST</span>
</form>