Good sample.

How can i submit a form modal?
When open modal form i need submit and refresh the window’s father. I using IFrame.
Thanks.

@Antonio

You could try parent.location.reload().

You can do many things, including submitting a form, from within a modal box. Once the form submission has occurred or is complete, you could then do parent.location.reload() from within the iframe.

Of course, this is my best guess since I do not know what your code looks like.

you can view the tutorial
http://jquery.com/demo/thickbox/
any one can create modal form-submission.

@Niladri

You are correct, any one can create a Thickbox modal. The link you mention is already included in the post in the fist sentence of the Thickbox section. Thanks for including it in your comment. Somebody, other than yourself, might have missed it.

Also, the Thickbox demo in the link you mention doesn’t include how to submit the form or do the confirm return demonstrated here. It’s just a basic modal form without the guts.

Hi,

Thanks for posting! Just what I was looking for.

I like your Thickbox one best – the javascript 1.0 one was boring like you said, but also annoying in that it popped up at the top of the browser window (Firefox 3.5). I like how the other two showed up in the center of the browser window.

I used this approach to submit a form. When return false; is used, the function gets appended to the submit each time its called i.e., if u press enter to submit the first time, the function is called once. If u submit using enter the second time, the function is called two times and so on. I couldn’t figure out why this is happening. Please let me know if I’m doing something wrong.

@William
Thanks. This was fun to put together.

@Kumar
Without seeing your code, I would not know why your issue is occurring. If you have an online example of it, please send the link.

I’ve replied to ur mail with a sample

Hi,
Does your code(Jquery dialog) work on Safari? I tried your sample code with Safari and Chrome and it doesn’t seem to be working. But it is working in Safari.

regards,
Davidson

sorry…I meant …’but it is working in Firefox’…

@Davidson
I am on a Mac OS 10.5.8 Leopard with Safari 4 and it works fine.
No Chrome for my Mac. I will check that on a PC later.

Thanks for your reply. I tried this in Windows Vista OS on Safari and Chrome and the dialog doesn’t seem to be displayed. I am just using your sample code as it is. Any helpful info will be appreciated..

regards,
Davidson.

Are you running the demo that’s in the post or are you running it from your own server?

When I get the opportunity to check it in Vista, I will. I only have XP and Mac at home.

I am running it from my own server. But its just a copy paste of your code. I just tried on XP/Safari and that too is not working.

regards,
Davidson.

If the demo in the post above works fine in all your browser tests then I don’t know what’s going on with your server.

I just downloaded the sample code in the post, moved it to my server and it ran fine in FF/Mac and Safari/Mac. I changed nothing in the sample code.

Hi Jen,
I just realized that the lightbox javascript and css in my script has conflicts with jquery scripts and it is now working after removing them from my scripts. Thanks for your help and I really appreciate it.

regards,
Davidson.

@Davidson

Great, glad you figured it out.

Very helpful for beginners like me. Thank you author.

My Form has multiple submit buttons. How can i target which one was clicked

Superb

Jen I love your bits!!

Great script

[...] Modal Confirmation Dialog on Form Submit: Javascript, jQuery UI, and Thickbox Varieties – jensbits.c… – [...]

To those who are having trouble, I made the mistake of not including the Dialog code in my jQuery UI build. I had only included the core functionality of jQuery UI so I had to get a new version with the Dialog functionality in the jquery-ui-1.7.2.custom.min.js file.

Silly error, but maybe it will help someone.

@Ryan
Thank you. It's not silly. It can be easily overlooked. I had to visit the jQuery UI page several times before I got the hang of what I could and could not do there.

i m model i m happy

Hi, Great tutorial and very well put together. My only problem was that when using the jquery ui dialog method ,I couldnt set a name or id value for the <input type="submit"… tag.

Doesnt seem to work if a name or id value is attached. Any ideas? Cheers!

@Stuart

I added an id and name attribute to all the input submit tags in the demo and had no problems. You can run the demo above and view source to see that they are added now.

So, I don't know what is the issue is unless you have some other js on the page that may be interfering with it.

Thanks for the try Jen, must be something my end as I was trying to use it for

if(isset($_POST['submit'])){
//do something
}

But I dont seem to be able to get it to work.

@Stuart
Could you put in a hidden field to test for form submit instead?
<input type='hidden' name='formSubmit' value='formSubmitted' />
if(isset($_POST['formSubmit'])){
//do something
}

Great idea, cheers Jen.

Thank you for this, you are a life saver!!!

Bob

