时间戳

首页 > 解决方案 > PHP 提交 POST

javascript - PHP 提交 POST

问题描述

我创建了 2 个表单，我正在尝试获取所有数据以及其中的所有数据并将它们发送到一个简单的表格中，但是我希望每个表单只有一个标题，无论输入或打开多少数据它有多少列它将继续添加行而不是像这样的标题：它只有 2 列，但将来可以有 3 列：

在此处输入图像描述

因此，我创建了此代码以使其尽可能通用：

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

以下 id="Template_Picker" 使用 JS 调用表单并创建提交按钮：

$(".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;
        }
    });
});

表单如下所示：

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

提前致谢。

标签： javascriptphp

解决方案

由于今天的工作已被取消，我有 1/2 小时的空闲时间并使用 vanilla javascript 编写了一个小演示，我认为，语法上有效的 HTML 标记提供了比原始标记更大的灵活性，因为您可以简单地添加新template标签（带有内容）并且 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{}
<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>

推荐阅读