jQuery Help Needed.

MrSam_1

Well-known member
Administrative
Trusted Seller
Dec 1, 2018
23,634
26,969
120
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...

Capture.PNG

Capture2.PNG

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...

JavaScript:
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...

JavaScript:
var maxreps = {

    'wpcf-memorial-videos': 2,

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

   };

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

JavaScript:
var maxreps = {

    'wpcf-memorial-videos': 3,

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

   };

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

JavaScript:
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 :)
 

MrSam_1

Well-known member
Administrative
Trusted Seller
Dec 1, 2018
23,634
26,969
120
You can simply read the value of an input field, like so:
JavaScript:
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...?

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

videva

Member
Aug 25, 2020
75
53
18
Thanks, but remember I'm clueless here lol...

So in my case it would be...?

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

is this what you want ???

JavaScript:
// 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

Well-known member
Trusted Uploader
Jun 13, 2019
485
253
63
Wherever my imagination takes me
To be honest, I'm also no expert in jQuery and Javascript, but it should be something along these lines:

JavaScript:
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,
   }
});
 

MrSam_1

Well-known member
Administrative
Trusted Seller
Dec 1, 2018
23,634
26,969
120
is this what you want ???

JavaScript:
// 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:

JavaScript:
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 :love:
 

MrSam_1

Well-known member
Administrative
Trusted Seller
Dec 1, 2018
23,634
26,969
120
@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...

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

2nd part can stay how it is?

JavaScript:
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

Well-known member
Trusted Uploader
Jun 13, 2019
485
253
63
Wherever my imagination takes me
Hm, if you replace the code in your original, this section:
JavaScript:
  var maxreps = {
    'wpcf-memorial-videos': 2,
    'wpcf-memorial-photo-gallery': 9,
   };
with everything @videva has submitted, but only replacing his '$' with 'jQuery', like so:
JavaScript:
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

Member
Aug 25, 2020
75
53
18
@medw1311 try this

JavaScript:
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.
 
  • Love
Reactions: MrSam_1

MrSam_1

Well-known member
Administrative
Trusted Seller
Dec 1, 2018
23,634
26,969
120
@medw1311 try this

JavaScript:
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 :love:
 

Forum statistics

Threads
69,225
Messages
908,427
Members
237,006
Latest member
choky10

About us

  • Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.

Quick Navigation

User Menu