php foreach loop and addmore button in a form

Question

hello i am using a form to add experience to users where i have a add more button which adds more (clones) the content and users get one more field to add experience

i am using this code to achieve this

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

js

  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);
 }

here i want the new fields when added should be empty (right now it is showing the same content with pre filled values in textbox )

second issue is i want to insert the data in table for each value of the array i know this can be donr by foreach loop

PHP

 $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'....)

// insert as many feilds as the no of elements in the array }

please suggest me with this php code how to use the foreach loop so that i can insert as many rows as the no of elements in the array with corrosponging values in another array

pleaes note that this question has two questions written please feel free to help for any of the question.

one is wth php and anothr with ajax

you want to fix this problem using pure javascript OR using jQuery ? — Sunny S.M
– Sunny S.M, Commented Dec 5, 2015 at 6:37
@NanaPartykar sir, i want to insert vales to database for each value of an array and also match the corrosponding values in another array — sonam Sharma
– sonam Sharma, Commented Dec 5, 2015 at 6:44

Sunny S.M · Accepted Answer · 2015-12-05 07:34:22Z

2

Use following code to clear Cloned form :

NOTE : Must add jquery file in document

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

answered Dec 5, 2015 at 7:34

Sunny S.M

6,0261 gold badge40 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

sonam Sharma Over a year ago

hello sir, can you help me how to add a remove button here

Sunny S.M Over a year ago

No problem sister.. Happy to help

Sunny S.M Over a year ago

Now in office having lots of work... I figured out how it will solve,

Sunny S.M Over a year ago

Hi Sonam changes applied please check new answer code, Here is one problem to remove specific form part need to click two times. I will fix this issue later.

Sunny S.M Over a year ago

two times click issue also fixed... Please check code now its pretty work as per your requirement..

|

Sunny S.M · Accepted Answer · 2015-12-14 12:19:46Z

1

Here is code with your new requirement :

To Add remove button if user want to remove form block section user can easily :

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

edited Dec 14, 2015 at 12:19

answered Dec 14, 2015 at 11:58

Sunny S.M

6,0261 gold badge40 silver badges38 bronze badges

4 Comments

sonam Sharma Over a year ago

Perfect Thankyou So much for all your effort.

sonam Sharma Over a year ago

YOu are one of the best people i have ever talked

Sunny S.M Over a year ago

Happy to help always.... God gives us knowledge we must help other.... we learn always from other...

Sunny S.M Over a year ago

Many Thanks for your question

Collectives™ on Stack Overflow

php foreach loop and addmore button in a form

2 Answers 2

8 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related