Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How can I make the output in 3 columns table when submitted?

    Code:
        <SCRIPT LANGUAGE="JavaScript">
        <!--
        
        function showBoxes(frm){
           var message = "\n\n"
           var clothmessage = "\n\n"
           //For each checkbox see if it has been checked, record the value.
           for (i = 0; i < frm.handcarry.length; i++)
              if (frm.handcarry[i].checked){
         
                 message =message +"[ ]"+frm.handcarry[i].value + "\n" }
           document.write(message)
        }
        
        
        //NOTE THE onClick="" empty event handlers in the checkbox and radio input fields below
        //are there to fix a bug in Netscape 2.0X. Placing an onClick handler in imput fields fixes
        //a bug where input objects inside tables are reflected more than once.
        
        //-->
        </SCRIPT>
        
        </HEAD>
        <BODY BGCOLOR="#ffffff">
        <FORM NAME="boxes">
        <h2>CHECKLIST </h2>
        <TABLE BORDER="0" CellSpacing="5" CellPadding="0">
        
          <TR><TD colspan="10"><h3>HANDCARRY</h3></TD></TR>
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc1" VALUE="CASH" onClick=""><label class="format" for="hc1">CASH</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc2" VALUE="FOREIGN NOTE" onClick=""><label class="format" for="hc2">FOREIGN NOTE</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc3" VALUE="CREDIT CARD" onClick=""><label class="checkboxThree" for="hc3">CREDIT</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc4" VALUE="ID CARD" onClick=""><label class="checkboxThree" for="hc4">ID CARD</label></TD>
          </TR>    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc5" VALUE="PASSPORT" onClick=""><label class="checkboxThree" for="hc5">PASSPOR</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc6" VALUE="TICKET" onClick=""><label class="checkboxThree" for="hc6">TICKET</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc7" VALUE="VOUCHER" onClick=""><label class="checkboxThree" for="hc7">VOUCHER</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc8" VALUE="GUIDE BOOK" onClick=""><label class="checkboxThree" for="hc8">GUIDE BOOK</label></TD>
          </TR>    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc9" VALUE="INSURANCE CARD" onClick=""><label class="checkboxThree" for="hc9">INSURANCE CARD</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc10" VALUE="PEN" onClick=""><label class="checkboxThree" for="hc10">PEN</label></TD>
          </TR>
        
        </TABLE>
        <P>
        <INPUT TYPE="Button" VALUE="SUBMIT" onClick="showBoxes(this.form)">
        </P>
        </FORM>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    This is very antiquated code.

    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9).
    The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

    BODY BGOLOR is not supported in HTML5.
    Netscape 2.x has been one with Nineveh and Tyre for many years now.

    Assigning a name to a form is deprecated and obsolete, and allowed only for the sake of backwards compatibility. Use an id instead.

    The answer to your question is - use CSS.

    Three-time Formula 1 Champion Sir Jack Brabham has died today at the age of 1988. - Commentator Radio 5 Live

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    May 2014
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Any idea that using css to limit the output in 3 columns
    Thanks


    Quote Originally Posted by Philip M View Post
    This is very antiquated code.

    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9).
    The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

    BODY BGOLOR is not supported in HTML5.
    Netscape 2.x has been one with Nineveh and Tyre for many years now.

    Assigning a name to a form is deprecated and obsolete, and allowed only for the sake of backwards compatibility. Use an id instead.

    The answer to your question is - use CSS.

    Three-time Formula 1 Champion Sir Jack Brabham has died today at the age of 1988. - Commentator Radio 5 Live

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb One possible solution

    One possible solution, trying to use most of your original code ...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Table to Column Display </title>
    <style type="text/css">
     .columns { float:left; width:10em; }
    </style>
    
    </head>
    <body>
        <FORM id="boxes">
        <h2>CHECKLIST </h2>
        <TABLE BORDER="0" CellSpacing="5" CellPadding="0">
        
          <TR><TD colspan="10"><h3>HANDCARRY</h3></TD></TR>
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc1" VALUE="CASH" onClick=""><label class="format" for="hc1">CASH</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc2" VALUE="FOREIGN NOTE" onClick=""><label class="format" for="hc2">FOREIGN NOTE</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc3" VALUE="CREDIT CARD" onClick=""><label class="checkboxThree" for="hc3">CREDIT</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc4" VALUE="ID CARD" onClick=""><label class="checkboxThree" for="hc4">ID CARD</label></TD>
          </TR>    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc5" VALUE="PASSPORT" onClick=""><label class="checkboxThree" for="hc5">PASSPOR</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc6" VALUE="TICKET" onClick=""><label class="checkboxThree" for="hc6">TICKET</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc7" VALUE="VOUCHER" onClick=""><label class="checkboxThree" for="hc7">VOUCHER</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc8" VALUE="GUIDE BOOK" onClick=""><label class="checkboxThree" for="hc8">GUIDE BOOK</label></TD>
          </TR>    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc9" VALUE="INSURANCE CARD" onClick=""><label class="checkboxThree" for="hc9">INSURANCE CARD</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc10" VALUE="PEN" onClick=""><label class="checkboxThree" for="hc10">PEN</label></TD>
          </TR>
        
        </TABLE>
        <P>
        <INPUT TYPE="Button" VALUE="SUBMIT" onClick="showBoxes(this.form)">
        </P>
        </FORM>
    
    <div id="OLlistWide"></div>
    
    <script type="text/javascript">
    
    Array.prototype.makeOLwide = function(cols) {
      var ccnt = 0, cstart = 1;
      var chigh = Math.floor(this.length/cols)+1;        // can use without +1
      if (chigh % 2 == 1) { chigh--; }                   // avoids overflows (sometimes)
      if ( (chigh * cols) < this.length) { chigh++; }
      var str = '';
      var arr = this.slice(0);
      while (arr.length > 0) {
        ccnt++;
        str += '<ul class="columns" start="'+cstart+'">';  // can use ol and /ol replacement
        str += '<li>'+arr.splice(0,chigh).join('</li><li>')+'</li></ul>';
        cstart += chigh;
      }
      return str;
    }
    function showBoxes(info) {
      var OLlist = [];
      var sel = document.getElementsByName('handcarry');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { OLlist.push(sel[i].value); }
      }
      document.getElementById('OLlistWide').innerHTML = OLlist.makeOLwide(3);  // 3 <= OLlist.length/cols desired
    }
    </script>
    
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    May 2014
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much, the code is really helpful.
    If I have 2 groups of checkbox,how can I modify the code?
    Besides, can I show the output in another page because I would like to print out the output.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Table to Column Display </title>
    <style type="text/css">
     .columns { float:left; width:10em; }
    </style>
    
    </head>
    <body>
        <FORM id="boxes">
        <h2>CHECKLIST </h2>
        <TABLE BORDER="0" CellSpacing="5" CellPadding="0">
        
          <TR><TD colspan="10"><h3>HANDCARRY</h3></TD></TR>
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc1" VALUE="CASH" onClick=""><label class="format" for="hc1">CASH</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc2" VALUE="FOREIGN NOTE" onClick=""><label class="format" for="hc2">FOREIGN NOTE</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc3" VALUE="CREDIT CARD" onClick=""><label class="checkboxThree" for="hc3">CREDIT</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc4" VALUE="ID CARD" onClick=""><label class="checkboxThree" for="hc4">ID CARD</label></TD>
          </TR>    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc5" VALUE="PASSPORT" onClick=""><label class="checkboxThree" for="hc5">PASSPORT</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc6" VALUE="TICKET" onClick=""><label class="checkboxThree" for="hc6">TICKET</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc7" VALUE="VOUCHER" onClick=""><label class="checkboxThree" for="hc7">VOUCHER</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc8" VALUE="GUIDE BOOK" onClick=""><label class="checkboxThree" for="hc8">GUIDE BOOK</label></TD>
          </TR>    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc9" VALUE="INSURANCE CARD" onClick=""><label class="checkboxThree" for="hc9">INSURANCE CARD</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc10" VALUE="PEN" onClick=""><label class="checkboxThree" for="hc10">PEN</label></TD>
          </TR>
             <TR><TD colspan="10"><h3>LUGGAGE</h3></TD></TR>
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu1" VALUE="SWEATER" onClick=""><label class="format" for="lu1"> SWEATER </label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu2" VALUE="UNDERWEAR" onClick=""><label class="format" for="lu2">UNDERWEAR </label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu3" VALUE="T-SHIRT" onClick=""><label class="checkboxThree" for="lu3">T-SHIRT</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu4" VALUE="PANTS" onClick=""><label class="checkboxThree" for="lu4">PANTS</label></TD>
          </TR>    
         
    
        </TABLE>
        <P>
        <INPUT TYPE="Button" VALUE="SUBMIT" onClick="showBoxes(this.form)">
        </P>
        </FORM>
              
    <div id="OLlistWide"></div>
    
    <script type="text/javascript">
    
    Array.prototype.makeOLwide = function(cols) {
      var ccnt = 0, cstart = 1;
      var chigh = Math.floor(this.length/cols);        // can use without +1
      if (chigh % 2 == 1) { chigh--; }                   // avoids overflows (sometimes)
      if ( (chigh * cols) < this.length) { chigh++; }
      var str = '';
      var arr = this.slice(0);
      while (arr.length > 0) {
        ccnt++;
        str += '<ol class="columns" start="'+cstart+'">';  // can use ol and /ol replacement
        str += '<li>'+arr.splice(0,chigh).join('</li><li>')+'</li></ol>';
        cstart += chigh;
      }
      return str;
    }
    function showBoxes(info) {
      var OLlist = [];
      var sel = document.getElementsByName('handcarry');
      var OLlist1 = [];
      var sel = document.getElementsByName('luggage');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { OLlist.push(sel[i].value); }
      }
      document.getElementById('OLlistWide').innerHTML = OLlist.makeOLwide(3);  // 3 <= OLlist.length/cols desired            
    
      </script>
    
    </body>
    </html>

  • #6
    New Coder
    Join Date
    Jun 2005
    Location
    Blackpool. UK
    Posts
    98
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Chris

    Indifference will be the downfall of mankind, but who cares?

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Quote Originally Posted by chatingtou View Post
    Thank you so much, the code is really helpful.
    If I have 2 groups of checkbox,how can I modify the code?
    Besides, can I show the output in another page because I would like to print out the output.

    Code:
     ...
    What are the two groups? Show some demo code.

    There are many examples on this forum about creating a new window with JS.
    Search for "new window with javascript" or something similar.

    This is a helping forum, but not all have the time to write everything for you.

  • #8
    New to the CF scene
    Join Date
    May 2014
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The two group just like below pic, I'm lack of knowledge about javascript, please help.

    How can I make the output in 3 columns table when submitted?-form.jpg

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Understand the changes before you randomly make modifications...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Table to Column Display </title>
    <style type="text/css">
     .columns { float:left; width:10em; }
    </style>
    
    </head>
    <body>
        <FORM id="boxes">
        <h2>CHECKLIST </h2>
        <TABLE BORDER="0" CellSpacing="5" CellPadding="0">
        
          <TR><TD colspan="10"><h3>HANDCARRY</h3></TD></TR>
    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc1" VALUE="CASH"><label class="format" for="hc1">CASH</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc2" VALUE="FOREIGN NOTE"><label class="format" for="hc2">FOREIGN NOTE</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc3" VALUE="CREDIT CARD"><label class="checkboxThree" for="hc3">CREDIT</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc4" VALUE="ID CARD"><label class="checkboxThree" for="hc4">ID CARD</label></TD>
          </TR>    
    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc5" VALUE="PASSPORT"><label class="checkboxThree" for="hc5">PASSPORT</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc6" VALUE="TICKET"><label class="checkboxThree" for="hc6">TICKET</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc7" VALUE="VOUCHER"><label class="checkboxThree" for="hc7">VOUCHER</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc8" VALUE="GUIDE BOOK""><label class="checkboxThree" for="hc8">GUIDE BOOK</label></TD>
          </TR>    
    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc9" VALUE="INSURANCE CARD"><label class="checkboxThree" for="hc9">INSURANCE CARD</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc10" VALUE="PEN"><label class="checkboxThree" for="hc10">PEN</label></TD>
          </TR>
    
          <TR><TD colspan="10"><h3>LUGGAGE</h3></TD></TR>
    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu1" VALUE="SWEATER"><label class="format" for="lu1"> SWEATER </label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu2" VALUE="UNDERWEAR"><label class="format" for="lu2">UNDERWEAR </label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu3" VALUE="T-SHIRT"><label class="checkboxThree" for="lu3">T-SHIRT</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu4" VALUE="PANTS"><label class="checkboxThree" for="lu4">PANTS</label></TD>
          </TR>    
    
        </TABLE>
        <P>
    
        <INPUT TYPE="Button" VALUE="SUBMIT" onClick="showBoxes(this.form)">
        </P>
        </FORM>
    
    <p> <hr> <p>      
    <div id="HandListWide"></div>
    <p style="clear:both" />
    <div id="LuggListWide"></div>
    
    <script type="text/javascript">
    
    Array.prototype.makeOLwide = function(cols) {
      var ccnt = 0, cstart = 1;
      var chigh = Math.floor(this.length/cols)+1;        // can use without
      if (chigh % 2 == 0) { chigh--; }                   // avoids overflows (sometimes)
      if ( (chigh * cols) < this.length) { chigh++; }
      var str = '';
      var arr = this.slice(0);
      while (arr.length > 0) {
        ccnt++;
        str += '<ul class="columns" start="'+cstart+'">';  // can use ol and /ol replacement
        str += '<li>'+arr.splice(0,chigh).join('</li><li>')+'</li></ul>';
        cstart += chigh;
      }
      return str;
    }
    function showBoxes(info) {
      var handlist = [];
      var sel = document.getElementsByName('handcarry');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { handlist.push(sel[i].value); }
      }
      var lugglist = [];
          sel = document.getElementsByName('luggage');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { lugglist.push(sel[i].value); }
      }
      document.getElementById('HandListWide').innerHTML = handlist.makeOLwide(3);        
      document.getElementById('LuggListWide').innerHTML = lugglist.makeOLwide(3);        
    }
    </script>
    
    </body>
    </html>

  • #10
    New to the CF scene
    Join Date
    May 2014
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    How can I make output in a pop up window with specific window size?
    I found many related documents but still can't applied on this script.

    Quote Originally Posted by jmrker View Post
    Understand the changes before you randomly make modifications...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Table to Column Display </title>
    <style type="text/css">
     .columns { float:left; width:10em; }
    </style>
    
    </head>
    <body>
        <FORM id="boxes">
        <h2>CHECKLIST </h2>
        <TABLE BORDER="0" CellSpacing="5" CellPadding="0">
        
          <TR><TD colspan="10"><h3>HANDCARRY</h3></TD></TR>
    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc1" VALUE="CASH"><label class="format" for="hc1">CASH</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc2" VALUE="FOREIGN NOTE"><label class="format" for="hc2">FOREIGN NOTE</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc3" VALUE="CREDIT CARD"><label class="checkboxThree" for="hc3">CREDIT</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc4" VALUE="ID CARD"><label class="checkboxThree" for="hc4">ID CARD</label></TD>
          </TR>    
    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc5" VALUE="PASSPORT"><label class="checkboxThree" for="hc5">PASSPORT</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc6" VALUE="TICKET"><label class="checkboxThree" for="hc6">TICKET</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc7" VALUE="VOUCHER"><label class="checkboxThree" for="hc7">VOUCHER</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc8" VALUE="GUIDE BOOK""><label class="checkboxThree" for="hc8">GUIDE BOOK</label></TD>
          </TR>    
    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc9" VALUE="INSURANCE CARD"><label class="checkboxThree" for="hc9">INSURANCE CARD</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc10" VALUE="PEN"><label class="checkboxThree" for="hc10">PEN</label></TD>
          </TR>
    
          <TR><TD colspan="10"><h3>LUGGAGE</h3></TD></TR>
    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu1" VALUE="SWEATER"><label class="format" for="lu1"> SWEATER </label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu2" VALUE="UNDERWEAR"><label class="format" for="lu2">UNDERWEAR </label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu3" VALUE="T-SHIRT"><label class="checkboxThree" for="lu3">T-SHIRT</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu4" VALUE="PANTS"><label class="checkboxThree" for="lu4">PANTS</label></TD>
          </TR>    
    
        </TABLE>
        <P>
    
        <INPUT TYPE="Button" VALUE="SUBMIT" onClick="showBoxes(this.form)">
        </P>
        </FORM>
    
    <p> <hr> <p>      
    <div id="HandListWide"></div>
    <p style="clear:both" />
    <div id="LuggListWide"></div>
    
    <script type="text/javascript">
    
    Array.prototype.makeOLwide = function(cols) {
      var ccnt = 0, cstart = 1;
      var chigh = Math.floor(this.length/cols)+1;        // can use without
      if (chigh % 2 == 0) { chigh--; }                   // avoids overflows (sometimes)
      if ( (chigh * cols) < this.length) { chigh++; }
      var str = '';
      var arr = this.slice(0);
      while (arr.length > 0) {
        ccnt++;
        str += '<ul class="columns" start="'+cstart+'">';  // can use ol and /ol replacement
        str += '<li>'+arr.splice(0,chigh).join('</li><li>')+'</li></ul>';
        cstart += chigh;
      }
      return str;
    }
    function showBoxes(info) {
      var handlist = [];
      var sel = document.getElementsByName('handcarry');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { handlist.push(sel[i].value); }
      }
      var lugglist = [];
          sel = document.getElementsByName('luggage');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { lugglist.push(sel[i].value); }
      }
      document.getElementById('HandListWide').innerHTML = handlist.makeOLwide(3);        
      document.getElementById('LuggListWide').innerHTML = lugglist.makeOLwide(3);        
    }
    </script>
    
    </body>
    </html>

  • #11
    New Coder
    Join Date
    Jun 2005
    Location
    Blackpool. UK
    Posts
    98
    Thanks
    0
    Thanked 4 Times in 4 Posts
    How can I make output in a pop up window with specific window size?

    Window open() Method
    Chris

    Indifference will be the downfall of mankind, but who cares?

  • #12
    New to the CF scene
    Join Date
    May 2014
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Is it somethings like this, there is window pop-up but no output inside

    function showBoxes(info) {
    var handlist = [];
    var sel = document.getElementsByName('handcarry');
    for (var i=0; i<sel.length; i++) {
    if (sel[i].checked) { handlist.push(sel[i].value); }
    }
    var lugglist = [];
    sel = document.getElementsByName('luggage');
    for (var i=0; i<sel.length; i++) {
    if (sel[i].checked) { lugglist.push(sel[i].value); }
    }
    var myWindow = window.open("", "myWindow", "width=200, height=100");
    myWindow.document.getElementById('HandListWide').innerHTML = handlist.makeOLwide(3);
    myWindow.document.getElementById('LuggListWide').innerHTML = lugglist.makeOLwide(3);
    }

  • #13
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Quote Originally Posted by chatingtou View Post
    Is it somethings like this, there is window pop-up but no output inside
    Trying to keep with your original concept ...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Table to Column Display </title>
    
    <!-- Following NOT used at this time
    <style type="text/css">
     .columns { float:left; width:10em; }
    </style>
    // -->
    
    </head>
    <body>
        <FORM id="boxes">
        <h2>CHECKLIST </h2>
        <TABLE BORDER="0" CellSpacing="5" CellPadding="0">
        
          <TR><TD colspan="10"><h3>HANDCARRY</h3></TD></TR>
    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc1" VALUE="CASH"><label class="format" for="hc1">CASH</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc2" VALUE="FOREIGN NOTE"><label class="format" for="hc2">FOREIGN NOTE</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc3" VALUE="CREDIT CARD"><label class="checkboxThree" for="hc3">CREDIT</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc4" VALUE="ID CARD"><label class="checkboxThree" for="hc4">ID CARD</label></TD>
          </TR>    
    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc5" VALUE="PASSPORT"><label class="checkboxThree" for="hc5">PASSPORT</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc6" VALUE="TICKET"><label class="checkboxThree" for="hc6">TICKET</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc7" VALUE="VOUCHER"><label class="checkboxThree" for="hc7">VOUCHER</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc8" VALUE="GUIDE BOOK""><label class="checkboxThree" for="hc8">GUIDE BOOK</label></TD>
          </TR>    
    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc9" VALUE="INSURANCE CARD"><label class="checkboxThree" for="hc9">INSURANCE CARD</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="handcarry" id="hc10" VALUE="PEN"><label class="checkboxThree" for="hc10">PEN</label></TD>
          </TR>
    
          <TR><TD colspan="10"><h3>LUGGAGE</h3></TD></TR>
    
          <TR>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu1" VALUE="SWEATER"><label class="format" for="lu1"> SWEATER </label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu2" VALUE="UNDERWEAR"><label class="format" for="lu2">UNDERWEAR </label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu3" VALUE="T-SHIRT"><label class="checkboxThree" for="lu3">T-SHIRT</label></TD>
          <TD><INPUT TYPE="Checkbox" NAME="luggage" id="lu4" VALUE="PANTS"><label class="checkboxThree" for="lu4">PANTS</label></TD>
          </TR>    
    
        </TABLE>
        <P>
    
        <INPUT TYPE="Button" VALUE="SUBMIT" onClick="showBoxes(this.form)">
        </P>
        </FORM>
    
    <p> <hr> <p>      
    <div id="HandListWide"></div>
    <p style="clear:both" />
    <div id="LuggListWide"></div>
    
    <script type="text/javascript">
    
    Array.prototype.makeOLwide = function(cols) {
      var ccnt = 0, cstart = 1;
      var chigh = Math.floor(this.length/cols)+1;        // can use without
      if (chigh % 2 == 0) { chigh--; }                   // avoids overflows (sometimes)
      if ( (chigh * cols) < this.length) { chigh++; }
      var str = '';
      var arr = this.slice(0);
      while (arr.length > 0) {
        ccnt++;
        str += '<ul style="float:left; width:10em;" start="'+cstart+'">';  // can use ol and /ol replacement
        str += '<li>'+arr.splice(0,chigh).join('</li><li>')+'</li></ul>';
        cstart += chigh;
      }
      return str;
    }
    function showBoxes(info) {
      var handlist = [];
      var sel = document.getElementsByName('handcarry');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { handlist.push(sel[i].value); }
      }
      var lugglist = [];
          sel = document.getElementsByName('luggage');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { lugglist.push(sel[i].value); }
      }
      document.getElementById('HandListWide').innerHTML = handlist.makeOLwide(3);        
      document.getElementById('LuggListWide').innerHTML = lugglist.makeOLwide(3);  
    
      var str = '<div>';
          str += handlist.makeOLwide(3);
          str += '<br style="clear:both">';
          str += lugglist.makeOLwide(3);
          str += '<br style="clear:both">';
          str += '</div>';
      popupWindow(str);
    }
    
    function popupWindow(str) {
      var myWindow = window.open("", "MsgWindow", "width=800, height=200");
      myWindow.document.write(str);
    }
    </script>
    
    </body>
    </html>
    Good Luck!

  • Users who have thanked jmrker for this post:

    chatingtou (06-06-2014)


  •  

    LinkBacks (?)

    1. 06-02-2014, 07:06 AM

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •