Skip to Content
Menu
This question has been flagged
1 Reply
2037 Views

I have this form:

<form role="form" action="/my/order/create" method="POST">

    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>

    <div class="form-group product_select" id="product_select">

        <label for="customer_phone" class="control-label">انتخاب محصول</label>

        <select name="product_0" id="product_select">

           <t t-foreach="products" t-as="product">

               <option t-att-value="product.id" t-field="product.name"/>

           </t>

        </select>

        <label for="quantity">تعداد</label>

        <input type="number" id="quantity" name="quantity_0"/>

    </div>

</form>

I want to create a button which by clicking it the div tag (and its content) should be duplicated but select tag name should be 'product_select_2" and its below input tag name should be "quantity_2". (also by clicking the button another time they should be "product_select_3" and "quantity_3")
can you give me the code in JQuery or JS? thanks in advance!

Avatar
Discard
Author Best Answer

Ive done it using jQuery:

$(document).ready(function(){
var current_id = 0
$('#add_select_product').click(function(){

var newElement = $('.product_selection:last').clone();
var id = current_id+1;
current_id = id;
var input_name = $('input', newElement).attr("name");
$('input', newElement).attr("name", input_name.split("_")[0]+"_"+id);
var select_name = $('select', newElement).attr("name");
$('select', newElement).attr("name", select_name.split("_")[0]+"_"+id );
$(newElement).insertAfter(".product_selection:last");
});

});
Avatar
Discard
Related Posts Replies Views Activity
0
Jun 20
1989
1
Jan 22
8010
0
Dec 22
625
2
Jun 20
2257
1
Nov 24
150