My favorites | Sign in
Project Logo
                
Search
for
Updated Oct 15, 2007 by andrej.okonetschnikow
Labels: Help, Featured
PassingFormValues  
Explanation on passing form variables values to MB pages

Introduction

For example we have the following form on one MB page:

<form action="yoururl.php" method="get" id="myform" onsubmit="return false">

<fieldset>
<label for="name">Your name</label> <input type="text" size="30" id="name" name="name" /><br /> <label for="email">Email to</label> <input type="text" size="30" id="email" name="email" /><br />
</fieldset> <input type="submit" value="Submit" onclick="Modalbox.show('yoururl.php', {title: 'Sending status', params: Form.serialize('myform') }); return false;" />
</form>

and then in youurl.php we're doing the following:

<?php

$name = $GET['name']; $email = $GET['email'];
?> <h1><?php echo $name ?>, your message sent!</h1>

to show the sender name.

That's all!

Details

See the working example here: http://okonet.ru/projects/modalbox/ Please note: http://prototypejs.org/api/form/serialize


Comment by bart...@kabelfoon.nl, Aug 02, 2007

Verry cool, but have to read a lot to get it i quess;) iI think it's wurth that!

Comment by thomas.hannemann, Aug 17, 2007

Is there a way to change the method from GET to POST? I tried:

{params: Form.serialize('myform'), method:post}

Doesn't work...

Comment by thomas.hannemann, Aug 17, 2007

Is there a way to change the method from GET to POST? I tried:

params: Form.serialize('myform'), method:post

Doesn't work...

Comment by thomas.hannemann, Aug 17, 2007

Is there a way to change the method from GET to POST? I tried:

    params: ..., method:post

Doesn't work...

Comment by alaattin, Aug 27, 2007

I think the order of the "show(" argument's are given regarding the previous release. The url of the next modalbox should be the the first one.

Comment by green.tambourine, Aug 31, 2007

try

method: 'post'

Comment by green.tambourine, Aug 31, 2007

any idea how to post multipart MIME? our form has a field for uploading a picture but the MB requests are url-encoded. Any help would be great.

TIA, -gt

Comment by juanfraa, Sep 06, 2007

It doesn't work to me. Is there any update that breaks it? I get to yoururl.php but i can't get the params. It also tried with : $('myform').serialize(true) instead of : Form.serialize('myform') I just can't make it work!!! Any help there? regards, juanfra

Comment by juanfraa, Sep 07, 2007

the way to call it is Modalbox.show('yoururl.php', {params: Form.serialize('myform') }); return false;

Comment by mestocapio, Oct 08, 2007

Not Working

Comment by andrej.okonetschnikow, Oct 15, 2007

It's working on the demo page here: http://wildbit.com/labs/modalbox/

Comment by stec77, Nov 22, 2007

Could use www.gettopost.com/gettopost.html to do the GET to POST conversion?

Comment by robertmn, Dec 13, 2007

I can get $POST's to work for <input type="text"> but CAN'T for <input type="file"> Is there a way to do this? Is there a param spot for enctype="multipart/form-data"? TIA

Comment by jted.esler, Jan 10, 2008

I was having this problem with a form. What fixed things for me was to add an "id" tag to the form declaration.

Comment by msdarkici, Jan 17, 2008

(sorry for my english, but i speak spanish) in this example the form is put into a modalbox o a normal window????

i trie tu put a form into modalbox to send data to the same modalbox (or another)... this example works for send data to the normal window to modalbox, but i can't send data to the form on modalbox to modalbox... how can i get it??

Comment by tacticalazn, Jan 17, 2008

