Button To Copy Address - Cascading Elements

[kpcollier]

I was using a script I found here that I modified a little bit to get working for my app. I am using a Virtual Field as a checkbox to copy the value of a Street Address. If the Billing Address is the same as the Job Address, clicking this checkbox will copy the Job Address contents over to the Billing Address. 

This was working fine until I had to switch the Job Address fields to Cascading Text Boxes. As some of you may know... using 'Special' elements in Caspio gives the element a dynamic class name, making it so you cannot call that element in a normal way. I tried to update my script to querySelector and still having trouble. If anyone could help me out with a workaround, it would be greatly appreciated!

function f_address(){

    if(document.getElementById('cbParamVirtual4').checked)

     {

  document.querySelector('#InsertRecordBilling_Address').value=document.querySelector('#InsertRecordPrimary_Address').value;

document.querySelector('#InsertRecordBilling_City').value=document.querySelector('#InsertRecordPrimary_City').value;

document.querySelector('#InsertRecordBilling_State').value=document.querySelector('#InsertRecordPrimary_State').value;

document.querySelector('#InsertRecordBilling_Zip').value=document.querySelector('#InsertRecordPrimary_Zip').value;

} else {

document.querySelector('#InsertRecordBilling_Address').value="";

document.querySelector('#InsertRecordBilling_City').value="";

document.querySelector('#InsertRecordBilling_State').value="";

document.querySelector('#InsertRecordBilling_Zip').value="";

}

}

document.getElementById('cbParamVirtual4').onclick= f_address;

Before, I was using getElementById for it all. Then I tried querySelector with both the '#' and ' . ' signs, getting an error that the virtual param couldn't be found. Those aren't special elements, I don't believe, so I switched them back to getElementById. Fixed that error, but now I get one again for 'f_address'.

[Vitalikssssss]

Hi @kpcollier,

You can use "start with" type of comparison in query selector like this:

document.querySelector("input[id^='InsertRecordPrimary_Address']").value;

The whole code would look like this:

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {

function f_address(){

    if(document.getElementById('cbParamVirtual4').checked) {

document.querySelector("input[id^='InsertRecordBilling_Address']").value = document.querySelector("input[id^='InsertRecordPrimary_Address']").value;

document.querySelector("input[id^='InsertRecordBilling_City']").value = document.querySelector("input[id^='InsertRecordPrimary_City']").value;

document.querySelector("input[id^='InsertRecordBilling_State']").value = document.querySelector("input[id^='InsertRecordPrimary_State']").value;

document.querySelector("input[id^='InsertRecordBilling_Zip']").value = document.querySelector("input[id^='InsertRecordPrimary_Zip']").value;

} else {

document.querySelector("input[id^='InsertRecordBilling_Address']").value = "";

document.querySelector("input[id^='InsertRecordBilling_City']").value = "";

document.querySelector("input[id^='InsertRecordBilling_State']").value = "";

document.querySelector("input[id^='InsertRecordBilling_Zip']").value = "";

}

}

document.getElementById('cbParamVirtual4').onclick= f_address;

});


</script>

 

Regards,

vitalikssssss

[kpcollier]

Thank you, @Vitalikssssss! That worked great. I appreciate the help.

[kpcollier]

If you want it so the blank address gets the copied values instead of limiting it to just Billing Address getting copied, you can use the below workflow. Clicking the checkbox with this script will fill the values of the empty address, regardless of which one it is.

function f_address(){

    if(document.getElementById('cbParamVirtual4').checked){
      
      if(document.querySelector("input[id^='InsertRecordBilling_Street']").value !== ''){
        
        
        document.getElementById("InsertRecordJob_Street").value = document.querySelector("input[id^='InsertRecordBilling_Street']").value;
        document.getElementById("InsertRecordJob_Suite").value = document.querySelector("input[id^='InsertRecordBilling_Suite']").value;
        document.getElementById("InsertRecordJob_City").value = document.querySelector("input[id^='InsertRecordBilling_City']").value;
        document.getElementById("InsertRecordJob_State").value = document.querySelector("input[id^='InsertRecordBilling_State']").value;
        document.getElementById("InsertRecordJob_Zip").value = document.querySelector("input[id^='InsertRecordBilling_Zip']").value;
        
      } else {
        
        document.querySelector("input[id^='InsertRecordBilling_Street']").value = document.querySelector("input[id^='InsertRecordJob_Street']").value;
        document.querySelector("input[id^='InsertRecordBilling_Suite']").value = document.querySelector("input[id^='InsertRecordJob_Suite']").value;
        document.querySelector("input[id^='InsertRecordBilling_City']").value = document.querySelector("input[id^='InsertRecordJob_City']").value;
        document.querySelector("input[id^='InsertRecordBilling_State']").value = document.querySelector("input[id^='InsertRecordJob_State']").value;
        document.querySelector("input[id^='InsertRecordBilling_Zip']").value = document.querySelector("input[id^='InsertRecordJob_Zip']").value;
      }
    }
}

document.getElementById('cbParamVirtual4').onclick= f_address;

});