7

I am trying to submit some files to my database with a form. The form has a target of a hidden iframe. When it finishes loading, i was wanting to show a message.

 $("form#formPost").submit();
 customFunction();

This example seems to not finish submitting before firing off customFunction(), which is very bad for what i was designing.

Is there a way to do something which will fire when it completes sending the data? I was looking around on stackoverflow, and there arent many posts directly about this. I feel that i would have to go into the target iframe and execute the code in there when it is ready, etc. Is there a way to make it do as i want?

options i have tried:

 $("form#formPost").submit(function(){ customFunction(); });
Fallenreaper
  • 10,222
  • 12
  • 66
  • 129

3 Answers3

13

Coworker Created a function which does just this.

function SubmitWithCallback(form, frame, successFunction) {
   var callback = function () {
       if(successFunction)
           successFunction();
       frame.unbind('load', callback);
   };

   frame.bind('load', callback);
   form.submit();
}

This function takes the form you are submitting, the forms target iframe, and an anon function which will be executed on success.

Fallenreaper
  • 10,222
  • 12
  • 66
  • 129
  • 6
    the guys who not use jQuery; use #5: frame.onload = null #8: frame.onload = callback; – mhdrad Oct 11 '14 at 18:25
  • Hello Fallenreaper, I'm trying to implement this in a similar situation I have. Being fairly new to js, could you explain how someone would implement this? I am trying to get my code to wait for the form to submit, then redirect the user to a new page. EDIT: Here is actually a question i put up for this issue: https://stackoverflow.com/questions/48269685/sharepoint-2010-form-submission-navigation – MattCucco Jan 15 '18 at 21:01
  • In my example here, the form will change the frame's location, so when the form submits, it would change the frame instead of the host page. Then you can see there is a bound onload for the frame which will execute the SuccessFunction you defined. – Fallenreaper Jan 16 '18 at 02:20
  • So just to clarify (apologies I am still learning the in's and out's of web dev), I would need to attach this function to the 'save' button and define a success function (which could actually be my PreSave Function i believe). Am i following correctly? Also what would I need to provide for the other parameters as well? Perhaps you could point me to a good article on this stuff ( I have never touched these things before). Again thank you for your help! – MattCucco Jan 17 '18 at 12:55
  • This function takes 3 parameters, form that you are submitting, a frame on the page, and your success call back. In your code, you would call this function. This use case is attached to anything clickable not related to the form itself. An anchor tag for example. The form and frame are jQuery objects in this case. This isnt a pre-submit function, the success function would be what happens AFTER the call is successful. – Fallenreaper Jan 17 '18 at 18:28
4

If you submit the form in the traditional manner, you are essentially saying "I am done with this page. Here's a bunch of form data for you, web server, to render my next page". The web server takes the form data and returns to the browser the next page.

If you do not wish a page reload, you can submit your form using Ajax. That is quite straightforward with jQuery:

http://api.jquery.com/jQuery.ajax/

Using Ajax, you have well-defined events when the submission completes, when it is successful, and when it errors.

I would not recommend the approach of targeting a hidden iframe. Ajax is better suited for this type of processing.

UPDATE

Here's an example of how you might structure the Ajax

<form id='myFormId'>
<!-- Form fields, hidden, file or otherwise -->
</form>

var formVars = $("#myFormId").serialize();
$.ajax({ url: ajaxUrl, cache: false, type: 'POST', data: formVars, 
    success: function (data) { handleSuccessCase }, 
    error: handleAjaxError });

UPDATE 2

Based the comments in https://stackoverflow.com/a/5513570/141172

You can try:

var formVars = $('#myFormId').serialize() + '&foo=' + $('#id_of_your_file_input').val()

Alternatively, you can try the plugin you suggest in your comments, which is the same solution as in the linked answer above.

Community
  • 1
  • 1
Eric J.
  • 147,927
  • 63
  • 340
  • 553
  • 2
    Did you miss the whole thing about the form targetting a hidden iframe? – Niet the Dark Absol Sep 18 '12 at 18:43
  • 4
    No, I did not. That is a kludgy way to accomplish what is better done with Ajax. – Eric J. Sep 18 '12 at 18:44
  • If i were to do it with ajax, how would i accomplish the different hidden or file type elements within the form? – Fallenreaper Sep 18 '12 at 18:47
  • i use ajax for most other things, and like ajax, my goal was to on success, carry out the function. I just was not sure how to do it. If you can help me set up an ajax call which will send N hidden and N file elements to some url, that might work. – Fallenreaper Sep 18 '12 at 18:49
  • it is an every expanding list of contents so i cant assume a specific numebr. – Fallenreaper Sep 18 '12 at 18:49
  • 1
    @EricJ. I dont mean to spam. If this is possible. Can you show me an example of how to convert my form which contains 2 hidden elements and 2 file elements to a proper ajax request that would be great. I keep running into roadblocks when it comes to uploading files via ajax. – Fallenreaper Sep 18 '12 at 19:14
  • Added an example. I have not used `serialize()` with file elements, but I assume it should work just fine. – Eric J. Sep 18 '12 at 19:26
  • Thanks A lot Eric, If i can get it working, ill recoupe that downvote you got and give you the proper answer points. ;) – Fallenreaper Sep 18 '12 at 19:54
  • @EricJ. I was trying to do as you said, and when you did serialize() it did not serialize the file element, only the hidden element. Confirmed that the form did contain the input type=file. – Fallenreaper Sep 18 '12 at 20:01
  • @EricJ. I was looking at some thing, was thinking this might work. I am about to pass out, but i figured you might be able to give it a go? http://jquery.malsup.com/form/ seems to talk about http://malsup.github.com/jquery.form.js which wraps a form up and does some special magic then submits. I think it might work for files as well, but i need to confirm. Ill double check this link and write up some test cases tomorrow to see if they work. – Fallenreaper Sep 18 '12 at 20:13
  • Looks like malsup should work, but there's another alternative too. Updated my answer. – Eric J. Sep 18 '12 at 23:11
  • Im going to check and confirm. I was just confused because it was sending the path up. I was thinking it was going to send up a byte array. In that case, it doesnt do as requested. Request.Files has no byte array contents. – Fallenreaper Sep 19 '12 at 13:49
  • Looking at this, it does not work. It passes up the string of the source of the file, but not byte[] data. – Fallenreaper Sep 19 '12 at 14:55
1

Perhaps the easiest thing to do is attach an onload event on the iframe. When the form has finished submitting, the event will fire.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • in the main page, i tried to do $("frame#hider").ready(function(){...}); and that wasnt really working. – Fallenreaper Sep 18 '12 at 20:05
  • i tried and that didnt work. I mean, i guess i could try the jquery equivalent too to see if that works. $().onload but what i did try was: document.frames["imageCollector"].onload = function () { top.document.frames['formDesignContents'].location = "WebFormDesigner.aspx?fm_id=" + top.SELECTED_FM_ID; }; – Fallenreaper Sep 19 '12 at 14:53
  • 1
    coworker took a look at it, and wrapped up your idea within a function. – Fallenreaper Sep 19 '12 at 17:21