Jquery move text within a div to a form input field

Question

could somebody please take a look at this

http://jsfiddle.net/bloodygeese/EzkFR/1/

My aim is to on clicking the "click me" get the text contained in the "area" divs to move into the text area below - one in each space.

I have removed my failed jquery attempt at the code as I don't really know what I am doing.

If I can get this to work the next step would be to try and achieve the same thing when the "display area's are on a different page?? not sure if thats possible, I hope it is?

Syscall · Accepted Answer · 2021-04-22 06:50:46Z

1

Not exactly sure if you want original text left behind or not

Demo: https://jsfiddle.net/EzkFR/6/

$('#submit').click(function(){
   $('#displayarea').val(  $('#area').text() ); 
   $('#displayarea2').val(  $('#area2').text() );   
})

Note there is no input type="textarea". It is either input type="text" or <textarea></textarea>

If you want the original text containers gone, use remove()

edited Apr 22, 2021 at 6:50

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered Jun 18, 2012 at 3:21

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1450749 Over a year ago

perfect! i was just going to ask for the text to be left behind. Thank you so much, and for the text area info! is there any reason why this would work if the divs and input type=text are on different pages?

charlietfl Over a year ago

different pages?? If you mean mobile pages where they are actually already existing... it would work

user1450749 Over a year ago

can't get it to work across pages, I have the divs on one html page and the form inputs on another?? any ideas

charlietfl Over a year ago

would have to use ajax to get the other page $.get( url, function(data){ alert($(data).find('#area1').text() }) as an example

Cranio · Accepted Answer · 2012-06-18 03:21:26Z

1

Try this code:

$("#submit").click
    (
        function()
        {
            $("#displayarea").val($("#area").text());
            $("#displayarea2").val($("#area2").text());
            $("#area").html("");            
            $("#area2").html("");
        }
        );

Edit: using .text instead of .html because we want not any tag inside an INPUT field.

answered Jun 18, 2012 at 3:21

Cranio

9,8764 gold badges37 silver badges55 bronze badges

Comments

Syscall · Accepted Answer · 2021-04-22 06:50:56Z

Assuming you want an extensible way to do this...

<div id="area" class="movable">I wish I could go down there</div>
<div id="area2" class="movable">Me too please!!</div>
</br>
<input type="textarea" id="displayarea" class="inputtable" value="" />
<input type="textarea" id="displayarea2" class="inputtable" value="" />
</br>
<div id="submit">click me</div>
</br>

$('div#submit').click(function(e) {
    $('input.inputtable').each(function() {
        var input = $(this);
        $('div.movable').each(function() {
            var self = $(this);
            if (!self.hasClass('moved') && !input.hasClass('inputted')) {
                input.val(self.text()).addClass('inputted');
                self.addClass('moved');
            }
        });
        $('div.movable.moved').detach(); //safe to remove now that we're not looping through them.
    });
    e.preventDefault();
    return false;
});

Working fiddle: https://jsfiddle.net/EzkFR/10/

Syscall · Accepted Answer · 2021-04-22 06:51:05Z

0

var $texts = $('textarea');
var $divs = $('div');

$('#submit').click(function() {
    $divs.each(function(index) {
        $texts.get(index).value = this.innerHTML;
        $(this).remove();
    });
});

Fixed DEMO

Notes:

textarea, isn't a type of <input> as you wrote, it is a tag: <textarea>
I cached the elements so I don't need to query the DOM multiple times.

edited Apr 22, 2021 at 6:51

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered Jun 18, 2012 at 3:23

gdoron

151k59 gold badges302 silver badges376 bronze badges

Collectives™ on Stack Overflow

Jquery move text within a div to a form input field

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related