Develop Reference

How to get value from HTML textbox in Javascript

I simply want to have a textbox on my webpage, using the HTML form, and input tags, and be able to have the inputted value be used by the Javascript on the page. My HTML looks like this:
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
</div>
and the Javascript I'm trying to use looks like this:
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice);
}
However, all I see on the webpage, underneath the textbox, is "[object HTMLInputElement]". What do I do to get this to work right?
Thanks

here's an example with change event listener for firing a function when there's a change in form
var div = document.querySelector('div');
var topMenuChoice = document.getElementById("firstinput");
topMenuChoice.addEventListener('change',function(e){
div.innerHTML = e.target.value/***e.target.value is your input***/
var divInner = div.innerHTML;
setTimeout(function(){
document.write(divInner);
},2000)
})
<form id="firstbox">Choice:
<input id="firstinput" type="text" name="choice" value=66>
</form>
<div>look here!!</div>

Check this !
document.write(document.forms['firstbox'].firstinput.value);
OR
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice.value);
}

See http://www.w3schools.com/jsref/prop_text_value.asp
var htmlInputElementObjet = document.getElementById("firstinput");
document.write(htmlInputElementObjet.value);
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice" value="initial value">
</form>
</div>

If you want to get the text typed in your input you need to use the value property of the element. You can also use another HTML tag to show the results (avoid using document.write):
HTML
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
<div id="result"></div>
</div>
JS
var topMenuChoice = document.getElementById("firstinput");
document.getElementById("result").innerHTML = topMenuChoice.value;
You have to consider the usage of an event (click, keypress) to control the exactly moment to retrieve the input value.
JS
document.getElementById('firstinput').addEventListener('keypress', function(e) {
if(e.which == 13) { //detect enter key pressed
e.preventDefault();
document.getElementById('result').innerHTML = this.value;
}
});

use the value property
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice).value;
}

JQuery get input value

HTML
<td data-title="Quantity">
<div class="clearfix quantity r_corners d_inline_middle f_size_medium color_dark m_bottom_10">
<button class="btn-minus bg_tr d_block f_left" data-item-price="8000.0" data-direction="down">-</button>
<input min="0" class="f_left" type="text" value="2" name="order[line_items_attributes][0][quantity]" id="order_line_items_attributes_0_quantity">
<button class="btn-plus bg_tr d_block f_left" data-item-price="8000.0" data-direction="up">+</button>
</div>
<div>
<i class="fa fa-times f_size_medium m_right_5"></i>Remove<br>
</div>
</td>
Javascript
$('.remove-order').click(function(){
????
});
How to get the value of the input text when remove is click?

You can use .val()
$('.remove-order').click(function(){
$('#order_line_items_attributes_0_quantity').val()
});

$('.remove-order').click(function(){
var input_val = $('#order_line_items_attributes_0_quantit').val();
console.log(input_val);
});

$('.remove-order').click(function () {d
var myval="";
myval = $('input.f_left').val();
// or use:
myval = $('input.f_left')[0].value;
});
In this case those would both return the 2 value as a string. IF you want a number be sure to parse it with parseInt(myval);
NOTE: since you have an ID you should use that selector:
var myvalInt = parseInt($('#order_line_items_attributes_0_quantity').val(), 10);
as that would be the fastest method.

Try closest():
$('.remove-order').on('click', function(e){
alert($(this).closest('td').find('input[name^=order]').eq(0).val());
});
Here,
.closest('td'), the nearest parent td.
.find('input[name^=order]'), all input with name attribute starting with order
.eq(0), first item in the list

Get variable input value on button click

not sure if this is even possible, I have a page with mutiple inputs,each input has a button. is there anyway of getting the inputs value on button click, without hardcoding the inputs id?
example
js
$('button').click(function () {
var inputcontent = $('input').prop('id');
console.log(inputcontent);
});
html
<input type="text" id="1">
<button type="button">Go!</button>
<input type="text" id="2">
<button type="button">Go!</button>
<input type="text" id="3">
<button type="button">Go!</button>
<input type="text" id="99">
<button type="button">Go!</button>

$('input').prop('id') returns id of first matched element in selector. To target the input before each button, you need to use .prev() along with $(this).
Try this:
$(this).prev().attr('id');
Working Demo

You already doing it right, just change a little bit in your code. You have to find out the value of the input field, which is placed just before your button on which you will click. So your code should be:
$('button').click(function () {
var inputcontent = $(this).prev().prop('id');
console.log(inputcontent);
});

This'll solve the issue
$('button').click(function () {
var value = $(this).prev().val();
console.log(value);
});

You're not targeting the item that you want the id from, the input just prior to the button. Use prev(0 to do that. In addition, id is really an attribute, not a property, so you should do this -
$('button').click(function () {
var inputID = $(this).prev().attr('id'); // gets the id of the input that precedes the button
console.log(inputID);
});

one textbox value in another textbox

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

jQuery get child value by ID

I have the following HTML:
<div class="pane">
<h3>
<input type=hidden id="comm_id" value="{$comment.id}">
<label id="comm_name" onclick="this.style.display='none';document.getElementById('comm_name_edit_view').style.display='';document.getElementById('comm_name_edit').value=this.innerHTML;">{$comment.writer_name}</label>
<div id="comm_name_edit_view" style="display:none;">
<input type=text id="comm_name_edit" value="{$comment.writer_name}">
<button onclick="this.parentNode.style.display='none';document.getElementById('comm_name').innerHTML=getElementById('comm_name_edit').value;document.getElementById('comm_name').style.display='';">حفظ</button>
</div>
</h3>
<p>
<label id="comm_content" onclick="this.style.display='none';document.getElementById('comm_content_edit_view').style.display='';document.getElementById('comm_content_edit').value=this.innerHTML;">{$comment.comment}</label>
<div id="comm_content_edit_view" style="display:none;">
<textarea type=text id="comm_content_edit">{$comment.comment}</textarea>
<button onclick="this.parentNode.style.display='none';document.getElementById('comm_content').innerHTML=getElementById('comm_content_edit').value;document.getElementById('comm_content').style.display='';">حفظ</button>
</div>
</p>
<p>delete | approve | spam</p>
</div>
and the following jQuery (I'm bad at jQuery)
jQuery(function(){
$(".pane:even").addClass("alt");
$(".pane .btn-delete").click(function(){
var x=SOMETHING;
$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
}); ..... etc
In the var x=SOMETHING;, I want to be able to get the value of the input box with ID of comm_id in that pane. Is it somehow possible?
Thank you.

You can get the input by using .closest() to get to the <div class="pane"> then .find() the input inside, like this:
$(".pane .btn-delete").click(function(){
var x = $(this).closest(".pane").find(".comm_id").val();
//use x
//animations...
});
Note the change of id to class to be valid for multiple panes, your <input> should look like this:
<input type="hidden" class="comm_id" value="{$comment.id}">

var x = $("#comm_id").val();
EDIT:
actually, you don't even need to select it by ID: you could just use
var x = $( "input[type=hidden]", $( this ).parents(".pane") ).val();
this would solve the problem if you have several fragments of code like that.