Javascript PHP提交帖子_Javascript_Php

Javascript PHP提交帖子

javascript php

Javascript PHP提交帖子,javascript,php,Javascript,Php,我创建了两个表单，我试图获取其中的所有数据，并通过电子邮件发送到一个简单的表中，但是我希望每个表单只有一个标题，无论输入多少数据或有多少列，它都会不断添加行，而不是像这样的标题：只有2列，但将来可能有3列：因此，我创建了这段代码，以尽可能保持通用性： <!DOCTYPE HTML> <html> <head> <script src="js/Jquery.js"></script> <

我创建了两个表单，我试图获取其中的所有数据，并通过电子邮件发送到一个简单的表中，但是我希望每个表单只有一个标题，无论输入多少数据或有多少列，它都会不断添加行，而不是像这样的标题：只有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>

表单如下所示：

<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和语法上有效的HTML标记制作了一个小演示，它提供了比原来更大的灵活性，因为您可以简单地添加新的

模板

标记（带内容）javascript应该相应地容纳它们并生成所需的输出。自始至终的评论应该有助于澄清发生了什么

document.addEventListener（'DOMContentLoaded'，（）=>{
//对HTML元素的引用
const oSelect=document.querySelector（'select[name=“picker”]”）；
const oBttn=document.querySelector（'input[type=“button”][name=“template_bttn”]”）；
const of form=document.querySelector（'form[name=“template”]”）；
const-oTable=document.querySelector（'table[id=“output”]”）；
const colTemplates=Array.from（document.querySelectorAll（'template.source'）；
const osubbtn=document.querySelector（'input[type=“button”][name=“subdata”]”）；
//单击“显示所选”按钮时的事件处理程序
常量clickhandler=函数（e）{
//仅当选择已从默认值更改时才继续
if（oSelect.value！=oSelect.childNodes[1].value）{
//从HTML中查找模板
让template=document.querySelector（'template[id=“”+oSelect.value+'”）；
//将模板HTML添加到空表单中
oForm.innerHTML=template.innerHTML；
//将事件处理程序分配给表单中的按钮
让bttn=oForm.querySelector（'input[type=“button”]”）；
bttn.addEventListener（'click'，addcontenthandler）；
}
};
//选择菜单更改时清除表单
常量changehandler=函数（e）{
oForm.innerHTML=''；
};
//事件处理程序，在添加所有行后执行数据的最终处理。。。
常量submithandler=函数（e）{
console.info（oTable.outerHTML）；
};
const addcontenthandler=函数（e）{
//未隐藏的窗体元素或按钮。。。
让col=Array.from（oForm.querySelectorAll（'input:not（[type=“button”]）：not（[type=“hidden”]））；
//该类型决定将内容写入哪个tbody
let type=oForm.querySelector（'input[type=“hidden”]”）。值；
//将根据选择菜单中的选择填充的t车身
让tbody=oTable.querySelector（“[data name=“”+type+”]”数据名]）
//如果此特定tbody没有列标题，请根据此表单中的表单元素名称添加它们
if（tbody&！tbody.querySelector（'tr[scope=“col”]”）{
设tr=document.createElement（'tr'）；
tr.setAttribute（'scope'，'col'）；
t附肢儿童（tr）；
col.forEach（输入=>{
设td=document.createElement（'td'）；
td.textContent=input.name.replace（/\\ ugi，'）；
tr.appendChild（td）；
});
}
//对于每个输入元素，将其内容添加到表中。。。
tr=document.createElement（'tr'）；
t附肢儿童（tr）；
col.forEach（输入=>{
td=document.createElement（'td'）；
td.textContent=input.value；
输入值=“”；
tr.appendChild（td）；
});			
};
//为在HTML源代码中找到的每个模板添加新的tbody，并将条目添加到选择菜单中
colTemplates.forEach（模板=>{
让tbody=document.createElement（'tbody'）；
tbody.dataset.name=template.id；
可旋转。附肢子体（tbody）；
oSelect.appendChild（新选项（template.id，template.id））；
});
//将事件侦听器分配给各种DOM元素
oBttn.addEventListener（'click'，clickhandler）；
oSelect.addEventListener（'change'，changehandler）；
OSUBTTN.addEventListener（'click'，submithandler）；
});
body，body*{font-family:monospace；框大小：边框框}
表{边框：1px实心灰色；边框折叠：无；宽度：50%；边距：5rem 0 0；填充：1rem；}
td{边框：1px点灰色；填充：1rem；边距：0.1rem；}
tr[scope='col']{背景：灰色；颜色：白色}
[name='subdata']{填充：1rem；宽度：50%；}
.pl-276{}
.collapse.toggle{}

请选择模板
fyi:Thecenter
标记已经过时，是一个输出
标记（或was），那么为什么要在表单中使用它呢？url使用正斜杠而不是反斜杠，所以您在ajax$.get（“test\\\”+template_p+”.php中使用的url，
是特别的，请包括两个模板，test/payment.php
和test/identity.php
您不能使用重复的ID（即：HTML中有一个实际的模板标记，允许您添加所需的HTML内容以供其他地方使用Hey RamRider！非常感谢您花时间为我的问题建立解决方案！非常感谢！帮助了我很多！
<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>