How can I edit a hidden input field with jquery and a textarea?

Question

I am not sure if what I am trying to do is possible at all. Ok, so I have successfully created a "drop your images" feature for a site I am working on. This is how it looks (looks will improve).

Now, I have this textbox where I can edit the caption but I am trying to make it so that when I type the text I am able to edit parts of the hidden input box. For, example, the enter caption would edit the Caption part inside the hidden input box.

This is how it looks:

<input value="meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"","DateStamp":"","Privacy":""}">

This is the code I have used

<div class="addtextTopic">
    <div class="leimage">
     <img src="funnylookingcar.png">
     <input class="tosend" value="meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"","DateStamp":"","Privacy":""}">
    </div>
 <textarea class="lecaptine" placeholder="Enter A Caption"></textarea>
</div>

    $(document).ready(function() {
            $(".addtextTopic .lecaptine").onchange(function() {
               var $cap = $(this)
               $(".tosend").val($cap);
            });
        });

Now, the code above doesn't work, and for some reason, I am beginning to think that if it works, it will replace the entire value, instead of the caption part.

Also, am I on the right direction? is this even possible?

Answer 1

Here's a possible solution.

http://jsfiddle.net/o2gxgz9r/3167/

$(document).ready(function() {
  $(".addtextTopic .lecaptine").keyup(function() {
    var metaDefault = '"meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"{{CAPTION}}","DateStamp":"","Privacy":""}';
    var $cap = $(this).val();

    $(".tosend").val(metaDefault.replace('{{CAPTION}}', $cap));
  });
});

A few things wrong with your original code.

1. The change event will only fire when the textarea is blurred, not on keystroke. I changed this to keyup
2. I created a default string of metaDefault with a magic string of {{CAPTION}} so .replace() would know what to replace.
3. $cap needs to be the .val() of $(this) .

Answer 2

First change your Onchange method to change method and copy value of .lecaptline to .tosend use $cap.val() please find below fiddle for more info

 $(document).ready(function() { $(".addtextTopic .lecaptine").change(function() { debugger; var $cap = $(this); $(".tosend").val($cap.val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="addtextTopic"> <div class="leimage"> <img src="funnylookingcar.png"> <input class="tosend" value="meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"","DateStamp":"","Privacy":""}"> </div> <textarea class="lecaptine" placeholder="Enter A Caption"></textarea> </div> 

Answer 3

how about change like this?

$('.addtextTopic .lecaptine').bind('input propertychange', function({

});