Data Validation in In line Edit

[NeoInJS]

Hello - I need help in improving the JS code below. I would like to  add data validation upon updating a record via In line Edit in a Tabular form. Any feedback is much appreciated.

 

<script>
document.getElementById("Mod0InlineEdit").onclick = function() {
    window.alert("check");
    if(document.getElementsByName("Mod0InlineEdit")[0].value > 100 {
    window.alert("save!");
    }
      else if (document.getElementsByName("Mod0InlineEdit")[0].value > 1000 {
    window.alert("do not save!");
        return false;
    }

    else {
        window.alert("do not save!");
        return false;
    }
}

[Vitalikssssss]

Hi @NeoInJS ,

I was able to create validation check for Inline edit with jquery. You should wrap your fields in div with ID.

Also, you need to disable ajax on your report and paste the following script in the footer.

You can use following code as an example.

Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cbform-improvement">

Footer:

</div>
<script>

$("#cbform-improvement #Mod0InlineEdit").click(function(e){
    window.alert("check");
    if(document.getElementsByName("InlineEditHours")[0].value > 100) {
    window.alert("save!");
    }
      else if (document.getElementsByName("InlineEditHours")[0].value > 1000) {
    window.alert("do not save!");
        return false;
    }

    else {
        window.alert("do not save!");
        return false;
    }
});
</script>

Hope this helps.

Regards,

@Vitalikssssss

[Franchiser]

12 hours ago, NeoInJS said:

Hello - I need help in improving the JS code below. I would like to  add data validation upon updating a record via In line Edit in a Tabular form. Any feedback is much appreciated.

 

<script>
document.getElementById("Mod0InlineEdit").onclick = function() {
    window.alert("check");
    if(document.getElementsByName("Mod0InlineEdit")[0].value > 100 {
    window.alert("save!");
    }
      else if (document.getElementsByName("Mod0InlineEdit")[0].value > 1000 {
    window.alert("do not save!");
        return false;
    }

    else {
        window.alert("do not save!");
        return false;
    }
}

 

Hi NeonInJS,

You may try this code:

 

<script>
var caspioform = document.getElementById('caspioform');
var inlineEdit = document.getElementById('Mod0InlineEdit');

inlineEdit.onclick = function ()
{
    if (confirm('Do you want to Update?'))
    {
              if(document.getElementsByName("InlineEditNameofYourField")[0].value > 100 {
              window.alert("Successfully Updated");
              caspioform.submit();
              }
              else if (document.getElementsByName("InlineEditNameofYourField")[0].value > 1000 {
              window.alert("Invalid Input");
              return false;
             }
    }
    else
    {
        return false;
    }
};
</script> 

 

regards,

Franchiser

 

[johnv]

Hi,

I'm trying to modify this function to get the value for a calculated field in the Caspio report datapage.  Do you know the equivalent syntax for

var orderStatus = "InlineEditOrderStatus";

 var Status = document.getElementsByName(orderStatus)[0].value;

for Caspio calculated fields?  Have tried using cbParamVirtualX as per the documentation but it returns null.

thanks,

[AtayBalunbalunan]

You can inspect the calculated field element.

 

 

One way to get the value is by this code.

document.querySelectorAll(".cbResultSetCalculatedField")[0].innerHTML;

 

[johnv]

On 8/9/2020 at 9:19 AM, AtayBalunbalunan said:

You can inspect the calculated field element.

 

 

One way to get the value is by this code.

document.querySelectorAll(".cbResultSetCalculatedField")[0].innerHTML;

 

Thanks Ataybalunbalunan, much appreciated. 

[Kurumi]

Hi - Just wanted to share this solution. You can use this if you have a Tabular Report with Inline Edit and upon update, you want to reload the whole page. Insert it in the Footer of the DataPage.

<script type="text/javascript">

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

  document.addEventListener("change", function(event){

    var edit= document.querySelector('[name="Mod0InlineEdit"]');
    
       edit.addEventListener("click", function(){
          window.parent.location = document.referrer;
       });
  });
  
});
</script>

 

[Kurumi]

Hello - I found this solution that might also work in Inline Add: