jQuery Help Needed.

[Medw1311]

I'm currently working on a directory type site using Toolset.

A customer can purchase 3 plans (Classic, Premium & Deluxe) and each plan allows them to upload a certain amount of videos and images.

There are 3 separate forms for purchasing, 1 for each plan and I've enforced the video & image limits as follows....

They add they video/image one at a time as shown in these images...





Once the maximum number of videos/images they are allowed is reached the Add new button no longer appears. I achieved this using the following code...

jQuery(window).bind("load", function(){
  var maxreps = {
    'wpcf-memorial-videos': 2,
    'wpcf-memorial-photo-gallery': 9,
   };
      
  jQuery(document).on( "click", ".js-wpt-repadd", function(e){
    var $closest = jQuery(this).closest('.js-wpt-repetitive');
    var isfile = $closest.find('input[type="file"]').length;
    var name = isfile ? $closest.find('.wpt-repetitive-field:first input[type="file"]:first').attr('data-wpt-name') : $closest.find('.wpt-repetitive-field:first input:first').attr('data-wpt-name');
 
 
    // how many repetitions?
    if ( $closest.find('.wpt-repctl').length > maxreps[name] -1 ) {
      // hide button to add more
      jQuery(this).hide();
    }
  });
 
  // add click listener to trash buttons
  jQuery(document).on( "mouseup", ".js-wpt-repdelete", function(e){
    var $closest = jQuery(e.target).closest('.js-wpt-repetitive');
    $closest.find(".js-wpt-repadd").show();
  });
});

So now on to my problem ....

The customer also has to have the ability to edit their listing but there is only 1 form available to do this regardless of their plan.

In this form I have a non editable field with their plan type pre-filled. The field is called 'wpcf-memorial-type'

So what I need, if possible, is the code above edited so that...

If the pre-filled value of 'wpcf-memorial-type' is Classic then...

var maxreps = {

    'wpcf-memorial-videos': 2,

    'wpcf-memorial-photo-gallery': 9,

   };

If the pre-filled value of 'wpcf-memorial-type' is Premium then...

var maxreps = {

    'wpcf-memorial-videos': 3,

    'wpcf-memorial-photo-gallery': 19,

   };

If the pre-filled value of 'wpcf-memorial-type' is Deluxe then...

var maxreps = {

    'wpcf-memorial-videos': 4,

    'wpcf-memorial-photo-gallery': 49,

   };

Note I have no clue about jQuery & JavaScript so I don't even know if this is possible lol.

I hope you understand what I'm after and thanks in advance for any help

 

[frizzel]

You can simply read the value of an input field, like so:

var plantype = $("#plan-type-field-ID").val()

and then do something with that in an 'if' statement.

 

[Medw1311]

You can simply read the value of an input field, like so:

var plantype = $("#plan-type-field-ID").val()

and then do something with that in an 'if' statement.

Thanks, but remember I'm clueless here lol...

So in my case it would be...?

var plantype = $("#wpcf-memorial-type").val()

 

[videva]

Thanks, but remember I'm clueless here lol...

So in my case it would be...?

var plantype = $("#wpcf-memorial-type").val()

is this what you want ???

// example to get the value from field wpcf-memorial-type
//in this example the field wpcf-memorial-type has class wpcf-memorial-type
//ex: <input class="wpcf-memorial-type" type="hidden" name ="wpcf-memorial-type" value="Deluxe" />
const plantype = $(".wpcf-memorial-type").val();

if(plantype === 'Classic'){
    //code for Classic
    var maxreps = {

    'wpcf-memorial-videos': 2,

    'wpcf-memorial-photo-gallery': 9,

   };
}else if(plantype === 'Premium'){
    //code for Premium
    var maxreps = {

    'wpcf-memorial-videos': 3,

    'wpcf-memorial-photo-gallery': 19,

   };
  
}else if(plantype === 'Deluxe'){
    //code for Deluxe
    var maxreps = {

    'wpcf-memorial-videos': 4,

    'wpcf-memorial-photo-gallery': 49,

   };
}else{
    //code for default condition if wpcf-memorial-type not Classic,Premium,Deluxe
    var maxreps = {

    'wpcf-memorial-videos': 0,

    'wpcf-memorial-photo-gallery': 0,

   }; 
}

 

[frizzel]

To be honest, I'm also no expert in jQuery and Javascript, but it should be something along these lines:

jQuery(function($){
var plantype = $(".wpcf-memorial-type").val();
var maxreps = "";

if (plantype == "Classic") {
      var maxreps = {
    'wpcf-memorial-videos': 2,
    'wpcf-memorial-photo-gallery': 9,
   }
}

else if (plantype == "Premium") {
var maxreps = {
    'wpcf-memorial-videos': 3,
    'wpcf-memorial-photo-gallery': 19,
   }
}

else
    var maxreps = {
    'wpcf-memorial-videos': 4,
    'wpcf-memorial-photo-gallery': 49,
   }
});

 

