Posting to Tinybox2 modal from form in Codeigniter

Question

I am using Tinybox on a Codeigniter site for some functions like registering, login, viewing images, etc....

On the homepage of the site there is a small registration box that allows a user to enter a company email and company name. On submit this should then present a modal window with the full registration form. The Company Email and Company Name fields should already be filled in with whatever the user entered in the previous form.

I can't figure out how to get this to work.

Here is the code I am using -

Initial registration form -

<form>
  <div class="tab">
    <label for="preCompany">Company Name:</label>
    <input type="text" size="20" id="preCompany" name="preCompany"/>
<br/>
<label for="preEmail">Corporate Email:</label>
<input type="text" size="20" id="preEmail" name="preEmail"/>
<br/>
<input type="submit" value="Continue..." onclick="TINY.box.show({url:'/register.php'}); return false;" />
  </div>
</form>

And here is the full form that should open in a modal window and have some fields prepopulated -

<?php echo form_open('register/register_form'); ?>
  <label for="email">Email:</label>
  <input type="text" size="20" id="email" name="email"/>
  <br />
  <label for="company">Company:</label>
  <input type="text" size="20" id="company" name="company"/>
  <br/>
  <label for="password">Password:</label>
  <input type="password" size="20" id="password" name="password"/>
  <br/>
  <label for="name">Name:</label>
  <input type="text" size="20" id="name" name="name"/>
  <br/>
  <label for="phone">Phone:</label>
  <input type="text" size="20" id="phone" name="phone"/>
  <br/>
  <input type="submit" value="Register"/>
</form>

Any help on this would be greatly appreciated. Thanks.

Answer 1

I found a way that works. I'm not sure if this is a good solution but it has held up under a few tests and it should be cross-browser compatible. I found a few different sites that pointed me in the right direction and cobbled together an answer using what they said. Unfortunately I got them on my work computer so have no references to give here but I'll post them as an edit later.

Here is my new code:

<form method="link" action="/register">
  <div class="tab">
    <label for="preCompany">Company Name:</label>
    <input type="text" size="20" id="preCompany" name="preCompany" onblur="var preCompany = document.getElementById('preCompany');"/>
    <br/>
    <label for="preEmail">Corporate Email:</label>
    <input type="text" size="20" id="preEmail" name="preEmail" onblur="var preEmail = document.getElementById('preEmail');"/>
    <br/>
    <input type="submit" value="Continue..." onclick="TINY.box.show({url:'/register'}); return false;" />
  </div>
</form>

Basically what I am doing here is setting a variable each time the user fills in one of the input boxes and then clicks away from that box. The tinybox script is called once the submit button is clicked. The two variables are global so can now be used by the Tinybox modal. The two variables can be empty.

Here is the code that is called in the modal window. It is also the regular registration page code so it seems that the variables do not need to be set at all and no error occurs.

<img src="/img/bg.gif" alt="" onload="document.getElementById('email').value = preEmail.value; document.getElementById('company').value = preCompany.value; this.parentNode.removeChild(this);" />

<?php echo form_open('register/register_form'); ?>
  <table>
    <tr>
      <td><label for="email">Email:</label></td>
      <td><input type="text" size="40" id="email" name="email"/></td>
    </tr>
    <tr>
      <td><label for="company">Company Name:</label></td>
      <td><input type="text" size="40" id="company" name="company"/></td>
    </tr>
......

The sites that I referred to earlier explain this in a much better way but basically a modal window does not allow Javascript to be run so you have to force it. The recommended way was using something called eval() but I ended up using this <img /> version which apparently works across browser and without any issues. All that happens is the img tag runs the Javascript which fills in the two inputs on the form with the contents of the variables that have just been set. A bit of JS then removes the img tag. IMPORTANT - The image referenced in the img tag needs to exist.

I'll post the sites where I find this info later which may help to explain what is happening here better than I can.

Thanks to itachi for the replies and help.

EDIT - This page got me started on the path I went down - Tinybox does not run (eval) javascript code

This page helped some more - Running Javascript inside a simplemodal window

And this one gave me the answer for using an img tag to run the JS in the modal window - Can scripts be inserted with innerHTML?