Jump to content

Button To Copy Address - Cascading Elements


Recommended Posts

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'.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 year later...

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;

});
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...