Post form submission without page refresh using jQuery/AJAX or other method

  • Profile Image
    earthsky
    Asked on May 22, 2013 at 03:37 PM

    Good day,

    I am trying to figure out how I can post a form submission without refreshing the page or redirecting to the standard Thank You pages. Ultimately I want to have the form submit with on-page thank you message. Currently, I'm using the source code version of the embed and have everything looking and functioning the way I'd like, but cannot get past this last hurdle. I've looked at numerous other articles on posting with AJAX but I cannot seem to get it to work with JotForm.

    My form ID is 31326450739151.

    Can you please point me in the right direction? 

    Thanks so much,

    Chris

  • Profile Image
    KadeJM
    Answered on May 22, 2013 at 04:19 PM

    Hi Chris, it seems to me that you basically want a standstill form that doesnt refresh or redirect on submission so instead it just displays a custom thank you message that is populated into the page itself when the form is submitted if I am understanding you correctly that is.

    As far as I know it is possible to cancel out the ()onclick event for the button which will put a stop to that but then your form would be rendered as void and not submit due to this action. Our Forms are comprised of javascript and jquery so when they are submitted this would break that ability. So because of this it may cause other problems and the form may not work properly. Therefore I'm not too certain this would work but if it is possible in a way then it would require getting your hands dirty with some programming and the form's source code to rebuild the form to work this way.

    If there is something we can figure out in regards to this then we will get back to you as soon as we can or perhaps one of my more experienced colleagues might have a feasible solution that might work.

    A suggestion however, that I can request as a Feature Request on your behalf though would be that I can request an improvement to the Form Submission that would allow the form to populate a Thankyou Message above or below or in front of the form if you would like.

  • Profile Image
    earthsky
    Answered on May 24, 2013 at 04:22 PM

    Hi Kade,

    Thanks for the response! I can now submit the form without a page refresh using the jquery shorthand for an ajax post, $.post (documentation is here http://api.jquery.com/jQuery.post/):

    $(document).ready(
      $('#31326450739151').submit(function(e) {
        var formdata = $(#31326450739151).serialize();
        $.post('http://submit.jotform.us/submit.php', formdata);
        e.preventDefault();
      });
    });

    The only problem now is that I can't pass along a success function because it doesn't appear that submit.php sends a response. Do you have any thoughts on how I might accomplish this? For example, after receiving a success response, I'd like to pop up a "Thank you" alert and perhaps run another function. 

    You can see my form in action here:

    http://esdev-en.earthsky.org/todays-image/the-milky-way-stretching-over-oregons-crater-lake
    u: jftemp
    p: 13ESjf!

    Any help will be appreciated.

    Thank you!

    Chris

  • Profile Image
    EltonCris
    Answered on May 24, 2013 at 05:55 PM

    Hi Chris,

    While Kade isn't around, I am forwarding your request to our team with a good jQuery background but I couldn't promise you anything yet since this is somewhat a little beyond our scope but we'll do the best to find a workaroud if there really is.

    In addition, I just would like to present to you something related to this without using jQuery scripts. An example is seen here: http://idarktech.myartsonline.com/jotform/popup/test_jotform_popup.html

    The guide can be found here: http://www.jotform.com/answers/177481-Pop-up-Thank-you-and-redirect-to-complete-submissions#177699. Feel free to check if you like.

    We will get back to you with this if we found something that fits your needs. Thanks and regards!

  • Profile Image
    earthsky
    Answered on May 26, 2013 at 09:18 AM

    Hi Elton,

    Thank you for the response! I have a temporary fix in place, but if you can please let me know when you hear back from your jQuery experts I'd appreciate it. 

    From the looks of it, one of your support team was running some tests yesterday but I haven't heard anything back. Please advise.

    Thanks again,

    Chris

  • Profile Image
    jonathan
    Answered on May 26, 2013 at 11:52 AM

    Hi Chris,

    Our colleague will provide you an updated feedback once they are back online.

    Thanks.

  • Profile Image
    EltonCris
    Answered on May 27, 2013 at 09:09 AM

    @Chris

    My apologies but I haven't heard back from them yet, they're proabably busy so I think I have to give this a shot but can't promise you anything in return as I am not quite handy when it comes to jQuery but would love to give this a try. I will check the code later today and get back to you as soon as I've got one. 

    By the way, I take an initial test on your form and it seems you got it a bit already? Tried submitting with your form and it shows "THANK YOU FOR YOUR SUBMISSION" message. Is this the desired function you are trying to create? It looks perfect to me :)

    Thanks!

  • Profile Image
    jeanettebmz
    Answered on July 03, 2013 at 09:52 PM

    We are very proud to announce that our team of developers have released Jotform Webhooks,  this feature would replace Send Post Data + Custom URL Thank You Page workaround in order to help you transfer forms data to your own database using your own script codes

    Please find out more about it here

    Cheers!

  • Profile Image
    markashton
    Answered on July 05, 2013 at 10:37 AM

    Hi,

    @earthsky .. did you crack this? Could I see a form working and what was the finished code you used.

    Thanks in anticipation ;-)

    @Chris ... do you know Chris ... this is a long thread but is as clear as mud unfortuantely

    I would like to achieve the same thing.

    Many Thanks

    Reagrds Mark

  • Profile Image
    rggrtb 
    Answered on February 28, 2014 at 10:37 AM

    hybyu