Question

我正在创建一个表单，我添加了一个按钮来创建动态文本框，当我在创建动态文本框后提交表单时，我没有从文本框中输出

    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>

当我不点击添加文本框按钮时输出 [add] =＆gt;排列（ [0] =＆gt; 23 [1] =＆gt; 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代码中的错误，可以将其修改为

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

添加动态文本框后的表单提交

3 个答案: