在php中使用javascript添加多個輸入欄位不起作用

我在 php 中有一個表單，我試圖在其中添加多個按鈕單擊欄位，我執行了以下代碼：

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

        <div >
          <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 >
          <label for="inputEmail4">Weight</label>
          <input name="weight" type="text"  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" />

但是這不起作用，我收到以下錯誤：

** 未捕獲的 ReferenceError：在 HTMLInputElement.onclick 中未定義 add_fields **

誰能告訴我這里有什么問題，提前致謝

uj5u.com熱心網友回復：

根據之前關于克隆內容并附加的評論，下面更進一步，并使用 acontent 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>

uj5u.com熱心網友回復：

在您在函式中定義add_fields并分配給divtest.innerHTML您的字串中，有換行符。加載腳本時，您可能還會收到一個錯誤，提示您有語法錯誤。您應該盡量避免字串中的換行符。另一種解決方案可能是為您的字串使用反引號。你可以在這里閱讀它：模板文字（模板字串）。

這里有兩個例子。第一個失敗，語法和參考錯誤，下一個作業正常（但不做任何事情）。

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

標籤：

上一篇：需要在一組物件中將物件分組

下一篇：如何在列印時消除HTML元素之間的間隙