bigdaver Posted September 2, 2013 Share Posted September 2, 2013 (edited) Hi Guys,I'm looking for a very simple code to create a list from a form of checkboxes which can be printed off, preferably the resulting list can be formatted to include my website logo etc. So the requirement is this:A list of checkboxes with names of items (simple).A submit button at the bottom of the list.Hitting the submit button generates a printable page listing only items that were checked in the form, preferably with my logo in the top left and URL at the bottom of the page.I've had a good google and can't work this out myself (my html syntax knowledge is not groundbreaking)Thanks in advance for any assistance.(Edit: I have the code to create the form of checkboxes and non-functional submit button but posting HTML seems to be screwing up the post formatting on here) Edited September 2, 2013 by bigdaver Link to comment Share on other sites More sharing options...
davej Posted September 2, 2013 Share Posted September 2, 2013 <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Title</title><style>#logo{width: 100px;}</style><script>var out;var inp;window.onload = init;function init(){document.getElementById('btnc').onclick = update;}function update(){var list = document.getElementById('form1').getElementsByTagName('input');for(var i=0 ; i<list.length ; i++){if(list[i].type == 'checkbox' && list[i].checked == false){list[i].parentNode.style.display = 'none';}}document.getElementById('btnc').value = 'Print Page';document.getElementById('btnc').onclick = prnt;}function prnt(){window.print();}</script></head><body><form id="form1"><img src="https://assets.mozillalabs.com/Brands-Logos/Firefox/logo-only/firefox_logo-only_RGB.png" alt="logo" id="logo"/><hr/><label>Do you have an X? Yes:<input type="checkbox" name="x" value="y"/><br/></label><label>Do you have a Y? Yes:<input type="checkbox" name="y" value="y"/><br/></label><label>Do you have a Z? Yes:<input type="checkbox" name="z" value="y"/><br/></label><label>Do you have a Q? Yes:<input type="checkbox" name="q" value="y"/><br/></label><hr/><input type="button" value="Compress" id="btnc"/><input type="button" value="Reload Page" onclick="location.reload();"/></form></body></html> Link to comment Share on other sites More sharing options...
bigdaver Posted September 2, 2013 Author Share Posted September 2, 2013 Hey Davej, Thanks for your response, however I can't get that code to behave on my Wordpress site: http://sustinuity.com/?page_id=83 Also, is there a way to get it to generate a new 'document' rather, so opens a new page with all the options that were checked listed which when printed would look like this: https://www.dropbox.com/s/ukp8cabhkuvz3pr/examplelist.pdf which also opens the print dialogue? many thanks. Link to comment Share on other sites More sharing options...
davej Posted September 3, 2013 Share Posted September 3, 2013 (edited) Looks like we may need to study this... http://codex.wordpress.org/Using_Javascript I was going to suggest trying this... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Select Shopping Items</title><style>img{width: 250px;}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script>$(document).ready(function(){$("#btncomp").click(function(){listwindow = window.open('','','width=500');listwindow.document.write('<!DOCTYPE html><html lang="en"><head><title>Shopping List</title></head><body>');listwindow.document.write('<img src="http://sustinuity.com/wp-content/uploads/2013/08/sustinuity-full-logo.jpg" alt="logo"/>');listwindow.document.write('<hr/><p>Shopping List</p>');listwindow.focus();var t;var idx;var list = document.getElementById('form1').getElementsByTagName('input');for(var i=0 ; i<list.length ; i++){if(list[i].type == 'checkbox' && list[i].checked == true){t = list[i].parentNode.innerHTML;idx = t.indexOf('<');listwindow.document.write(t.substring(0,idx) + '<br/>');}}listwindow.document.write('<hr/><input type="button" value="Print Page" onclick="window.print();"/>');listwindow.document.write('<input type="button" value="Close Page" onclick="window.close();"/>');listwindow.document.write('<br/><br/><a href="http://sustinuity.com/" id="homelink">sustinuity.com</a>');listwindow.document.write('</body></html>');document.getElementById('btnclose').disabled = false;});});</script></head><body><form id="form1"><img src="http://sustinuity.com/wp-content/uploads/2013/08/sustinuity-full-logo.jpg" alt="logo" id="logo"/><hr/>Choose:<br/><label>• Item A <input type="checkbox"/><br/></label><label>• Item B <input type="checkbox"/><br/></label><label>• Item C <input type="checkbox"/><br/></label><label>• Item D <input type="checkbox"/><br/></label><label>• Item E <input type="checkbox"/><br/></label><hr/><input type="button" value="Compress" id="btncomp"/><input type="button" value="Close Page" onclick="listwindow.close();" id="btnclose" disabled/></form></body></html> Edited September 3, 2013 by davej Link to comment Share on other sites More sharing options...
bigdaver Posted September 3, 2013 Author Share Posted September 3, 2013 Still not playing ball I'm afraid Dave. http://sustinuity.com/?page_id=83 Is there no way to generate a new page from the selections? Maybe this involves databases or something? Also worth bearing in mind this is within a wordpress template... Link to comment Share on other sites More sharing options...
davej Posted September 3, 2013 Share Posted September 3, 2013 (edited) I don't know the tricks necessary to make code WordPress-compatible. The link I found above may hold the secrets, or tell you what can't be done. I started another thread regarding this type of code problem, but what I see embedded in your page is this... <div><meta charset="utf-8"></p><style>img{width: 250px;}</style><p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><br /><script></p><p>$(document).ready(function(){</p><p>$("#btncomp").click(function(){listwindow = window.open('','','width=500');listwindow.document.write('<!DOCTYPE html><html lang="en"><head></head><body>');listwindow.document.write('<img src="http://sustinuity.com/wp-content/uploads/2013/08/sustinuity-full-logo.jpg" alt="logo"/>');listwindow.document.write('<hr/><p>Shopping List</p><p>');listwindow.focus();var t;var idx;var list = document.getElementById('form1').getElementsByTagName('input');for(var i=0 ; i<list.length ; i++){if(list[i].type == 'checkbox' && list[i].checked == true){t = list[i].parentNode.innerHTML;idx = t.indexOf('<');listwindow.document.write(t.substring(0,idx) + '<br/>');}}listwindow.document.write('<hr/><input type="button" value="Print Page" onclick="window.print();"/>');listwindow.document.write('<input type="button" value="Close Page" onclick="window.close();"/>');listwindow.document.write('<br/><br/><a href="http://sustinuity.com/" id="homelink">sustinuity.com</a>');listwindow.document.write('</body></html>');document.getElementById('btnclose').disabled = false;});});</script><br /></head></p><p><body></p><form id="form1"><img src="http://sustinuity.com/wp-content/uploads/2013/08/sustinuity-full-logo.jpg" alt="logo" id="logo"/></p><hr/>Choose:<br/><br /><label>• Item A <input type="checkbox"/><br/></label><br /><label>• Item B <input type="checkbox"/><br/></label><br /><label>• Item C <input type="checkbox"/><br/></label><br /><label>• Item D <input type="checkbox"/><br/></label><br /><label>• Item E <input type="checkbox"/><br/></label></p><hr/><input type="button" value="Compress" id="btncomp"/><br /><input type="button" value="Close Page" onclick="listwindow.close();" id="btnclose" disabled/><br /></form></div></div> ...which is totally screwed up, because WordPress is pushing it all into the body and considering it to be HTML. I think that means the Javascript needs to be placed in its own file and loaded per the instructions here... http://codex.wordpress.org/Using_Javascript Edited September 5, 2013 by davej Link to comment Share on other sites More sharing options...
davej Posted September 5, 2013 Share Posted September 5, 2013 (edited) Make this into a file named liststripprnt.js if(window.addEventListener){window.addEventListener('load',liststripprnt,false);}else if(window.attachEvent){window.attachEvent('onload',liststripprnt);}else{alert('unable to initialize liststripprnt');}function liststripprnt(){$("#btncomp").click(function(){liststripwindow = window.open('','','width=500');liststripwindow.document.write('<!DOCTYPE html><html lang="en"><head><title>Shopping List</title></head><body>');liststripwindow.document.write('<img src="http://sustinuity.com/wp-content/uploads/2013/08/sustinuity-full-logo.jpg" width="250" alt="logo"/>');liststripwindow.document.write('<hr/><p>Shopping List</p>');liststripwindow.focus();var t;var idx;var list = document.getElementById('form1').getElementsByTagName('input');for(var i=0 ; i<list.length ; i++){if(list[i].type == 'checkbox' && list[i].checked == true){t = list[i].parentNode.innerHTML;idx = t.indexOf('<');liststripwindow.document.write(t.substring(0,idx) + '<br/>');}}liststripwindow.document.write('<hr/><input type="button" value="Print Page" onclick="window.print();"/>');liststripwindow.document.write('<input type="button" value="Close Page" onclick="window.close();"/>');liststripwindow.document.write('<br/><br/><a href="http://sustinuity.com/" id="homelink">sustinuity.com</a>');liststripwindow.document.write('</body></html>');document.getElementById('btnclose').disabled = false;liststripwindow.onunload = function(){document.getElementById('btnclose').disabled = true;}});} ...and this goes into your HTML as you are doing now... <form id="form1"><img src="http://sustinuity.com/wp-content/uploads/2013/08/sustinuity-full-logo.jpg" alt="logo" width="250"/><hr/>Choose:<br/><label>• Item A <input type="checkbox"/><br/></label><label>• Item B <input type="checkbox"/><br/></label><label>• Item C <input type="checkbox"/><br/></label><label>• Item D <input type="checkbox"/><br/></label><label>• Item E <input type="checkbox"/><br/></label><hr/><input type="button" value="Compress" id="btncomp"/><input type="button" value="Close Page" onclick="liststripwindow.close();" id="btnclose" disabled/></form> ...then we have to load the liststripprnt.js file... ...in the head of your header.php template file, between the meta tags and the style sheet link... To "load" the JavaScript file into your site, in the head, add something like this: <script type="text/javascript" src="/scripts/liststripprnt.js"></script> ...and you would want to place the liststripprnt.js file in the scripts folder. Also you'll probably want to replace the logo img path with a local relative path. Edited September 5, 2013 by davej Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now