Hey folks,

I have made a form for a coworker. They requested that if certain conditions are met (Input A > Input B) they want to display a popup to tell them they're wrong and to automatically clear a value from the input (Input A = ""). They want this functionality for each item in a collection.

Long story short the only way I could get this to work was obviously Javascript. Everything works beautifully in Forms on the desktop and it even works perfectly on Safari for iOS, but it does not function in the LF Forms app for iPad.

Question: Are there limitations for javascript in Laserfiche Forms on the iPad app? Code Below with too much documentation if you're interested.

$( window ).on( "pageshow", function() {
  // Counter is how many items in the collection. Initialize w/ 1.
  var counter = 1;
  // Tells the listener if the "Add" button has been pressed. (Initializing as
  // true to create the listener)
  var newListener = true;
  
  // Called when Add Button is Clicked.
  function addBtnClicked(e){
    counter++;
    newListener = true;
  }
  
  // Called when anything changes in the collection
  function collectionChanged(e){
    // Was a row deleted at any point? (q17 = collection)
    if ($('#q17 .rpx').length < counter){
      // Yes!
      var i;
      // Remove EVERY event Listener. (Required because index changes if one 
      // is deleted)
      for (i = 1; i <= counter; i++){
        // try/catch because the element that was deleted doesn't exist 
        // anymore, it will fail.
        try {
        	$('input[id="Field30('+i+')"]').off("blur", checkQty);
        } catch(err){
        	 console.log(err);
        }
      }
      
      // Re-create the listeners for remaining fields.
      counter = $('#q17 .rpx').length;
      for (i = 1; i <= counter; i++){
        const tempID = i;
        $('input[id="Field30('+tempID+')"]').on("blur", checkQty);
      	document.getElementById("Field30("+tempID+")").myID = tempID;
      }
      
      newListener = false;
      
    }
    
    // If the add button was pushed, let's add an event listener for the 
    // new item.
    if (newListener) {
      const newID = counter;
      $('input[id="Field30('+newID+')"]').on("blur", checkQty);
      	document.getElementById("Field30("+newID+")").myID = newID;
      newListener = false;
    }
  }
  
  // Add button
  $('a[ref-id="q17"]').on("click", addBtnClicked);
  
  // Something in the collection changed
  $('#q17').on("change", collectionChanged);
  
  // This runs when the number in a Qty Field changes.
  function checkQty(event){
    const id = event.currentTarget.myID;
    if($("input[id='Field30("+id+")']").val() > $("input[id='Field26("+id+")']").val()) {
        // Yell at the user that they did it wrong.
    	alert("You have requested too many "+$('select[id="Field22('+id+')"]').val()+"(s). Max Qty allowed is "+$('input[id="Field26('+id+')"]').val()+".\n");
      	// Reset the value to blank. (Input still required)
      	$('input[id="Field30('+id+')"]').val("");
    }
  }
  
});

Edit: Added a screenshot so you can see it functioning on desktop.