jQuery Help Needed.

MrSam_1

MrSam_1

Well-known member
Administrative
Trusted Seller
Dec 1, 2018
23,632
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

MrSam_1

Well-known member
Administrative
Trusted Seller
Dec 1, 2018
23,632
26,969
120
frizzel said:
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.
Click to expand...
Thanks, but remember I'm clueless here lol...

So in my case it would be...?

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

videva

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

So in my case it would be...?

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

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

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

MrSam_1

Well-known member
Administrative
Trusted Seller
Dec 1, 2018
23,632
26,969
120
videva said:
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,

   };
}
Click to expand...
frizzel said:
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,
   }
});
Click to expand...

Will try both your solutions soon, thanks guys :love:
 
MrSam_1

MrSam_1

Well-known member
Administrative
Trusted Seller
Dec 1, 2018
23,632
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

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

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

MrSam_1

Well-known member
Administrative
Trusted Seller
Dec 1, 2018
23,632
26,969
120
videva said:
@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.
Click to expand...
You are an absolute star!!!!

Thank you, it works perfectly :love:
 
You must log in or register to reply here.

Similar threads

A
WordPress help, looking to create table-structure with inline replies, but not sure if it is possible
Replies
1
Views
388
Website Support & Development
tuton012
tuton012
salprod
Help me please particles effects doesn't work -wordpress theme -
Replies
1
Views
401
Website Support & Development
MrSam_1
MrSam_1
m1zz
Help Downloading M4S Segmented Videos
Replies
4
Views
513
Website Support & Development
m1zz
m1zz
Kokoth
[NEED HELP] JetFormBuilder add new taxo
Replies
0
Views
270
Website Support & Development
Kokoth
Kokoth
matijang
please help - wp import all woocommerce
Replies
5
Views
453
Website Support & Development
matijang
matijang

Latest posts

Forum statistics

Threads
69,224
Messages
908,415
Members
237,006
Latest member
choky10

Share this page

Share this page

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

Forums Contact us

User Menu

Login
Community platform by XenForo © 2010-2022 XenForo Ltd.
Top Bottom