Clearing the textbox values onclick and displaying onblur - javascript

Is there a way to clear the default textbox value onclick on textbox and display onblur of multiple textboxes on form page?

HTML:
<input type="text" value="" onClick="Clear();" id="textbox1>
<input type="text" value="" onClick="Clear();" id="textbox2>
<input type="text" value="" onClick="Clear();" id="textbox3>
<input type="text" value="" onClick="Clear();" id="textbox4>
Javascript :
function Clear()
{
document.getElementById("textbox1").value= "";
document.getElementById("textbox2").value= "";
document.getElementById("textbox3").value= "";
document.getElementById("textbox4").value= "";
}
Your question was a little vague to me, but the above will clear all the textboxes when one is clicked. Hopefully this helps you.

One Line solution
<input type="text" value="" onClick="this.value='';" id="textbox1">
or
<input type="text" value="" onClick="this.value=='Initial Text'?this.value='':this.value;" id="textbox1">

function Clear1(str)
{
document.getElementById(str).value= "";
}
function Clear2(str2)
{
var aa1=document.getElementById(str2);
if (aa1.value==""){
document.getElementById(str2).style.backgroundColor = "#ffcccc";
}else{
document.getElementById(str2).style.backgroundColor = "#ffffff";
}
}
<input type="text" value="test1" onClick="Clear1(this.id);" id="textbox1" onblur="Clear2(this.id);">
<input type="text" value="test2" onClick="Clear1(this.id);" id="textbox2" onblur="Clear2(this.id);">
<input type="text" value="test3" onClick="Clear1(this.id);" id="textbox3" onblur="Clear2(this.id);">
<input type="text" value="test4" onClick="Clear1(this.id);" id="textbox4" onblur="Clear2(this.id);">
https://jsfiddle.net/warunamanjula/qy0hvmyq/1/

Related

Combining multiple .change functions into one using Jquery

