We Keep Coding

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

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

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>

how about change like this?
$('.addtextTopic .lecaptine').bind('input propertychange', function({
});

Change value of input with jquery under this class

jQuery:
$('.clickhere').click(function(e){
e.preventDefault();
$(this).closest('.row').children('.abc').hide(); // working
$(this).closest('.row').children('.abc').children('input').value = ''; // not working
$(this).closest('.bookingrow').children('.addressbox').children('input').value(''); // alternative - not working
});
html
<div class="row">
<div class='abc'>
<input type='text' class='unknown' />
</div>
<div class="clickhere">hide</div>
</div>
my target is if i click the "clickhere" class, content under "abc" class will hide and whatever content added by customer on those input box, they will be clear.
same html used multiple time on the same form. that's why using "$(this)".
any solution? what i am doing wrong?
Thanks in advance.

You need to use .val() to set the value, jQuery methods normally will return a jQuery object not a dom element reference so you would not have a properly called .value.
$(this).closest('.row').find('.abc input').val('');
So
$('.clickhere').click(function (e) {
e.preventDefault();
//cache the value of .row since it is used multiple times
var $row = $(this).closest('.row');
$row.children('.abc').hide(); // working
$row.find('.abc input').val('');
});

find text contained in a div and get its child checkbox ID

I`m trying to write a script that gets the ID from a checkbox element and do something with it. The problem is that I can not target the checkboxes by value since its generated from mysql query.
Here is how the html for the checkboxes looks like :
<div class="cat_checkbox cat_unchecked">
<input id="r_c136" type="checkbox" value="36" name="r_c1[]">
Sample
</div>
<div class="cat_checkbox cat_unchecked">
<input id="r_c131" type="checkbox" value="31" name="r_c1[]">
Text1
</div>
And here is the code I managed to write (I`m still learning java script and jQquery).
What I am trying to do is to tell js to select the that contains "Text1" and find the checkbox inside it, get its id and then add checked prop to the item.
But instead it selects the first div finds the checkbox inside and checks it no matter the value inside.
$( "#click" ).click(function() {
if ($( "div:contains('Text1')" ))
{
id = $("div:contains('Text1')").find("input[type='checkbox']").attr("id")+"";
alert(id);
$("#"+id).prop("checked", !($("#"+id)).is(':checked'));
}
});
});
Any help will be aprciated. Thank you.

Use $("div:contains('Text1')").length instead of $("div:contains('Text1')")
Change Your code as
$("#click").click(function () {
if($("div:contains('Text1')").length) {
var checkbox = $("div:contains('Text1')").find("input[type='checkbox']"); //Find Checkbox here
checkbox.prop("checked", !checkbox.is(':checked'));
}
});
DEMO
Change your code as
$("#click").click(function () {
var checkbox = $("div:contains('Text1')").find("input[type='checkbox']");
if (checkbox.length) {
checkbox.prop("checked", !checkbox.is(':checked'));
}
});
Updated DEMO

How to get text value in jquery?

I have three elements, which are sliding on the screen, i want to get the text of element which is currently showing on the screen, I tried .text() function, but this returns the text of all the s elements, is there any way using javascript or jquery to do this.
<div id="text">
<span style=" font-size:100px;text-align:center;">koko</span>
<span style=" font-size:100px;text-align:center;">abc</span>
<span style=" font-size:100px;text-align:center;">efh</span>
</div>
$(document).ready(function(){
$('#text').mouseover(function(){
var txt = $('#text span').text();
alert(txt);
});
});

demo or another here
code
$('#text > span').mouseover(function(){
var txt = $(this).text();
alert(txt);
});

Since you are using the cycle plugin, the active slide is given the class "activeSlide". You can get the text of the active slide by doing something like $('.activeSlide').text();
You can also set a callback in the options while initialising the cycle plugin. You can look at the options that you can set with cycle here: http://jquery.malsup.com/cycle/options.html
You will be able to use the "after" event callback in case you want to do something everytime the slide changes.
$(document).ready(function () {
$('#text').cycle({
after: function (currSlideElement, nextSlideElement, options, forwardFlag) {
alert($(nextSlideElement).text());
}
});
});

using datepicker on <div>

I want to add datepicker on but it should have been in HIDE state. on click of div it should show datepicker. Just like on input tag.
I have tried using Button Text and Icon to show it but was not able to display it without input field.

You can do something like this:
HTML:
<div id="control">Click for calendar</div>
<div id='dp'></div>
JS/Jquery:
var cal = $('#dp').datepicker();
cal.hide();
$('#control').on('click', function() {
if (cal.is(':hidden')) {
cal.show();
} else {
cal.hide();
}
});​​​​​​​​​​​
Example jsFiddle: http://jsfiddle.net/aztechy/dpAWV/