insert custom HTML content to checkbox containers

2019-09-09 21:02发布

站内问答 / JavaScript
1377 2 4

Basically; what I am trying to achieve is 'if and only if' an element in my static HTML form is checked; so if a checkbox is checked > then the user hits the 'submit' button. The items or checkboxes that are not checked, simply disappear, I have this with the below snippet of code.

    $("input[type=checkbox]:not(:checked)").parent().hide();

OK, so the ones that are not checked hide correctly as they are supposed too, perfect! The problem is: I need the checkbox container div(s) to populate with unique HTML on the next page after the user has 'selected / checked' and then hit submit button. So currently on the next page; the non-checked items hide, and the form elements hide, so all that is perfect. So it's just the black (currently grey background) wrapper divs of the check boxes / items that are checked. But I just need to invoke custom HTML in each one.

Again; user flow: Static Homepage HTML form > user selects checkboxes > hit's submit > next page all non-checked items hide, check boxes themself all hide, but their respective wrapper containers remain - and I simply want custom HTML to appear in each at this point. As opposed to being blank So, the insertion of custom HTML in each of these divs at this point is my struggle

Below is the full pages code:

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script src="js/bootstrap.js" type="text/javascript"></script>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>

<style>
  #item1 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item2 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item3 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item4 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  .space {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 4px 4px 4px 4px;
  }
</style>

<body>
  <div class="container" id="records" style="background-color:#fff; width: 400px; margin: 0 auto;">
    <br/>

    <div class="row" id="item1" class="box">
      Item 1 Details for the PDF test.
      <br>

      <input type="checkbox" id="check1" name="sample[]" value="red" /> <em>This</em> is a checkbox1
      <br />

    </div>

    <div class="space"></div>

    <div class="row" id="item2" class="box">
      Item 2 Details for the PDF test.
      <br>

      <input type="checkbox" id="check2" name="sample[]" value="red" /> <em>This</em> is a checkbox2
      <br />

    </div>

    <div class="space"></div>

    <div class="row" id="item3" class="box">
      Item 3 Details for the PDF test.
      <br>

      <input type="checkbox" id="check3" name="sample[]" value="red" /> <em>This</em> is a checkbox3
      <br />

    </div>

    <div class="space"></div>

    <div class="row" id="item4" class="box">
      Item 4 Details for the PDF test.
      <br>

      <input type="checkbox" id="check4" name="sample[]" value="red" /> <em>This</em> is a checkbox4
      <br />
    </div>

    <div class="space"></div>

    <center>
      <div class="container1">
        <div class="row">
          <div class="col-md-8">
            <p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a>
            </p>
          </div>
        </div>
      </div>
    </center>

    <div id="print" style="background-color:#fff"></div>
    <script type="text/javascript">
      $("#container").css('background', '#fff')

       $('.download-pdf').click(function() {

        $("input[type=checkbox]:not(:checked)").parent().hide();

        var pdf = new jsPDF('p', 'pt', 'a4');

        pdf.addHTML(document.getElementById('records'), function() {});
        var file = 'test';
        if (typeof doc !== 'undefined') {
          doc.save(file + '.pdf');
        } else if (typeof pdf !== 'undefined') {
          (function() {
            pdf.save(file + '.pdf');
            // $("#item4").hide();

          }, 2000);
        } else {
          alert('Error 0xE001BADF');
        }

      });
    </script>
</body>

</html>

2条回答
Melony?
2楼-- · 2019-09-09 21:39

Here's another version, where you just specify your HTML inside divs with after-submit class:

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script src="js/bootstrap.js" type="text/javascript"></script>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>

<style>
  #item1 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item2 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item3 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item4 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  .space {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 4px 4px 4px 4px;
  }
  .box .after-submit {
    display: none;
  }
</style>

