adding multiple inputfield using javascript in php not working

Question

i have a form in php in which i am trying to add multiple fields on button click, i did the following code:

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

however this is not working, i am getting the following error:

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

can anyone please tell me what is wrong in here, thanks in advance

Try to use JSON, Store PHP Query result in JSOn and then you can use it in JS Function, in Second way Create one html and store it in JS variable and hen you can append it, These all together PHP and Javascript will not work properly. For Proper way use JSON — KHIMAJI VALUKIYA
– KHIMAJI VALUKIYA, Commented Jan 4, 2022 at 6:57
First Convert your $group array into JSON JS Code: var groups_data = <?php echo json_encode($group); ?>; — KHIMAJI VALUKIYA
– KHIMAJI VALUKIYA, Commented Jan 4, 2022 at 7:08
and Try to use groups_data variable in JS for Loop Category data, In JS function use Javascript loops. also — KHIMAJI VALUKIYA
– KHIMAJI VALUKIYA, Commented Jan 4, 2022 at 7:09

Professor Abronsius · Accepted Answer · 2022-01-04 08:23:20Z

As per the comment previously about cloning content and appending that the following goes a step further and uses a content Template to store the content that you wish to add with each button click. This template could hold the generated select menu and would be invisible until added to the DOM. This means you do not have a huge, bloated function that gets called - only some quite simple code to find the template, create a clone and append to the designated parent node.

The below example has the PHP commented out so that the display here looks OK but would need the PHP code re-enabled to produce the actual results you need. None of the code within the template has an ID attribute so there is no need to worry about duplicating IDs.

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>

chrwahl · Accepted Answer · 2022-01-04 07:36:38Z

0

In the string that you define in the function add_fields and assign to divtest.innerHTML you have line breaks. You probably also get an error when loading the script saying that you have a syntax error. You should try to avoid line breaks in strings. An alternative solution could be to use backticks for your string. YOu can read about it here: Template literals (Template strings).

Here are two examples. The first fails with both syntax and reference error, the next works fine (but does not do anything).

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

answered Jan 4, 2022 at 7:36

chrwahl

14.1k2 gold badges25 silver badges40 bronze badges

2 Comments

Professor Abronsius Over a year ago

the first snippet throws an error due to the multi-line value you are trying to append without backticks.

chrwahl Over a year ago

@ProfessorAbronsius yes, that was my point...

Collectives™ on Stack Overflow

adding multiple inputfield using javascript in php not working

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related