0

我在 Codeigniter 网站上使用 Tinybox 来完成一些功能，例如注册、登录、查看图像等......

在网站的主页上有一个小的注册框，允许用户输入公司电子邮件和公司名称。在提交时，这应该会显示一个带有完整注册表单的模式窗口。公司电子邮件和公司名称字段应该已经填写了用户在之前的表单中输入的任何内容。

我不知道如何让它工作。

这是我正在使用的代码 -

初始登记表 -

<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>

这是应该在模式窗口中打开并预先填充一些字段的完整表单 -

<?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>

对此的任何帮助将不胜感激。谢谢。

4

1 回答 1

0

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?

于 2013-05-29T22:56:34.070 回答