addmore.js

   1 // Updated to wait until the document is loaded. addmore_link
   2
   3 cj(function ( $ ) {
   4   $(document).ready(function(){
   5     var count = parseInt($('input[name=contrib_count]').val());
   6     for ( var i = 2; i <= count; i++ ) {
   7       $('#' + "contribution_page_" + i).after(
   8       '<a id=\"remove_link\" class=\"form-link\" href=\"remove\" name=\"remove_link-' + i + '\"> Remove</a>');
   9       $('#' + "contribution_page_" + i).parent().parent().attr("id", "crm-section-con-" + i);
  10       $('#' + "percentage_" + i).parent().parent().attr("id", 'crm-section-per-' + i);
  11     }
  12   });
  13   $("#ProgressBar").validate({
  14     rules: {
  15       starting_amount: {
  16         required: true,
  17         number: true
  18       },
  19       progressbar_name: {
  20         required: true
  21       },
  22       goal_amount: {
  23         required: true,
  24         number: true
  25       },
  26       contribution_page_1: {
  27         required: true
  28       },
  29       percentage_1: {
  30         required: true,
  31         max: 100,
  32         number: true
  33       }
  34     }
  35   });
  36
  37   $('#addmore_link').on('click', function( e ) {
  38     e.preventDefault();
  39     var count = parseInt($('input[name=contrib_count]').val());
  40     count++;
  41
  42     var c_page_sel = $('select[name=contribution_page_1]').clone().attr('id', "contribution_page_" + count);
  43     c_page_sel.attr("name", "contribution_page_" + count);
  44
  45     var id_section = "crm-section-con-" + count;
  46     var sect_tag = "<div class=\"crm-section\" id=" + id_section + "> <hr width='50%' size='1'> <div class=\"label\"><label>Contribution Page</label>";
  47     $('#addmore_link').parent().parent().before(sect_tag);
  48
  49     var id_content = "content_con-" + count;
  50     $('#' + id_section).append("<div class=\"content\" id="+ id_content + ">");
  51     $('#' + id_content).append(c_page_sel);
  52     $('#' + id_content).append('<a id=\"remove_link\" class=\"form-link\" href=\"remove\" name=\"remove_link-' + count + '\"> Remove</a>');
  53     $('#' + id_section).append("</div>");
  54
  55     id_section = "crm-section-per-" + count;
  56     sect_tag = "<div class=\"crm-section\" id=" + id_section + "> <div class=\"label\"><label>Percentage</label>";
  57     $('#addmore_link').parent().parent().before(sect_tag);
  58
  59     id_content = "content_per-" + count;
  60     $('#' + id_section).append("<div class=\"content\" id="+ id_content + ">");
  61     $('#' + id_content).append('<input type="text" size="20" id = percentage_'+ count + ' name="percentage_' + count +'" value="" />');
  62     $('#' + id_section).append("</div");
  63
  64     $( "#contribution_page_" + count).rules( "add", {
  65       required: true
  66     });
  67
  68     $( "#percentage_" + count).rules( "add", {
  69       required: true,
  70       max: 100,
  71       number: true
  72     });
  73
  74     $('input[name=contrib_count]').val(count);
  75
  76   });
  77
  78   $(document).on('click', '#remove_link', function( e ) {
  79     e.preventDefault();
  80
  81     var rem_name = e.target.name;
  82     //assuming that - is the delimiter. second string will be the count
  83     var rem_name_ar = rem_name.split('-');
  84     var contri_page = "\"#percentage_" + rem_name_ar[1] + "\"";
  85     $('#crm-section-con-'+ rem_name_ar[1] +'').remove();
  86     $('#crm-section-per-'+ rem_name_ar[1] +'').remove();
  87     var count = parseInt($('input[name=contrib_count]').val());
  88     count--;
  89     $('input[name=contrib_count]').val(count);
  90   });
  91 });