Question

尝试将JS变量放入隐藏字段时遇到问题。

我目前正在这样获得所需的价值：

HTML Snippet
<p class="total-box"><span></span></p>

JS Snippet
var totalDonation = $('.total-box > span');

这给了我我需要在页面上显示的内容，但是我需要将该值传递给隐藏的表单值。

我尝试了SO和Google的许多方法。像这样：

HTML Snippet
<input type="hidden" name="xyz" id="xyz" value="">

JS Snippet:
document.getElementById('xyz').value = totalDonation;

没有运气。

还考虑过使用JS添加隐藏字段，因为这样做也是如此：

var input = document.createElement("input");

input.setAttribute("type", "hidden");
input.setAttribute("name", "xyz");
input.setAttribute("value", ('value', document.querySelector('.total-box > span').innerText);

//append to form element that you want .
document.getElementById("xyz").appendChild(input);

我整天都在这里，看不到我要去哪里。任何帮助或建议，将不胜感激。

这是我正在使用的代码中的CodePen。

Answer 1

您正在尝试将输入值设置为span元素的jQuery对象。您需要先使用.text()来获取跨度的值。在这一行：

var totalDonation = $('.total-box > span');

只需添加.text()，如下所示：

var totalDonation = $('.total-box > span').text();

现在应该可以了。

Answer 2

尝试一下；代码片段中提到了该描述;基本上获取span标签的内部文本，并将其分配给隐藏的输入。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <p class="total-box"><span>This is the text</span></p>
    <input type="hidden" id="xyz" /> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>

       var totalDonation = $(".total-box>span").text();

       $("#xyz").val(totalDonation); // Sets the text from total donation to your hidden input

       var hiddeninput = $("#xyz").val();

       console.log(hiddeninput); // displays hidden input data


    </script>

</body>
</html>

如何将JS变量添加到隐藏的表单值中

2 个答案: