Custom script changing field value

[Hiperf]

We don't delete records from our system, we just deactivate them. So, with that said I have a custom script that changes the value of a hidden field "Active". I have a button with an ID of"Active" that executes the following script :

<button id="Active" class="rdDeleteButton">Delete Property</button>

document.getElementsByIdName('Active').onclick = function clickThis() {
  document.getElementById('EditRecord_PropertyActive').value = no;

The script works perfectly when the Delete Button is clicked, however when the user clicks the save/submit button, this script is executing changing the value of the hidden field. It should only execute if the Delete Property button is clicked.

 

[CoopperBackpack]

Hello @Hiperf,

It looks like the issue is related to the Hidden element.

If you set the Yes/No field as Hidden Form Element it stores no value by default.  For example:

As a result, with these settings each time the DataPage is submitted, the value in the Yes/No field is updated with the "No" value.

It is possible to assign the "Yes" value on load. But with these settings each time the DataPage is submitted, the value in the Yes/No field is updated with the "Yes" value.

 

 

To solve this, please try another approach: set the Yes/No field as a Calculated Value Form element instead of the Hidden.

Put the SELECT statement there to retrieve the value that is stored in the table. Use your local field names/table names in the statement.

SELECT checkbox_field_name FROM Table_name WHERE id=target.[@field:id]

 

In the Footer section you may use this code (do not forget to disable the HTML editor before pasting):

<script>
document.addEventListener('DataPageReady', assignAdditionalListener)

function assignAdditionalListener() {
   document.querySelector("#Active").addEventListener('click', changeValue); 
   document.removeEventListener('DataPageReady', assignAdditionalListener)
}

function changeValue(event) {
    document.querySelector('input[id^="EditRecord_PropertyActive"]').value= "N";
}
</script>

Please double-check the field name in the selector (_PropertyActive).

Update this thread please if you have further questions. 

[Hiperf]

I followed your instructions and double checked each step. It's not working, however I'm pretty sure its because I am not replacing something in the script properly. Here is what I have now

BUTTON
<button class="rdDeleteButton" id="Active">Delete Property</button>

 

CHECKBOX CALC
SELECT PropertyActive FROM tblProperty WHERE PropertyID=target.[@field:PropertyID]

 

IN FOOTER (HTML disabled)
<script>
document.addEventListener('DataPageReady', assignAdditionalListener)

function assignAdditionalListener() {
   document.querySelector("#Active").addEventListener('click', changeValue);
   document.removeEventListener('DataPageReady', assignAdditionalListener)
}

function changeValue(event) {
    document.querySelector('input[id^="EditRecord_PropertyActive"]').value= "N";
}
</script>

[CoopperBackpack]

Hello @Hiperf,

The issue can be connected to the exact field name. As far as I understand, the formula is in the Calculated Value field is valid. This means that the field name is PropertyActive (not _PropertyActive).

In this case you need to reference the field as EditRecordPropertyActive (without underscore before the field name). I used underscore because it was in the initial script. 

You may learn more in this post https://forums.caspio.com/topic/4377-js-guide-caspio-form-elements/

Please test the code with this small correction. I tested this solution in my account ant it works as expected for me. 

 

[Hiperf]

You're AWESOME!!

Thanks Once again Cooper

[Hiperf]

OK, I showed my client they loved it. However now they want a popup message that has the final button to Deactivate the Property that also has a message.

My popup works for 2 seconds and disappears and I can't figure out why. 

Here's what I have:

FIRST BUTTON

Quote

<div style="float:right; text-align: right; margin-bottom:10px"><button class="rdDeleteButton" id="Pop">Delete Property</button></div>

POPUP TEXT AND BUTTON (Button Works if you are fast enough)

Quote

<div class="modal" id="myModal">
<!-- Modal content -->
<div class="modal-content"><span class="close">&times;</span>
<div style="text-align: center; margin-bottom:20px">
<p>Did the Board approve the decommissioning of this property?</p>
<button class="rdDeleteButton" id="Active">Decommission Property</button></div>
</div>
</div>

POPUP SCRIPT (in html last item on page)

Quote

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("Pop");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

FOOTER SCRIPT (You wrote to change the Yes to No. This script still works if you are fast enough to click the button in the popup window. LOL)

Quote

<br />
<script>
document.addEventListener('DataPageReady', assignAdditionalListener)

function assignAdditionalListener() {
   document.querySelector("#Active").addEventListener('click', changeValue);
   document.removeEventListener('DataPageReady', assignAdditionalListener)
}

function changeValue(event) {
    document.querySelector('input[id^="EditRecordPropertyActive"]').value= "N";
}
</script>

 

[TellMeWhy]

On 4/21/2021 at 8:45 PM, Hiperf said:

OK, I showed my client they loved it. However now they want a popup message that has the final button to Deactivate the Property that also has a message.

My popup works for 2 seconds and disappears and I can't figure out why. 

Here's what I have:

FIRST BUTTON

POPUP TEXT AND BUTTON (Button Works if you are fast enough)

POPUP SCRIPT (in html last item on page)

FOOTER SCRIPT (You wrote to change the Yes to No. This script still works if you are fast enough to click the button in the popup window. LOL)

 

Not sure, as well, but I have difficulties in using button tag on Caspio as it 'clicks' the submit button, as well. Try to use <input type="button> or <a> tags instead of <button> and just style them the same.

[Hiperf]

I have given up on the popup. However what we have noticed is when the record is updated (submit/update button clicked) it is initiating the Delete script Cooper gave me above. Any ideas?

[HappyAlligator]

were you able to solve it?