在php中使用javascript添加多个输入字段不起作用

Question

我在 php 中有一个表单，我试图在单击按钮时添加多个字段，我执行了以下代码：

    function add_fields() {
        
        var objTo = document.getElementById('room_fileds')
        var divtest = document.createElement("div");
        divtest.innerHTML = '

        <div class="form-group col-md-6">
          <label for="inputPassword4">Item</label>
          <?php

          $sqlcodes = "SELECT * FROM inventory ORDER BY categoryname ASC";
            $resultcodes = mysqli_query($con, $sqlcodes);
          echo "<td><select class='form-control' name='item'>";
          echo "<option>Select Item</option>";
          if ($resultcodes->num_rows > 0) {
          while($row = $resultcodes->fetch_assoc()) {
               $group[$row['categoryname']][] = $row;
          }
           foreach ($group as $key => $values){
               echo '<optgroup label="'.$key.'">';
               foreach ($values as $value)
               {
                   echo '<option value="'.$value['name'].'">'.$value['name'].'</option>';
               }
               echo '</optgroup>';
           }
          } else {}
          echo "</select></td>";
           ?>
        </div>
        <div class="form-group col-md-6">
          <label for="inputEmail4">Weight</label>
          <input name="weight" type="text" class="form-control" id="inputEmail4" placeholder="Weight">
        </div>

        ';

        objTo.appendChild(divtest)
    }

<div id="room_fileds">
  <div class="form-group col-md-6">
    <label for="inputPassword4">Item</label>
    <?php

    $sqlcodes = "SELECT * FROM inventory ORDER BY categoryname ASC";
      $resultcodes = mysqli_query($con, $sqlcodes);
    echo "<td><select class='form-control' name='item'>";
    echo "<option>Select Item</option>";
    if ($resultcodes->num_rows > 0) {
    while($row = $resultcodes->fetch_assoc()) {
         $group[$row['categoryname']][] = $row;
    }
     foreach ($group as $key => $values){
         echo '<optgroup label="'.$key.'">';
         foreach ($values as $value)
         {
             echo '<option value="'.$value['name'].'">'.$value['name'].'</option>';
         }
         echo '</optgroup>';
     }
    } else {}
    echo "</select></td>";
     ?>
  </div>
  <div class="form-group col-md-6">
    <label for="inputEmail4">Weight</label>
    <input name="weight" type="text" class="form-control" id="inputEmail4" placeholder="Weight">
  </div>
</div>
<input type="button" id="more_fields" onclick="add_fields()" value="Add More" />

但是这不起作用，我收到以下错误：

** Uncaught ReferenceError: add_fields is not defined 在 HTMLInputElement.onclick **

谁能告诉我这里出了什么问题，提前谢谢

Answer 1

根据之前关于克隆内容的评论并附加，以下内容更进一步，并使用content Template 来存储您希望在每次单击按钮时添加的内容。此模板可以保存生成的select 菜单，并且在添加到 DOM 之前是不可见的。这意味着您没有被调用的庞大、臃肿的函数 - 只有一些非常简单的代码来查找模板、创建克隆并附加到指定的父节点。

下面的示例已将 PHP 注释掉，因此此处的显示看起来不错，但需要重新启用 PHP 代码才能产生您需要的实际结果。模板中的所有代码都没有 ID 属性，因此无需担心重复 ID。

const clonetemplate=(e)=>{
  let parent=document.getElementById('room_fields');
  let tmpl=document.querySelector('template#rfc').content.cloneNode( true );
  
  parent.append( tmpl )
}

// Button click handler
document.querySelector('input#add').addEventListener('click',clonetemplate );

// pageload... display initial menu
clonetemplate();

#room_fields > div{margin:1rem;padding:1rem;border:1px solid grey;font-family:monospace;}
#room_fields > div label{display:block;width:80%;padding:0.25rem;margin:0.1rem auto;float:none;}
#room_fields > div select,
#room_fields > div input{float:right}

<div id="room_fields">
  <!-- add content here -->
</div>
<input type="button" id='add' value="Add More" />





<!--

  Generate the content once that will be repeated
  and keep it within a content template until
  needed.
-->
<template id='rfc'>
    <div>
        <div class='form-group col-md-6'>
            <label>Item
                <select class='form-control' name='item'>
                    <option>Select Item
          <!-- Uncomment this PHP for live version
                    <?php
            
            $sql = 'select * from `inventory` order by `categoryname` asc';
            $res = $con->query( $sql );
            
            $group=array();
            while( $rs=$res->fetch_object() ){
              $group[ $rs->categoryname ]=$rs;
            }


            foreach( $group as $key => $values ){
              printf('<optgroup label="%s">',$key);
              foreach( $values as $obj )printf( '<option>%s',$obj->name );
              print('</optgroup>');
            }
            
                    ?>
          -->
          <option>Hello
          <option>World
          <option>No IDs
          <option>Simples...
                </select>
            </label>
        </div>
        <div class='form-group col-md-6'>
            <label>Weight
                <input name='weight' type='text' class='form-control' placeholder='Weight' />
            </label>
        </div>
    </div>
</template>

Answer 2

在您在函数add_fields 中定义并分配给divtest.innerHTML 的字符串中，您有换行符。加载脚本时，您可能还会收到错误消息，提示您有语法错误。您应该尽量避免字符串中的换行符。另一种解决方案可能是为您的字符串使用反引号。你可以在这里阅读：Template literals (Template strings)。

这里有两个例子。第一个因语法和引用错误而失败，下一个工作正常（但不执行任何操作）。

function add_fields(){
  var divtest = document.createElement("div");
  divtest.innerHTML = '
  test
  ';
}

<input type="button" id="more_fields1" onclick="add_fields()" value="Add More" />

function add_fields(){
  var divtest = document.createElement("div");
  divtest.innerHTML = `
  test
  `;
}

<input type="button" id="more_fields1" onclick="add_fields()" value="Add More" />