Accessing an HTML DOM element and assigning it to the value of an input tag

Question

Accessing an HTML DOM element and assigning it to the value of an input tag

One of the elements on my webpage has the unique identifier last_name. I am trying to extract its value and pass it to an input tag.

My attempt at achieving this is shown below, but it does not work as intended.

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

Is there a method to accomplish this task?

This action is not just limited to page load.

To elaborate, I have multiple textboxes arranged together in a form.

Subsequently, I have another form containing a button. When the user clicks the button, I want the values of my input tags to be the current entries in the textboxes.

EDIT: My issue has been resolved! I had to eliminate the "value" attribute from the input tags, then include an "onclick" attribute to my button, and finally utilize the provided javascript codes to achieve the desired functionality.

javascript html css

Answer 1

Answer №1

Just for page loading:

 <!DOCTYPE html>
    <html>

    <head>
        <!-- Include your JQuery library here -->
        <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>

For button click event:

 <!DOCTYPE html>
    <html>

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

        <script>
           $(function(){
              $('#btn-save').on('click', function() {  
                  $('#lastName').val($('#last_name').val());
                  // additional tasks may go here
                  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>

No jQuery approach:

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

Answer 2

Just for page loading:

 <!DOCTYPE html>
    <html>

    <head>
        <!-- Include your JQuery library here -->
        <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>

For button click event:

 <!DOCTYPE html>
    <html>

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

        <script>
           $(function(){
              $('#btn-save').on('click', function() {  
                  $('#lastName').val($('#last_name').val());
                  // additional tasks may go here
                  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>

No jQuery approach:

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

Answer 3

Answer №2

Give this a shot:

let lastNameInput = document.getElementById("last_name");
let userInput = document.getElementById("inputId");
userInput.value = lastNameInput.value;

Answer 4

Give this a shot:

let lastNameInput = document.getElementById("last_name");
let userInput = document.getElementById("inputId");
userInput.value = lastNameInput.value;

Answer 5

Answer №3

Below is a sample code snippet for HTML:

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

Accompanied by the corresponding javascript code:

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

Answer 6

Below is a sample code snippet for HTML:

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

Accompanied by the corresponding javascript code:

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

Answer 7

Answer №4

To enhance efficiency, consider transferring the logic to a separate .js file or embedding it within a <script></script> element, with the former being the recommended option. An example implementation is demonstrated below:

Add an id attribute to the input that will receive the data:

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

Include the following code in your .js file:

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

Answer 8

To enhance efficiency, consider transferring the logic to a separate .js file or embedding it within a <script></script> element, with the former being the recommended option. An example implementation is demonstrated below:

Add an id attribute to the input that will receive the data:

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

Include the following code in your .js file:

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

Answer 9

Answer №5

Check this out: Java Script

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

</script>

HTML

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

Answer 10

Check this out: Java Script

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

</script>

HTML

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

Accessing an HTML DOM element and assigning it to the value of an input tag

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Floating image positioned between two div elements

The functionality of Bootstrap toggle ceases to operate properly following an AJAX content update

Can the z-index property be applied to the cursor?

Setting the select option in AngularJS with predefined options can be easily achieved with

Is jQuery utilized by the bootstrap-grid system?

Using HTML5 data attributes as alternative configuration options in a jQuery plugin can present challenges

Modifying shapes and figures in three-dimensional Javascript

Exploring the asp.net MVC framework with the integration of HTML5 date input

Utilizing Material UI Grid spacing in ReactJS

CSS transforms the entire div, ensuring that all elements within it remain

Angular 6 and the intricacies of nested ternary conditions

What is the process for verifying a Bootstrap form?

The width and height properties in the element's style are not functioning as expected

Exploring Bootstrap datatables to search through nested table data with Codeigniter

Is the setInterval function in JavaScript only active when the browser is not being used?

The addition and deletion of classes can sometimes lead to disruptions in the DOM

Is there a restriction on the number of strings allowed in minimist?

Exploring Laravel 4: Navigating Tables with Relational Models

Implement a feature in Vuejs where the user can easily move to the next field by simply

Bringing out the version information in a React/webpack application: A guide