Add row button with dependant drop down php jQuery

Question

When I added the jQuery code to add the Add Row function it removes the functionality of my dependent drop downs.

Also the first row adds correctly but then on the 1st and 2nd row go to the bottom with new rows coming in on top.

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

    <script src="https://rawgit.com/nobleclem/jQuery-MultiSelect/master/jquery.multiselect.js"></script>

    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

jQuery code that dictates what the second dropdown menu will be.

<script type="text/javascript">
     $(document).ready(function(){
        $("#equipTypeUpdate").change(function(){
          var rows = form.find("tr");
            console.log(rows);
            for (var i = 1; i < rows.length-1; i++) {
            var equip_select = $(rows[i]).find(".equipId")[0].value;
            console.log(equip_select);
             $.ajax({
                 url:"../Include/dropdown_function.php",
                 method:"POST",
                 data:{equipId:equip_select},
                 success:function(data){
                     $("#productTypeUpdate").html(data);
                 }
             });
           }
         });
     });
</script>

jQuery that adds a new row

<script>
    $(document).ready(function() {
  var i = 1;
  $("#update_add_row").click(function() {
  $('tr').find('input').prop('disabled',false)
  $('#addr' + i).html("<td>" + (i + 1) +
        "</td><td><select name='event[" + i + "][equipTypeUpdate]' id='equipTypeUpdate1'><option value='' class='equipId' disabled selected>Select Equipment</option><?php
          while ($equip = mysqli_fetch_array($equipment_set)) {
          echo "<option value='".$equip['ID']."' required>".$equip['equipment']."</option>";
          }?><select></td>\n\
            <td><select name='event[" + i + "][productTypeUpdate]' id='productTypeUpdate'><option value='' class='form-control' disabled selected>-Select Product-</option></select></td>\n\
            <td><input name='event[" + i + "][serialNumUpdate]' id = 'serial' type='text' class='form-control' placeholder='Seial Number' required></td>\n\ ");

            $('#update_tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
            i++;
  });
});
</script>

dropdown_function.php

<?php

require_once('initialize.php');

global $db;
    if(isset($_POST['equipId'])) {
            $dropDownId = $_POST['equipId'];
    }
$escDrop = db_esc($db, $dropDownId);
// SQL query to show engineers on site inventory
$output='';

$sql= "SELECT * FROM av_products WHERE equip_id=? ORDER BY product;";
 $stmt = mysqli_stmt_init($db);
  if (!mysqli_stmt_prepare($stmt, $sql)) {
        header("Location: ../Pages/update_inventory.php?error=sqlerror2");
         exit();
         }
        // otherwise go ahead
        else {
        mysqli_stmt_bind_param($stmt, "s", $escDrop);
        mysqli_stmt_execute($stmt);

        $result2 = mysqli_stmt_get_result($stmt);

$output .= '<option value="" disabled>Select Product</option>';
while ($prod = mysqli_fetch_array($result2)){
    $output .='<option value="'.$prod['ID'].'">'.$prod["product"].'</option>';
        }}
echo $output;
 ?>

This is the php code is the table that I am trying to add new rows of.

<table class="table table-bordered table-hover" id="update_tab_logic">
  <thead>
    <tr>
      <th class="text-center">
        Item
      </th>
      <th class="text-center">
        Equipment Type
      </th>
      <th class="text-center">
        Product
      </th>
      <th class="text-center">
        Serial Number
      </th>
  </tr>
  </thead>
    <tbody>
      <tbody>
          <tr id='addr0'>
          <td>1</td>
          <td>
         <!--Drop down menu for equipment type-->
         <select name="event[0][equipTypeUpdate]" id="equipTypeUpdate" class="equipId">
             <option value="" disabled selected>Select Equipment</option>
             <?php
                 while ($equip = mysqli_fetch_array($equipment_set)) {
                 echo "<option value='".$equip['ID']."' required>".$equip['equipment']."</option>";
                 }
                 ?>
                 </select>
               </td>
               <td>
                 <!--Product type input and label-->
                     <select name="event[0][productTypeUpdate]" id="productTypeUpdate" class="form-control">
                         <option value="" disabled selected>-Select Product-</option>
                 </select>
               </td>
                <td>
                  <!--Serial Number input and label-->
                      <input name="event[0][serialNumUpdate]" id = "serial" type="text" class="form-control" placeholder="Seial Number" required>
               </td>
  <tr id='addr1'></tr>
        </tbody>
      </table>
<!--Submit button-->
<div align="right">
    <button id="update_button_final" type="submit">Update</button>
</div>

</form>
</div>
    <button id="update_add_row">Add Row</button>
  </div>

Swati · Accepted Answer · 2020-10-02 09:48:13Z

As your first select-box i.e :equipId is same for all trs you can use clone() method to get clone of that select and only change the name attribute of select-box instead of writing php code inside jquery code .

Instead of writing $('#addr' + i).html.. you can simply append new row using $("tbody").append.. this will append new row at end of tbody tag .Then , the select-box are dynamically generated so here you need to change your selector like this $(document).on('change','.equipId',function(){ .Also , to get value of select simply use $(this).val() this will give you value which is selected by user and then pass same to your ajax call.

Demo code :

var i = 1;
$("#update_add_row").click(function() {
  $('tr').find('input').prop('disabled', false)
  //get first tr > td and clone same
  var slects = $('tbody > tr:first').find("td:eq(1)").clone();
  //change name of selctbox which is  cloned
  slects.find("select").attr("name", "event[" + i + "][equipTypeUpdate]");
  //append new row to tbody
  $("tbody").append("<tr id='addr" + i + "'><td>" + (i + 1) +
    "</td><td>" + slects.html() + "</td><td><select name='event[" + i + "][productTypeUpdate]' id='productTypeUpdate'><option value='' class='form-control' disabled selected>-Select Product-</option></select></td>\n\<td><input name='event[" + i + "][serialNumUpdate]' id = 'serial' type='text' class='form-control' placeholder='Seial Number' required></td>\n\</tr> ");
  i++; //increment
});


//onchange of equiid
$(document).on('change', '.equipId', function() {
  var rows = $(this).closest("tr"); //get closest tr
  var value = $(this).val() //get value of selct box
  console.log(value);
  /* $.ajax({
     url: "../Include/dropdown_function.php",
     method: "POST",
     data: {
       equipId: value//pass same to ajax
     },
     success: function(data) {*/
  //add value which is retrun back to selct box 
  //rows.find("td:eq(2) select").html(data);
  rows.find("td:eq(2) select").html("<option>abcdc</opiton>");

  /* }
  });*/

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-bordered table-hover" id="update_tab_logic">
  <thead>
    <tr>
      <th class="text-center">
        Item
      </th>
      <th class="text-center">
        Equipment Type
      </th>
      <th class="text-center">
        Product
      </th>
      <th class="text-center">
        Serial Number
      </th>
    </tr>
  </thead>

  <tbody>
    <tr id='addr0'>
      <td>1</td>
      <td>
        <!--Drop down menu for equipment type-->
        <select name="event[0][equipTypeUpdate]" id="equipTypeUpdate" class="equipId">
          <option value="" disabled selected>Select Equipment</option>

          <option value='1'>1</option>
          <option value='2'>2</option>
          <option value='3'>3</option>

        </select>
      </td>
      <td>
        <!--Product type input and label-->
        <select name="event[0][productTypeUpdate]" id="productTypeUpdate" class="form-control">
          <option value="" disabled selected>-Select Product-</option>
        </select>
      </td>
      <td>
        <!--Serial Number input and label-->
        <input name="event[0][serialNumUpdate]" id="serial" type="text" class="form-control" placeholder="Seial Number" required>
      </td>
    </tr>

  </tbody>
</table>
<!--Submit button-->
<div align="right">
  <button id="update_button_final" type="submit">Update</button>
</div>


<button id="update_add_row">Add Row</button>

Collectives™ on Stack Overflow

Add row button with dependant drop down php jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related