Question

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

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

Answer 1

我找到了一种有效的方法。我不确定这是否是一个很好的解决方案，但它已经在几个测试中保持不变，它应该是跨浏览器兼容的。我找到了一些不同的网站，指出了我正确的方向，并用他们所说的拼凑出一个答案。不幸的是我把它们放在我的工作电脑上，所以没有参考，但我会在以后发布它们。

这是我的新代码：

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

基本上我在这里做的是每次用户填写其中一个输入框然后点击该框时都设置一个变量。单击提交按钮后，将调用tinybox脚本。这两个变量是全局变量，现在可以由Tinybox模态使用。这两个变量可以为空。

这是在模态窗口中调用的代码。它也是常规的注册页面代码，因此似乎根本不需要设置变量，也不会发生错误。

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

我之前提到的网站以更好的方式解释了这一点，但基本上模态窗口不允许运行Javascript，所以你必须强制它。推荐的方法是使用名为eval()的东西，但我最终使用了这个<img />版本，显然可以在浏览器中使用，没有任何问题。所有发生的事情是img标签运行Javascript，它填充表单上的两个输入，其中包含刚刚设置的变量的内容。然后一点JS删除img标签。重要信息 - img标记中引用的图像需要存在。

我会发布我稍后会发现此信息的网站，这可能有助于更好地解释这里发生的事情。

感谢itachi的回复和帮助。

编辑 - 这个页面让我开始了我走的路 - Tinybox does not run (eval) javascript code

此页面提供了更多帮助 - Running Javascript inside a simplemodal window

这个给了我一个使用img标签在模态窗口中运行JS的答案 - Can scripts be inserted with innerHTML?

从Codeigniter中的表单发布到Tinybox2模式

1 个答案: