Ajax feedback form using jQuery & Boxy plugin
I really enjoy jQuery and its capabilities. It is more lightweight than Prototype and it can do the same or even more. Also this library has lots of plugins and one of them is Boxy. Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.
Here’s an example, taken from feedback (contact us) form:
Lets start coding. First of all, we need to have a link. When we click it, it will create boxy window.
<a href="#" class="contact_us">Contact us</a>
Short javascript which do everything: handle contact us link click, creates boxy window, handle form submit, post form using ajax and set the respond to boxy content.
$(function() {
/* set global variable for boxy window */
var contactBoxy = null;
/* what to do when click on contact us link */
$('.contact_us').click(function(){
var boxy_content;
boxy_content += "<div style=\"width:300px; height:300px\"><form id=\"feedback\">";
boxy_content += "<p>Subject<br /><input type=\"text\" name=\"subject\" id=\"subject\" size=\"41\" /></p><p>Your name and/or email:<br /><input type=\"text\" name=\"your_email\" size=\"41\" /></p><p>Comment:<br /><textarea name=\"comment\" id=\"comment\" cols=\"39\" rows=\"5\"></textarea></p><br /><input type=\"submit\" name=\"submit\" value=\"Send >>\" />";
boxy_content += "</form></div>";
contactBoxy = new Boxy(boxy_content, {
title: "Send feedback",
draggable: false,
modal: true,
behaviours: function(c) {
c.find('#feedback').submit(function() {
Boxy.get(this).setContent("<div style=\"width: 300px; height: 300px\">Sending...</div>");
// submit form by ajax using post and send 3 values: subject, your_email, comment
$.post("feedback.php", { subject: c.find("input[name='subject']").val(), your_email: c.find("input[name='your_email']").val(), comment: c.find("#comment").val()},
function(data){
/*set boxy content to data from ajax call back*/
contactBoxy.setContent("<div style=\"width: 300px; height: 300px\">"+data+"</div>");
});
return false;
});
}
});
return false;
});
});
So thats all. I believe you will be able to create feedback.php your self. And here is the live demo of this feedback (a.k.a contact us) form
its really nice
Can you help me?
How can I open a eternal HTML(with a formular) inside?
Thanks!
Please describe more what do you want to do and where is the problem.
I want open a external html file like this:
<a href=”form.htm” rel=”nofollow”>Contact us</a>
and not includet in the JavaScript.
Try to read about Boxy here: http://onehackoranother.com/projects/jquery/boxy/
You should be able to do it with this
Boxy.load(url, options)This is exactly what I was looking for, however I am a newbie PHP dev, could you help me create an email script that has the call back?
Does this form validate all the inputs? It seems that it does not work in my firefox
It does not validate anything at all. You can validate using PHP and send properly feedback, for example “You forgot to fill you name, message was not send.”
hi Algirdas,
this form is not working in ie6.m not able to find the reason…totally freaked out…i donno y ppl r still using ie6…cant help it…plz help me wid tht.nice article.Thanks
Hello, I’m a noob in jquery and also php(never use before), can u show your feedback.php? I’m adding the boxy dialog into my asp.net project.
Regards,
Jason
My feedback.php is totally empty and it is not sending me messages at all. But you can use simple php mail(); function and send an email to your self. How to use mail() function, you can find at http://www.php.net/mail
I have a problem with boxy when I added on a website that contains prototype lib also.
Anyone know how can I fix this?
See you, thanks.
Tom
The best solution is to use only jQuery lib but if it is not possible you need to use the jQuery.noConflict() or jQuery.noConflict(extreme) – methods – these turn back control of the $ shortcut to any other library that wants it. You will then have to call jQuery methods using the “jQuery” function name instead of $.
jQuery is BY FAR the best library at “playing friendly” with other libraries – one of the big shortcommings of Prototype is the way it takes over $ with no way of getting it back.
I added before the jQuery.noConflict(); but it didn’t work.
I don’t know who can I resolv this conflict.
See you, thanks
Tom
nice work, i like it. but i am unable to load contant of html file both times (first time while loading , 2nd time after submit)
i try to 2 days. can you help me writing code for that.
This is a nice workhorse script. However I can’t seem to get a hand of it to fit into my existing web project design.
Problem:
I’v got a parent jsp page. Xx.jsp, with button to load yy.jsp using
Boxy.load(yy.jsp?params,{options}).
When yy.jsp(contains struts html:tag/form objects with div tags stripped of the mother html and body tag)
loads like it should. Everytime the form submits tho, the boxy content and the parent window disappears
Like the target success page is being loaded onto the
Parent window( this should load into the boxy display).
Required:
How do I get this to work like your ‘contact-us’ demo does.
Many thanks
Hi,
I would be much appreciate if you could send me the complete script to nuwaninfo@gmail.com as it would be much easier for me to understand the working of your code.
Regards,
Nuwan
Hello, I came across this post while searching for help with JavaScript. I’ve recently changed browsers from Chrome to Mozilla Firefox 3.1. Now I seem to have a problem with loading JavaScript. Every time I go on a site that requires Javascript, my computer doesn’t load and I get a “runtime error javascript.JSException: Unknown name”. I cannot seem to find out how to fix it. Any help is greatly appreciated! Thanks