handling a forms action to open it using facebox

Question

I am using facebox to display a contact form, however when the user selects submit I would like the action which for this example I shall call action="contact_send.php" to also open in a facebox. Currently it is easy to open a link into a facebox by declaring the rel attribute as facebox e.g.

<a href="contact.html" rel="facebox">Contact</a>

This opens contact.html in a facebox window, I would however like the action of this form to also open in a lightbox, does anyone have any suggestions that might help?

thanks in advance -Ashutosh

WatsMyName · Accepted Answer · 2012-09-06T09:25:39.320

0

Your HTML FORM

<form id="contactfrm" method="post" onsubmit="return false;">
 ....your form elements
 <input type="submit" onclick="submitContact();" />
</form>

EDIT :

Your Script

Now use jquery to submit form

<script type="text/javascript">
function submitContact() {

    $.facebox(function() {

        $.ajax({
            data: { 'name' : $('#name').val(), 'message' : $('#message').val() },  //Make sure to change these values that reflects yours.
            error: function() {
                $.facebox('There was error sending your message.');
            },
            success: function(data) {
                $.facebox(data); // the data returned by contact_send.php
            },
            type: 'post',
            url: 'contact_send.php'
        });

    });

}
</script>

When you click submit button on your page, this code opens facebox and processes the variable you sent to contact_send.php page and returns the output from that page to the facebox.

edited Sep 06 '12 at 09:25

answered Sep 06 '12 at 05:50

WatsMyName

4,240
5
42
73

Already I am calling a function with submit button called as onClick="get_Code();" eg. Then how can i can i call both the Javascripts on the submit Button Click? – Dan Sep 06 '12 at 06:14
sorry, but ur answer does not solve my problem. Please Read my problem once again. – Dan Sep 06 '12 at 06:26
@lovesangprince, it should work I have used this code myself many times. You can call more than one function in onclick event like this `onclick="get_code(),submitContact();"` I understand your problem, you want to submit contact form without being page refreshed, i.e. the process should take in facebox itself – WatsMyName Sep 06 '12 at 06:34
Yes Likewise. I am submiting a form and passing values to "post_to_facebook_wall.php" page. And in "post_to_facebook_wall.php" page i am showing a link called "Post to wall" which calls javascript function in popups to post in Fb wall... Hence,All this things i want to happend in my first page. So i asked you,how can i call a page in facebox from current page when submiting a form from the current page? I hope now you understand my problem clearly.!! I am try for this app--> http://www.ebhasin.com/apps/apps-source/precussion/files/play.php – Dan Sep 06 '12 at 06:52
@lovesangprince, you meant in a first page you have form, when form submit is clicked, facebox should open and load the action page and data should be processed in the facebox? – WatsMyName Sep 06 '12 at 08:58
@lovesangprince, i have updated the answer. Please check it if that helps you – WatsMyName Sep 06 '12 at 09:27
Please click on this http://stackoverflow.com/questions/12281885/how-to-call-javascript-of-facebook-api-for-sending-dynamic-values-in-order-to-po#comment16476002_12281885 link to see my exact code/problem . Once you know my problem then please suggest some solution for this... – Dan Sep 06 '12 at 10:01
I am including these files on my header of the page --> -Is is that correct files which i required to call the facebox and ajax in my page in order to run your code ? – Dan Sep 06 '12 at 10:24
@lovesangprince Yes, and in regard to previous comment, your initial question and the current requirement are different. I have already answered what you have asked in the question. You just cant keep changing your question. – WatsMyName Sep 06 '12 at 10:28
Sorry. But your above code is not working. I have applied it here (http://ebhasin.com/approval/drumphp/files/test.php) check this. And Right click and select view source to see my code what i have used their.. Please suggest a solution for this. I think now i am nearby to my solution.. -:) – Dan Sep 06 '12 at 10:43
@lovesangprince, because you have `$.postToFeed` in `submitContact()` function, it should be `$.facebox` which calls a facebox – WatsMyName Sep 06 '12 at 10:57
i think you can only solve my second problem also. Please help for my second problem link: http://stackoverflow.com/questions/12281885/how-to-call-javascript-of-facebook-api-for-sending-dynamic-values-in-order-to-po#comment16476002_12281885 – Dan Sep 06 '12 at 11:24
Now for me there is a new requirement. --> How can I show my success/failure massage in the same Facebox?, Answer for this question is already written for me in this post by you. Can you please write it once. Becuse you edited that answer. – Dan Sep 07 '12 at 04:25
@lovesangprince, my function above displays error in same facebox. Look at this line `$.facebox('There was error sending your message.'); ` – WatsMyName Sep 07 '12 at 04:29
@lovesangprince, No I m not :) – WatsMyName Sep 07 '12 at 05:12
@lovesangprince. I have replied to another question as well please see it. If that helps upvote it and accept is as a solution. – WatsMyName Sep 07 '12 at 05:13

handling a forms action to open it using facebox

1 Answers1