Looking for dynamically add/remove box but hide field on dropdown value

user_1749056 0
Viewed 742

I am looking to do something like Add/Remove select box fields dynamically using jQuery Ajax but not all textboxes would show depending on what dynamic dropdown value is. I have found lots of scripts online that will add/remove dynamically but nothing base on dropdown value.

In picture below if Bags was selected from dropdown then the Item Name box would hide.

dyanmic boxes

<html>
 <head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
   <form method="post" id="insert_form">
    <div class="table-repsonsive">
     <span id="error"></span>
     <table class="table table-bordered" id="item_table">
      <tr>
       <th>Unit</th>
       <th>Name</th>
       <th>Quantity</th>
       <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
      </tr>
     </table>
     <div align="center">
      <input type="submit" name="submit" class="btn btn-info" value="Insert" />
     </div>
    </div>
   </form>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 
$(document).on('click', '.add', function(){
  var html = '';
  html += '<tr>';
    html += '<td><select name="item_unit[]" class="form-control item_unit">';
            html += '<option value="">Select Unit</option><?php echo numopt(); ?>';
        html += '</select></td>';
    html += '<td><input type="text" name="item_name[]"" class="form-control item_name" /></td>';
    html += '<td><input type="text" name="item_quantity[]"" class="form-control item_quantity" /></td>';
    html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
  $('#item_table').append(html);
});
    
 $(document).on('click', '.remove', function(){
  $(this).closest('tr').remove();
 });
    
 $('#insert_form').on('submit', function(event){
  event.preventDefault();
  var error = '';
  $('.item_name').each(function(){
   var count = 1;
   if($(this).val() == '') {
    error += "<p>Enter Item Name at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
  
  $('.item_quantity').each(function(){
   var count = 1;
   if($(this).val() == '') {
    error += "<p>Enter Item Quantity at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
  
  $('.item_unit').each(function(){
   var count = 1;
   if($(this).val() == '') {
    error += "<p>Select Unit at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
     
  var form_data = $(this).serialize();
  if(error == '') {
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data) {
     if(data == 'ok') {
      $('#item_table').find("tr:gt(0)").remove();
      $('#error').html('<div class="alert alert-success">Item Details Saved</div>');
     }
    }
   });
  } else {
   $('#error').html('<div class="alert alert-danger">'+error+'</div>');
  }
 });
});

</script>
mysql php jquery javascript
2 Answers

you could just disable the input field of item name for a certain value selected in the dropdown. you can do it by adding an event listener for a selected item in drop down and based on the value you can disable the corresponding input field.

user_87249430

I would suggest to disable it like that:

  • if select input equals 'Bags'
  • select the closest 'item name' input and hide it

Based on your code

let restricts = ["bags", "kg"];

function hideQuantity(e) {
    if (restricts.indexOf(e.target.value) > -1) {
        e.target.closest("tr").querySelector(".item_quantity").setAttribute("disabled", "disabled");
    } else {
        e.target.closest("tr").querySelector(".item_quantity").removeAttribute("disabled", "disabled");
    }
}

$(document).ready(function () {
    $(document).on('click', '.add', function () {
        var html = '';
        html += '<tr>';
        html += '<td><select onclick="hideQuantity(event)" name="item_unit[]" class="form-control item_unit">';
        html += '<option value="">Select Unit</option><option value="bags">Bags</option><option value="inch">Inch</option><option value="kg">Kg</option><?php echo numopt(); ?>';
        html += '</select></td>';
        html += '<td><input type="text" name="item_name[]"" class="form-control item_name" /></td>';
        html += '<td><input type="text" name="item_quantity[]"" class="form-control item_quantity" /></td>';
        html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
        $('#item_table').append(html);
    });
...

More explanation:

First, I have added some static data for testing:

html += '<option value="">Select Unit</option><option value="bags">Bags</option><option value="inch">Inch</option><option value="kg">Kg</option><?php echo numopt(); ?>';

Second, Create a restricts array. This array holds the values of item_unit where you want to hide item_quantity input:

let restricts = ["bags", "kg"]; // add as many as you want

Third, I have created hideQuantity function, and this function purpose is to hide item_quantity input if item_unit select input value match any of the other values of restricts array:

function hideQuantity(e) {
    if (restricts.indexOf(e.target.value) > -1) {
        e.target.closest("tr").querySelector(".item_quantity").setAttribute("disabled", "disabled");
    } else {
        e.target.closest("tr").querySelector(".item_quantity").removeAttribute("disabled", "disabled");
    }
}

And lastly, add hideQuantity function to each item_unit select input:

html += '<td><select onclick="hideQuantity(event)" name="item_unit[]" class="form-control item_unit">';
user_65854760
Related