Item change event gets triggered on Save

Forms SharePoint Online
1

Hello,

I have added item change event to my text fields. but once when you click on save button it triggers around 30 times. Please see the code below. I am not sure why.

 fd.spRendered(function () {

    fd.toolbar.buttons[0].text = "Submit";
 
    fd.field('Item01').$on('change',function(value){checkIfExists(fd.field('Item01').value,"Item01");});
    fd.field('Item02').$on('change',function(value){checkIfExists(fd.field('Item02').value,"Item02");});
    fd.field('Item03').$on('change',function(value){checkIfExists(fd.field('Item03').value,"Item03");});
    fd.field('Item04').$on('change',function(value){checkIfExists(fd.field('Item04').value,"Item04");});
    fd.field('Item05').$on('change',function(value){checkIfExists(fd.field('Item05').value,"Item05");});
    fd.field('Item06').$on('change',function(value){checkIfExists(fd.field('Item06').value,"Item06");});
    fd.field('Item07').$on('change',function(value){checkIfExists(fd.field('Item07').value,"Item07");});
    fd.field('Item08').$on('change',function(value){checkIfExists(fd.field('Item08').value,"Item08");});
    fd.field('Item09').$on('change',function(value){checkIfExists(fd.field('Item09').value,"Item09");});
    fd.field('Item10').$on('change',function(value){checkIfExists(fd.field('Item10').value,"Item10");});
    fd.field('Item11').$on('change',function(value){checkIfExists(fd.field('Item11').value,"Item11");});
    fd.field('Item12').$on('change',function(value){checkIfExists(fd.field('Item12').value,"Item12");});
    fd.field('Item13').$on('change',function(value){checkIfExists(fd.field('Item13').value,"Item13");});
    fd.field('Item14').$on('change',function(value){checkIfExists(fd.field('Item14').value,"Item14");});
    fd.field('Item15').$on('change',function(value){checkIfExists(fd.field('Item15').value,"Item15");});

        //check which page this is 
        var myPage = window.location.pathname.split('/').pop();
        //check which list this is 
        var listId = fd.spFormCtx.ListAttributes.Id;
        //check which itenm this is 
        var itemId = fd.itemId;
    
        //fd.control('btnSave').click = function(){
        //    window.location.href = _spPageContextInfo.webAbsoluteUrl + "/_layouts/15/listform.aspx?PageType=6&ListId=" + listId + "&ID=" + itemId;
        //};

    });
    
   function checkIfExists(value, item) {
  // alert(item);
      var limitflag = 0;
      if (value >15 || value <0)
      {
        alert("Please enter a value between 1 and 15");
        limitflag = 1;
      }
      
      if (item == "Item01")
      {
          if (limitflag == 1)
          {
           fd.field('Item01').value ='';
          }
          if( value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item04').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field, please remove the existing ones to add this value");
           fd.field('Item01').value ='';
          }
      }
      
      if (item == "Item02")
      {
          if (limitflag == 1)
          {
           fd.field('Item02').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item03').value || value == fd.field('Item04').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field, please remove the existing ones to add this value");
           fd.field('Item02').value ='';
          }
      }
      
    if (item == "Item03")
      {
          if (limitflag == 1)
          {
           fd.field('Item03').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item02').value || value == fd.field('Item04').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field, please remove the existing ones to add this value");
           fd.field('Item03').value ='';
          }
      }
    if (item == "Item04")
      {
          if (limitflag == 1)
          {
           fd.field('Item04').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field, please remove the existing ones to add this value");
           fd.field('Item04').value ='';
          }
      }
      
       if (item == "Item05")
      {
          if (limitflag == 1)
          {
           fd.field('Item05').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item04').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field, please remove the existing ones to add this value");
           fd.field('Item05').value ='';
          }
      }
      
       if (item == "Item06")
      {
          if (limitflag == 1)
          {
           fd.field('Item06').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item05').value || value == fd.field('Item04').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field, please remove the existing ones to add this value");
           fd.field('Item06').value ='';
          }
      }
      
       if (item == "Item07")
      {
          if (limitflag == 1)
          {
           fd.field('Item07').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item05').value || value == fd.field('Item04').value || value == fd.field('Item06').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field, please remove the existing ones to add this value");
           fd.field('Item07').value ='';
          }
      }
      
       if (item == "Item08")
      {
          if (limitflag == 1)
          {
           fd.field('Item08').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item04').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field, please remove the existing ones to add this value");
           fd.field('Item08').value ='';
          }
      }
      
       if (item == "Item09")
      {
          if (limitflag == 1)
          {
           fd.field('Item09').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item04').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field, please remove the existing ones to add this value");
           fd.field('Item09').value ='';
          }
      }
      
       if (item == "Item10")
      {
          if (limitflag == 1)
          {
           fd.field('Item10').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item04').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field, please remove the existing ones to add this value");
           fd.field('Item10').value ='';
          }
      }
      
       if (item == "Item11")
      {
          if (limitflag == 1)
          {
           fd.field('Item11').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item04').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field, please remove the existing ones to add this value");
           fd.field('Item11').value ='';
          }
      }
      
       if (item == "Item12")
      {
          if (limitflag == 1)
          {
           fd.field('Item12').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item04').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field , please remove the existing ones to add this value");
           fd.field('Item12').value ='';
          }
      }
      
       if (item == "Item13")
      {
          if (limitflag == 1)
          {
           fd.field('Item13').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item04').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field, please remove the existing ones to add this value");
           fd.field('Item13').value ='';
          }
      }
      
       if (item == "Item14")
      {
          if (limitflag == 1)
          {
           fd.field('Item14').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item04').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field , please remove the existing ones to add this value");
           fd.field('Item14').value ='';
          }
      }
      
       if (item == "Item15")
      {
          if (limitflag == 1)
          {
           fd.field('Item15').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item04').value)
          {
           alert("The value already entered for another field, please remove the existing ones to add this value");
           fd.field('Item15').value ='';
          }
      }
      

    }

Please see the error message
Uncaught ReferenceError: exports is not defined
at activitymonitor.js:25
(anonymous) @ activitymonitor.js:25
DevTools failed to load SourceMap: Could not load content for https://statica.akamai.odsp.cdn.office.net/bld/_layouts/15/16.0.20725.12000/ActivityMonitor.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
spform.js:76 Uncaught (in promise) FormValidationError: Form is invalid.
at new t (https://forms.plumsail.com/widget/1.0.8/spform.js:76:33536)
at t. (https://forms.plumsail.com/widget/1.0.8/spform.js:126:27445)
at https://forms.plumsail.com/widget/1.0.8/spform.js:126:21895
at Object.next (https://forms.plumsail.com/widget/1.0.8/spform.js:126:22000)
at https://forms.plumsail.com/widget/1.0.8/spform.js:126:20937
at new Promise ()
at J (https://forms.plumsail.com/widget/1.0.8/spform.js:126:20685)
at t.save (https://forms.plumsail.com/widget/1.0.8/spform.js:126:27264)
at eval (eval at e._executeCustomJavaScript (https://forms.plumsail.com/widget/1.0.8/spform.js:116:60753), :3:11)
at t.e._executeCustomJavaScript (https://forms.plumsail.com/widget/1.0.8/spform.js:116:60767)
t @ spform.js:76
(anonymous) @ spform.js:126
(anonymous) @ spform.js:126
(anonymous) @ spform.js:126
(anonymous) @ spform.js:126
J @ spform.js:126
t.save @ spform.js:126
eval @ VM69452:3
e._executeCustomJavaScript @ spform.js:116
t._executeCustomJavaScript @ spform.js:126
click @ 559.7635eddafae75592534a.js:1
Ve @ spform.js:51
n @ spform.js:51
o._wrapper @ spform.js:51
stss

2

I have tested with the below on fd.spRendered() and I still gets the same issue on save the page displays the value of Item01 and items02.

fd.field('Item01').$on('change',function(value){alert('New value: ' + value);});
fd.field('Item02').$on('change',function(value){alert('New value: ' + value);});

3

Dear @Rinu,
It's a lot of code... What's the issue? Changing field value with code will trigger the change event, I can tell you that. Any other issues? If so, can you simplify the code to just 1/2 fields, and not all 15, so it's a little more readable?

4

Hi @Nikita_Kurguzov,

Apologies not not being specific.

I have added the change event handler function on spRendered and are working as expected (when there is a change it shows an alert).

But when you hit save, it display alert with null value. The change event function was supposed to get triggered only when there is a change event, but for some reason it triggers by clicking save button as well. May be there is something wrong with the code. Can you please advice?

    fd.spRendered(function () {

fd.toolbar.buttons[0].text = "Submit";


fd.field('Item01').$on('change',function(value){alert('New value: ' + value);});
fd.field('Item02').$on('change',function(value){alert('New value: ' + value);});

    //check which page this is 
    var myPage = window.location.pathname.split('/').pop();
    //check which list this is 
    var listId = fd.spFormCtx.ListAttributes.Id;
    //check which itenm this is 
    var itemId = fd.itemId;

    //fd.control('btnSave').click = function(){
    //    window.location.href = _spPageContextInfo.webAbsoluteUrl + "/_layouts/15/listform.aspx?PageType=6&ListId=" + listId + "&ID=" + itemId;
    //};

});`Preformatted text`
5

Dear @Rinu,
I see what you mean, I've reproduced the issue. Will let the devs know - that's likely a bug, I don't think that it's intended.

For now, please, use code like this, should work in theory:

var saving;
fd.spRendered(function () {
  fd.toolbar.buttons[0].text = "Submit";
  fd.field('Item01').$on('change',function(value){if(!saving) { alert('New value: ' + value); } });
  fd.field('Item02').$on('change',function(value){if(!saving) { alert('New value: ' + value); } });
});

fd.spBeforeSave(function(){
  if(fd.isValid){
    saving = true;
  }
});
1 Like
6

Hi Nikita,

Although the code provided worked for the sample code. It didnt for the my scenario. What I was trying to is onChange check whether there are any other fields with the same value. If there are, then set the field empty (as you can see below I have commented out the fd.field('Item01').value =''; . to see if the problem is due to that, but it still triggers the change event handler upon save).

var saving;
fd.spRendered(function () {
  fd.toolbar.buttons[0].text = "Submit";

    //Item01 Change event
    fd.field('Item01').$on('change',function(value){
      var limitflag = 0;
      if (value >15 || value <0)
      {
        alert("Please enter a value between 1 and 15");
        limitflag = 1;
      }
     
      if (limitflag == 1)
      {
         //fd.field('Item01').value ='';
      }
      if( value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item04').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
      {
          alert("The value already entered for another field, please remove the existing ones to add this value");
          //fd.field('Item01').value ='';
      }
    });//End of Item01 Change Event
    
    //Item02 Change event
    fd.field('Item02').$on('change',function(value){
      var limitflag = 0;
      if (value >15 || value <0)
      {
        alert("Please enter a value between 1 and 15");
        limitflag = 1;
      }
      if (limitflag == 1)
      {
      //fd.field('Item02').value ='';
      }
      if ( value == fd.field('Item01').value || value == fd.field('Item03').value || value == fd.field('Item04').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
      {
       alert("The value already entered for another field, please remove the existing ones to add this value");
      //fd.field('Item02').value ='';
      }
    });//End of Item02 Change Event
});

fd.spBeforeSave(function(){
  if(fd.isValid){
    saving = true;
  }
});

Please let me know if you need more clarification on the matter

7

Dear Rinu,
Okay, and if you try the same thing - add a check if it's currently saving or not inside the change event?

var saving;
fd.spRendered(function () {
  fd.toolbar.buttons[0].text = "Submit";

    //Item01 Change event
    fd.field('Item01').$on('change',function(value){
      if(!saving){
          var limitflag = 0;
          if (value >15 || value <0)
          {
            alert("Please enter a value between 1 and 15");
            limitflag = 1;
          }
         
          if (limitflag == 1)
          {
             //fd.field('Item01').value ='';
          }
          if( value == fd.field('Item02').value || value == fd.field('Item03').value || value == fd.field('Item04').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
              alert("The value already entered for another field, please remove the existing ones to add this value");
              //fd.field('Item01').value ='';
          }
      }
      
    });//End of Item01 Change Event
    
    //Item02 Change event
    fd.field('Item02').$on('change',function(value){
      if(!saving){
          var limitflag = 0;
          if (value >15 || value <0)
          {
            alert("Please enter a value between 1 and 15");
            limitflag = 1;
          }
          if (limitflag == 1)
          {
          //fd.field('Item02').value ='';
          }
          if ( value == fd.field('Item01').value || value == fd.field('Item03').value || value == fd.field('Item04').value || value == fd.field('Item05').value || value == fd.field('Item06').value || value == fd.field('Item07').value || value == fd.field('Item08').value || value == fd.field('Item09').value || value == fd.field('Item10').value || value == fd.field('Item11').value || value == fd.field('Item12').value || value == fd.field('Item13').value || value == fd.field('Item14').value || value == fd.field('Item15').value)
          {
           alert("The value already entered for another field, please remove the existing ones to add this value");
          //fd.field('Item02').value ='';
          }
      }
    });//End of Item02 Change Event
});

fd.spBeforeSave(function(){
  if(fd.isValid){
    saving = true;
  }
});
1 Like
8

Thanks Nikita Kurguzov, Its working. I will update the forms accordingly

1 Like