Hi i am making a long form and need to copy input value to another input.
On click of check box “Same As Registered Office” all the value should copy from Registered Address to Correpondence Address.
I have tried something thru jquery but not getting any value
http://www.metalsauda.com/GlobalLogistics/23-07-2015/Regnwhdr.html
Thanks…
I think your title/subject is a bit misleading. Do you mean to take input from one FORM to an input in another FORM? Or two inputs in the same form?
I believe they’re wanting something similar to where you have a delivery address and a postal address, with a checkbox that lets you copy the values from one section to the other.
You missed a dot here before click:
$('#checkboxes-0')click(function(){
It should be:
$('#checkboxes-0').click(function(){
Thanks for reply,
here is updated web link:
http://www.metalsauda.com/GlobalLogistics/23-07-2015/Regnwhdr.html
I have made some changes in Jquery and retrieving the value in another form i.e.“correspondence form”,
but now I am facing problem in when i uncheck the checkbox “#checkboxes-0” the value should be null in the correspondence form.
(2) when I am resizing the window my form is working properly in small resolution but in big resolution it is not aligned properly below is the screen shot for reference…
(3) and how I can reduce the gap in between the textbox as show in the below image, for desktop view i tried to reduce the left and right padding, but the issue is coming on responsive sizes…
please suggest some other idea to reduce the gap between the textboxes…
Thanks in advance…
Sounds like a question for @Paul_Wilkins but I’m guessing you need an ‘else’ to turn the values off.
e.g.
$('#checkboxes-0').click(function(){
if($(this).is(':checked')) {
var f1 = $('#ROAaddLine1').val();
$('#CaddLine1').val(f1);
} else{
$('#CaddLine1').val("");
}
});
Of course you need to add all the inputs in both parts of the above. I’m sure Paul or one of the other JS experts could automate that process rather than having to list each form element as the routine will break if you change or add an item in the future. You really want to cycle through it and reset the values to default but is beyond my skill level.
I don’t see that problem. Which browsers is that and what do I need to do to see it.
You could add a special class to the .form-group element and then reduce the right padding.
e.g.
.form-group .col-sm-2{
padding-right:0;
}
Instead of using the .form-group class as I guess that may be a global class then just add a new class to that same element and use the new class wherever you need it.
e.g.
.form-group.small-input-group .col-sm-2{
padding-right:0;
}
HTML:
<div class="form-group small-input-group ">
etc..
.
That’s good advice @PaulOB. I shall retire now to my boudoir, and plan to explore a few improvements before second sleep occurs.
I tried it earlier but its not working
$(‘#checkboxes-0’).click(function(){
if (this.checked==true)
if($(this).is(‘:checked’)) {
alert(‘hi’);
var f1 = $(‘#ROAaddLine1’).val();
var f2 = $(‘#ROAaddLine2’).val();
var f3 = $(‘#ROAcountry’).val();
var f4 = $(‘#ROAstate’).val();
var f5 = $(‘#ROAdistrict’).val();
var f6 = $(‘#ROAcity’).val();
var f7 = $(‘#ROApincode’).val();
var f8 = $(‘#ROAtelephonecode’).val();
var f9 = $(‘#ROAext’).val();
var f10 = $(‘#ROAtelephone’).val();
var f11 = $(‘#ROAtelexcode’).val();
var f12 = $(‘#ROAtelexext’).val();
var f13 = $(‘#ROAtelexno’).val();
var f14 = $(‘#ROAmobilecode’).val();
var f15 = $(‘#ROAmobileno’).val();
var f16 = $(‘#ROAfaxcode’).val();
var f17 = $(‘#ROAfaxext’).val();
var f18 = $(‘#ROAfaxno’).val();
var f19 = $(‘#ROAemail’).val();
$('#CaddLine1').val(f1);
$('#CaddLine2').val(f2);
$('#Caddcountry ').val(f3);
$('#Caddstate').val(f4);
$('#Cadddistrict').val(f5);
$('#Cadddcity').val(f6);
$('#Caddpincode').val(f7);
$('#Caddtelephonecode').val(f8);
$('#Caddext').val(f9);
$('#Caddtelephone').val(f10);
$('#Caddtelexcode').val(f11);
$('#Caddtelexext').val(f12);
$('#Caddtelexno').val(f13);
$('#Caddmobilecode').val(f14);
$('#Caddmobileno').val(f15);
$('#Caddfaxcode').val(f16);
$('#Caddfaxext').val(f17);
$('#Caddfaxno').val(f18);
$('#CAddemail').val(f19);
} else{
$('#CaddLine1').val("");
$('#CaddLine2').val("");
$('#Caddcountry ').val("");
$('#Caddstate').val("");
$('#Cadddistrict').val("");
$('#Cadddcity').val("");
$('#Caddpincode').val("");
$('#Caddtelephonecode').val("");
$('#Caddext').val("");
$('#Caddtelephone').val("");
$('#Caddtelexcode').val("");
$('#Caddtelexext').val("");
$('#Caddtelexno').val("");
$('#Caddmobilecode').val("");
$('#Caddmobileno').val("");
$('#Caddfaxcode').val("");
$('#Caddfaxext').val("");
$('#Caddfaxno').val("");
$('#CAddemail').val("");
}
});
is there any other way to write this validation because if I have 3 different form on same page then it would be very long code for each form, please suggest any other way to write this validation…
thanks…
Remove that line above as you are already checking if checked in the next line The code I gave you doesn’t have that line in it.
Thanks paulOb…
it works…
is there any other way around to reduce this long code into short…
I’ve just loaded up your page code in my text editor, and there is something first that can do with being fixed.
Line 638 has a missing double quote symbol, which should read:
<div id="collapsefive" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingFive">
Aside from that though, you will be able to use less once your field names are consistent with each other. For example, the following type of code would be close to perfect:
$('#checkboxes-0:checked').on('click', function () {
if ($(this).is(':checked')) {
copyFields('#collapsefive :input', 'C', 'ROA');
}
});
The only thing getting in the way is that some of your identifiers are inconsistent.
The Caddcountry name will not be able to work with the others, until it’s renamed to Ccountry instead, and likewise for other fields in that same area.
Once things are consistent for the C group, you’ll be able to use smaller code to let you copy the fields:
You can replace the code from post #8 with the following, to see what I mean:
function copyFields(parentSelector, targetPrefix, sourcePrefix) {
var missing = [];
$(parentSelector).each(function (index, field) {
if (field.type === 'checkbox') {
// avoid the "same as" checkboxes.
// A better technique will be wanted if checkboxes are to be copied too
return;
}
var sourceId = sourcePrefix + field.id.substring(targetPrefix.length),
sourceField = $('#' + sourceId);
if (sourceField.length === 0) {
missing.push(field.id);
return;
}
if (field.tagName === 'SELECT') {
field.options.selectedIndex = sourceField.options.selectedIndex;
} else {
$(field).val(sourceField.val());
}
});
if (missing.length > 0) {
alert('Cannot find matching fields for: ' + missing);
}
}
$('#checkboxes-0:checked').on('click', function () {
if ($(this).is(':checked')) {
copyFields('#collapsefive :input', 'C', 'ROA');
}
});
I’ve also added an alert for missing matching fields, to help you diagnose any that don’t match too.
Hi Paul,
thanks for your reply,
I have implemented your code, but its not copying the field into “#collapsefive”, below are my live link,
http://www.metalsauda.com/GlobalLogistics/23-07-2015/Regnwhdr.html
thanks once again…
What have you done in regard to renaming the field names?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.