javascript create html with different attributes

Question

this is an input table to laravel database, I want to regenerate this div when the user press a button a new div with a different id and a different name to pass it in the controller, what is the way to do it and what should my controller looks

<div class="container-fluid" style="display:block" id="div1">
<div class="fade-in">
<div class="card">
<div class="card-header"> pricing </div>
{{-- {{ $locations->name }} --}}
<script>
counter +=1;
  
</script>
<div class="card-body">                      
      <div class="body">

        <div class="form-group">
          <label for="exampleFormControlInput1">car number</label>
          <input type="text" class="form-control" name="carnumber" id="exampleFormControlInput1" placeholder="car number">
        </div>   
        <div class="form-group">
          <label for="exampleFormControlInput1">price</label>
          <input type="text" class="form-control" name="price" id="exampleFormControlInput1" placeholder="price">
        </div>  
        <div class="form-group">
          <label for="exampleFormControlInput1">min day</label>
          <input type="text" class="form-control" name="minday" id="exampleFormControlInput1" placeholder="min day">
        </div>  
        <div class="form-group">
          <label for="exampleFormControlInput1">sale price</label>
          <input type="text" class="form-control" name="saleprice" id="exampleFormControlInput1" placeholder="sale price">
        </div>  
        <div class="form-group">
          <label for="exampleFormControlInput1">min day stay</label>
          <input type="text" class="form-control" name="mindaystay" id="exampleFormControlInput1" placeholder="min day stay">
        </div>  
        

</div>
</div>
</div>
</div>
</div>

mplungjan · Accepted Answer · 2021-10-31T12:01:36.257

I assume you mean this

I wrapped the label so you do not need the number either

NOTE I added [] to the name, that way your server will receive an array of values

$(function() {
  $("#add").on("click", function() {
   const $div = $("#div1 .card").eq(0).clone(true)
    $div.find('input').each(function() {
      this.value="";
    })
    $("#div1").append($div)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button type="button" id="add">ADD</button>
<div class="container-fluid" style="display:block" id="div1">
  <div class="fade-in">
    <div class="card">
      <div class="card-header"> pricing </div>
      <div class="card-body">
        <div class="body">
          <div class="form-group">
            <label>car number
              <input type="text" class="form-control" name="carnumber[]" placeholder="car number">
            </label>
          </div>
          <div class="form-group">
            <label>price
              <input type="text" class="form-control" name="price[]" placeholder="price">
            </label>
          </div>
          <div class="form-group">
            <label>min day
              <input type="text" class="form-control" name="minday[]" placeholder="min day">
            </label>
          </div>
          <div class="form-group">
            <label>sale price
              <input type="text" class="form-control" name="saleprice[]" placeholder="sale price">
            </label>
          </div>
          <div class="form-group">
            <label>min day stay
              <input type="text" class="form-control" name="mindaystay[]" placeholder="min day stay">
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

If you must:

$(function() {
  $("#add").on("click", function() {
    const $div = $("#div1 .card").eq(0).clone(true);
    const idx = $("#div1 .card").length;
    $div.find('input').each(function() {
      this.value="";
      this.name = this.name.replace(/\[(\d+)\]/,idx)
    })
    $("#div1").append($div)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button type="button" id="add">ADD</button>
<div class="container-fluid" style="display:block" id="div1">
  <div class="fade-in">
    <div class="card">
      <div class="card-header"> pricing </div>
      <div class="card-body">
        <div class="body">
          <div class="form-group">
            <label>car number
                  <input type="text" class="form-control" name="carnumber[0]" placeholder="car number">
                </label>
          </div>
          <div class="form-group">
            <label>price
                  <input type="text" class="form-control" name="price[0]" placeholder="price">
                </label>
          </div>
          <div class="form-group">
            <label>min day
                  <input type="text" class="form-control" name="minday[0]" placeholder="min day">
                </label>
          </div>
          <div class="form-group">
            <label>sale price
                  <input type="text" class="form-control" name="saleprice[0]" placeholder="sale price">
                </label>
          </div>
          <div class="form-group">
            <label>min day stay
                  <input type="text" class="form-control" name="mindaystay[0]" placeholder="min day stay">
                </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

it's get only the first index of the array when i use var_dump($data); like this ["carnumber"]=> array(1) { [0]=> NULL } — Mhamad Abu AlGhanam, Oct 31 '21 at 09:52
https://stackoverflow.com/questions/3314567/how-to-get-a-form-input-array-into-a-php-array — mplungjan, Oct 31 '21 at 09:59
ok, I get it but how do I change the index in the HTML to pass the new data after I duplicates the input. — Mhamad Abu AlGhanam, Oct 31 '21 at 10:23
You do not need to. The first entry in the result is the first set etc — mplungjan, Oct 31 '21 at 10:26
Please see update for one with out without set number. Also I forgot to empty the input and I wrapped the label so no need for ID — mplungjan, Oct 31 '21 at 12:02

javascript create html with different attributes

1 Answers1