Search jQuery

jQuery Forum

Getting Started

doobydude

Hiding div/iframe on form submit...

in Getting Started • 10 years ago

Hey all,

I have only just started using jQuery so am (hopefully) missing something very obvious...

I am trying to hide a div/iframe I after I click the submit button on a form - the submit just puts test data into a temp database at the moment and is working fine.

If you click anywhere on the page away from the popup then the div disappears - this is also what I want to happen when then submit button is pressed.

However, if you hit submit, the page submits fine but BUT the popup does not disappear and just stays there blank until you click away from the page again.

I have googled for a few hours and tried all sorts of examples and snippets to no avail, so I was wondering if anyone on here could point me in the right direction and tell me what I am doing wrong?

Thanks in advance.

Replies(3)

Godsbest

Re: Hiding div/iframe on form submit...

10 years ago

I could not find the configuration for the pop-up: most usually have an api you can play around with. Easy answer would be whatever is triggered when user clicks outside pop-up, fire that up after submission.

On closer examination, I see that you have an iframe that's loading the form in the pop-up. There is same origin restriction that will prevent you from controlling the pages js with js that's part of the iframe - I think. You could modify your code so that you take advantage of the jQuery UI dialog control and the mighty power of ajax.

doobydude

Re: Hiding div/iframe on form submit...

10 years ago

Hi, thanks for the reply.

I took out all code I had tried with regards to closing the popup in the onSubmit of the form, as I wanted to make it as unconfusing as possible for anyone willing to help.

With that said, I did already try what you said with regards to firing the same code in the onSubmit that is called when the user clicks away from the page (and it closes).

When I try this nothing happens and the popup remains in view and blank (submit still works to the database) but it does not hide itself.

I am new to jQuery (and java in general really) so I guess I am not not calling the correct jQuery code or it is a scope issue with the fact it is in a div/iframe maybe, as I cannot even get an alert() to trigger with the form onSubmit(), so it seems it isn't even being called.

Godsbest

Re: Hiding div/iframe on form submit...

10 years ago

Would this example be helpful: http://jqueryui.com/demos/dialog/modal-form.html

You could edit the modal form to meet your needs and instead putting the submitted data on the page you could use ajax to send it to your php script, which in turn will place it in your database as desired: http://api.jquery.com/jQuery.ajax/

Top Reply

Response title

Attachments

jQuery Forum

Hiding div/iframe on form submit...

Replies(3)

Re: Hiding div/iframe on form submit...

Re: Hiding div/iframe on form submit...

Re: Hiding div/iframe on form submit...

Statistics

Tags

Actions