Jump to content

Custom script changing field value


Recommended Posts

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.

 

Link to comment
Share on other sites

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:

L4plDgF.png

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.

Jud2bAa.png 

 

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]

imz0YHQ.png

 

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. 

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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. 

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

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