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);
});
Related
Set jquery mask on a dynamically inserted input?
I'm trying to do it in the down format, but I'm not succeeding.
The new input loses the mask.
Can someone help me with this please.?
<div class="control">
<input type="text" name="item_valor" placeholder="Valor" class="input valor" maxlength="255" id="id_item_valor">
</div>
.
$(document).ready(function(){
$('.valor').mask("#.##0,00", {reverse: true});
});
.
$(document).on('click', '#addItem', function () {
var newElement = $('.control:last').clone(true);
$('.control:last').after(newElement);
})
set the mask on focus of the input like this
$(document).on("focus", ".valor", function() {
$(this).mask("#.##0,00", {reverse: true});
});
you can probably remove it from document.ready function and also instead of cloning and appending in 2 lines you can shorten it to 1 line with this
$('.control:last').after($('.control:last').clone());
here is a working fiddle https://jsfiddle.net/tv7w3Lku/3/
Side note: cloning an element with ID will create multiple elements with same ID which is probably not the best way, you should just stick with class in this case
Just recall your mask function after each input is added to the DOM.
$(document).on('click', '#addItem', function () {
var newElement = $('.control:last').clone(true);
$('.control:last').after(newElement);
$('.valor').mask("#.##0,00", {reverse: true});
})
I was having this same problem, and discovered the .masked() function will apply the mask to a dynamic value. Hope this helps:
HTML:
<input name="phone" type="text">
<button>insert dynamic value</button>
JS:
$(function(){
$("input[name='phone']").mask("(000) 000-0000");
});
$("button").click(function(){
newPhoneNumber = "1231231234";
maskedValue = $("input[name='phone']").masked(newPhoneNumber));
$("input[name='phone']").val(maskedValue);
});
fiddle: https://jsfiddle.net/qcsf3z0j/4/
and docs: https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html#getting-a-masked-value-programmatically
So I have an input form that needs to be not visible for a certain point. So I use CSS and Javascript to hide the input until it should be visible. I come from a python background and what I would like to do is something like:
name = input("")
I tried to do something like that but it just assigns the change in visibility to the variable. I have tried using .value however I just can't it to work properly.
I was wondering if you can get can getContext (or if there is something similar) that allows me to assign what the user. Or I could just simply append it to a variable for it work as it should.
To give additional context I need the form to get the value the user has inputted when they click submit on the canvas
var gameOver = true;
if (gameOver){
document.getElementById('name').style.visibility = 'visible'
console.log(name)
}
<html>
<body>
<input id = "name" type="text" class="name"
style="visibility: hidden;"></input>
</body>
</html>
You can do that by simply declaring a variable, say var nameInput, and then assigning the DOM node to it:
var nameInput = document.getElementById('name');
Note that you should not be using name, because it is an implementation-dependent reserved keyword in JavaScript.
To access its style object, you can simply use nameInput.style..., e.g. nameInput.style.visibility = 'visible' if you want to update the visibility property.
If you want to retrieve it's value, you can do this:
console.log(nameInput.value);
var gameOver = true;
if (gameOver) {
var nameInput = document.getElementById('name');
nameInput.style.visibility = 'visible';
console.log('DOM node: ' + nameInput);
console.log('Value: ' + nameInput.value);
}
<input id="name" type="text" class="name" style="visibility: hidden;" />
If you want to dynamically retrieve its value as the user inputs it, you will need to read up on event binding using .addEventListener(). JS is not reactive in the sense that you dynamically update variables upon user interaction with the page. The regime is this:
User triggers some kind of event. In this case, you want to listen to the onInput, onChange, onBlur... events
In your JS logic, you will have to listen to this event that is emitted by the element. This is done by binding an event listener to your DOM node.
var gameOver = true;
if (gameOver) {
var nameInput = document.getElementById('name');
nameInput.style.visibility = 'visible';
console.log('DOM node: ' + nameInput);
console.log('Value: ' + nameInput.value);
}
nameInput.addEventListener('input', function() {
console.log('Updated value: ' + this.value);
});
<input id="name" type="text" class="name" style="visibility: hidden;" />
If I properly understand your question, your problem right now is to get the input value because you already have the code to make it visible.
So what you need to do is to add a handler to your input to execute a function in the moment you want to retrieve the value the user types-in, for instance on change:
HTML:
<input id = "name" type="text" class="name"
style="visibility: hidden;" onchange="inputChanged();"></input>
Javascript:
function inputChanged() {
console.log(document.getElementById('name').value);
}
Hope this helps !
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({
});
I have a text input, and I want to hide the text inside, on a given event(I disable the input, when it is not needed). I would like to display the hidden text, when the given event is reversed.
I know I can store the value and retrieve as needed. I'd like to avoid moving data, since this is a purely cosmetic operation.
Can the input text be hidden, or is manipulating the data in the input the only way? I would like the simplest solution.y?
I can use pure JS and jQuery.
I would use "value" attribute of the same input object, since the attribute is the default value. In this case you don't even need any additional variables. The idea of this approach comes from the difference between properties and attributes. It means that if you change value property of the object, the attribute value remains the same as it was before.
var input = document.querySelector('input');
function hide() {
input.value = "";
}
function show() {
input.value = input.getAttribute('value');
}
<input type="text" value="Some text">
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>
An example on how to store the value of an input element inside the dataset of the element.
and show/hide it on hover.
var hello = document.getElementById('hello');
hello.dataset.value = hello.value;
hello.value = '';
hello.addEventListener('mouseover', function() {
hello.value = hello.dataset.value;
});
hello.addEventListener('mouseout', function() {
hello.value = '';
});
<input id="hello" value="Hello World" />
I have this textbox
{{ Form::text('horasT', $horasT, array('class'=>'input-block-level', 'placeholder'=>'0.00')) }}
I want to update a Label when the textbox value changes.
this is the label:
<label id="subTotal" name="subTotal">0</label>
My Jquery is this:
jQuery('#horasT').on('input', function (){
var valT = $('#horasT').val();
$('#subTotal').value = valT;
});
It doesn't seem to work and I've tried a lot of things so far.
But for me this should work... What seems to be the problem? The label just sits in 0 no matter the value that is in the textbox
The event is change and a label has text not value
Possible other event to trigger on: "input change keyup keypress cut paste mouseup focus blur"
jQuery(document).on('change', '#horasT', function (){
var valT = $(this).val();
$('[name="subTotal"]').text(valT);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label for="horasT" name="subTotal">0</label>
<input id="horasT" type="text">
jQuery("#horasT").change(function() {
$("#subTotal").text($(this).val());
});