CODEWITHSUNDEEP
javascripthtmlcss
user1801048
user1801048

Reputation: 1

Getting HTML DOM element and setting it to a value of a input tag

There is an element on my page with the id last_name. I would like to get its value and pass it along to my input tag.

I am essentially trying to do something like this (doesn't work).

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

Is there anyway to do this?

This is not only on load.

Essentially, I have a bunch of textboxes grouped together in a form.

Then I have another form with a button. When the user hits the button, I want my input tags' values be the current values entered in the textboxes.

EDIT: Thanks all! Got it work. I essentially had to remove the "value" attribute of the input tags and then add an "onclick" attribute to my button and then call those javascript codes you guys provided me.

Upvotes: 0

Views: 804

Answers (5)

Manish Gupta
Manish Gupta

Reputation: 276

Try This: Java Script

<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" />

Upvotes: 0

Stan Zeez
Stan Zeez

Reputation: 1188

for only loading page:

 <!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>

for button click:

 <!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>

without jQuery use:

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

Upvotes: 1

dimlucas
dimlucas

Reputation: 5131

You should move the logic to a .js file or inside a <script></script> element. Preferrably the former. Try something like this:

Put an id to the receiving input:

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

And this to your .js file

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

Upvotes: 0

Tuan-IT
Tuan-IT

Reputation: 131

Try the following code HTML

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

and javascript code: 

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

Upvotes: 0

smaili
smaili

Reputation: 1235

Try this:

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

Upvotes: 0

Related Questions