Very nice and useful tutorials for web designers,
Thanks for posting.

OK, I can see it works. The dialog is opened whenever submit is executed. How can you use the same submit event two times differently?

@Loke

It is not the same submit function. The form on the page has a submit button that opens the dialog box. The dialog box submit button submits the form. Two different submits.

[...] Modal Confirmation Dialog on Form Submit [...]

Just one tip, don't name your button "submit" as it will conflict with the submit function and cause an error. 2 HOURS to find this conflict!!!!!
hope the next person finds this usefull.

[...] Modal Confirmation Dialog on Form Submit [...]

Hi, im hopeing osmeone can help, i must be missing something here…
I have created a form, and on this form, i have hidden some elements on the page, which i then display in the thickbox.

When i hit the form submit, it submits everything fine, but when i put the form submit button inside the thickbox, pressing it does nothing at all. is there something i need to add to make the submit button work from within the thickbox?

Sorry for being thick

@Richard

Did you download the demo zip file? If you just pulled the code from the post, that would explain the behavior you are seeing.

Hi Jen,

Thanks for the response, I myself a forum leader at creativecow, so i know how unrewarding replying to some people can get…

in answer to your question, No, I created my own page, put the content at the bottom of the page that i wanted to submit and it all worked perfectly. Then i called said content into the thickbox, its the same button and everything, but the submit doesnt work.

Then i tired adding an onclick rule… document.form1.submit()but it is not submitting correctly. ( i think it is getting to the page it is supposed to be, but the string seems to be muddled judging by the failure page) im not sure if this is because it is not submitting as POST, or what, but its really frustrating the bejesus out of me.
you can see my page if you like at
http://www.ms-solutions.co.uk/help/cortexx_Tickets3.html
If i can get the submit to function correctly from within the thickbox i could finally go to bed.. lol.

@Richard

Just to make I understand…you want the form data (ticket charges) AND the payment data sent at the same time to the same page?

If so, I got this to work by making the thickbox form items a separate form and submitting them both.

Jen,
yes, i wish to take the info from ticket numbers and ticket prices, and then send them along WITH the payment details. All this information sends if you submit it at the bottom of the page, but the introduction of the thickbox seems to prevent the info from sending.
Any ideas you might have to send both bits of info would be greatfully recieved.

sorry… let me try to be clearer.

All the information is in form1.

if you scroll to the bottom of the page, and edit any of the info, and press submit, it all submits.

If you press show, at the top of the page, it opens thickbox, and inside thickbox, it has some of the elements from the bottom of the page in form1 displayed.

If you edit anything in thickbox, and then close it, it updates the infomation in form1.

BUT. if you press submit from within the thickbox, it does not submit the form. if goes to the submit link, but the information in the form is not submitted.

Thanks

@Richard
I got this to work by making the thickbox form items a separate form and submitting both form1 and form2 which contains the thickbox items.

could you show me Jen?

@Richard

With all due respect, this goes beyond what I presented in the tutorial.
I made the form items in the thickbox a separate form and submitted them both at the same time as the other form elements.

Hi Jen,

Yes i fully appreciate this, but where i am getting confused is how you submitted the form elements. What i am doing in the current page which i linked here, it submits, but it does not send any of the form data with it which is where i am getting confused. did you just use document.form1.submit();document.form2.submit()? It all looks to work perfectly as i need it, except the data ins not transfered when i submit from within the thickbox. Do i need to add all the variables in to the jsQuery also? Sorry, im not trying to be a pain.

@Richard
All I did was put the thickbox items on your page in form2. I closed form1 above form2. And, yes, I just added it as such document.form1.submit();document.form2.submit();

I then output the form elements to a php page so I could see them. They were all there.

Jen,

Ok, thanks alot, i dont know what i am doing that is so wrong then, but it is not working like that for me :'( It submits blank everytime.
Thanks for looking

i think everything you are saying works exactly as it does here for me, except when you press the show button, the form elements appear in the thickbox, and thats when submit doesnt send any form data across

Probably because the thickbox is pulling them out of the flow of the document (and form1). Which is why I put them in their own form and submitted them separately. All the form elements appear on the action page.

http://www.jensbits.com/

Jen,

thank you SO MUCH for your time, but this is exaclty what i am getting. In your posted example, the php is only posting the array detail from the infomation inside the thickbox element. Although you have added a new form, the id's of both these forms are form1. If you change the ids to form 2, you can have either the element arrays from the thickbox, OR the element arrays from the backpage, not both arrays together, its just not working.

@Richard

