We Keep Coding

Retrieve input value using jQuery

I want to retrieve the value of an input using jQuery.
Here's the HTML:
<input type="text" name="a" id="a" />
<input type="button" name="b" id="b" value="Click here"/>
Here's the jQuery:
$(document).ready(function() {
var normal=$('#a').val();
$('#b').on("click", function() {
alert(normal);
});
});
Due to some reason the alert(normal); does not work whereas alert($('#a').val()); does. Why? Isn't normal and $('#a').val(); holding the same value?
In case you want a jsfiddle: http://jsfiddle.net/L2uX4/20/
Thanks

if you declare var normal outside the click function handler then the initial value will be empty as there is no value in the text box once the DOM is ready . But if you declare it within the click event handler then the value will be assigned once you type something in the textbox and click the button.
The below code works for me
$(document).ready(function() {
$('#b').on("click", function() {
var normal= $('#a').val();
alert(normal);
// same as alert($('#a').val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="a" id="a" />
<input type="button" name="b" id="b" value="Click here"/>

You're assigning normal upon document.ready() and not reassigning when you click, so normal will be whatever value you give to the input field when the page loads.

Try this code
$(document).ready(function() {
$('#b').on("click", function() {
var normal=$('#a').val();
alert(normal);
});
});

Yes, you are right,
provided the text box with id= a had some text on load.
by that I mean something along the lines of
<input type="text" name="a" id="a" value= "foo"/>
Fiddle: http://jsfiddle.net/Jayas/vhjm8v31/2/
Now if you hit Clickhere button it will display foo.
In your case
When you assign the value of a to normal the text box is empty.
You dont have any handlers or events hooked up to reset/set the variable normalon something being typed or after something has got typed in. by that I mean something along the lines of having the value stored on input change along the lines of
$(document).ready(function(){
$('#a').bind('input propertychange', function() {
normal = $('#a').val();
}
})
Fiddle http://jsfiddle.net/Jayas/vhjm8v31/4/
tl:dr - rebinding of the text to the declared variable does not "automagically" happen
So now when you click on the button after reassigning normal you will see the typed value.
or alternatively you can capture the value of normal on click event as you already have it , along the lines of
$('#b').on("click", function() {
var normal = $('#a').val();
alert(normal);
});

jquery/JS simple data bind for dynamic controls

I have on the html page an and elements, created dynamically via js.
<input type="text" id="MyInput" name="MyInput"
class='form-control copyMe' placeholder="enter smth pls"/>
<div id="jsonTextAreaDiv" contenteditable="true">
<span id="MyInput_JSON"></span>
</div>
And I want to have text binding from input to span.
So, I go with next JS:
$(document).on('input', 'input.copyMe', function(){
var valToInsert = $(this).val();
var idToInsert = $(this).attr("id") + "_JSON";
document.getElementById(idToInsert).innerHTML = valToInsert;
});
Could be all in one line jquery, but... Anyway.
This binding works fine during entering text to input.
But once input looses focus - suddenly span looses inner text.
I don't know why. This is exactly my question, how is it happening?
I've "worked around" this issue with adding
$(document).on('input', 'input.copyMe', function(){
var valToInsert = $(this).val();
var idToInsert = $(this).attr("id") + "_JSON";
document.getElementById(idToInsert).innerHTML=valToInsert;
}).on('blur', '.copyMe', function(){
var valToInsert = $(this).val();
var idToInsert = $(this).attr("id") + "_JSON";
document.getElementById(idToInsert).innerHTML=valToInsert;});
This way it works like I want it. But this is ridiculous.
Any ideas regarding why does the value disappear from span at the first place?
Thanks in advance.

Change your input event to use the change event instead. IE does not support the 'input' event correctly. Alternatively, you could try using the keyup event.
$(document).on('change', 'input.copyMe', function(){
var valToInsert = $(this).val();
var idToInsert = "#" + $(this).attr("id") + "_JSON";
$(idToInsert).html(valToInsert);
});
Also, i changed your last line to jQuery as well. There's no reason to mix jQuery and pure JS together. It makes it easier to read if you keep it uniform.

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({
});

Live output in jQuery HTML5 range slider

I'm trying to get a live output from a HTML5 input range slider into a javascript variable. Right now, I'm using <input type="range" id="rangevalue" onchange="arduino()">
The way I have it working is doing what I want, but it's not "live."
I want to have it so while you're dragging the slider, it updates the variable, and not only once you let go. For example: when I'm dragging the slider from 1 to 5, I want the variable to update while I'm dragging, so it will update with 1,2,3,4,5 and not only jump from 1 to 5 once I release the slider.
Is it possible to do such a thing? Any recommendations? I was using the jQuery slider plugin, but it was not touch compatible, which eliminated its purpose.
Thanks for all help in advance!
EDIT - I must not have explained well enough, I know how to get the value of a range slider, I just want to get a "live" output from it.

$("#rangevalue").mousemove(function () {
$("#text").text($("#rangevalue").val())
})
jsFiddle example
Or in plain JS:
var inp = document.getElementById('rangevalue');
inp.addEventListener("mousemove", function () {
document.getElementById('text').innerHTML = this.value;
});

Yes it is possible. What we need to do is use .mousedown() and .mouseup() with a Boolean value to keep track that we are holding down the mouse mousedown. When the mouse is held down set mousedown to true and use a setTimeout that keeps updating the value. This way while you are dragging slider the value is being constantly updated. For example:
HTML
<label id="text">0</label>
<input type="range" value=0 min=0 max=10 id="rangevalue">
JavaScript
var mouseDown = false
$("#rangevalue").mousedown(function() {
mouseDown = true;
updateSlider()
});
$("#rangevalue").mouseup(function() {
mouseDown = false;
});
function updateSlider() {
if(mouseDown) {
// Update the value while the mouse is held down.
$("#text").text($("#rangevalue").val());
setTimeout(updateSlider, 50);
}
}
Here is a fiddle

You could also use the oninput attribute.
<input type="range" min="5" max="10" step="1"
oninput="arduino()" onchange="arduino()">
More Information on Bugzilla

I think, this solution a good fit for this problem
$("#rangevalue").on("input", function(){
updateSlider()
});
function updateSlider() {
// Update the value while the mouse is held down.
$("#text").text($("#rangevalue").val());
setTimeout(updateSlider, 50);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<label id="text">0</label>
<input type="range" value=0 min=0 max=10 id="rangevalue">

I think it is working with your Code.
<input type="range" id="rangevalue" onchange="arduino()">
<p id="t"></p>
<script>
function arduino() {
document.getElementById("t").innerHTML = document.getElementById("rangevalue").value;
}</script>
JSFiddle

JavaScript to clear SharePoint Text Filter box on focus

I am using the following code to clear default value which is "Keyword ...." from a SharePoint text filter box. I put in an alert at line 10 but it doesn't pop-up. Do you any reason why it would not clear the Text Box when a user clicks inside the box to type something.
<script type="text/javascript">
// Clears text box on click or focus
var TextBoxID = document.getElementById("ctl00_m_g_22e9e7dd_3da6_4f0b_bc1c_0874742c6012_SPTextSlicerValueTextControl");
TextBoxID.focus(function()
{
if(this.value == "Keyword ....")
{
alert('test line 10');
$(this).val("");
}
});
</script>

It looks like you may have an error in your jQuery selector.
Should that have been $('#'+searchID).focus(...)?
If not, I was mislead by the reuse of "searchID" as a local variable and the name of a class on an element.

Try something like this?
HTML
Search Box: <input onclick="clearPlaceholder();" id="ctl00_m_g_22e9e7dd_3da6_4f0b_bc1c_0874742c6012_SPTextSlicerValueTextControl" type="text" name="fname" value="Keyword..."><br>
JS
function clearPlaceholder(){
var TextBoxID = document.getElementById("ctl00_m_g_22e9e7dd_3da6_4f0b_bc1c_0874742c6012_SPTextSlicerValueTextControl");
TextBoxID.value = "";
}
http://jsfiddle.net/z5h6H/2/

Here is the code that solved the issue. I needed to clear the value in the text field when user click inside the text box.
<script type="text/javascript">
// Clears text box on click or focus
var TextBoxID = document.getElementById('ctl00_m_g_22e9e7dd_3da6_4f0b_bc1c_0815182c6012_SPTextSlicerValueTextControl');
TextBoxID.onfocus = function(){
if(this.value == 'Keyword ....')
{
TextBoxID.value="";
}
};
</script>