[frizzel]

@videva was a bit quicker than me, and I think that code is also better (note the semi-colons in his code).

 

[Medw1311]

is this what you want ???

// example to get the value from field wpcf-memorial-type
//in this example the field wpcf-memorial-type has class wpcf-memorial-type
//ex: <input class="wpcf-memorial-type" type="hidden" name ="wpcf-memorial-type" value="Deluxe" />
const plantype = $(".wpcf-memorial-type").val();

if(plantype === 'Classic'){
    //code for Classic
    var maxreps = {

    'wpcf-memorial-videos': 2,

    'wpcf-memorial-photo-gallery': 9,

   };
}else if(plantype === 'Premium'){
    //code for Premium
    var maxreps = {

    'wpcf-memorial-videos': 3,

    'wpcf-memorial-photo-gallery': 19,

   };
 
}else if(plantype === 'Deluxe'){
    //code for Deluxe
    var maxreps = {

    'wpcf-memorial-videos': 4,

    'wpcf-memorial-photo-gallery': 49,

   };
}else{
    //code for default condition if wpcf-memorial-type not Classic,Premium,Deluxe
    var maxreps = {

    'wpcf-memorial-videos': 0,

    'wpcf-memorial-photo-gallery': 0,

   };
}

To be honest, I'm also no expert in jQuery and Javascript, but it should be something along these lines:

jQuery(function($){
var plantype = $(".wpcf-memorial-type").val();
var maxreps = "";

if (plantype == "Classic") {
      var maxreps = {
    'wpcf-memorial-videos': 2,
    'wpcf-memorial-photo-gallery': 9,
   }
}

else if (plantype == "Premium") {
var maxreps = {
    'wpcf-memorial-videos': 3,
    'wpcf-memorial-photo-gallery': 19,
   }
}

else
    var maxreps = {
    'wpcf-memorial-videos': 4,
    'wpcf-memorial-photo-gallery': 49,
   }
});

Will try both your solutions soon, thanks guys

 

[Medw1311]

@frizzel @videva can't get either of those to work but that could be down to me integrating it into the reat of the code wrong.

I'm thinking (and I could well be wrong) first part is what needs changing (and what would run the if loop?) and what you guys are helping with...

jQuery(window).bind("load", function(){
  var maxreps = {
    'wpcf-memorial-videos': 4,
    'wpcf-memorial-photo-gallery': 49,
   };

2nd part can stay how it is?

jQuery(document).on( "click", ".js-wpt-repadd", function(e){
    var $closest = jQuery(this).closest('.js-wpt-repetitive');
    var isfile = $closest.find('input[type="file"]').length;
    var name = isfile ? $closest.find('.wpt-repetitive-field:first input[type="file"]:first').attr('data-wpt-name') : $closest.find('.wpt-repetitive-field:first input:first').attr('data-wpt-name');
 
 
    // how many repetitions?
    if ( $closest.find('.wpt-repctl').length > maxreps[name] -1 ) {
      // hide button to add more
      jQuery(this).hide();
    }
  });
 
  // add click listener to trash buttons
  jQuery(document).on( "mouseup", ".js-wpt-repdelete", function(e){
    var $closest = jQuery(e.target).closest('.js-wpt-repetitive');
    $closest.find(".js-wpt-repadd").show();
  });
});

 

[frizzel]

Hm, if you replace the code in your original, this section:

  var maxreps = {
    'wpcf-memorial-videos': 2,
    'wpcf-memorial-photo-gallery': 9,
   };

with everything @videva has submitted, but only replacing his '$' with 'jQuery', like so:

const plantype = jQuery(".wpcf-memorial-type").val();

if(plantype === 'Classic'){
    //code for Classic
    var maxreps = {

    'wpcf-memorial-videos': 2,

    'wpcf-memorial-photo-gallery': 9,

   };
}else if(plantype === 'Premium'){
    //code for Premium
    var maxreps = {

    'wpcf-memorial-videos': 3,

    'wpcf-memorial-photo-gallery': 19,

   };

}else if(plantype === 'Deluxe'){
    //code for Deluxe
    var maxreps = {

    'wpcf-memorial-videos': 4,

    'wpcf-memorial-photo-gallery': 49,

   };
}else{
    //code for default condition if wpcf-memorial-type not Classic,Premium,Deluxe
    var maxreps = {

    'wpcf-memorial-videos': 0,

    'wpcf-memorial-photo-gallery': 0,

   };
}

If that also doesn't work, try replacing a part in the first line 'const plantype' with 'var plantype'.

Oh, one more thing, you're absolutely sure that 'wpcf-memorial-type' is the CLASS of that input field, right? Not e.g. the 'id' or the 'name'.

 

