I have a question regarding JSP. I have two textboxes. When I type the value in the first text box, it should replicate automatically in the second text box.
<input type="text"
class="formtext"
name="List.lItemList<c:out value='[${status.index}]'/>.value1"
value="0.0"
onChange="validateOnChange(this,'desc','minvalue','maxValue','float')">
<input type="text"
class="formtext"
name="List.clItemList<c:out value='[${status.index}]'/>.value2"
value="0.0"
onChange="validateOnChange(this,'desc','minvalue','maxvalue','float')">
Assuming that the first box has ID input1 and the second input2 (so you'll have to add those IDs), you can do it like this:
document.getElementById('input1').onkeyup = function () {
document.getElementById('input2').value = this.value;
};
You can do this using JavaScript. Attach an keyup event handler on the first textbox which should copy its value to the second one.
<input type="text" id="t1" onkeyup="document.getElementById('t2').value=this.value" />
<input type="text" id="t2" />
Related
This code is showing 0 but i want show enter location with back end hidden value 0
<input type="text" name="location" value="0" placeholder="Enter Location" />
How to do this please help me to fix the small issue.
Thanks
The value attribute refers to the value inside the text-field.
The placeholder is only visible if the text-field has no value.
because of this there is no way to set the value attribute and still see the
placeholder.
try using a custom attribute for your back-end code:
data-value
Remove value="0" from your markup and it will work. value="0" is like you typed 0 into it, so it does not show the placeholder
Unfortuntaly, any value added to the input, makes the placeholder dissapear. What you could do is add a value in the forms onsubmit handler if no value was entered
<form id="myForm">
<input type="text" name="location" placeholder="Enter Location" />
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function() {
var input = this.getElementsByName('location')[0];
if (input.value.length === 0) input.value = '0';
})
</script>
That way a zero is sent to the server if no value was inputted.
It would probably be easier to just check serverside if the input is part of the form data.
I think one of the solutions would be to put only the place-holder in the html & assign the default value in JS(if null).
$('form').submit(function(){
var input = $('#test').val();
if(input == ''){
$('#test').val('empty');
}
alert($('#test').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form>
<input id="test" type="text" placeholder="Type here" />
<input type="submit" />
</form>
This question seem to be very silly! but I am looking for the best answer,
I have a input field and a hidden field. How to set the value of the input field as value of the hidden field?
<input class="class1" id="id1" name="name1" value="06/30/2015" />
<input type="hidden" name="hidden" id="hidden" value="I want the value of above field">
Please try this
$(document).ready(function(){
$("#id1").change(function(){
$("#id1").val($("#hidden").val());
});
});
DEMO
You can use a change event handler to update the value of hidden field
//set the initial value
hidden.value = id1.value;
<input class="class1" id="id1" name="name1" value="06/30/2015" onchange="window.hidden.value=this.value" />
<input type=hidden name="hidden" id="hidden" value="I want the value of above field">
You can this by below why, i used onblur for set values from input to hidden. same why you can use different method for this.
Or if you strictly want to use javascript then add one onblur function and do code as i do with callthis() function.
$("#id1").blur(function(){
$("#hidden").val($(this).val())
console.log($("#hidden").val());
});
function callthis(inputobj)
{
document.getElementById("hidden").value = inputobj.value;
console.log(document.getElementById("hidden").value)
}
<input class="class1" id="id1" name="name1" onblur="callthis(this)" value="06/30/2015" />
<input type="hidden" name="hidden" id="hidden" value="I want the value of above field">
I have a page with a table having some <input type="text"> fields. I have a button next to each field. I allow user to change the text of input fields. But when the user click the button next to input field, the corresponding input field's value need to be restored to default (previous) value.
I tried to make an array with index as input field's name. This array can store default values, and can be retrieved easily and restored to their corresponding fields. I tried to do this using keyup(function(), but I know that this triggers each time key is pressed.
Here is my HTML;
<input class="zx" type="text" name="qwer" value="Google" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Yahoo" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Bing" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Ask" /><button class="cncl">X</button><br />
Here is the fiddle.
How can I restore the default values to the fields?
You can use the defaultValue property of the input element
$('.cncl').click(function(){
$(this).prev().val(function(){
return this.defaultValue;
})
})
Demo: Fiddle
Try this, use .attr('value') to get the default value:
$('.cncl').on('click', function () {
$(this).prev().val($(this).prev().attr('value'));
});
DEMO
I have done something similair in the past. I stored the default value in an attribute of the html-tag itself.
<input class="zx" type="text" name="qwer" default-value="Google" value="Google" />
When you like to restore it you can execute
$('selector').val($('selector').attr('default-value'));
I am making a Web application that validates passkeys and displays some values there are four passkeys for a file to be entered Validate it, I am entering the passkeys just like we enter the Credit Card Number in the Payment gateway. In my present application I have enter one Passkey then have to press Tab or using the Mouse I have to select the Next Textbox to enter next Passkey, How do I Make the mouse Cursor to Jump automatically from one Textbox to Another Textbox after its maximum value filled like in Payment gateways
You can do pure javascript like this:
<script type="text/javascript">
function ValidatePassKey(tb) {
if (tb.TextLength >= 4)
document.getElementById(tb.id + 1).focus();
}
}
</script>
<input id="1" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="2" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="3" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="4" type="text" maxlength="4">
In my present application I have enter one Passkey then have to press Tab or using the Mouse I have to select the Next Textbox to enter next Passkey
Don't do that. Just use the Control.Focus() method.
When in HTML, you can use jQuery's focus():
$("#textbox").focus();
You can use JavaScript's Onchange Event (or JQuery may be) on the Textbox which calls a method, where You can check the value of the Textbox if it equals the Maximum value , then setFocus on the next Textbox.
Use the TextBox.Focus() method on the next TextBox.
Use the first TextBox's TextBox.TextChanged event to test if focus should be changed and to call the Focus method on the next TextBox.
you can create a directive also to get the position move
directive 1
directive 2
<script type="text/javascript">
$(document).ready(function(){
$("#1").keyup(function(){
var text_lenght = $('#1').val().length;
if (text_lenght == 3) {
$('#2').focus();
}
});
$("#2").keyup(function(){
var text_lenght = $('#2').val().length;
if (text_lenght == 3) {
$('#3').focus();
}
});
});
</script>
<input id="1" type="text" class="form-control" name="phone1" maxlength="3" >
<input id="2" type="text" class="form-control" name="phone2" maxlength="3" >
<input id="3" type="text" class="form-control" name="phone3" maxlength="4">
I want write a sum of values in a textbox. For that I have this two parts of code:
HTML:
<label for="test1">Value(€)</label>
<input type="text" name="test1" id="test1" value="0"><br>
Javascript:
function selected_feature(event){
//set to 0
document.getElementById('test1').value = 0;
//Loop
for(var i=0; i<elements.selectedFeatures.length; i++) {
var elements;
elements += parseFloat(elements.selectedFeatures[i].attributes.value_elements);
document.getElementById('test1').value = elements;
}
}
http://pastebin.com/N2jnaQ4x
Conclusion: I get the value 'NaN' in textbox. I have tried many things with 'parsefloat' but nothing works. If i make an 'alert (typeof elements')' in the end of function i get 'number'.
Why textbox received 'NaN'?Can anyone help me ?
Thanks
based on debugging, i think the problem is that the input textbox declaration for the value field is not declared with an integer value. I found this out in this jsFiddle perhaps try setting the value to 0 or blank in the value field of the two input text boxes in the code. instead of the textbox. you'll see that when you click the "Add the two values" it will shows us NaN.. but when the input text field has the integer value when ran.. You will see that it will add up.. I still havent figured out how to fix this - anyway, just sharing..
Try this
<input type="text" id="one" value="" />
<input type="text" id="two" value="" />
VS this
Try this
<input type="text" id="one" value="20" />
<input type="text" id="two" value="30" />
in the below
JSFiddle Code Here
Signing Out - Lakhi Calantoc of Nouvre Technologies