Here you go.

http://www.jensbits.com/

You are taking the form elements out of the flow of the parent. You have to put the values back in before submit.

Also, this page should be https (secure page) if you are going to collect and submit the credit card number to another page.

Hi Jen,

Yes thanks, i went down a similar route before you posted of
input type="hidden" name="customer" value="" in the top area and then
div id="myOnPageContent"
input name="customerval" type="text" id="customerval" value=""
onkeyup="document.form1.customer.value=this.value"
div in the thickbox.

Thanks alot for your time though, i do appreciate it, of course i do realise i need to do more with the security, i am only testing out layout and design stuff for now, the info inside the page is all just test data supplied by paypoint that anyone can access from anywhere…
Take care and thanks very much

I would be interested to see an example firing the modal confirmation dialog on the submit() event handler. As I've been trying to get it working for the last few hours and and have failed, as initiating my dialog in the submit() event it seems that it is unaware of its parent, so scope prevents me from continuing with the form submission event.

@David
Can you post a demo link?

Jen,

Thank you so much for this tutorial! After fighting this dialog thing, i came across this page and was able to make it work like i wanted within 10 minutes!

1 problem, however. I am going from jEditable to PHP script that pushes data info to jQuery UI Dialog, but when instead of submitting it i hit Cancel or Esc, it goes away like it should, but I end up with an empty table cell where the data used to be before.

This is somehow jQuery UI Dialog related, because I had it working before with SimpleModal. The funny thing is what with SimpleModal there was also a problem on Cancel/Escape. In that case the data pushed by PHP script into the dialog would stay in the table cell, instead of showing unchanged contents.

@Igor

It's hard to diagnose without seeing some code. If you have a test page, send me the link and I'll take a look.

@Jen,

Thank for you quick reply. Unfortunately you will not be able to get to the page from outside the company firewall, but i did post a question on StackOverflow outlining the problem. It also includes my code:

http://stackoverflow.com/questions/2641743/jquery-jeditable-and-jquery-ui-dialog-re-populating-table-cell

@Igor
I took a crack at it on the StackOverflow site. I'm interested in how you finally solve so please let me know how it turns out.

Great example! I'm using this for one of my forms, but I've run into a big problem. I'm using jquery's validation on the form and when the user clicks the submit button, I don't want the dialog window to display if there are errors on the form. I'm trying this:
$(function() {
$('#form').validate();
$('#verification_dialog').dialog({
autoOpen: false,
buttons: {
"OK": function() {
document.form.submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$('#form').submit(function(){
if (('#form').valid()) {
fillDialog(); // this puts form data in the dialog
$('#verification_dialog').dialog('open');
return false;
}
});
});

When I use the if statement, the dialog window never displays and the form submits. When I take the if statement out, the dialog window displays when I click submit, but unfortunately, it even displays if their are errors on the form.

Any suggestions?

@Jeff

Do you have a live test page you can send me? I can duplicate this locally because I don't have your validate function.

You can send the link via email if you prefer.

jen (@) jensbits (dot) com

Excellent tutorial. Just wanted to say thanks for taking the time to write it!

Thank you for this! I'm a newbie to jquery and this really helps to pick it up.

Very nice and useful information for web designer. Thanks for sharing thin very informative information.

[...] Modal Confirmation Dialog on Form Submit: Javascript, jQuery UI, and Thickbox Varieties [...]

[...] Modal Confirmation Dialog on Form Submit: Javascript, jQuery UI, and Thickbox Varieties [...]

I'm a noob in jquery… Just wanna ask…
I could not submit the form after put the dialog… When I click submit button, the dialog appear and when I click submit form nothing happen…
can u help me?

@Adam
You need to add action="YOUR-FORM-PROCESSING-PAGE.php" to the form where YOUR-FORM-PROCESSING-PAGE.php is your page that processes the form information. The demos in the post do not have an action attribute in the form. This causes them to submit back to themselves; however, there is no form processing going on.

action form already have… but still nothing happen…When i click submit, the dialog appear and i click "Submit Form" nothing happen… in jquery, where i should change to make it work?

@Adam
Without seeing you code, I do not know. When you click submit within the jquery dialog box, it submits the form:
document.testconfirmJQ.submit();
But I do not know which example from the post you are using.

Found the problem… I forgot to put form name…
Sorry for the trouble…

@Adam
No problem. It is always the little things that get in the way.

[...] Modal Confirmation Dialog on Form Submit: Javascript, jQuery UI, and Thickbox Varieties [...]