Simple javascript form issue

[sweetdavey]

Hi guys!

As a newbie I'm trying to make a very simple email form work, but after hours and hours of lurking I still can't resolve it.
The problem is that firefox refuses to submit the form correctly while also clearing it, yet this works fine in Chrome and IE.

At the moment the code submits in all browsers, but doesnt clear in any of them. If I remove the "action" parameter
from the GetElementById it will submit and clear in Chrome / IE but not in Firefox.

Form:

<form id="mail" action="insert.php" method="post" target="_blank" />
<input type="text" class="input" id="email" name="email" value="" />
<input type="submit" class="submit" id="email" value="SIGN UP!" onClick="restore();" />
</form>

present function:

function restore() 
{
document.getElementById("mail").submit(action);
document.getElementById("mail").reset();

}

Any ideas?
Thanks very much!
David

[Logic Ali]

Why are you calling submit() when it's going to be called automatically?
The moment you submit a form, the browser starts to load the 'action' url and there's no guarantee regarding what can or cannot happen subsequently on the current page.

If you want to submit form values without navigating to a new page, you can use an AJAX request, but the process will be script-dependent.

[kromol]

The action parameter in the submit function is undefined, that's why Firefox gives an error and doesn't submit the form. If you want to pass form action to submit function you should write:

document.getElementById("mail").submit(this.action);

When you add onclick handler via html attribute keyword this will always refer to that tag.

[sweetdavey]

Thanks for the replies guys. I apologize for my lack of basic Javascript knowledge, but as I add "this.action" definition, it wont submit in Firefox, but will in Chrome. Using only "action" submits in Firefox too but doesnt clear...

[kromol]

Logic Ali is right. You haven't to call submit explicity. You can just remove that line from your function and the code should work properly.

[sweetdavey]

Yeah already tried that, no luck I wonder if the issue has to do with the name or id definitions I've given the tags in the form?

[kromol]

I've just noticed that you have a closing slash "/" in the form's open tag. Maybe it causes strange behavior in different browsers.

[sweetdavey]

If you mean the slash after target="_blank" then removing it didnt seem to change anything. Firefox still refuses to cooperate! Appreciate the help though

[kromol]

Try this code, it should work, I've tested it in Chrome and Firefox

<form id="mail" action="insert.php" method="post" target="_blank">
  <input type="text" class="input" id="email" name="email" value="" />
  <input type="submit" class="submit" id="email" value="SIGN UP!" onclick="document.getElementById('mail').reset();" />
</form>

[sweetdavey]

Well that clears fields fine in both browsers but it won't submit correctly in any for some reason ! =) Is there a way to also within the form call a seperate function that will use submit(action) etc? Maybe some onSubmit?

[kromol]

Yes, there is an event onsubmit

[kromol]

If you want to reset the form after its submitting you should use setTimeout

<form id="mail" name="form" action="insert.html" method="get" target="_blank" >
  <input type="text" class="input" id="email" name="email" value="" />
  <input type="submit" class="submit" id="email" value="SIGN UP!" onclick="setTimeout(function() {document.getElementById('mail').reset();}, 100); return true;" />
</form>

[sweetdavey]

Thanks, but I'm sorry, just doesn't go through ...My script just doesn't let me submit the form correctly unless I use the onClick evenhandler, and if I do I still cant make Firefox clear the form after submission. I'm still lost..

[xelawho]

maybe firefox doesn't like you hijacking the click event of a submit button?

I would try:

<input type="button" class="submit" id="email" value="SIGN UP!" onClick="restore(this.form);" />

function restore(frm) 
{
frm.submit();
frm.reset();

}

[sweetdavey]

Simple...and magic! That did it. Thanks a lot xelawho Really appreciate all other suggestions too, which I'm sure work fine in other contexts. I like beginning to learn javascript this way..

thanks
David