форма представления после добавления динамического текстового поля

Question

я создаю форму и я добавил кнопку для создания динамического Textboxes BT, когда я отправить форму после создания динамических текстовых полей я не получаю выхода из текстового поля

echo '<form action="" method="post">'; 
    echo '<INPUT size=70% TYPE="hidden" VALUE="AIzaSyxxxxxxxxxx" NAME="apiKey">'; 
    echo "<INPUT size=70% TYPE = 'hidden' VALUE='xx' NAME = 'registrationIDs'>"; 
    echo '<table class="table" name ="table">'; 

for($i=0;$i<$counter;$i++){ 
    $srno=$i+1; 
    echo "<tr name='input-holder'>"; 
     echo " <td><input type='text' value=' $medicsarray[$i] - $qtyarray[$i]'  
     name='medic'/>"; echo "</td>"; 
     echo "<td><input type='text' name='add[]' /> </td> "; 
     echo "</tr>"; 
    } 
    echo "</table>"; 
      }} 
    ?> 
    <table class="table"> 
     <tr><td><input type='button' name='addmedic' value='add new input box' /></td> 
     <td></td></tr> 
     <tr><td>TOTAL:</td><td><input type='text' id='results' value="0"></td></tr> 
    </table> 
    <input type="submit" value="Send Notification"/> 
    </form>  

мой код Javascript

function bindFunctions() { 
    var sub = document.getElementsByName("addmedic")[0]; 
    sub.onclick = onClickFunction; 
    var input = document.getElementsByName("add[]"); 
     for (var i = 0; i < input.length; i++) { 
      if (input[i].type == "text") { 
       input[i].onblur = onBlurFunction; 
       } 
      } 
     } 

    bindFunctions(); 

    function onBlurFunction() { 
     var ttl = 0; 
     var input = document.getElementsByName("add[]"); 
     for (var i = 0; i < input.length; i++) { 
      if (input[i].type == "text") { 
       ttl += Number(input[i].value); 
      } 
      } 
     res =document.getElementById("results"); 
     res.value=ttl; 
    } 

    function onClickFunction() { 

    var inputHolder = document.getElementsByName('table'); 
    var a= inputHolder.length; 
    a=a-1; 

    inputHolder[a].innerHTML +="<tr name='input-holder'><td><input type='text'   

    name='medic' placeholder='medicine name and qty' /></td><td><input type='text' 

    name='add[]'/></td></tr>"; 
    bindFunctions(); 
    } 
    </script> 
    <pre> 
     <?php print_r($_POST); ?> 
    </pre> 

выход, когда я не нажмите кнопку добавить текстовое поле [добавить] => Массив ( [0] => 23 [1] => 23 )

Answer 1

После очистки кода она работает, так что я не знаю точно, где проблема, также некоторые части кода отсутствуют. Вот лучший форматированный html и php, с JavaScript, который описан подробно. Проанализируйте изменения.

<form action="" method="post"> 
    <INPUT size='70%' TYPE='hidden' VALUE='AIzaSyxxxxxxxxxx' NAME='apiKey'/> 
    <INPUT size='70%' TYPE='hidden' VALUE='xx' NAME='registrationIDs'/> 
    <table id="medics" class="table"> 
    <?php for ($i=0; $i<$counter; $i++) { 
     echo "<tr name='input-holder'> 
        <td><input type='text' value='$medicsarray[$i] - $qtyarray[$i]' name='medic[]'/></td> 
        <td><input type='text' name='add[]'/></td> 
       </tr>"; 
    } ?> 
    </table> 
    <table class="table"> 
     <tr><td><input id="addmedic" type='button' name='addmedic' value='add new input box'/></td><td></td></tr> 
     <tr><td>TOTAL:</td><td><input type='text' id='results' value="0"></td></tr> 
    </table> 
    <input type="submit" value="Send Notification"/> 
</form> 

<script> 

// there is only one 'addmedic' button, so use the id attribute for easier access 
document.getElementById("addmedic").onclick = onClickFunction; 

var input = document.getElementsByName("add[]"); 
for (var i = 0; i < input.length; i++) { 
    // no need for input[i].type == "text" check here, all inputs with name='add[]' are text type 
    input[i].onblur = onBlurFunction; 
} 

function onClickFunction() { 
    // it is better to play by the rules, innerHTML on table will destroy all event handlers, and will clear the input values 
    // create the new row, set attributes, add html to that row only 
    var row = document.createElement('tr'); 
    row.setAttribute('name', 'input-holder'); 
    row.innerHTML = "<td><input type='text' name='medic[]' placeholder='medicine name and qty' /></td><td><input type='text' name='add[]'/></td>"; 

    // the table has id attribute id="medics" for easier access 
    var table = document.getElementById('medics'); 
    // get the parent of last row (probably 'tbody') and append new row 
    table.rows[ table.rows.length - 1 ].parentNode.appendChild(row); 

    // get last textbox with name='add[]', and set onblur event handler 
    var input = document.getElementsByName("add[]"); 
    input[ input.length - 1 ].onblur = onBlurFunction; 

} 

function onBlurFunction() { 
    var ttl = 0; 
    var input = document.getElementsByName("add[]"); 
    for (var i = 0; i < input.length; i++) { 
     // check if value is not a number 
     if (!isNaN(input[i].value)) ttl += Number(input[i].value); 
    } 
    document.getElementById("results").value = ttl; 
} 
</script> 

<?php print_r($_POST); ?> 

Answer 2

Благодарим за все ваши ответы. Я просто переместил тег формы над таблицей, и я получил желаемый результат.

Answer 3

Для того, чтобы избежать ошибок в коде Danijel «s, он может быть изменен

<form action="" method="post"> 
    <INPUT size='70%' TYPE='hidden' VALUE='AIzaSyxxxxxxxxxx' NAME='apiKey'/> 
    <INPUT size='70%' TYPE='hidden' VALUE='xx' NAME='registrationIDs'/> 
    <table id="medics" class="table"> 
    <?php for ($i=0; $i<$counter; $i++) { 
     echo "<tr name='input-holder'> 
        <td><input type='text' value='' name='medic[]'/></td> 
        <td><input type='text' name='add[]'/></td> 
       </tr>"; 
    } ?> 
    </table> 
    <table class="table"> 
     <tr><td><input id="addmedic" type='button' name='addmedic' value='add new input box'/></td><td></td></tr> 
     <tr><td>TOTAL:</td><td><input type='text' id='results' value="0"></td></tr> 
    </table> 
    <input type="submit" value="Send Notification"/> 
</form> 

<script> 

// there is only one 'addmedic' button, so use the id attribute for easier access 
document.getElementById("addmedic").onclick = onClickFunction; 

var input = document.getElementsByName("add[]"); 
for (var i = 0; i < input.length; i++) { 
    // no need for input[i].type == "text" check here, all inputs with name='add[]' are text type 
    input[i].onblur = onBlurFunction; 
} 

function onClickFunction() { 
    // it is better to play by the rules, innerHTML on table will destroy all event handlers, and will clear the input values 
    // create the new row, set attributes, add html to that row only 
    var row = document.createElement('tr'); 
    row.setAttribute('name', 'input-holder'); 
    row.innerHTML = "<td><input type='text' name='medic[]' placeholder='medicine name and qty' /></td><td><input type='text' name='add[]'/></td>"; 

    // the table has id attribute id="medics" for easier access 
    var table = document.getElementById('medics'); 
    // get the parent of last row (probably 'tbody') and append new row 
    table.rows[ table.rows.length - 1 ].parentNode.appendChild(row); 

    // get last textbox with name='add[]', and set onblur event handler 
    var input = document.getElementsByName("add[]"); 
    input[ input.length - 1 ].onblur = onBlurFunction; 

} 

function onBlurFunction() { 
    var ttl = 0; 
    var input = document.getElementsByName("add[]"); 
    for (var i = 0; i < input.length; i++) { 
     // check if value is not a number 
     if (!isNaN(input[i].value)) ttl += Number(input[i].value); 
    } 
    document.getElementById("results").value = ttl; 
} 
</script> 

<?php print_r($_POST); ?>