Question

I’ve got a form that has a “detail” section iframed in. Take a look here:

[URL Removed]
click add item,

then you’ll see that you can type in the first 5 fields and hit update. These will save as expected.

Try adding in some data into the “vintages” section (fill in all fields) and click “Save and Add”. This will save your edit and add a new record for editing. This is iframed in.

Now. My issue is that if I complete the first 5 fields, then type in the vintage information but do not click “save and add”, only clicking “update” it won’t submit the iframe and the data contained within will be lost.

Any suggestions on how I can make this outform also submit the inner form.
I’ve already tried this:

<script>
$(function(){
   $('#item_edit').submit(function(){
       alert('try');
 $('iframe').first().contents().find('.form').submit();
   });
});
</script>

In fact this is on the form at the moment and it doesn’t work. It will run but it doesn’t want to submit. In addition, if I manually run $('iframe').first().contents().find('.form').submit(); then it will submit and save the contents of the detail/vintage form. So I think the parent form submits before the child form has a chance too.

Any ideas on how to avoid this?

Jason

Answer 1

The page you linked to has disappeared, so I can’t go look at your complete example. But here are a few thoughts to consider…

When I do this kind of thing, I generally avoid building the sub-form in the iframe. Instead, I put all the fields into a single form. New fields are added dynamically, if necessary, all in the same form.

You can then submit the entire form as whole if you need to — that part becomes easy.

If you need to submit just a portion of the form, you can “cherry-pick” the fields that you want at submit time.

To do this kind of “cherry-picked” submit, just create a new hidden iframe with a form in it; then use [jQuery’s .clone() function] to copy the fields you care about, and stuff the copies into your new hidden form; finally, just submit your hidden form.

here’s a quick example that was cobbled together from some old code I have.

---

An alternate approach

Maybe you could combine an aspect of my approach with your code as it is today… You’ve already got your sub-forms in their own iframe — and that all works. The problem is that you need your sub-form data to get sent up along with your main form data.

So you could use clone() as I described above — but in the opposite direction. When the update button is clicked, just clone() everything that’s inside your iframe, and dump it inside a hidden div that’s inside your main form. Then go ahead and let the form submit, taking all the data with it. Just make sure that your element names are unique across the two forms (since everything will eventually end up in the same form).

Maybe something like this:

$(function(){
   $('#item_edit').submit(function(){
       alert('try');
       var frmContents = $('iframe').first().contents().find('form > *').clone(true);
       var el = $('<div></div>');
       el.append( frmContents );
       el.css('display','none');
       $('#item_edit').append( el );
   });
});