[videva]

@medw1311 try this

jQuery(window).bind("load", function(){
 /* var maxreps = {
    'wpcf-memorial-videos': 2,
    'wpcf-memorial-photo-gallery': 9,
   };*/
// example to get the value from field wpcf-memorial-type
//in this example the field wpcf-memorial-type has class wpcf-memorial-type

//ex: <input class="wpcf-memorial-type" type="hidden" name ="wpcf-memorial-type" value="Deluxe" />
const plantype = jQuery(".wpcf-memorial-type").val(); //adjust with the class name of the wpcf-memorial-type field

if(plantype === 'Classic'){
    //code for Classic
    var maxreps = {

    'wpcf-memorial-videos': 2,

    'wpcf-memorial-photo-gallery': 9,

   };
}else if(plantype === 'Premium'){
    //code for Premium
    var maxreps = {

    'wpcf-memorial-videos': 3,

    'wpcf-memorial-photo-gallery': 19,

   };
 
}else if(plantype === 'Deluxe'){
    //code for Deluxe
    var maxreps = {

    'wpcf-memorial-videos': 4,

    'wpcf-memorial-photo-gallery': 49,

   };
}else{
    //code for default condition if wpcf-memorial-type not Classic,Premium,Deluxe
    var maxreps = {

    'wpcf-memorial-videos': 0,

    'wpcf-memorial-photo-gallery': 0,

   };
}     
  jQuery(document).on( "click", ".js-wpt-repadd", function(e){
    var $closest = jQuery(this).closest('.js-wpt-repetitive');
    var isfile = $closest.find('input[type="file"]').length;
    var name = isfile ? $closest.find('.wpt-repetitive-field:first input[type="file"]:first').attr('data-wpt-name') : $closest.find('.wpt-repetitive-field:first input:first').attr('data-wpt-name');
 
 
    // how many repetitions?
    if ( $closest.find('.wpt-repctl').length > maxreps[name] -1 ) {

      // hide button to add more
      jQuery(this).hide();
    }
  });
 
  // add click listener to trash buttons
  jQuery(document).on( "mouseup", ".js-wpt-repdelete", function(e){
    var $closest = jQuery(e.target).closest('.js-wpt-repetitive');
    $closest.find(".js-wpt-repadd").show();
  });
});

If this does not work for your form, some modifications may be required. Please show me a URL where I can see the form and I will try to make adjustments.

 

[Medw1311]

@medw1311 try this

jQuery(window).bind("load", function(){
/* var maxreps = {
    'wpcf-memorial-videos': 2,
    'wpcf-memorial-photo-gallery': 9,
   };*/
// example to get the value from field wpcf-memorial-type
//in this example the field wpcf-memorial-type has class wpcf-memorial-type

//ex: <input class="wpcf-memorial-type" type="hidden" name ="wpcf-memorial-type" value="Deluxe" />
const plantype = jQuery(".wpcf-memorial-type").val(); //adjust with the class name of the wpcf-memorial-type field

if(plantype === 'Classic'){
    //code for Classic
    var maxreps = {

    'wpcf-memorial-videos': 2,

    'wpcf-memorial-photo-gallery': 9,

   };
}else if(plantype === 'Premium'){
    //code for Premium
    var maxreps = {

    'wpcf-memorial-videos': 3,

    'wpcf-memorial-photo-gallery': 19,

   };

}else if(plantype === 'Deluxe'){
    //code for Deluxe
    var maxreps = {

    'wpcf-memorial-videos': 4,

    'wpcf-memorial-photo-gallery': 49,

   };
}else{
    //code for default condition if wpcf-memorial-type not Classic,Premium,Deluxe
    var maxreps = {

    'wpcf-memorial-videos': 0,

    'wpcf-memorial-photo-gallery': 0,

   };
}    
  jQuery(document).on( "click", ".js-wpt-repadd", function(e){
    var $closest = jQuery(this).closest('.js-wpt-repetitive');
    var isfile = $closest.find('input[type="file"]').length;
    var name = isfile ? $closest.find('.wpt-repetitive-field:first input[type="file"]:first').attr('data-wpt-name') : $closest.find('.wpt-repetitive-field:first input:first').attr('data-wpt-name');


    // how many repetitions?
    if ( $closest.find('.wpt-repctl').length > maxreps[name] -1 ) {

      // hide button to add more
      jQuery(this).hide();
    }
  });

  // add click listener to trash buttons
  jQuery(document).on( "mouseup", ".js-wpt-repdelete", function(e){
    var $closest = jQuery(e.target).closest('.js-wpt-repetitive');
    $closest.find(".js-wpt-repadd").show();
  });
});

If this does not work for your form, some modifications may be required. Please show me a URL where I can see the form and I will try to make adjustments.

You are an absolute star!!!!

Thank you, it works perfectly