Question

我目前陷入这种状态。我想要做的是从表单输入名称和电子邮件，并重定向另一页上的值，但值应显示在地址栏中在下一页上，关键是这应该只在JavaScript中完成。

以下是表单外观： can see here.

此表单的代码：

<form method="post" class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" target="_blank" >
 <div style="display: none;">
 <input type="hidden" name="meta_web_form_id" value="366827005" />
 <input type="hidden" name="meta_split_id" value="" />
 <input type="hidden" name="listname" value="awlist4823096" />
 <input type="hidden" name="redirect" value="https://wanderistlife.typeform.com/to/u52pwv?name=<script type="text/javascript">formData.display("name_(awf_first)")</script>" id="redirect_4acabdbbe3825a3800648e3cae5fa1c6" />
 <input type="hidden" name="meta_redirect_onlist" value="https://wanderistlife.typeform.com/to/u52pwv?email=<script type="text/javascript">formData.display("email")</script>" />
 <input type="hidden" name="meta_adtracking" value="My_Web_Form_2" />
 <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>


 <label class="previewLabel" for="awf_field-96089735">Name: </label>
 <div class="af-textWrap">
 <input id="awf_field-96089735" type="text" name="name" class="text" value=""  onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="500" />
 </div>

 <div class="af-clear"></div></div>
 <div class="af-element">
 <label class="previewLabel" for="awf_field-96089736">Email: </label>
 <div class="af-textWrap"><input class="text" id="awf_field-96089736" type="text" name="email" value="" tabindex="501" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
 </div><div class="af-clear"></div>
 </div>

 <div class="af-element buttonContainer">
 <input name="submit" id="af-submit-image-366827005" type="image" class="image" style="background: none; max-width: 100%;" alt="Submit Form" src="https://forms.aweber.com/images/forms/big-sale/blue/circle-submit-button.png" tabindex="502" />
 </form>

现在，当我在名称和电子邮件字段中输入值并点击提交按钮时，我将重定向到下一页。

下一页的地址栏：see here

正如您在上面的链接中所看到的 https://wanderistlife.typeform.com/to/u52pwv?name=

javascript无效。您可以在上面的表格代码中查看编码。

我想要的是如果我在表单中输入name = navjot，那么url bar将包含 https://wanderistlife.typeform.com/to/u52pwv?name=navjot 我知道它很简单，但我不知道如何在javascript中做任何帮助是apprecheated 任何帮助或例子都会对我有帮助。

Answer 1

这里有一些建议：

正确使用单引号和双引号
不要在DOM元素中编写脚本
不要使用内联样式。而不是使用CSS。
根据他们使用适当的元素功能。例如：对于button，使用输入类型作为 button或submit并使用css

考虑到文本框awf_field-96089735的ID不是自动生成的。

创建一个名为HandleSubmit的javascript方法，如下所示：

<script>
    function HandleSubmit() {
        var baseUrl = "https://wanderistlife.typeform.com/to/u52pwv?";
        baseUrl += "name=" + document.getElementById("awf_field-96089735").value;

        window.location.href = baseUrl; 
    }
 </script>

将onclick事件添加到您的图片并调用HandleSubmit（），如下所示：

<input onclick="HandleSubmit()" name="submit" id="af-submit-image-366827005" type="image" class="image" style="background: none; max-width: 100%;" alt="Submit Form" src="https://forms.aweber.com/images/forms/big-sale/blue/circle-submit-button.png" tabindex="502" />

所以你的最终代码如下：

<form method="post" class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" target="_blank" >
 <div style="display: none;">
 <input type="hidden" name="meta_web_form_id" value="366827005" />
 <input type="hidden" name="meta_split_id" value="" />
 <input type="hidden" name="listname" value="awlist4823096" />
 <input type="hidden" name="redirect" value="https://wanderistlife.typeform.com/to/u52pwv?name=<script type="text/javascript">formData.display("name_(awf_first)")</script>" id="redirect_4acabdbbe3825a3800648e3cae5fa1c6" />
 <input type="hidden" name="meta_redirect_onlist" value="https://wanderistlife.typeform.com/to/u52pwv?email=<script type="text/javascript">formData.display("email")</script>" />
 <input type="hidden" name="meta_adtracking" value="My_Web_Form_2" />
 <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>


 <label class="previewLabel" for="awf_field-96089735">Name: </label>
 <div class="af-textWrap">
 <input id="awf_field-96089735" type="text" name="name" class="text" value=""  onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="500" />
 </div>

 <div class="af-clear"></div></div>
 <div class="af-element">
 <label class="previewLabel" for="awf_field-96089736">Email: </label>
 <div class="af-textWrap"><input class="text" id="awf_field-96089736" type="text" name="email" value="" tabindex="501" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
 </div><div class="af-clear"></div>
 </div>

 <div class="af-element buttonContainer">
 <input onclick="HandleSubmit()" name="submit" id="af-submit-image-366827005" type="image" class="image" style="background: none; max-width: 100%;" alt="Submit Form" src="https://forms.aweber.com/images/forms/big-sale/blue/circle-submit-button.png" tabindex="502" />
 </form>

 <script>
    function HandleSubmit() {
        var baseUrl = "https://wanderistlife.typeform.com/to/u52pwv?";
        baseUrl += "name=" + document.getElementById("awf_field-96089735").value;

        window.location.href = baseUrl; 
    }
 </script>

如何在地址栏中显示表单值或使用JS在另一页面上传递它？

1 个答案: