Javascript 表单中的php foreach循环和addmore按钮

您好，我正在使用一个表单向用户添加体验，我有一个“添加更多”按钮，可以添加更多（克隆）内容，用户可以获得更多字段来添加体验

我使用这段代码来实现这一点

<div id="append_palllsjjs"><div class="full_exp_9092k" id='duplicater'>
                    <div class="full_one_row_009so">
                <div class="obe_left_dibbhsy78">
                            <div class="header_009sos00dd_d">
                        Company Name <span>*</span>
                    </div>
                    <div class="maind_TAxefst67s77s">
                        <input type="text" name="comp[]" required placeholder="company Name" class='cname_990s_EXp'/>
                    </div>
                        </div><div class="obe_left_dibbhsy78">
                            <div class="header_009sos00dd_d">
                        Department Name <span>*</span>
                    </div>
                    <div class="maind_TAxefst67s77s">
                        <input type="text" name="dept[]" required placeholder="Department Name" class='cname_990s_EXp'/>
                    </div>
                        </div>
               </div><div class="full_one_row_009so">
                <div class="obe_left_dibbhsy78">
                            <div class="header_009sos00dd_d">
                        From Date <span>*</span>
                    </div>
                    <div class="maind_TAxefst67s77s">
                         <input type="date" data-initial-day="1" data-initial-year="2011" data-initial-month="9" class='TEx_About_allihh' name="exsdate[]" required/>
                    </div>
                        </div><div class="obe_left_dibbhsy78">
                            <div class="header_009sos00dd_d">
                        To Date <span>*</span>
                    </div>
                    <div class="maind_TAxefst67s77s">
                          <input type="date" data-initial-day="1" data-initial-year="2012" data-initial-month="10" class='TEx_About_allihh' name="exedate[]" required/>
                    </div>
                        </div>
               </div><div class="full_one_row_009so">
                <div class="obe_left_dibbhsy78">
                            <div class="header_009sos00dd_d">
                        Profile <span>*</span>
                    </div>
                    <div class="maind_TAxefst67s77s">
                        <input type="text" name="profile[]" required placeholder="Profile" class='cname_990s_EXp'/>
                    </div>
                        </div><div class="obe_left_dibbhsy78">
               <div class="header_009sos00dd_d">
                                       </div>
                            <input type="button" name="addmore" value="Add More" class='button small white' onclick='duplicate();'/>
                        </div>
               </div>
                </div></div>

在这里，我希望添加的新字段应该是空的（现在，它在文本框中显示相同的内容和预先填充的值）

第二个问题是，我想在表中为数组的每个值插入数据，我知道这可以由foreach循环完成

PHP

//在数组中插入尽可能多的feld元素 }

请用这段php代码建议我如何使用foreach循环，这样我就可以在另一个数组中插入尽可能多的行，这些行的数目与数组中具有相应值的元素的数目相同

请注意，这个问题有两个书面问题，请随时为任何问题提供帮助

---

一种是使用php和ajax的anothr

使用以下代码清除克隆表单：

注意：必须在文档中添加jquery文件

var i=0；
var original=document.getElementById（'duplicater'）；
函数复制（）{
var clone=original.cloneNode（true）；/“deep”clone
i=++i；
clone.id=“duplicetor”+i；//只能有一个id为的元素
original.parentNode.appendChild（克隆）；
clearCloneForm（clone.id）；
}
函数clearCloneForm（id）{
var divId='#'+id；
$（divId）.find（“输入[type^='text']，输入[type^='date']”）。每个（函数（）{
$（this.val（“”）；
}); 
}

以下是您的新需求代码：

若用户要删除窗体块节，请添加“删除”按钮 可以轻松地：

var i=0；
var original=document.getElementById（'duplicater'）；
函数复制（）{
var clone=original.cloneNode（true）；/“deep”clone
i=++i；
clone.id=“duplicetor”+i；//只能有一个id为的元素
original.parentNode.appendChild（克隆）；
addButton（clone.id，i）；
clearCloneForm（clone.id）；
}
函数clearCloneForm（id）{
var divId='#'+id；
$（divId）.find（“输入[type^='text']，输入[type^='date']”）。每个（函数（）{
$（this.val（“”）；
});
}
功能添加按钮（id，ii）{
var divId='#'+id；
$（divId）.append（“”）；
}
功能rBlock（二）{
$（'#'+ii）.on（'click'，函数（e）{
var parentDiv=$（this.parent（）；
if（parentDiv.attr（'id'）！==ii）{
parentDiv.remove（）；
}
});
$（'#'+ii）.触发器（“单击”）；
}

请简要说明您想使用纯javascript或jQuery解决此问题？@SunnyS.M任何东西都可以helpfull@NanaPartykar先生，我想为数组中的每个值向数据库中插入值，并与另一个数组中的相应值相匹配。您的第一个问题已解决。。请检查我的回答你好，先生，你能帮我如何添加一个删除按钮没有问题，妹妹。。很高兴现在在办公室有很多工作。。。我弄明白了它将如何解决，您好，Sonam更改应用请检查新的答案代码，这里有一个问题，以删除特定的表单部分需要点击两次。我将稍后修复此问题。两次单击“问题也已修复…”。。。现在请检查代码，根据您的要求，它工作得很好。非常感谢您的所有努力。您是我交谈过的最好的人之一。乐于帮助。。。。上帝给我们知识，我们必须帮助别人。。。。我们总是向别人学习…非常感谢你的提问

  var i = 0;
  var original = document.getElementById('duplicater');

 function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicetor" + ++i; // there can only be one element with  an ID
 original.parentNode.appendChild(clone);
 } 

 $comps=$_POST['comp'];
    $profile=$_POST['profile'];
    $exedate=$_POST['exedate'];
    $exsdate=$_POST['exsdate'];
    $dept=$_POST['dept'];
    if(empty($comps) || empty($profile) || empty($exedate) || empty($exsdate) || empty($dept) ){
        echo 'Please Fill all the fields marked with *';die;
    }
    foreach($comps as $value){
        // insert into tablename (field1,field2,field3,...) values ('comp1','dep1','profile1'....)

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
 var i = 0;
 var original = document.getElementById('duplicater');

  function duplicate(){ 
    var clone = original.cloneNode(true); // "deep" clone
    i = ++i;
    clone.id = "duplicetor"+ i; // there can only be one element with  an ID
    original.parentNode.appendChild(clone);
    clearCloneForm(clone.id);
  }

  function clearCloneForm(id){ 
    var divId = '#'+id;
    $(divId).find("input[type^='text'], input[type^='date']").each(function() {
        $(this).val('');
    }); 
  }
</script>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
 var i = 0;
 var original = document.getElementById('duplicater');

  function duplicate(){ 
    var clone = original.cloneNode(true); // "deep" clone
    i = ++i;
    clone.id = "duplicetor"+ i; // there can only be one element with  an ID
    original.parentNode.appendChild(clone);
    addButton(clone.id,i);
    clearCloneForm(clone.id);
  }

  function clearCloneForm(id){ 
    var divId = '#'+id;
    $(divId).find("input[type^='text'], input[type^='date']").each(function() {
        $(this).val('');
    });
  }

  function addButton(id,ii){ 
    var divId = '#'+id;
    $(divId).append('<input type="button" value="Remove" class="button small white" id="'+ii+'" onclick="rBlock('+ii+')" />');
  }



function rBlock(ii){
    $('#'+ii).on('click', function(e){ 
        var parentDiv = $(this).parent();
        if(parentDiv.attr('id') !== ii){
            parentDiv.remove();
        }
    });
    $('#'+ii).trigger( "click" );
  }
</script>