CODEWITHSUNDEEP
javascript
Divern
Divern

Reputation: 363

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

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).This is how it currently looks

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?

Upvotes: 0

Views: 56

Answers (3)

Fillip Peyton
Fillip Peyton

Reputation: 3657

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).

Upvotes: 2

Kwan Ung Park
Kwan Ung Park

Reputation: 158

how about change like this?

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

});

Upvotes: 0

Curiousdev
Curiousdev

Reputation: 5788

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>

Upvotes: 0

Related Questions