获取 HTML DOM 元素并将其设置为输入标签的值答案

【问题标题】：Getting HTML DOM element and setting it to a value of a input tag获取 HTML DOM 元素并将其设置为输入标签的值
【发布时间】：2016-04-22 17:37:44
【问题描述】：

我的页面上有一个 ID 为 last_name 的元素。我想获取它的值并将其传递给我的input 标签。

我实际上是在尝试做这样的事情（不起作用）。

<input type="hidden" name="lastName" value=document.getElementById("last_name").value>

有没有办法做到这一点？

这不仅是在加载。

基本上，我有一堆文本框组合在一个表单中。

然后我有另一个带有按钮的表单。当用户点击按钮时，我希望我的输入标签的值是在文本框中输入的当前值。

编辑：谢谢大家！得到它的工作。我基本上必须删除输入标签的“值”属性，然后向我的按钮添加一个“onclick”属性，然后调用你们提供给我的那些 javascript 代码。

【问题讨论】：

代码丢失:)
但是使用 jQuery 你可以做到$('input').val( $('#lastname').text() );
DOM 加载后立即运行？

标签： javascript html css

【解决方案1】：

仅用于加载页面：

 <!DOCTYPE html>
    <html>

    <head>
        <!-- link here your JQuery library -->
        <script>
           $(function(){
              $('#lastName').val($('#last_name').val());
           });
        </script>
    </head>

    <body> 
        <input type="text" id="last_name" value="123"> 
        <input type="hidden" name="lastName" value="">
    </body>

</html>

按钮点击：

 <!DOCTYPE html>
    <html>

    <head>
        <!-- link here your JQuery library -->

        <script>
           $(function(){
              $('#btn-save').on('click', function() {  
                  $('#lastName').val($('#last_name').val());
                  // other work
                  return false;
              }
           });
        </script>
    </head>

    <body> 
        <input type="text" id="last_name" value="123"> 
        <input type="hidden" name="lastName" value="">
        <button id="btn-save">Save</button>
    </body>

</html>

不使用 jQuery：

        <script>
            window.onload = function(){
               var src = getElementById('last_name');
               var dst = getElementById('lastName');
               dst.value = stc.value;
           }
        </script>

【讨论】：

这只会在我第一次加载页面时起作用吗？
这仅在我第一次加载页面时有效吗？我基本上有一堆文本框和一个“保存”按钮。当用户点击按钮时，我希望输入标签具有这些文本框的当前值，然后我会将这些信息发送到我的后端

【解决方案2】：

试试这个：

var lastName = document.getElementById("last_name");
var input = document.getElementById("yourInputId");
input.value = lastName.value;

【讨论】：

最好尝试向 OP 解释你在做什么以及为什么而不是交出一些他们可能不知道如何实现的代码。
@buschschwick 在大多数情况下我会同意你的观点，但这是一个相当简单的问题，有一个简单的解决方案，代码足以解释正在发生的事情，而添加额外的 cmets 将是多余的。

【解决方案3】：

试试下面的代码 HTML

<input type="hidden" name="lastName" id='hidLastName' />

和javascript代码：

var input = document.getElementById("hidLastName")
   input.value =  document.getElementById("last_name").value

【讨论】：

【解决方案4】：

您应该将逻辑移至 .js 文件或 <script></script> 元素内。最好是前者。试试这样的：

给接收输入加上一个id：

<input type="hidden" id="lastName" name="lastName">

这是你的 .js 文件

window.onload = function(){
    var lastNameInput = document.getElementById('lastName');
    var sourceInput = document.getElementById('last_name');
    lastNameInput.value = sourceInput.value;
}

【讨论】：

【解决方案5】：

试试这个： Java 脚本

<script>
    function setInput() {
        document.getElementById("lastname").value = document.getElementById("last_name").value;
    }

</script>

HTML

<input type="text" id="last_name"  onblur="setInput()"/>
<input type="hidden" id="lastname" />

【讨论】：