将变量从 URL 传递到 PHP 到 Javascript 并在输入字段中显示值答案

【问题标题】：Pass variable from URL to PHP to Javascript and Display Value in Input Field将变量从 URL 传递到 PHP 到 Javascript 并在输入字段中显示值
【发布时间】：2013-04-28 09:44:34
【问题描述】：

我有一个电子邮件订阅者表单，我正在尝试使用电子邮件地址预填充（该地址将显示在表单中）。

要使用的电子邮件地址包含在 URL 中

http://www.domain.com/page?email=joe@emailaccount.com

表单中的输入字段为：

<input class="text" id="awf_field-48578149" type="text" name="email" value="" tabindex="501"  />

该页面位于将 Wordpress 作为 CMS 运行的站点上，因此由于安全问题，我不想使用“允许 PHP”插件执行 PHP。我尝试创建一个自定义 PHP 页面模板并包含语言以在 PHP 中分配变量，然后通过 javascript 分配 HTML。

首先，我创建了一个 custom-page.php 页面模板，包括以下内容：

<?php
/*
Get email from URL and set to email1 variable
*/
$email1 = $_GET['email'];
?>

<script type="text/javascript">
    var email2 = <?php echo json_encode($email1); ?>;
    document.getElementById("awf_field-48578149").value = email2;
</script>

接下来，我使用 custom-page.php 模板将表单代码包含在 Wordpress 页面中。

挑战是在页面加载（预填充）时让变量值显示在输入框中。

我绝对不是编码员，但希望能得到帮助。有什么想法吗？

这是表单代码（在 Wordpress 页面上使用模板）：

<!-- AWeber Web Form Generator 3.0 -->
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="787465482" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="mhpc001" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="redirect_3b0dde6df528b65fe85ebedf277b6e10" />

<input type="hidden" name="meta_adtracking" value="Existing_Owner" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />

<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-787465482" class="af-form"><div id="af-header-787465482" class="af-header"><div class="bodyText"><p>&nbsp;</p></div></div>
<div id="af-body-787465482"  class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-48578148">Name: </label>
<div class="af-textWrap">
<input id="awf_field-48578148" type="text" name="name" class="text" value=""  tabindex="500" />
</div>
<div class="af-clear"></div></div>
<div class="af-element">
<label class="previewLabel" for="awf_field-48578149">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-48578149" type="text" name="email" tabindex="501"  />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="Submit" tabindex="502" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=7BzsLGysLBxM" alt="" /></div>
</form>

<!-- /AWeber Web Form Generator 3.0 -->

【问题讨论】：

最优雅的解决方案是 id 值可以更改（因为电子邮件服务提供商为您创建的每个电子邮件选择加入表单提供唯一值），但现在只能预先- 填充并显示电子邮件价值会很棒。
你为什么使用 json_encode，为什么你不只是在验证为电子邮件后直接将值回显到表单中？
表单不在模板中，在使用模板的页面上，所以无法使用因为我无法在页面上执行 PHP 代码。我正在使用 json_encode 基于我在类似情况下看到的另一个答案。我不是编码员，所以我一起破解这个。

标签： php javascript wordpress parameter-passing

【解决方案1】：

我认为应该是：

<script type="text/javascript">
    var email2 = "<?php echo $_GET['email']; ?>";
    document.getElementById("awf_field-48578149").value = email2;
</script>

【讨论】：

我会在输入字段中省略 value="" 字段吗？如果是，它将如何显示分配的值？
我试过了，但是没有在表单输入框中显示邮件的值。
第二行代码设置input的值。我不知道为什么它不适合你。 javascript控制台中的任何错误？你确定$_GET['email']不为空吗？
是的，当我使用代码时，在 document.getElement 正下方显示错误“Uncaught TypeError: Cannot set property 'value' of null”：<script type="text/javascript"> var email2 = "<?php echo $_GET['email']; ?>"; document.getElementById("awf_field-48578149").value = email2; </script>
脚本和表单都在同一个文件中，对吧？您应该将此脚本放在页面的开头部分，或者就在</body> 之前。执行脚本时似乎没有加载DOM。

【解决方案2】：

尝试将代码包装在：

jQuery(document).ready(function(){ //code here });

这将使浏览器等待执行代码，直到页面完成加载。此外，您可能需要考虑确保传递给 Javascript 的字符串只是一个电子邮件地址，而不是保护自己免受跨站点脚本攻击的代码。

【讨论】：