Question

我正在使用Javascript动态创建表单中的输入字段。我需要添加相同的子子字段。例如，如果用户输入3，我的脚本应创建3个输入字段，其名称属性为Member 1，Member 2和Member 3.如果用户输入成员2（sub），成员A和成员B. 如何使用post方法在PHP中访问这些字段中的数据？请检查代码。

 <script type='text/javascript'>
        function addFields(){
          
            var number = document.getElementById("member").value;
            
            var container = document.getElementById("container");
            
            while (container.hasChildNodes()) {
              container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
            
                container.appendChild(document.createTextNode("Q. " + (i+1)));
				
				 var divtest = document.createElement("div");
				 divtest.setAttribute("class", "form-group removeclass"+(i+1));
    divtest.innerHTML = '<div class="content"><span>Question: <input type="text" style="width:48px;" name="question[]" value="" /></span>  <span>Marks: <input type="text" style="width:48px;" name="marks[]" value="" /></span>  <span>Question Page Index: <input type="text" style="width:48px;" name="question_page_index[]" value="" /></span></div>';
				container.appendChild(divtest);

				container.appendChild(document.createElement("br"));
		
				var divSubQ = document.createElement("div");
    divSubQ.innerHTML = '<div class="content"><span>Number of Sub Question: <input type="text" id="submember" name="submember" value=""></span>  <span><a href="#" id="Subfilldetails" onclick="addSubFields()">Fill Details</a></span> </div> <div id="subcontainer"/>';
				container.appendChild(divSubQ);
				
                container.appendChild(document.createElement("br"));
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
	
	 <script type='text/javascript'>
        function addSubFields(){
            var number = document.getElementById("submember").value;
            var subcontainer = document.getElementById("subcontainer");
            while (subcontainer.hasChildNodes()) {
               subcontainer.removeChild(subcontainer.lastChild);
            }
            for (i=0;i<number;i++){
                subcontainer.appendChild(document.createTextNode("Sub. Q. " + (i+1)));
     
				 var divtest = document.createElement("div");
    divtest.innerHTML = '<div class="content"><span>Question: <input type="text" style="width:48px;" name="question[]" value="" /></span>  <span>Marks: <input type="text" style="width:48px;" name="marks[]" value="" /></span>  <span>Question Page Index: <input type="text" style="width:48px;" name="question_page_index[]" value="" /></span></div>';
				subcontainer.appendChild(divtest);

				subcontainer.appendChild(document.createElement("br"));
		
				var divSubQ = document.createElement("div");
    divSubQ.innerHTML = '<div class="content"><span>Number of Sub Question: <input type="text" id="submember" name="submember" value=""></span>  <span><a href="#" id="Subfilldetails" onclick="addSubFields()">Fill Details</a></span> </div>';
				subcontainer.appendChild(divSubQ);
			}
       }
    </script>

<html>
<head>
   
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

Answer 1

您需要将输入字段包装在表单中然后发布： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

类似的东西：

<form id="my-form" action="/your/url" method="post">
    // your fields go here
</form>

您在表单中添加输入，然后使用提交按钮提交。表单中的操作是您在PHP代码中捕获的URL

Answer 2

最后在addFields（）函数中添加以下代码

var btn = document.createElement("input");
btn.setAttribute("type", "submit");
container.appendChild(btn);

并将<div id="container"/>包裹在<form>标记中，如

<form action="">
<div id="container"/>
</form>

您需要为每个输入字段设置一些ID，以便在$_POST中唯一标识提交的数据。

动态添加输入元素和子元素以形成

2 个答案: