I am having difficulty in getting value from javascript id to the input field. I tried all the answers available on the platform but not worked. while I am getting the value of id="price_div" properly but not in input filed just where id is named. mean id="price_div" has a value when i apply it as like i got value here . but when i use i don't get value in value filed
<div class="title-calc">Approx. price</div>
<div class="price-total" id="price_div">
<input type="hidden" name="price" value=""> //Here i want to add price div value
<span class="currency">$</span><span class="price"></span>
as i understood, you get the value but you can't put this value as the input value. the solution is here, suppose your value is x:
document.getElementsByName("price")[0].value = x;
Give id to your input field and then append value through JavaScript
<div class="title-calc">Approx. price</div>
<div class="price-total" id="price_div">
<input type="hidden" name="price" id="name" value="">
<span class="currency">$</span><span class="price"></span>
<script>
var input_value = document.getElementById("price_div").value
document.getElementById("name").value = input_value
</script>
div has no value ... so to reach input use
var INP = document.getElementById("price_div").firstChild
or
var INP =document.querySelectorAll("#price_div [name=price]")[0]
then INP.value='smth'
use input which is hidden to show a value in span
var SPAN = INP.parent.lastChild;
INP.addEventListener('change',function(ev){SPAN.innerHTML=INP.value;});
this solved my error
var INP = document.getElementByClasses("span").firstChild
Related
I'm using HTML5 and JavaScript
I want to be able to input any word into a label and when you click on the button it gives an alert which includes the given text.
I cannot get it to work with the text I put into the label the alert shows no text.
I've only found how to do it with predefined labels.
Here's my current html code
function getinput() {
var input = document.getElementById("form-scream").innerText;
alert(input);
};
<div>
<p>Word
<label id="form-scream"></label>
<input type="text" name="screaming" id="form-scream">
<button onclick="getinput()"> Click to scream</button>
</p>
<script src="assets/js/scream.js"></script>
</div>
input element does not have innerText property, use value instead. Also, you have use for attribute in a label to associate an element (the element's id as the value of for):
function getinput()
{
var inputVal = document.getElementById("form-scream").value;
alert(inputVal);
};
<div>
<p>Word
<label for="form-scream"></label>
<input type="text" name="screaming" id="form-scream">
<button onclick="getinput()"> Click to scream</button>
</p>
<script src="assets/js/scream.js"></script>
</div>
Is there any way to change a value of a text box located inside a div?
<div class="form-group">
<input id="name" class="form-control" placeholder="Nick" maxlength="15"
value="change me">
</div>
It doesn't matter whether is inside the dive or not:
js: document.getElementById("name").value = "John Smith";
jQuery: $("#name").val("John Smith");
Since your input has an id, super simple. Just change the value parameter.
var my_text_field = document.querySelector('#name');
my_text_field.value = "New Value";
Here is my HTML:
<form name='cred' class="panel-body2">
<div class="form-group">
<label for='addjidlbl'> Username (JID):</label>
<input type='text' id='addjid' />
</div>
<input type='button' id='add' value='add' />
</form>
Here is the JavaScript:
$('#add').bind('click', function() {
var jid = $('#addjid').value;
alert(jid);
//var jid=document.getElementById('addjid').value;
var jid2 =$('#addjid').get(0).value;
alert(jid2);
// //$('#addjid').get(0).value;
log('jid=>'+jid);
var data = document.getElementById("addjid").value; //$(".panel.panel-default2#addjid").value;
alert(data);
alert("type=>"+ typeof(jid));
addRoster(jid);
});
function addRoster(jid) {
log('addRoster=>' + jid);
}
What I get are two message boxes with "undefined" and third with "type=>undefined". Why can't I get the input text of the addjid text box?
If I change var jid = $('#addjid').get(0).value;, jid is just blank even when the textbox has value. Why?
Change .value to .val() like
$('#addjid').value
should be
$('#addjid').val()
Here you have it working using .val()
add some text to the text box and
click on the add button and the alert will popup
$('#add').on('click', function() {
alert($('#addjid').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='cred' class="panel-body2">
<div class="form-group">
<label for='addjidlbl'> Username (JID):</label>
<input type='text' id='addjid' />
</div>
<input type='button' id='add' value='add' />
</form>
If I understand correctly, you want:
$('#addjid').val()
Since you are using id's to get the value you will only have one element with the given id. When you do .get(0) or any index you are typically trying to get the value out of a given array of values. For Ex
<li>first</li> //0
<li>second</li> //1
Here in a structure like this you will do something like
$("li").get(0)
It will give you the first item with in li.
and to get the value you will need to use .val()
So you can use
$('#addjid').val()
Hope this helps you.
Happy Learning :)
here is my fiddle
I am looking at getting the values from an inpt form in html. for example I want to get the value that is entered in the Cat name: input form.
<div id="admin-form">
<form>
Cat name:<input id="admin-cat-name" type="text" name="cat-name" placeholder="10" value="10"><br>
Source: <input id="admin-source" type="text" name="source"><br>
Count: <input id="admin-count" type="text" name="count">
<button id="save-button" type="button">Save</button>
<button id="cancel-button" type="button">Cancel</button>
</form>
</div>
I am thinking along the lines of something like the below:
var form = $('form');
var form2 = $('form #admin-cat-name');
//alert(form)
console.log(form)
console.log(form2) // i think this is an array that has the value that I want?
but I just can't quite get the value from the input form. Can anyone advise how I do this? And if I am going about it the right way?
You are actually looking for .val(). Use the following code:
var form2 = $('form #admin-cat-name').val();
From the docs:
Get the current value of the first element in the set of matched elements or set the value of every matched element.
You can use this $("#admin-cat-name").val()
I want to get value of one textbox and put the same in another textbox.
my code is :
<input type="text" value="Keyword" id="one" />
<input type="text" value="Search" id="two" />
button
jquery:
var input = $("#one");
$('#btn').click(function(){
alert('dgdhjdgj');
var oneValue = $('#one').val();
alert("one value "+ oneValue);
var twoVal = $('#two').val($(input).attr('value'));
alert('two Val' + twoVal);
});
demo is here.
Issue : when I change the value of textbox #one, it does not change the value of #two.
thanks in advance.
$(input).attr('value') gets the value of the value attribute, which is the initial value, not the current value.
You had it right two lines earlier. Use val().
Try this
HTML
<input type="text" placeholder="Keyword" id="one" />
<input type="text" placeholder="Search" id="two" />
button
Script
$('#btn').click(function() {
var oneValue = $('#one').val();
$('#two').val(oneValue)
})
Fiddle
write textarea and check it. JSFIDDLE
$("#add").click(function(){
var thenVal = $("#textarea_first").val();
$("#textarea_second").val(thenVal);
});
if all that you want to change the text of second textbox, as soon as you change the text of first textbox, just use jQuery's change event.
just try this then:
$('#one').on("change",function(){
$('#two').val($(this).val());
});