Submit a form and close DIV in ONE click?

JavaScript
1

Hi ALL,

I’m using a jQuery driven method to display some div’s (http://defunkt.io/facebox/) combined with an ajax form submitter.
The form is displayed within the Facebox ‘window’ and when the submit button is clicked, the progress and the result of the submission is shown on the ‘main’ page (behind the Facebox window). I.E. :


?>
<form action="ajax/ajaxupload.php" method="post" name="standard_use" id="standard_use" enctype="text/plain">
<? // INPUT TEXTBOXES HERE
?>
<input type="submit" class="submit_button" value="<?=$database->translator('label_submit', $session->language, 0, 0);?>" name="submit" onclick="ajaxUpload(this.form,'ajax/ajaxupload.php','upload_div','<br /><img src=\\'images/loading.gif\\' border=\\'0\\' />','<img src=\\'images/error.gif\\' border=\\'0\\' /> '); return false;" />
</form>

My question is : is it possible to CLOSE the facebox popup window (the form above is within that window) when the submit button is clicked?
I’ll post ALL the code of the facebox ‘plugin’ (facebox.js) if you need in order to help me.
Thank you advanced.
Regards

2

Typically a script is not allowed to close a window that it wasn’t responsible for opening.
The most guaranteed way to close a window is for the page that opened the window to also have a function to close it. That lets you call that function, even from the child window itself.

3

Thank you for your reply. Actually, it’s NOT a window, it’s a DIV :


<div id='form_id' style='display:none'>
<form action="ajax/ajaxupload.php" method="post" name="standard_use" id="standard_use" enctype="text/plain">  
<!-- INPUT TEXTFIELDS HERE -->
<input type="submit" class="submit_button" value="SUBMIT" name="submit" onclick="ajaxUpload(this.form,'ajax/ajaxupload.php','upload_div','<br /><img src=\\'images/loading.gif\\' border=\\'0\\' />','<img src=\\'images/error.gif\\' border=\\'0\\' /> '); return false;" /> 
</form>
</div>

It is shown when a user clicks on a link (same page) like :


<a href='#form_id' rel='facebox'>LINK</a>

I’d like to know if it’s possible to close the div AFTER submitting the form?
Thank you advanced.

4

Yes it is, just set the display of the div back to none.

5

Would you help me to add this JS function? I’m not too good in client side scripting… I can post the javascript file which controls the popup divs…

6

First, remove the scripting code from within the midst of your HTML.


<div id="form_id" style="display:none">
    <form id="standard_use" method="post" enctype="text/plain" action="ajax/ajaxupload.php">
        <!-- INPUT TEXTFIELDS HERE -->
        <input type="submit" name="submit" class="submit_button" value="SUBMIT" /> 
    </form>
</div>

Then move the script to the end of the body, just before the </body> tag.


document.getElementById('standard_use').onsubmit = function () {
    ajaxUpload(this.form, 'ajax/ajaxupload.php', 'upload_div', '<br /><img src="images/loading.gif" border="0" />', '<img src="images/error.gif" border="0" />');
    document.getElementById('form_id').style.display = 'none';
    return false;
};

You’ll notice that some tidying up of the syntax has been performed too.

That should be something like what you need.

7

Now we’re getting closer :slight_smile: I really appreciate Your help in this!
I had to modify the form tag like :


<form id="standard_use" method="post" enctype="text/plain">

I removed the action part cause I don’t want the page to ‘go’ to the file ajax/ajaxupload.php (it’s supposed to process the post data, not to display anything except the results…)
The result : the div is hided on submit (which is good) but the form isn’t processed :frowning:
Any ideas? THNX advanced.

8

Yes indeed. The context of the this keyword is now the form, instead of an element of the form, so you should use this in the place of this.form instead.

9

Yeah, that sounds logic and I’ve already tried that. The result was the same… :frowning:

10

Okay, it could be that you need to go back to using:

'<br /><img src="images/loading.gif" border="0" />', '<img src="images/error.gif" border="0" />'

instead of

'<br /><img src="images/loading.gif" border="0" />', '<img src="images/error.gif" border="0" />'