Question

我正在使用第三方服务，允许您输入自定义html以使用表单收集信息。有一个表单页面，用户输入信息，以及发布表单页面。我问服务是否有任何方式我可以吐出从表单页面收集的信息并将其发布到帖子表单页面。例如，如果用户输入名字John和姓氏Smith，我希望帖子表单页面说：

感谢您提交表格，John Smith。

该服务表示这是可能的，因为在帖子表单页面上有一个名为fields的javascript var。

我查看了他们被谈到的javascript并发现了这个：

<script>
var fields = {"age":"on","city":"San Diego","email":"myemail@gmail.edu","firstname":"John","lastname":"Smith","officialrules":"on","state":"CA"}; 

.....

有谁知道我如何发布这些信息以便吐出来：

<p>Thanks for Thanks for submitting the form, [firstname] [lastname].</p>

导致：

Thanks for submitting the form, John Smith.

Answer 1

找到你的元素，首先将id添加到id：

<p id="info"></p>

在javascript中：

var p = document.getElementById('info');

添加字符串：

p.innerHTML = 'Thanks for Thanks for submitting the form, ' + fields.firstname + ' ' + fields.lastname + '.';

Answer 2

以下内容有望回答您的问题。但是，在尝试在页面上呈现它之前，您当然还应该从安全角度清除表单上的任何数据输入的额外步骤。

<p id="greeting"></p>

<script type="text/javascript">
    var fields = {"age":"on","city":"San Diego","email":"myemail@gmail.edu","firstname":"John","lastname":"Smith","officialrules":"on","state":"CA"};
    document.getElementById('greeting').innerHTML =
        'Thanks for submitting the form, ' +
        fields['firstname'] + ' ' + fields['lastname'] + '.';
</script>

Answer 3

首先，您需要提供<p>元素和＆＃34; id＆＃34;这样你就可以在javascript代码中访问它。 Here is some doco访问java脚本中的<p>等html元素。元素声明通常如下所示：

<p id="myId"></p>

接下来，你必须访问javascript变量并在你想要存储的字符串中使用它，它看起来像这样：

<script>
    var fields = {"age":"on","city":"San Diego","email":"myemail@gmail.edu","firstname":"John","lastname":"Smith","officialrules":"on","state":"CA"};
    var myStr = "Thanks for submitting the form " + fields.firstname + " " + fields.lastname;
    document.getElementById("myId").innerHTML = myStr; 
</script>

Here is some doco用于将文本插入到您希望它进入的html元素中。

This is a link如何在javascript中访问json变量来执行您正在尝试执行的操作。

工作的

Here is a jsfiddle

Answer 4

如果您不熟悉JavaScript并且不打算深入研究，那么您可能应该使用jQuery来完成您的工作。

<p>Thanks for submitting the form,</p>

$("p").append(" " + fields.firstname + " " + fields.lastname + ".");

演示： http://jsfiddle.net/DerekL/TZAhS/

这一行代码就是您所需要的。 ;）甚至不打扰那些复杂的“document.getElementById”... pfff只需在jQuery中执行$（“＃yourID”）以获得相同的效果！

这是您需要的最少代码。当然，你应该给你的p一个标识符（id），以便它知道你在说哪一个。

如何从Javascript变量中获取值并在页面上使用它（post）？

4 个答案: