Javascript within a collection

replied on July 20, 2017

If you're putting all of those values into a collection, then you'll need to adjust your code to loop through each "group" in the collection because you won't have predefined targets like you will with static fields. Identify the fields in each group so you know what to target (use Inspect in the browser to get an idea of what you're looking for) because they will all have different IDs than they would outside of a collection.

Also, I wouldn't apply that specific change event to the entire document because that is going to cause it to fire a lot more often than is necessary. Instead, since it is really only looking for a change in the Select, just apply the change event directly to the Select elements and that will make it a bit easier to identify which date fields will need to change since they will share a common parent element.

One catch with a collection is that you'll also need to apply the event handler to any new elements as they are added to the collection by the user.

0 0

View 2 previous replies

replied on July 21, 2017

$(document).ready(function() {
$('.cf-collection-block').on('blur', 'input', halfday);

 function halfday()
  {
  var $Field15 = $('.leave');
  
  if  ($Field15.find(':selected').val()==="300")
  {
     var Start = document.getElementById("Field13").value;
     $('#q14 input').val(Start);
    
   }
   else
   {
      // do nothing
   }
}); 
});

i added the fields into a collection and i edited the JavaScript accordingly to trigger when a field in the collection is not in focus (blur) but still doesn't seem to work.

0 0

replied on July 21, 2017 • Show version history

Claudette,

I don't think this code will execute correctly. If you load the browser and open up the debugging console, you'll see that there is a an "unexpected token" error caused by line 18; the ");" is invalid.

Since you're not using an anonymous function in this version, you either need to declare your "halfday" function outside of the $(document).ready function, or you need to go back to an anonymous function.

Like this:

$(document).ready(function() {
    $('.cf-collection-block').on('blur', 'input', halfday);
});

function halfday() {
  var $Field15 = $('.leave');
  
  if  ($Field15.find(':selected').val()==="300")
  {
     var Start = document.getElementById("Field13").value;
     $('#q14 input').val(Start);
    
   }
   else
   {
      // do nothing
   }
}

Or this:

$(document).ready(function() {
  $('.cf-collection-block').on('blur', 'input', function() {
    var $Field15 = $('.leave');
  
    if  ($Field15.find(':selected').val()==="300")
    {
       var Start = document.getElementById("Field13").value;
       $('#q14 input').val(Start);
     }
     else
     {
        // do nothing
     }
  });
});

Also, to assign multiple event handlers you should be using .on('blur input') syntax, not ('blur', 'input'), but in this case, you shouldn't apply this event to the collection block anyway because it will fire multiple times for each change.

The code should be attaching events to the drop-down elements directly like

$('.cf-collection-block select').on('change', function() {
    // Your code here
}

Then, in your collections each field would have an additional number in the ID to identify the row. For example, if you put everything in a collection, and the field you want was Field25, then the first one in the collection would be Field25(1), the second will be Field25(2), etc.

You could make this dynamic by doing something like:

var row = 1;
$Field = $('#Field25\\(' + row + '\\)');

NOTE: the \\ characters (escape) are needed to get the parentheses in the string to work correctly.

0 0

replied on July 24, 2017

i changed my code to the below but it still doesn't work. i don't need any collections added to trigger any event as yet, i just need the first collection to work correctly. there will only be one row in the collection.

$(document).ready(function(){
  $('.cf-collection-block select').on('change', function(){
  
  function halfday()
  {
  var $Field15 = $('.leave');
  
  if  ($Field15.find(':selected').val()==="300")
   {
   
      var start = document.getElementById("Field13").value;
      $('#q14 input').val(start);
   }
   else
   {
     //do nothing
     
   }
});
});

0 0

replied on July 24, 2017 • Show version history

Claudette,

This code is kind of declaring the "halfDay" function inside of the change event handler. Basically, when the change event fires, it wouldn't trigger the event, it would try and create the function.

However, you should really be inspecting the preview page to look for errors because it looks like you'd still get an error on this one for missing a "}" meaning the code will not run at all.

Try removing "function halfday() {" and test again, but make sure you right-click the page and inspect to see if you're getting any JavaScript errors.

0 0

replied on July 26, 2017

Thanks for the advice Jason i managed to solve the issue by using the Field IDs from the inspect in the browser and triggering the collection.

0 0

Question

Question

Replies

Sign in to reply to this post.