<body>
  <div class="container" id="records" style="background-color:#fff; width: 400px; margin: 0 auto;">
    <br/>

    <div class="row" id="item1" class="box">
      <div class="after-submit">
        Some <strong>HTML</strong> here 1
      </div>
      <div class="before-submit">
        Item 1 Details for the PDF test.
        <br>

        <input type="checkbox" id="check1" name="sample[]" value="red" /> <em>This</em> is a checkbox1
        <br />
      </div>
    </div>

    <div class="space"></div>

    <div class="row" id="item2" class="box">
      <div class="after-submit">
        Some <strong>HTML</strong> here 2
      </div>
      <div class="before-submit">

        Item 2 Details for the PDF test.
        <br>

        <input type="checkbox" id="check2" name="sample[]" value="red" /> <em>This</em> is a checkbox2
        <br />
      </div>
    </div>

    <div class="space"></div>

    <div class="row" id="item3" class="box">
      <div class="after-submit">
        Some <strong>HTML</strong> here 3
      </div>
      <div class="before-submit">
        Item 3 Details for the PDF test.
        <br>

        <input type="checkbox" id="check3" name="sample[]" value="red" /> <em>This</em> is a checkbox3
        <br />
      </div>
    </div>

    <div class="space"></div>

    <div class="row" id="item4" class="box">
      <div class="after-submit">
        Some <strong>HTML</strong> here 4
      </div>
      <div class="before-submit">
        Item 4 Details for the PDF test.
        <br>

        <input type="checkbox" id="check4" name="sample[]" value="red" /> <em>This</em> is a checkbox4
        <br />
      </div>
    </div>

    <div class="space"></div>

    <center>
      <div class="container1">
        <div class="row">
          <div class="col-md-8">
            <p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a>
            </p>
          </div>
        </div>
      </div>
    </center>

    <div id="print" style="background-color:#fff"></div>
    <script type="text/javascript">
      $("#container").css('background', '#fff')

       $('.download-pdf').click(function() {

        yesChecked = $("input[type=checkbox]:checked").closest(".before-submit").hide();
        yesChecked = $("input[type=checkbox]:checked").closest(".after-submit").show();
        notChecked = $("input[type=checkbox]:not(:checked)").parent().parent();
        notChecked.hide();


        var pdf = new jsPDF('p', 'pt', 'a4');

        pdf.addHTML(document.getElementById('records'), function() {});
        var file = 'test';
        if (typeof doc !== 'undefined') {
          doc.save(file + '.pdf');
        } else if (typeof pdf !== 'undefined') {
          (function() {
            pdf.save(file + '.pdf');
            // $("#item4").hide();

          }, 2000);
        } else {
          alert('Error 0xE001BADF');
        }

      });
    </script>
</body>

</html>

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
3楼-- · 2019-09-09 21:52

Hope it helps. Just included all these lines:

texts = {
  item1: 'Some <strong>html</strong> gfor item1',
  item2: 'Some <strong>html</strong> gfor item2',
  item3: 'Some <strong>html</strong> gfor item3',
  item4: 'Some <strong>html</strong> gfor item4',
}

notChecked = $("input[type=checkbox]:not(:checked)").parent();
notChecked.hide();
yesChecked = $("input[type=checkbox]:checked").parent();

$.each(yesChecked, function( index, el ) {
  $(el).show().html(texts[$(el).attr('id')]);
});

So create a hash texts that will include copy per each container ID, as shown. Not the most beautiful version ever, but a fast response

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script src="js/bootstrap.js" type="text/javascript"></script>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>

<style>
  #item1 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item2 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item3 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item4 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  .space {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 4px 4px 4px 4px;
  }
</style>

<body>
  <div class="container" id="records" style="background-color:#fff; width: 400px; margin: 0 auto;">
    <br/>

    <div class="row" id="item1" class="box">
      Item 1 Details for the PDF test.
      <br>

      <input type="checkbox" id="check1" name="sample[]" value="red" /> <em>This</em> is a checkbox1
      <br />

    </div>

    <div class="space"></div>

    <div class="row" id="item2" class="box">
      Item 2 Details for the PDF test.
      <br>

      <input type="checkbox" id="check2" name="sample[]" value="red" /> <em>This</em> is a checkbox2
      <br />

    </div>

    <div class="space"></div>

    <div class="row" id="item3" class="box">
      Item 3 Details for the PDF test.
      <br>

      <input type="checkbox" id="check3" name="sample[]" value="red" /> <em>This</em> is a checkbox3
      <br />

    </div>

    <div class="space"></div>

    <div class="row" id="item4" class="box">
      Item 4 Details for the PDF test.
      <br>

      <input type="checkbox" id="check4" name="sample[]" value="red" /> <em>This</em> is a checkbox4
      <br />
    </div>

    <div class="space"></div>

    <center>
      <div class="container1">
        <div class="row">
          <div class="col-md-8">
            <p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a>
            </p>
          </div>
        </div>
      </div>
    </center>

    <div id="print" style="background-color:#fff"></div>
    <script type="text/javascript">
      texts = {
        item1: 'Some <strong>html</strong> gfor item1',
        item2: 'Some <strong>html</strong> gfor item2',
        item3: 'Some <strong>html</strong> gfor item3',
        item4: 'Some <strong>html</strong> gfor item4',
      }
      $("#container").css('background', '#fff')

       $('.download-pdf').click(function() {

        notChecked = $("input[type=checkbox]:not(:checked)").parent();
        notChecked.hide();
        yesChecked = $("input[type=checkbox]:checked").parent();

        $.each(yesChecked, function( index, el ) {
          $(el).show().html(texts[$(el).attr('id')]);
        });

        var pdf = new jsPDF('p', 'pt', 'a4');

        pdf.addHTML(document.getElementById('records'), function() {});
        var file = 'test';
        if (typeof doc !== 'undefined') {
          doc.save(file + '.pdf');
        } else if (typeof pdf !== 'undefined') {
          (function() {
            pdf.save(file + '.pdf');
            // $("#item4").hide();

          }, 2000);
        } else {
          alert('Error 0xE001BADF');
        }

      });
    </script>
</body>

</html>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)