How do you move text from a div into an input value?

javascript input text
how to get value of textbox in javascript
how to get value of textbox in javascript from html
jquery clone
input value javascript
javascript set input value
innerhtml
prepend jquery

I am trying to move text from inside a div into the value from an input field but I'm getting [object Object] as the output. Can anyone explain why?

    input = $('#input').contents();
    $('#output').val(input);

Spencer.

The .contents() method won't give you the text, but an object with a collection of the elements it contains. You sould use:

val method:

The .val() method is primarily used to get the values of form elements such as input, select and textarea.

text method:

The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method.

The line you're looking for is:

  $('#input').val($('#div').text());

and can be decomposed like this:

var textToMove = $('#div').text();
$('#input').val(textToMove);

Here is a full example:

function move(){
  $('#input').val($('#div').text()); //copy text
  $('#div').text(''); //erase text
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='input' type='text' value=''>
<div id="div">Hello, Spencer</div>
<button onclick='move()'>Click to move text</button>

.prepend(), DOM element, text node, array of elements and text nodes, HTML string, Receives the index position of the element in the set and the old HTML value of the Supported input includes DOM elements, jQuery objects, HTML strings, and For example, the following will insert two new <div> s and an existing <div​> as the  Often when creating a form on a web page, you need your customers to fill out a field such as a mailing address, as well as a billing address. Instead of having your customers fill out the form twice, you can use JavaScript to copy the form's data from one field to another.

First get the text content with

$("#d").text()

Add this to input like

$("#y").val($("#d").text());

Now you can remove text of div like

 $("#d").text("")

$("#y").val($("#d").text());
$("#d").text("")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="d">text</div>
<input type="text" id="y"/>

.clone(), *In jQuery 1.5.0 the default value was incorrectly true ; it was changed back to false in 1.5.1 and up. the dynamic state of the element (e.g., user data typed into text inputs and user selections made to <div class="goodbye">Goodbye</​div>. This answer has a lot of SEO, but all the answers are severely out of date and depend on libraries to do things that all current browsers do out of the box. To replace text inside a div element, use Node.textContent, which is provided in all current browsers. fieldNameElement.textContent = "New text";

The contents() you were trying to use is defined by the jQuery documentation as

To get the children of each element in the set of matched elements, including text and comment nodes

So, contents() is returning en entire object with all those children, comments and etc... that's why: [Object Object]. If you use console.log($('#input').contents()) you will be able to see the entire object in the console.

So, in that case, it's better to use text(), that get only the text content of the element matched.

After getting the text, then set it to the input with val();

the example below shows this. (I added a timer just to better represent the code working, you can remove it and let only the code that is inside).

Also, if you want to keep the text in the div, remove the part where I used .text('');

setTimeout(function(){
  input = $('#input').text();
  $('#output').val(input);
  $('#input').text('');
}, 1500);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' value='' id="output">
<div id="input">Abcdef 1234567890</div>

HTML DOM Input Text Object, Input Text Object. The Input Text object represents an HTML <input> element with type="text". defaultValue, Sets or returns the default value of a text field. Div position relative to parent Center a Div within another Div. In some situation you may have to position one Div exactly at the center of another Div. That means position Div center horizontally and Div center vertically inside of another Div. Source Code

How to get the value of text input field using JavaScript , How to move mouse pointer to a specific position using JavaScript ? We can get the value of text input field using various methods in script. There is a text  Note: In the VBA code, “ Done ” is the cell value you will move entire row based on. You can change it as you need. 3. Press the F5 key to run the code, then in the popping up Kutools for Excel dialog box, select the column range which the certain value exists in, then click the OK button.

Move Cursor to End of Input, Where el is a reference to an input or textarea. function moveCursorToEnd(el) selectionEnd = el.value.length; } else if (typeof el. I hope this solves the caret problem if I use <span contenteditable=”true”</span> instead of an <input type=”​text”> :) inline like `<div>this</div>` or multiline blocks within triple backtick fences  The value attribute specifies the value of an <input> element. For "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit) Note: The value attribute cannot be used with <input type="file">. The numbers in the table specify the first browser version that fully supports the

Angular Inputs, Angular Bootstrap input is a special field which is used in order to receive data from the <div class="md-form"> <input value="John Doe" type="text" id="form6"​  The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). The position property specifies the type of positioning method used for an element. Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the

Comments
  • input is an object, val() expects a String, so it's using toString() to convert input to a String, giving the results you're seeing. You want text() or html() or one of the other text contents retrieval functions, not contents()
  • Assuming you want to literally move the nodes contained by input you could replace $('#output').val(input) with $('#output').append(input) or input.appendTo('#output')
  • This code does not actually answer the question that was asked.
  • @Tibrogargan how does it not ? He is trying to move the text and this really does the same No ?
  • His question is "Can anyone explain why?". You're just giving a workaround - no explanation
  • Ohk. let me add that too
  • @Tibrogargan, the question's title actually is How do you move text from a div into an input value? and this answer perfectly covers that. If we're going to be literal in extreme, the answer to Can anyone explain why? should be Yes