Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    submit form without redirect

    Hi I'm looking for a JavaScript-only or jQuery-only soluton for this. All the solutions I've found use php or ajax which I can't use. I want this contact form to submit without redirecting to a new page or refreshing afterwards.

    html:

    <form id="form" action="http://members.freewebs.com/formMail.jsp" method="post">
    <input type="hidden" name="userid" value="123123123">
    <input id="formname" type="text" name="name">
    <input id="formemail" type="text" name="email">
    <textarea id="formmessage" name="message"></textarea>
    <div id="submitter"></div>
    </form>

    jQuery:

    $('#submitter').click(function() {
    $('#confirmer').fadeIn(1500).delay(1000).fadeOut(1500);
    setTimeout(function() { if (!validate($('#form'))) return; }, 4000)
    setTimeout(function() { $('#form').submit(); }, 4000)
    setTimeout(function() { $('#form')[0].reset(); }, 4100)
    return false;
    });

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Instead of return false you need to use preventDefault()

    see http://api.jquery.com/event.preventdefault/
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,151
    Thanks
    203
    Thanked 2,548 Times in 2,526 Posts

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by resin View Post
    Hi I'm looking for a JavaScript-only or jQuery-only soluton for this. All the solutions I've found use php or ajax which I can't use. I want this contact form to submit without redirecting to a new page or refreshing afterwards.
    The only way to do this with the stipulations you've specified is to place the form in an iframe, a new tab, or a new window. It may be possible to do this purely through JavaScript via the new window method, although I'm not familiar with how to do it. The other two methods would require a second page holding the form.

    JavaScript-only would include "AJAX", by which I'm guessing you mean XMLHttpRequest, so I'm not sure why that method is excluded. (XMLHttpRequest is a misnomer and doesn't necessarily involve XML.) If you can't use XMLHttpRequest or one of the aforementioned methods, then you're out of luck since those are the the only ways to submit a form without leaving or reloading the current page.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,151
    Thanks
    203
    Thanked 2,548 Times in 2,526 Posts
    Try

    $('#form').submit(function(){preventDefault()});

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,789
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    No, you need to attach preventDefault to the event:
    Code:
     $('#form').submit(function(e){e.preventDefault()});

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by VIPStephan View Post
    No, you need to attach preventDefault to the event:
    Code:
     $('#form').submit(function(e){e.preventDefault()});
    May as well strip the jQuery while you're at it:

    Code:
    document.getElementById("form").addEventListener("submit", function (submissionEvent) {
    	submissionEvent.preventDefault();
    });
    Though it's a bit of a moot point since the OP wants the form to submit, and this code prevents form submission.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Arbitrator View Post
    Though it's a bit of a moot point since the OP wants the form to submit, and this code prevents form submission.
    The OP doesn't want the page to redirect or refresh when the submit button is pressed. The only way to achieve that is to prevent the form from submitting to the server.

    Presumably the OP intends for the form to be processed with Javascript or jQuery as otherwise the form serves no purpose.

    Also the version without the jQuery will not work in IE8 or earlier whereas the jQuery one will provided that jQuery 1 is used (jQuery 2 doesn't support IE8 and earlier either).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by felgall View Post
    The OP doesn't want the page to redirect or refresh when the submit button is pressed. The only way to achieve that is to prevent the form from submitting to the server.

    Presumably the OP intends for the form to be processed with Javascript or jQuery as otherwise the form serves no purpose.
    Oops, you're right. I was being absent-minded.

    That brings to mind another possible method: have the form on the primary page, prevent submission, copy the form to a new window, dynamically submit the form, and destroy the window. I'd expect the user to briefly see a small window, but things would otherwise be seamless. Not sure if it'd work for <input type="file"> though.

    Still wondering if the OP has really ruled out XMLHttpRequest before I try writing any code though.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Arbitrator View Post
    copy the form to a new window
    But you don't have control over opening new windows from JavaScript. The owner of the browser might have their browser configured so it opens in a new tab instead (or even have it overwrite the current window).

    Also popup blockers will block the new window opening in many instances.

    And you still need the preventDefault call to stop the form being submitted.

    I can't see any purpose in trying to open a new window from the JavaScript and there's no valid way in HTML to do it (many browsers will ignore the obsolete target attrribute when used on a form tag).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by felgall View Post
    But you don't have control over opening new windows from JavaScript. The owner of the browser might have their browser configured so it opens in a new tab instead (or even have it overwrite the current window).
    You do via the open method. As long as one can write to it, it would be fine if a new tab opened. I'm not sure if you can though since I'm not that familiar with open, having so rarely used it.

    Quote Originally Posted by felgall View Post
    Also popup blockers will block the new window opening in many instances.
    True. I'm not sure what heuristics are used to block popup windows.

    Quote Originally Posted by felgall View Post
    I can't see any purpose in trying to open a new window from the JavaScript and there's no valid way in HTML to do it (many browsers will ignore the obsolete target attrribute when used on a form tag).
    Well there's an idea I missed: the author could write the form so that it submits to an iframe element via either of the target or formtarget attributes.

    I wouldn't call the attributes obsolete; they're defined in the HTML spec at http://www.whatwg.org/specs/web-apps...attr-fs-target. I only tested a target="_blank" attribute on a form element, but it worked in every browser I tested: Chrome 32, Firefox 26, Internet Explorer 9/11, and Opera 18.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Arbitrator View Post
    I wouldn't call the attributes obsolete; they're defined in the HTML spec at http://www.whatwg.org/specs/web-apps...attr-fs-target. I only tested a target="_blank" attribute on a form element, but it worked in every browser I tested: Chrome 32, Firefox 26, Internet Explorer 9/11, and Opera 18.
    The target attribute was removed from the HTML 4 spec that came out in 1997. It was scheduled to be unsupported completely by browsers that follow HTML 5 but too many antiquated pages stil use it and so HTML 5 has it listed as still allowed so as to provide for pages written before 1997 that haven't yet got round to removing it. Many browsers did remove support for it on the form tag and only support it on the <a> tag even though it has been obsolete since 1997.

    Inmplementing a target attribute only removes one of the three choices that people's browsers offer for where to open links and so are annoying to those people where the choice they wanted is the one removed and they don't know how to turn it off. As it no longer works on forms in all browsers (even assuming that the browser owner hasn't turned it off) you can't reliably use it there.

    Only use the target attribute if you want to annoy your visitors and drive some of them away.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    The iframe works a charm, tanks for all the help.

  • #14
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by felgall View Post
    It was scheduled to be unsupported completely by browsers that follow HTML 5 but too many antiquated pages stil use it and so HTML 5 has it listed as still allowed so as to provide for pages written before 1997 that haven't yet got round to removing it.
    I have a hard time believing this sans evidence that a newly minted formtarget attribute would be in the spec if there was an intent to remove the form-based target attribute or it was deprecated by the spec editors. The attribute doesn't appear in the "obsolete" section of the spec either.

    Quote Originally Posted by felgall View Post
    Many browsers did remove support for it on the form tag and only support it on the <a> tag even though it has been obsolete since 1997.
    I'm curious to know what those "[m]any browsers" are. As I demonstrated in a previous post, the latest version of every major browser available on Windows and WIE9 exhibit support for the form-based target attribute. The only major browser I can't test is Safari.

    Quote Originally Posted by felgall View Post
    Inmplementing a target attribute only removes one of the three choices that people's browsers offer for where to open links and so are annoying to those people where the choice they wanted is the one removed and they don't know how to turn it off. As it no longer works on forms in all browsers (even assuming that the browser owner hasn't turned it off) you can't reliably use it there.

    Only use the target attribute if you want to annoy your visitors and drive some of them away.
    Agreed that it's bad to use it on links, in general. This issue involves a form button though—not a link—which I last proposed opening in an iframe, not a new tab or window.

    Quote Originally Posted by resin View Post
    The iframe works a charm, tanks for all the help.
    Tanks for letting us know.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #15
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by felgall View Post
    The target attribute was removed from the HTML 4 spec that came out in 1997. It was scheduled to be unsupported completely by browsers that follow HTML 5 but too many antiquated pages stil use it and so HTML 5 has it listed...
    A lot of mistake were made in HTML4 which necessitated HTML5. You can call it backtracking or learning from experience, depending on your outlook, but lets not advocate for outmoded HTML4 concepts anymore. HTML5 is here to stay, like it or not.

    In web standards, the most important factor is not what some spec says, but what the machines your clients are using actually do when told. If that machine is IE7, then W3 standards don't mean diddly. If a browser supports HTML5 and the page is written in HTML5, then HTML4 rules don't mean diddly...

    I too would really appreciate you supporting such generalized accusations about browser compatibility with specifics: don't say "some don't" say "x,y, and z have issues".

    if your examples are lame (which is why i cynically suspect you say "some"), then so is the point. Like how you STILL claim "prompt()" can kill JS "in some browsers", when "some" really means 5-version old copies of the tiny minority browser Opera, a problem affecting far fewer folks than even IE6...
    You even have that outdated screen shot of that obsolete browser's prompt() dialog as your thumbnail, almost bragging about how you use obsolete and un-supported browsers...
    Last edited by rnd me; 01-21-2014 at 09:05 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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