如何在while循环内添加同一输入框的更多行

Question

HTML :

<table>
    <tr>
        <td>
            <input type="text" name="name[]"  value=" echo $ail">
            <label >Address</label>
            <input type="text" name="countryname[]" id='countryname_1' />
            <button type="button" class='btn btn-danger delete'>- Delete</button>
            <button type="button" class='btn btn-success addmore'>+ Add More</button>
        </td>
    </tr>
</table>

Js :

<script>    
    $(".delete").on('click', function() { 
        $('.case:checkbox:checked').parents("tr").remove(); 
        $('.check_all').prop("checked", false); check(); 
    }); 

    var i = $('table tr').length; 
    $(".addmore").on('click', function(){ 
        count = $('table tr').length; 
        var data = "<tr><td><input type='checkbox' class='case'/></td><td><span id='snum" + i + "'>" + count + ".</span></td>"; data += "<td><input class='form-control' type='text' id='countryname_" + i + "' name='countryname[]' required/></td> </tr>"; $('table').append(data); row = i; 
    });
</script>

---

I am getting multiple values in <? echo $ail;?> <? echo $ail;?> .

How to give add more button in front of every $ail value to give a row of a input box?

---

Because I have multiple values of $ail when I click on one value of Add button I get incremented on every field of $ail .

Answer 1

you can use this example for your problem.

js code :

$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click

e.preventDefault();

if(x < max_fields){ //max input box allowed

x++; //text box increment

$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});

Html code:

<div class="input_fields_wrap">

<button class="add_field_button">Add More Fields</button>

<div><input type="text" name="mytext[]"></div>

</div>

Answer 2

The question isn't very clear but presumably <? echo $ail;?> <? echo $ail;?> is displaying the content of a PHP array but you want to loop through the array and achieve something similar the functionality presented in the image.

PHP code:

<?php
  // $options starts life as an empty string
  $options = "";
  // $options becomes a list of options for a <select> control
  // it is populated with the values from the $ail array
  foreach ($ail as $value) {
     $options = "<option value='".$value."'>".$value."</option>";
  }
?>

HTML code:

<table>
  <tr>
    <td>
      Ailment:
      <select id="ail_select" name="ail_select">
        <option value="">--- Select ---</option>
        <?php echo $options; ?>
      </select>
      <button type="button" class='btn btn-success addmore'>Add More</button>
    </td>
  </tr>
</table>

JS code:

$(document).ready(function(){

  $(".delete").on("click", function() { 
    $(".case:checkbox:checked").parents("tr").remove(); 
    $(".check_all").prop("checked", false);
    check();
  }); 

  var counter = $("table tr").length - 1;

  $(".addmore").on("click", function(){
    // get the selected ailment
    var ail = $("#ail_select").val();
    // ail must have a value
    if (ail.length > 0) {
      counter++;
      var data = "<tr><td><input type='checkbox' class='case'/></td><td><span id='snum" + counter + "'>" + ail + ".</span></td>";
      data += "<td><input class='form-control' type='text' id='countryname_" + counter + "' name='countryname[]' required/></td>";
      data += "</tr>";
      $("table").append(data);
    }
  });

});

See JSFiddle for example in action.