I have a few text input fields that will update some hidden fields.
I have a few .change functions that will watch for changes on the visible input fields.
Here is my JSFiddle - https://jsfiddle.net/tcgmr698/
Jquery
$("#TravellerContact_ManualAddress1").change(function () {
$('input[id=TravellerContact_Address1]').val($('input[id=TravellerContact_ManualAddress1]').val())
});
$("#TravellerContact_ManualAddress2").change(function () {
$('input[id=TravellerContact_Address2]').val($('input[id=TravellerContact_ManualAddress2]').val())
});
$("#TravellerContact_ManualAddress3").change(function () {
$('input[id=TravellerContact_Address3]').val($('input[id=TravellerContact_ManualAddress3]').val())
});
$("#TravellerContact_ManualAddress4").change(function () {
$('input[id=TravellerContact_Address4]').val($('input[id=TravellerContact_ManualAddress4]').val())
});
$("#TravellerContact_ManualAddress5").change(function () {
$('input[id=TravellerContact_Address5]').val($('input[id=TravellerContact_ManualAddress5]').val())
});
$("#TravellerContact_ManualPostCode").change(function () {
$('input[id=TravellerContact_PostCode]').val($('input[id=TravellerContact_ManualPostCode]').val())
});
HTML
<div id="manualFullAddress" class="fullAddress">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress1" name="TravellerContact_ManualAddress1" placeholder="Address" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress2" name="TravellerContact_ManualAddress2" placeholder="Address 2" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress3" name="TravellerContact_ManualAddress3" placeholder="Address 3" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress4" name="TravellerContact_ManualAddress4" placeholder="City" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress5" name="TravellerContact_ManualAddress5" placeholder="Province" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualPostCode" name="TravellerContact_ManualPostCode" placeholder="Postal Code" type="text">
</div>
Hidden fields that get posted to the DB
<input class="HideValFromSet" id="TravellerContact_Address1" name="TravellerContact.Address1" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address2" name="TravellerContact.Address2" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address3" name="TravellerContact.Address3" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address4" name="TravellerContact.Address4" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address5" name="TravellerContact.Address5" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_PostCode" name="TravellerContact.PostCode" type="hidden" value="">
My main question is how do I go about combining these functions into one function? Is it possible?
The relevant elements are all children of #manualFullAddress. We can therefor add the .change() event handler to this parent element instead ("event delegation", but it would also work with one event handler per <input /> element)
We can use this to get the id of the <input /> element. And with .replace("Manual", "") we can get the id of the corresponding <input type="hidden" /> element.
$("#manualFullAddress").on("change", "input", function() {
const input = $(this);
$("#" + this.id.replace("Manual", "")).val(input.val());
});
$("#manualFullAddress").on("change", "input", function() {
const input = $(this);
$("#" + this.id.replace("Manual", "")).val(input.val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="manualFullAddress" class="fullAddress">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress1" name="TravellerContact_ManualAddress1" placeholder="Address" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress2" name="TravellerContact_ManualAddress2" placeholder="Address 2" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress3" name="TravellerContact_ManualAddress3" placeholder="Address 3" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress4" name="TravellerContact_ManualAddress4" placeholder="City" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress5" name="TravellerContact_ManualAddress5" placeholder="Province" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualPostCode" name="TravellerContact_ManualPostCode" placeholder="Postal Code" type="text">
</div>
<div>
"Hidden" Elements
<br />
<input class="HideValFromSet" id="TravellerContact_Address1" name="TravellerContact.Address1" value="">
<input class="HideValFromSet" id="TravellerContact_Address2" name="TravellerContact.Address2" value="">
<input class="HideValFromSet" id="TravellerContact_Address3" name="TravellerContact.Address3" value="">
<input class="HideValFromSet" id="TravellerContact_Address4" name="TravellerContact.Address4" value="">
<input class="HideValFromSet" id="TravellerContact_Address5" name="TravellerContact.Address5" value="">
<input class="HideValFromSet" id="TravellerContact_PostCode" name="TravellerContact.PostCode" value="">
</div>
In your case, you can bind change event using .manualAddressEntry-js and get the id dynamically as shown below.
$('.manualAddressEntry-js').change( function() {
var id = $(this).attr('id').replace("Manual", "");
$(`input[id=${id}]`).val($(`input[id=${id}]`).val());
});
But I will recommend changing id to data- and using that instead of id, if you're not using it anywhere else.

Round off all computed textbox decimal places into 2

Hi I am having a problem with my script, I want to round of all the result on text boxes simultaneously every changes that I am making on every textboxes.
I am talking about hundreds of textboxes that will round off after every changes/input on textboxes.
Anyways here is my sample code of my work.
HTML:
<input type="text" id="textbox" value="1.1251112314555" />
<br/>
<input type="text" id="textbox2" value="1" />
<br/>
<input type="text" id="textbox3" value="1" readonly/>
<br/>
<input type="text" id="textbox4" value="1" readonly/>
<br/>
Javascript:
$("input[type=text]").blur(function() {
totalad3 = parseInt(textbox) * parseInt(textbox2);
totalad4 = parseInt(textbox) + parseInt(textbox2);
$('#textbox3').val(totalad3);
$('#textbox4').val(totalad4+"%");
var num = parseFloat($("input[type=text]").val());
var new_num = $("input[type=text]").val(num.toFixed(2));
});
if you want to update values in each input with rounded values on blur event of any input, in the handler function get all the inputs and then iterate over each input and change its value. something like this:
$('input[type=text]').on('blur', function() {
var inputs = $('input[type=text]');
inputs.each(function(){
var num = parseFloat($(this).val());
var new_num = num.toFixed(2);
$(this).val(new_num);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textbox" value="1.1251112314555" />
<br/>
<input type="text" id="textbox2" value="1" />
<br/>
<input type="text" id="textbox3" value="1" readonly/>
<br/>
<input type="text" id="textbox4" value="1" readonly/>
<br/>
<input type="button" id="calculate" value="Calculate"/>
hundreds of textboxes that will round off after every changes/input on
textboxes.
If I understand your requirement correctly..
$("input[type=text]").blur(function() {
// console.log("Which textbox has changes?", $(this).val() );
// Get current input value
var currentInputValue = parseFloat($(this).val());
// Round them to 2 decimal
var roundedValue = currentInputValue.toFixed(2);
// Update back to textbox
$(this).val( roundedValue );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textbox" value="1.1251112314555" />
<br/>
<input type="text" id="textbox2" value="1" />
<br/>
<input type="text" id="textbox3" value="1" readonly/>
<br/>
<input type="text" id="textbox4" value="1" readonly/>
<br/>
<input type="text" id="textbox5" value="123.2323" />
<br/>
<input type="text" id="textbox6" value="1.444" />
<br/>
<input type="text" id="textbox7" value="23.23235" />
<br/>
<input type="button" id="calculate" value="Calculate"/>
Another way using Array.from with Map function.
<script type="text/javascript">
$(function () {
$("input[type=text]").on('blur', function(){
Array.from($("input[type=text]"), (el, i) => $(el).val(parseFloat($(el).val()).toFixed(2)));
})
});
</script>
<input type="text" id="textbox" value="1.1251112314555" />
<br/>
<input type="text" id="textbox2" value="1" />
<br/>
<input type="text" id="textbox3" value="1" readonly/>
<br/>
<input type="text" id="textbox4" value="1" readonly/>
<br/>
<input type="button" id="calculate" value="Calculate" />

jQuery to populate array-named form fields based on first entered text box value

I have a form with variable number of inputs as an array
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
The idea is when i put some value in the first field (foo[1]) i need the jQuery or Javascript copy the value from #foo[1] into #foo[2], #foo[3], etc depending on the array.
Do you need following behavior :
$(document).ready(function(){
$("input[id^=foo\\[]").prop("disabled",true); //disable all elements first
$("input#foo\\[1\\]").prop("disabled",false); //then enable the first one
$("input#foo\\[1\\]").change(function(){
var source = $(this);
var currentVal = $(source).val();
$("input[id^=foo\\[]").each(function(){
if(!$(this).is(source))
$(this).val(currentVal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>
$('input').on('input', function(){
$(this).siblings().val($(this).val());
});
Couldn't tell if you just wanted the first or all. If just the first, you can target with an id or jQuery.
$('input').eq(0).on('input', function(){});
Something like this
HTML
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
JavaScript
$("input[id=foo\\[1\\]").on("input", function (){
$(this).siblings().val($(this).val());
});
And if you want the other to be readonly:
$("input[id^=foo\\[]:not([id=foo\\[1\\]])").attr("readonly", "readonly");

only first form is checked by jQuery

i have one form on my page. so i want to check each input with corresponding button. so i wrote smth like this and it only checks first input even if i click on second inputs button.
<form target="myFrame" method="post" id="addProduct">
<fieldset>
<input type="hidden" name="iProductAdd" value="6" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[6]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="7" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[7]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="4" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[4]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
</form>
and i have jQuery Code:
$(document).ready(function(){
$("form").submit(function(){
// Get the Login Name value and trim it
var name = $.trim($('.quantity').val());
// Check if empty of not
if (name === '') {
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-red.png')");
return false;
} else {
$('input[type="submit"]').each(function(){
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
});
}
});
});
Your problem is that you are using ids as it were classes. An id should be unique in a document. So defining multiple objects with the same id is an error. And all functions will apply only the first they encounter. To do what you want, you have to use classes, so change your code in this way:
$(".addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
To look for all elements of that class.

using single text box to enter value in other box

im trying to create text box which is used to enter value in other 4 text box one by one
i had tryed the below code but it copy's only to one text box...
<html>
<head>
<script>
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("copy_to").value=a
}
</script>
</head>
<body>
<input type="text" name ="a" id="copy_from" onKeyUp="copy_data(this)"/>
<input type="text" name ="a" id="copy_to" disabled/>
<input type="text" name ="a" id="copy_to" disabled/>
<input type="text" name ="a" id="copy_to" disabled/>
<input type="text" name ="a" id="copy_to" disabled/>
enter code here
<input type="text" name ="a" id="copy_to" disabled/>
</body>
</html>
Demo http://jsfiddle.net/Cn6Rb/
Id are unique do this. i.e. use class attribute instead
*API: http://api.jquery.com/keyup/
Hope this fits your need :)
Code
$(document).ready(function () {
$('#copy_from').keyup(function(){
$('.copy_to').val($(this).val());
});
});
Html
<input type="text" name="a" id="copy_from" />
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>enter code here
<input type="text" name="a" class="copy_to" disabled/>
Try this (Hit Enter Key to copy value):
Fiddle
<input type="text" name="a" id="copy_from" onKeyUp="copy_data(this,event)"/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
enter code here
<input type="text" name="a" class="copy_to" disabled/>
<script>
var count = 0;
function copy_data(val, event) {
if (event.keyCode == 13) {
if (count <= 4) {
var a = document.getElementsByClassName('copy_to')[count];
a.value = val.value;
val.value = '';
count++;
}
}
}
</script>
Note Id should be unique, use different strategy
Using Jquery
javascript code
function copy_data(val){
$('.myKlass').val(val.value);
}
html code
<input type="text" class="myKlass" name ="a" id="copy_to1" disabled/>
<input type="text" class="myKlass" name ="a" id="copy_to2" disabled/>
<input type="text" class="myKlass" name ="a" id="copy_to3" disabled/>
Using javascript
function copy_data(val){
var elem_list = document.getElementsByName('a');
for(var i = 1; i < elem_list.length;i++){
elem_list.item(i).value = val.value;
}
}
Actually, class is not the best attribute to do that, as it is supposed to serve as a way to apply styles rather than identifying dom elements. You could use the html5 "data-*" attributes to have a cleaner HTML code, like this:
<input type="text" name ="a" data-role="source"/>
<div data-role="destination">
<input type="text" disabled/>
<input type="text" disabled/>
<input type="text" disabled/>
<input type="text" disabled/>
<input type="text" disabled/>
</div>
This way, you only need two "data-role" polluting your html. The "data-role" attribute is pretty common in jQuery (mainly due Twitter Bootstrap widgets).
Then, you only need this:
$("[data-role=source]").on("keyup", function(){
var that = this;
$($("[data-role=destination]").children()).each(function(index, item) {
item.value = that.value;
});
});

Categories

Resources