Skip to content
Advertisement

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:

enter image description here

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>
User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement