I Created 2 forms and i’m trying to take all of the data and which inside them and email them both in a simple table, however i want that each form will have only 1 header and no matter how much data would be entered or on how many columns it has it will keep adding lines and not headers something like this: which has only 2 columns but can have 3 in the future:
So i Created this code to keep it generic as much as possible:
<!DOCTYPE HTML> <html> <head> <script src="js/Jquery.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>Test</title> <style> html { -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; } </style> </head> <body id="body" class="dark-mode"> <select name="Template_Picker" id="Template_Picker"> <option value="" Disabled selected hidden>Select Template</option> <option value="payment">payment</option> <option value="identity">identity</option> </select> <br> <div id="Templates_Pages"> <button class="Template" value="Send" id="Template_Button">Show selected</button> </div> <div class="vl"></div> <form action="test/submit.php" method="post" id="submit_template"> <center id="output"> </center> </form> </body> <script src="test/template.js"></script> </html>
The forms being called by the following id=”Template_Picker” with a JS and creating submit button:
$(".Template").click(function(){ template_p = ($('#Template_Picker').val()); $.get("test\"+template_p+".php",function(output){ $("#output").append(output); button_exist = document.getElementById('submit'); if(button_exist == null) { btn = document.createElement("BUTTON"); btn.innerHTML = "Submit"; btn.setAttribute("id","submit"); btn.setAttribute("type","submit"); btn.setAttribute("name","submit"); btn.setAttribute("value","Submit"); btn.setAttribute("class","button-1"); btn.setAttribute("form","submit_template"); document.body.appendChild(btn); } if(document.getElementById("template")) { document.getElementById("template").id = "template" + document.getElementsByClassName("collapse.toggle").length; } }); });
Forms looks like this:
<input type="hidden" id="identity" name="DB_Table" value="identity"> <div id="template" class="collapse.toggle" style="padding-left: 276px";> <input type="text" placeholder="Full Name" name="Full_Name" > <input type="text" placeholder="Last Name" name="Last_Name" > </div> <input type="hidden" id="payment" name="DB_Table" value="payment"> <div id="template" class="collapse.toggle" style="padding-left: 276px";> <input type="text" placeholder="Full Name" name="Full_Name" > <input type="text" placeholder="Credit Card" name="Credit_Card" > </div>
Thanks In Advance.
Advertisement
Answer
As work today has been cancelled I had a spare 1/2 hour and put together a small demo using vanilla javascript and,I think, syntactically valid HTML markup that offers greater flexibility than the original as you can simply add new template
tags ( with content ) and the javascript should accomodate them accordingly and generate the desired output. The comments throughout ought to help clarify what is going on where…
document.addEventListener('DOMContentLoaded',()=>{ // references to HTML elements const oSelect=document.querySelector('select[name="picker"]'); const oBttn=document.querySelector('input[type="button"][name="template_bttn"]'); const oForm=document.querySelector('form[name="template"]'); const oTable=document.querySelector('table[id="output"]'); const colTemplates=Array.from( document.querySelectorAll('template.source') ); const oSubBttn=document.querySelector('input[type="button"][name="subdata"]'); // event handler for when the `show selected` button is clicked const clickhandler=function(e){ // only proceed if the SELECT has been changed from the default if( oSelect.value != oSelect.childNodes[1].value ){ // find the template from HTML let template=document.querySelector( 'template[ id="'+oSelect.value+'" ]' ); // add the template HTML to the empty form oForm.innerHTML=template.innerHTML; //assign event handler to button within form let bttn=oForm.querySelector('input[type="button"]'); bttn.addEventListener('click', addcontenthandler ); } }; // clear the form when select menu changes const changehandler=function(e){ oForm.innerHTML=''; }; // event handler that does the final processing of data when all rows have been added... const submithandler=function(e){ console.info( oTable.outerHTML ); }; const addcontenthandler=function(e){ // form elements that are NOT hidden or buttons... let col=Array.from( oForm.querySelectorAll('input:not( [type="button"] ):not( [type="hidden"] )') ); // the type determines which tbody to write content to let type=oForm.querySelector('input[ type="hidden" ]').value; // the tbody that will be populated according to selection made in the SELECT menu let tbody=oTable.querySelector('[ data-name="'+type+'" ]') // If this particular tbody does NOT have column headers, add them based upon form element names in this form if( tbody && !tbody.querySelector('tr[ scope="col" ]') ){ let tr=document.createElement('tr'); tr.setAttribute('scope','col'); tbody.appendChild( tr ); col.forEach( input=>{ let td=document.createElement('td'); td.textContent=input.name.replace(/_/gi,' '); tr.appendChild( td ); }); } // for each input element add it's content to the table... tr=document.createElement('tr'); tbody.appendChild( tr ); col.forEach( input=>{ td=document.createElement('td'); td.textContent=input.value; input.value=''; tr.appendChild( td ); }); }; // add new tbody for each Template found in HTML source & add entry to the select menu colTemplates.forEach( template=>{ let tbody=document.createElement('tbody'); tbody.dataset.name=template.id; oTable.appendChild( tbody ); oSelect.appendChild( new Option( template.id, template.id ) ); }); // assign event listeners to various DOM elements oBttn.addEventListener('click', clickhandler ); oSelect.addEventListener('change', changehandler ); oSubBttn.addEventListener('click', submithandler ); });
body, body *{font-family:monospace;box-sizing:border-box} table{border:1px solid gray;border-collapse:none;width:50%;margin:5rem 0 0 0;padding:1rem;} td{border:1px dotted gray;padding:1rem;margin:0.1rem;} tr[scope='col']{background:gray;color:white} [name='subdata']{padding:1rem;width:50%;} .pl-276{} .collapse.toggle{}
<form method='post'> <select name='picker'> <option selected hidden disabled>Please Select Template <!-- other options are populated dynamically --> </select> <input type='button' name='template_bttn' value='Show Selected' /> </form> <form method='post' name='template'><!-- content will be added here dynamically depending upon chosen template --></form> <table id='output'></table> <input type='button' name='subdata' value='Submit generated data' /> <!-- you can add as many `TEMPLATES` as you like with as many `INPUT ELEMENTS` as you like --> <template id='identity' class='source'> <input type='hidden' name='DB_Table' value='identity' /> <div class='collapse.toggle pl-276'> <input type='text' placeholder='Full Name' name='Full_Name' /> <input type='text' placeholder='Last Name' name='Last_Name' /> </div> <input type='button' value='Add Content' /> </template> <template id='payment' class='source'> <input type='hidden' name='DB_Table' value='payment' /> <div class='collapse.toggle pl-276'> <input type='text' placeholder='Full Name' name='Full_Name' /> <input type='text' placeholder='Credit Card' name='Credit_Card' /> </div> <input type='button' value='Add Content' /> </template> <template id='banana' class='source'> <input type='hidden' name='DB_Table' value='banana' /> <div class='collapse.toggle pl-276'> <input type='text' placeholder='Banana Colour' name='Banana_Colour' /> <input type='text' placeholder='Banana Shape' name='Banana_Shape' /> <input type='text' placeholder='Banana Weight' name='Banana_Weight' /> </div> <input type='button' value='Add Content' /> </template>