PHP提交POST

Question

我创建了 2 个表单，我正在尝试获取所有数据以及其中的所有数据并将它们发送到一个简单的表格中，但是我希望每个表单只有 1 个标题，无论输入多少数据它有多少列它会继续添加行而不是标题这样的东西：它只有 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>

提前致谢。

Answer 1

由于今天的工作已被取消，我有 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>

PHP提交POST

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-03-03 10:16:48

PHP提交POST

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-03-03 10:16:48

解决方案1
0 已采纳 2020-03-03 10:16:48