I wanted to pass the value of input field to another input field with its value via javascript. I wrote code as shown below.
First input:
<input type="text" class="form-control" id="recipient" name="recipientName" value="RecipientName" onkeyup="recipient()"/>
Second input:
<input type="hidden" id="recipientHidden" name="recipientName"/>
Js Code
function recipient(){
var recipientNameValue = document.getElementById('recipient').value;
document.getElementById('recipientHidden').value = recipientNameValue;
console.log(document.getElementById('recipientHidden').value);
}
When I open console, there is no value in the console. When I click on the first input field, value is printed.
How can I get it instantly ?
Your code works fine, but it will only log the value on key up. You can log the value immediately by calling the recipient() function right away:
function recipient() {
var recipientNameValue = document.getElementById('recipient').value;
document.getElementById('recipientHidden').value = recipientNameValue;
console.log(document.getElementById('recipientHidden').value);
}
// Call function straight away
recipient()
<input type="text" class="form-control" id="recipient" name="recipientName" value="RecipientName" onkeyup="recipient()" />
<input type="hidden" id="recipientHidden" name="recipientName" />
Related
I have two input and I want put a init value for example the user time.
<input type="time" id="horaFinal" ref={(hora_final) => this.hora_final = hora_final} />
<input type="date" id="fechaFinal" ref={(fecha_final) => this.fecha_final = fecha_final} />
I can take the value with this code var yearInit = this.fecha_inicial.value
but I cant put the init value, I try with this.fecha_inicial.value= 01/02/2017in the componentWillMout, componentDidMount,constructor, but not working
Is there a way to get the object itself when a function receives a value from it?
Example:
<input id="field1" onblur="testFunction(this.value)" />
<input id="field2" onblur="testFunction(this.value)" />
<script>
function testFunction(x){
field_value_length = x.length;
field_object = ????;
}
</script>
When I blur the field, I apply it's length to "field_value_length" in testFunction(). Ok!
Is there a way to get the object itself (the input) where data in "x" came from, so I can get other properties from the form field that has sent data value to the function, like the "id" etc. just like it was sending testFunction(this) instead testFunction(this.value)?
What is sent to the function is the value from the input... Only.
But nothing prevents you from sending the input element, using just this.
<input id="field1" onblur="testFunction(this)" />
<input id="field2" onblur="testFunction(this)" />
<script>
function testFunction(x){
field_value_length = x.value.length;
field_id = x.id;
}
</script>
<input type="text" name="last" size="16 ONCHANGE ="nameselect();">
function nameselect(){
if(isBlank(""+document.contest.last.value)){
document.contest.last.value = "surname"
document.contest.last.focus();
document.contest.last.select();
}
}
function isBlank(s){
var len = s.length;
for(var i =0; i<len;++i){
if(s.charAt(i)!="") return false;
}
return true;
}
Last name: <input type="text" name="last" size="16 ONCHANGE ="nameselect();">
i am having text field on which onchange function is running. in this function if the text field is empty then automatically it has to set as surname and the current focus set to the field and text got selected as well but none of the applies function is working, its quite confusing for me.
The HTML is probably causing you some issues.
See that the attribute is not closed properly size="16 ONCHANGE ="
In your example you have
<input type="text" name="last" size="16 ONCHANGE ="nameselect();">
it should be:
<input type="text" name="last" size="16" onChange="nameselect();">
That should be the start at least.
I just can't get this to work.
HTML:
<form action="index.php?page=n0402" method="post" Name="AddPolish" >
<div id="frmBrandInput">
<label for="frmBrand">Brand name:</label>
<input type="text" name="frmBrand" size="50" onkeypress="BrandCheck();" maxlength="100" id="frmBrand" value="Enter existing or new brand" />
<span id="frmBrand_Status"></span>
</div>
</form>
Javascript:
function BrandCheck()
{
var jsBrandName = document.forms["AddPolish"]["frmBrand"].value;
alert(jsBrandName);
}
Why can't I get the value of frmBrand into jsBrandName? If I use Firebug to debug, I get the following in my Watch list:
Watch Expression:
document.forms["AddPolish"]["frmBrand"];
Result:
NodeList[input#frmBrand property value = "G" attribute value = "Enter existing or new brand", input#frmBrand attribute value = ""]
I can see the value "G" which is what I entered in the input field. What am I doing wrong in passing it into the jsBrandName?
The output you got implies that there are two inputs with name="frmBrand" in the form. You need to index them, e.g.
var jsBrandName = document.forms["AddPolish"]["frmBrand"][0].value;
to get the value of the first one.
This piece of code does not execute the code block inside the callback function for result():
var cityURL = '/myURL/path';
$('#city').autocomplete(cityURL, {
cachelength:0
}).result(function(event, data){
if(data){
$('#city_id').val(data[1]);
$('#state_id').val(data[3]);
$('#state').val(data[2]);
}
});
the value of input#city_id and input#state_id does not change, but the value for #state does change. Both are hidden input right next to their field:
<input type="text" id="city" name="city"/>
<input type="hidden" id="city_id" name="city_id" />
<input type="text" id="state" name="state"/>
<input type="hidden" id="state_id" name="state_id" />
however, if I put an alert, the values change:
$('#city').autocomplete(cityURL, {
cachelength:0
}).result(function(event, data){
if(data){
alert(data[1]);
$('input#city_id').attr('value',data[1]);
$('input#state_id').val(data[3]);
$('input#state').val(data[2]);
}
});
why is this?
EDIT: Scratch that, the values do not change even with an alert:
As I suspected in my comment, it's just Firebug that's not updating properly. You shouldn't trust the input value attributes it shows as they're often out of date.
A reliable way to check input values is to just use JS and enter something like $("#foo").val(); in the console.