PHP submit POST

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>

JavaScript
​x
 
<!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;
        }
    });
});

JavaScript
 
$(".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>

JavaScript
 
<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.

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 );
});

JavaScript
 
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{}

JavaScript
 
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>

JavaScript
 
<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>

Advertisement

Answer