$GET works, but is there a way to automatically close the the box after success? (I'm guessing maybe DOM?)

Comment by jurajivan, Jan 19, 2008

Hello, i need to send my data via $POST, what i need to change and where?

thanks a lot

Comment by ni...@deviantart.com, Apr 01, 2008

and what about instead of the action being a 'yoururl.php' it is a <?php echo $somevariable ?>, how would you make the messages contained within that variable appear in the next modalbox?

Comment by sukhvinder.gujral, Apr 29, 2008

I am opening a LOGIN textbox and password field in the modal window(Actually my PHP page). After submitting of the data using POST, i want to display WELCOME page in same modal window...

Is it possible.. ?

Comment by paul.borel, May 03, 2008

For the POST version it works I do that : <form id="formulaire" action="url.php" method="post" onsubmit="return false;"> ... <input type="submit" title="TITRE" value="Show" onclick="Modalbox.show('url.php', {title: this.title, method: 'post', params:Form.serialize('formulaire'), overlayClose: true }); return false;" class="formulaire" /> </form>

It works fine :)

Comment by dinaco1, Jun 04, 2008

Yeah this script from paul with POST worked for me too!!! Thx really much paul!!!

Comment by walamsyah, Jun 23, 2008

i got problem too with <input type="file"> Is there a way to do this? Is there a param spot for enctype="multipart/form-data"?

Comment by Benjamin.Lister, Jul 01, 2008

to answer a few of your questions re file uploads:

This cannot be done because modalbox uses Prototype's Ajax.Request function which does not allow uploads.

There is another solution though: look into SwfUpload? - http://swfupload.org/

Comment by mikestrout, Jul 22, 2008

I am struggling with the wizard function. I have a form in the modalbox. When I click the button, I want to pass the variables of the form to itself and then repaint the modalbox with the changes. I am running PHP on the back side. It seems like this should be possible, but when calling ...

<button type="button" onclick="Modalbox.show('Making changes', 'sameAsOriginalPage.php', {width: 600, height:650}); return false;">&lt;&lt; Remove selected users from group</button>

The box shrinks and just stays there. What am I doing wrong?

Mike

Comment by arnelceledonio, Nov 27, 2008

dynamic content/form elements is not included when submitting the form using modalbox

Comment by wazime, Dec 22, 2008

I am trying to submit a contact form. I have tried a number of things, but I am not able to get the form to submit (email). It will either submit the form, or continue to the yoururl.php, but I cannot get it to do both submit and move to the yoururl.php page.

Any help would be great.

Here is the code I am using for the form:

<form id="form" name="form" method="post" action="forms/process.php"> <label>Name <span class="small">Add your name</span> </label> <input type="text" name="Name" id="name" />

<label>Email <span class="small">Add a valid address</span> </label> <input type="text" name="Email" id="email" />

<label>Phone <span class="small">Min. size 10 chars</span> </label> <input type="text" name="Phone" id="phone" />

<label>Message <span class="small">Leave a message</span> </label> <textarea name="Message" class="mytextarea" id="message"></textarea>

<button type="button" value="Submit" onclick="Modalbox.show('forms/yoururl.php', {title: 'Sending status', params: Form.serialize('myform') }); return false;" />Submit</button>

Comment by wenmian, Apr 12, 2009

good stuff. thanks!

Comment by saucissonfurtif, Apr 27, 2009

I had a prolbem using it, so I tired this :

Modalbox.show(this.href, {title: this.title, width: 600, method: 'post', params: inscriptionCB.serialize(), overlayClose: true }); return false;

Note that I used inscriptionCB.serialize() instead of Form.serialize('inscriptionCB') (inscriptionCB is the name of my form).

Hoping it will help somebody.

Comment by saucissonfurtif, Apr 28, 2009

Oh sorry, this tricks works onl with Firefox. Finally I used : Modalbox.show('inscriptionCB_commentaire.php',{title: 'Commentaire envoyé', width:600, method: 'post', params: Form.serialize(inscriptionCB_ajoutCommentaire), overlayClose: true})

Note the "Form.serialize(inscriptionCB_ajoutCommentaire)"

Comment by alisverisdukkani, Jun 12, 2009

thaks alot


Sign in to add a comment
Hosted by Google Code