php jquery repeat form with javascript datepicker

Question

i used this script to create a repeat form

http://demo.techstream.org/Dynamic-Form-Processing-with-PHP/

in my form i use a javascript for datepicker this code work for the first row but when not whorking in the second row and the same problem for duration difference between 2 date and for my progress bar. All this work in the first row when i add a second row the datepicker and duration and progress bar stop working but work in the first

html code:

  <td>
    <input id="startdate" name="startdate[]" type="date" placeholder="planing Date"  onfocus="(this.type='date')" onblur="(this.type='text')" onChange="onDateChange()" onchange="cal()">
                             </td>
                             <td>
    <input id="enddate" name="enddate[]" type="text" placeholder="planing Date"  onfocus="(this.type='date')" onblur="(this.type='text')" onchange="cal()">
                             </td>
                             <td>
   <input id="duration" name="duration[]" type="text" placeholder="Duration" onChange="onDateChange()">
                             </td>
                             <td> <td>
<input id="prb" name="txt_prb[]" type="text" placeholder="%">
                            <div id="bar"><span id="progresss"></span></div>
                     </td>

javascript code:

   <script type="text/javascript">
            function GetDays(){
                    var dropdt = new Date(document.getElementById("enddate").value);
                    var pickdt = new Date(document.getElementById("startdate").value);
                    return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
            }

            function cal(){
            if(document.getElementById("startdate")){
                document.getElementById("duration").value=GetDays();
            }  
        }

        </script>

      <script>
    $(document).on('click', ':not(form)[data-confirm]', function(e){
        if(!confirm($(this).data('confirm'))){
          e.stopImmediatePropagation();
          e.preventDefault();
            }
    });

    $(document).on('submit', 'form[data-confirm]', function(e){
        if(!confirm($(this).data('confirm'))){
            e.stopImmediatePropagation();
          e.preventDefault();
            }
    });

    $(document).on('input', 'select', function(e){
        var msg = $(this).children('option:selected').data('confirm');
        if(msg != undefined && !confirm(msg)){
            $(this)[0].selectedIndex = 0;
        }
    });
    </script>
       <script>
$(document).on('click', ':not(form)[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
      e.stopImmediatePropagation();
      e.preventDefault();
        }
});

$(document).on('submit', 'form[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
        e.stopImmediatePropagation();
      e.preventDefault();
        }
});

$(document).on('input', 'select', function(e){
    var msg = $(this).children('option:selected').data('confirm');
    if(msg != undefined && !confirm(msg)){
        $(this)[0].selectedIndex = 0;
    }
});
</script>

You are repeating the input 'id' values? It seems like you are preparing the input name attributes to be duplicated, but not the id — Nacho M., Jun 24 '16 at 06:13
How do you duplicate the `` in your table? Using javascript? or PHP? @jad — Nacho M., Jun 24 '16 at 06:35

score 0 · Answer 1 · edited May 23 '17 at 10:34

0

Use classes instead of id if you are planning to duplicate the html, so:

<td>
    <input class="startdate" name="startdate[]" type="date" placeholder="planing Date"  onfocus="(this.type='date')" onblur="(this.type='text')" onChange="onDateChange()" onchange="cal()">
</td>
<td>
    <input class="enddate" name="enddate[]" type="text" placeholder="planing Date"  onfocus="(this.type='date')" onblur="(this.type='text')" onchange="cal()">
</td>
<td>
    <input class="duration" name="duration[]" type="text" placeholder="Duration" onChange="onDateChange()">
</td>
<td> 
    <input class="prb" name="txt_prb[]" type="text" placeholder="%">
    <div class="bar"><span class="progresss"></span></div>
</td>

And adapt your javascript functions using document.getElementByClassName() instead of document.getElementById()

or

pass the element reference in your function calls like onChange="cal(this)" it solves the issue in this post: Pass parameters throw onchange function

edited May 23 '17 at 10:34

Community

1
1

answered Jun 24 '16 at 07:14

Nacho M.

672
4
9

M didn't work any solution please still the same problem – jad Jun 24 '16 at 10:37
What did you do exactly @jad ? My answer has not all the solution code you wait for, but the directives to deal with your issue. – Nacho M. Jun 24 '16 at 10:59
i changed id to class like you say but it still not working i add this to onchange and it still not working @Nacho M – jad Jun 24 '16 at 11:57
You have to rewrite your javascript code to make it work, not only the classes and onchange attribute @jad – Nacho M. Jun 24 '16 at 12:03
i have no experience in javascript if you can help me i need him @Nacho M – jad Jun 24 '16 at 12:08

php jquery repeat form with javascript datepicker

1 Answers1