www.webdeveloper.com
Results 1 to 15 of 15

Thread: Simple javascript form issue

  1. #1
    Join Date
    Sep 2012
    Posts
    7

    Simple javascript form issue

    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:

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

    Code:
    function restore() 
    {
    document.getElementById("mail").submit(action);
    document.getElementById("mail").reset();
    
    }
    Any ideas?
    Thanks very much!
    David

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    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.

  3. #3
    Join Date
    Jul 2011
    Posts
    131
    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:
    Code:
    document.getElementById("mail").submit(this.action);
    When you add onclick handler via html attribute keyword this will always refer to that tag.

  4. #4
    Join Date
    Sep 2012
    Posts
    7
    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...

  5. #5
    Join Date
    Jul 2011
    Posts
    131
    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.

  6. #6
    Join Date
    Sep 2012
    Posts
    7
    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?

  7. #7
    Join Date
    Jul 2011
    Posts
    131
    I've just noticed that you have a closing slash "/" in the form's open tag. Maybe it causes strange behavior in different browsers.

  8. #8
    Join Date
    Sep 2012
    Posts
    7
    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

  9. #9
    Join Date
    Jul 2011
    Posts
    131
    Try this code, it should work, I've tested it in Chrome and Firefox
    Code:
    <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>

  10. #10
    Join Date
    Sep 2012
    Posts
    7
    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?

  11. #11
    Join Date
    Jul 2011
    Posts
    131
    Yes, there is an event onsubmit

  12. #12
    Join Date
    Jul 2011
    Posts
    131
    If you want to reset the form after its submitting you should use setTimeout
    Code:
    <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>

  13. #13
    Join Date
    Sep 2012
    Posts
    7
    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..

  14. #14
    Join Date
    Nov 2010
    Posts
    1,097
    maybe firefox doesn't like you hijacking the click event of a submit button?

    I would try:

    Code:
    <input type="button" class="submit" id="email" value="SIGN UP!" onClick="restore(this.form);" />
    
    function restore(frm) 
    {
    frm.submit();
    frm.reset();
    
    }

  15. #15
    Join Date
    Sep 2012
    Posts
    7
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles