admin管理员组

文章数量:1419633

I am trying to submit a form which has dynamically generated fields to controller using Ajax. Its like an invoice. There is date, customer, sub_total, tax, and ttl fields which are permanent (invoice header). Then there are n number of dynamically generated form fields (invoice lines). Here is the dynamically generated html. Every input field has distinct names and id's.

<tbody id="list">
    <tr>
        <td>
            <input name="sku1" id="sku1" readonly="" type="text" value="K5693">
        </td>
        <td>
            <input name="name1" id="name1" readonly="" type="text" value="HANDLEBAR">
        </td>
        <td>
            <input name="rate1" id="rate1" readonly="" type="text" value="45.00">
        </td>
        <td>
            <input name="qty1" id="qty1" readonly="" type="text" value="2">
            </td>
        <td>
            <input name="disc1" id="disc1" readonly="" type="text" value="0">
        </td>
        <td>
            <input name="ttl1" id="ttl1" readonly="" type="text" value="90.00">
        </td>
        <td class="text-center">
            <a onclick="removeField(this)"><i class="fas fa-trash-alt"></i></a>
        </td>
    </tr>
    <tr>
        <td>
            <input name="sku2" id="sku2" readonly="" type="text" value="K5693">
        </td>
        <td>
            <input name="name2" id="name2" readonly="" type="text" value="HANDLEBAR">
        </td>
        <td>
            <input name="rate2" id="rate2" readonly="" type="text" value="45.00">
        </td>
        <td>
            <input name="qty2" id="qty2" readonly="" type="text" value="2">
        </td>
        <td>
            <input name="disc2" id="disc2" readonly="" type="text" value="10">
        </td>
        <td>
            <input name="ttl2" id="ttl2" readonly="" type="text" value="80.00">
        </td>
        <td class="text-center">
            <a onclick="removeField(this)"><i class="fas fa-trash-alt"></i></a>
        </td>
    </tr>
</tbody>

Permanent fields HTML

        <div class="form-group">
            <label for="date">Date</label>
            <input type="text" class="form-control" id="date" name="date" placeholder="00/00/0000"></input>
        </div>
        <div class="form-group">
            <label for="customer">Customer</label>
            <select class="form-control" id="customer">
                @foreach($customers as $customer)
                    <option value="{{$customer->id}}">{{$customer->name}}</option>
                @endforeach
            </select>
        </div>

        <div class="card p-3">
            <table>
            <tr>
                <td class="h5">SUB TOTAL</td>
                <td class="h5 text-right pr-3">AED</td>
                <td><input type="text" class="form-control text-right" id="sub_total"placeholder="00.00" value="0.00" readonly></input></td>
            </tr>                   
            <tr>
                <td class="h5">VAT</td>
                <td class="h5 text-right pr-3">AED</td>
                <td><input type="text" class="form-control text-right" id="tax" placeholder="00.00" value="0.00" readonly></input></td>
            </tr>                       
            <tr>
                <td class="h5">TOTAL</td>
                <td class="h5 text-right pr-3">AED</td>
                <td><input type="text" class="form-control text-right" id="ttl" placeholder="00.00" value="0.00" readonly></input></td>
            </tr>
        </table>                        
    </div>

The javascript is here is triggered with a button click:

function createData(){
    var date = document.getElementById('date').value;
    var customer = document.getElementById('customer').value;
    var sub_ttl = document.getElementById('sub_total').value;
    var tax = document.getElementById('tax').value;
    var ttl = document.getElementById('ttl').value;
}

I started with getting values from permanent fields. Not sure how to gather values from n number of dynamically generated fields and pass it on to controller. Have beein going through many articles regarding this, not able to figure it out. Any help please?

I am trying to submit a form which has dynamically generated fields to controller using Ajax. Its like an invoice. There is date, customer, sub_total, tax, and ttl fields which are permanent (invoice header). Then there are n number of dynamically generated form fields (invoice lines). Here is the dynamically generated html. Every input field has distinct names and id's.

<tbody id="list">
    <tr>
        <td>
            <input name="sku1" id="sku1" readonly="" type="text" value="K5693">
        </td>
        <td>
            <input name="name1" id="name1" readonly="" type="text" value="HANDLEBAR">
        </td>
        <td>
            <input name="rate1" id="rate1" readonly="" type="text" value="45.00">
        </td>
        <td>
            <input name="qty1" id="qty1" readonly="" type="text" value="2">
            </td>
        <td>
            <input name="disc1" id="disc1" readonly="" type="text" value="0">
        </td>
        <td>
            <input name="ttl1" id="ttl1" readonly="" type="text" value="90.00">
        </td>
        <td class="text-center">
            <a onclick="removeField(this)"><i class="fas fa-trash-alt"></i></a>
        </td>
    </tr>
    <tr>
        <td>
            <input name="sku2" id="sku2" readonly="" type="text" value="K5693">
        </td>
        <td>
            <input name="name2" id="name2" readonly="" type="text" value="HANDLEBAR">
        </td>
        <td>
            <input name="rate2" id="rate2" readonly="" type="text" value="45.00">
        </td>
        <td>
            <input name="qty2" id="qty2" readonly="" type="text" value="2">
        </td>
        <td>
            <input name="disc2" id="disc2" readonly="" type="text" value="10">
        </td>
        <td>
            <input name="ttl2" id="ttl2" readonly="" type="text" value="80.00">
        </td>
        <td class="text-center">
            <a onclick="removeField(this)"><i class="fas fa-trash-alt"></i></a>
        </td>
    </tr>
</tbody>

Permanent fields HTML

        <div class="form-group">
            <label for="date">Date</label>
            <input type="text" class="form-control" id="date" name="date" placeholder="00/00/0000"></input>
        </div>
        <div class="form-group">
            <label for="customer">Customer</label>
            <select class="form-control" id="customer">
                @foreach($customers as $customer)
                    <option value="{{$customer->id}}">{{$customer->name}}</option>
                @endforeach
            </select>
        </div>

        <div class="card p-3">
            <table>
            <tr>
                <td class="h5">SUB TOTAL</td>
                <td class="h5 text-right pr-3">AED</td>
                <td><input type="text" class="form-control text-right" id="sub_total"placeholder="00.00" value="0.00" readonly></input></td>
            </tr>                   
            <tr>
                <td class="h5">VAT</td>
                <td class="h5 text-right pr-3">AED</td>
                <td><input type="text" class="form-control text-right" id="tax" placeholder="00.00" value="0.00" readonly></input></td>
            </tr>                       
            <tr>
                <td class="h5">TOTAL</td>
                <td class="h5 text-right pr-3">AED</td>
                <td><input type="text" class="form-control text-right" id="ttl" placeholder="00.00" value="0.00" readonly></input></td>
            </tr>
        </table>                        
    </div>

The javascript is here is triggered with a button click:

function createData(){
    var date = document.getElementById('date').value;
    var customer = document.getElementById('customer').value;
    var sub_ttl = document.getElementById('sub_total').value;
    var tax = document.getElementById('tax').value;
    var ttl = document.getElementById('ttl').value;
}

I started with getting values from permanent fields. Not sure how to gather values from n number of dynamically generated fields and pass it on to controller. Have beein going through many articles regarding this, not able to figure it out. Any help please?

  • javascript
  • php
  • jquery
  • laravel
Share Improve this question edited Feb 13, 2019 at 16:07 Lucid Polygon asked Feb 13, 2019 at 16:00 Lucid PolygonLucid Polygon 57210 silver badges28 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

You will have to do something like this :

<tbody id="body">
<tr>
    <td>
        <input name="skus[]"readonly="" type="text" value="K5693">
    </td>
    <td>
        <input name="names[]" readonly="" type="text" value="HANDLEBAR">
    </td>
    <td>
        <input name="rates[]" readonly="" type="text" value="45.00">
    </td>
    <td>
        <input name="qtys[]" readonly="" type="text" value="2">
        </td>
    <td>
        <input name="discs[]" readonly="" type="text" value="0">
    </td>
    <td>
        <input name="ttls[]" readonly="" type="text" value="90.00">
    </td>
    <td class="text-center">
        <a onclick="removeField(this)"><i class="fas fa-trash-alt"></i></a>
    </td>
</tr>

Then in your controller you will be able to get all values like this:

$skus = request('skus');
$names = request('names');
...
for($i = 0 ; $i < count($skus) ; $i++)
 {
   $sku = $skus[$i];
   $name = $names[$i];
   ...
 }

Change your code as below. Put <form> and submit button where you want.

//submit opening invoice data
        $('#invoice_form').on('submit', function(event){
            event.preventDefault();
            $.ajax({
                url:"put your url",
                method:'post',
                data:$(this).serialize(),
                dataType:'json',
                success:function(data)
                {
                    //do whatever you want
                }
            })
    });
<form id ="invoice_form">
<tbody id="body">
<tr>
    <td>
        <input name="skus[]"readonly="" type="text" value="K5693">
    </td>
    <td>
        <input name="names[]" readonly="" type="text" value="HANDLEBAR">
    </td>
    <td>
        <input name="rates[]" readonly="" type="text" value="45.00">
    </td>
    <td>
        <input name="qtys[]" readonly="" type="text" value="2">
        </td>
    <td>
        <input name="discs[]" readonly="" type="text" value="0">
    </td>
    <td>
        <input name="ttls[]" readonly="" type="text" value="90.00">
    </td>
    <td class="text-center">
        <a onclick="removeField(this)"><i class="fas fa-trash-alt"></i></a>
    </td>
</tr>
</tbody>

  <button type="submit" class="btn btn-success"><i class="fas fa-download"></i> Save</button>
  
</form>

controller.php

 public function create(Request $request){
    if($request->ajax())
    {
     $skus= $request->skus;
     $names= $request->names;
     $rates= $request->rates;
     $qtys= $request->qtys;

     for($count = 0; $count < count($skus); $count++)
     {
      $data = array(
       'skus' => $skus[$count],
       'names'  => $names[$count],
       'rates'  => $rates[$count],
       'qtys'  => $qtys[$count]
      );

      $insert_data[] = $data; 
     }

     Invoice::insert($insert_data);

     return response()->json([
      'success'  => 'Invoice Saved Successfully!'
     ]);
    }
}

All you really need is a way to serialize the entire form.

Here's how to do it with jQuery:

https://api.jquery./serialize/

Here's how to do it with plain Javascript:

Serialize HTML form to JSON with pure JavaScript

本文标签： javascriptLaravel Submit dynamically generated form fieldsStack Overflow

版权声明：本文标题：javascript - Laravel: Submit dynamically generated form fields - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745316491a2653177.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。