SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    a fresh, new start... dujmovicv's Avatar
    Join Date
    Aug 2006
    Location
    Earth
    Posts
    559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    submit a form and close DIV in ONE click?

    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. :
    PHP Code:
    ?>
    <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->language00);?>" name="submit" onclick="ajaxUpload(this.form,'ajax/ajaxupload.php','upload_div','&lt;br /&gt;&lt;img src=\'images/loading.gif\' border=\'0\' /&gt;','&lt;img src=\'images/error.gif\' border=\'0\' /&gt; '); 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

    Full time ADMIN - art community
    Part time coder - dsign

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dujmovicv View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    a fresh, new start... dujmovicv's Avatar
    Join Date
    Aug 2006
    Location
    Earth
    Posts
    559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply. Actually, it's NOT a window, it's a DIV :
    Code:
    <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','&lt;br /&gt;&lt;img src=\'images/loading.gif\' border=\'0\' /&gt;','&lt;img src=\'images/error.gif\' border=\'0\' /&gt; '); return false;" /> 
    </form>
    </div>
    It is shown when a user clicks on a link (same page) like :
    Code:
    <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.

    Full time ADMIN - art community
    Part time coder - dsign

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dujmovicv View Post
    I'd like to know if it's possible to close the div AFTER submitting the form?
    Yes it is, just set the display of the div back to none.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    a fresh, new start... dujmovicv's Avatar
    Join Date
    Aug 2006
    Location
    Earth
    Posts
    559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

    Full time ADMIN - art community
    Part time coder - dsign

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dujmovicv View Post
    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...
    First, remove the scripting code from within the midst of your HTML.

    HTML Code:
    <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.

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    a fresh, new start... dujmovicv's Avatar
    Join Date
    Aug 2006
    Location
    Earth
    Posts
    559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post

    That should be something like what you need.
    Now we're getting closer I really appreciate Your help in this!
    I had to modify the form tag like :
    Code:
    <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
    Any ideas? THNX advanced.

    Full time ADMIN - art community
    Part time coder - dsign

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dujmovicv View Post
    The result : the div is hided on submit (which is good) but the form isn't processed
    Any ideas?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    a fresh, new start... dujmovicv's Avatar
    Join Date
    Aug 2006
    Location
    Earth
    Posts
    559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.
    Yeah, that sounds logic and I've already tried that. The result was the same...

    Full time ADMIN - art community
    Part time coder - dsign

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dujmovicv View Post
    Yeah, that sounds logic and I've already tried that. The result was the same...
    Okay, it could be that you need to go back to using:

    Code:
    '&lt;br /&gt;&lt;img src="images/loading.gif" border="0" /&gt;', '&lt;img src="images/error.gif" border="0" /&gt;'
    instead of

    Code:
    '<br /><img src="images/loading.gif" border="0" />', '<img src="images/error.gif" border="0" />'
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •