how to set variable in jquery attribute values

Question

i have something like creating order that contain: order-details and order-products
when i click on Create Row the specified data : name, lprice, count, price will add to the table row, include row number

My goal is to define row number on 0 startnig, like these:
<input name="product[0][product_id]" id="product_id" style="display:none" value="25">
<input name="product[0][lprice]" id="lprice" style="display:none" value="25">

the final goal is to get these values with php and then save them in sql

Your suggestions for editing the question will be appreciated

var sp = document.getElementById('product_id');
var lp = document.getElementById('lprice');
var count = document.getElementById('count');
var fp = document.getElementById('price');
var pt = document.getElementById('paytype');

var wrapper=document.getElementById('wrapper');

wrapper.onchange = function(){
    var selected = sp.options[sp.selectedIndex];
    var selected_type = pt.options[pt.selectedIndex].value;   
    if (selected_type === "1"){
            lp.value = selected.getAttribute('data-fprice');
    } 
    if (selected_type === "2"){
            lp.value = selected.getAttribute('data-fpricec');
    }
    if (selected_type === "3"){
            lp.value = selected.getAttribute('data-price');
    }
    if (selected_type === "4"){
            lp.value = selected.getAttribute('data-pricec');
    }
    fp.value = "";
    fp.value = lp.value * count.value;
};
wrapper.onchange();

            $(function() {
                function numberRows($t) {
                    var c = 0;
                    $t.find("tr").each(function(ind, el) {
                        var number = ++c;
                        $(el).find("td:eq(0)").html(number + ".");
                    });
                }
                $("#add-service-button").click(function(e) {
                    var product = document.getElementById('product_id');
                    var selected = product.options[sp.selectedIndex];
                    product = selected.getAttribute('data-name');
                    var product_id = $("#product_id").val();
                    var lprice = $("#lprice").val();
                    var count = $("#count").val();
                    var price = $("#price").val();
                    
                    $product_id = $("<input>").attr({name: 'product['+ 'number' + '][product_id]', id: 'product_id', style:'display:none', value: product_id});
                    $lprice = $("<input>").attr({name: 'product['+ 'number' + '][lprice]', id: 'lprice', style:'display:none', value: lprice});
                    $count = $("<input>").attr({name: 'product['+ 'number' + '][count]', id: 'count', style:'display:none', value: count});
                    $price = $("<input>").attr({name: 'product['+ 'number' + '][price]', id: 'price', style:'display:none', value: price});

                    e.preventDefault();
                    var $row = $("<tr>");
                    $row.append($("<td>"));
                    $row.append($("<td>").html(product).append($product_id));
                    $row.append($("<td>").html(lprice).append($lprice));
                    $row.append($("<td>").html(count).append($count));
                    $row.append($("<td>").html(price).append($price));
                    $row.append($("<td>").html("<a class='del-service text-danger' href='#' title='Click to remove this entry'>X</a>"));
                    $row.appendTo($("#service-table tbody"));
                    numberRows($("#service-table"));
                });
                $("#form-entry form").submit(function(e) {
                    e.preventDefault();
                    $("#add-service-button").trigger("click");
                });
                $("#service-table").on("click", ".del-service", function(e) {
                    e.preventDefault();
                    var $row = $(this).parent().parent();
                    var retResult = confirm("Are you sure?");
                    if (retResult) {
                        $row.remove();
                        numberRows($("#service-table"));
                    }
                });
            });

.form-entry input, .form-entry select {
                border: 1px solid #ccc;
                padding: 10px;
                padding-left: 1em;
            }

            .form-entry button {
                border: 0;
                background-color: #5AD0A1;
                color: #fff;
                cursor: pointer;
                padding: .6em 1.25em;
            }

            .table-wrapper {
                font-family: Arial, sans-serif;
            }

            .table-wrapper table td {
                border-bottom: 1px dashed #ccc;
                padding: 1em .2em;
            }

            .table-wrapper table tr:last-child td {
                border-bottom: 0;
            }

            .table-wrapper table td:first-child {
                color: #ccc;
                width: 2em;
            }

            .table-wrapper table td:last-child a {
                color: #F00;
                text-decoration: none;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <form>
    <div class="form-entry">
        <select name="paytype" id="paytype">
            <option style="display:none">Pay Type:</option>
            <option value="1" data-price="">First sell, Cash</option>
            <option value="2" data-price="">First sell, Check</option>
            <option value="3" data-price="">Cash</option>
            <option value="4" data-price="">Check</option>
        </select>
        <select name="product_id" id="product_id">
            <option style="display:none">Select Product</option>
            <option value="1" data-fprice="10" data-fpricec="12" data-price="15" data-pricec="17" data-name="Bag">Bag</option>
            <option value="2" data-fprice="20" data-fpricec="22" data-price="25" data-pricec="27" data-name="Hat">Hat</option>
            <option value="3" data-fprice="30" data-fpricec="33" data-price="35" data-pricec="37" data-name="Watch">Watch</option>
        </select>
        <input name="lprice" id="lprice" tabindex="1" value="" placeholder="Price" readonly="" type="currency">
        <input name="count" id="count" tabindex="1" value="" placeholder="Count" type="number">
        <input name="price" id="price" tabindex="1" value="" readonly="" placeholder="Full Price" type="currency">
        <button type="submit" id="add-service-button">Create Row</button>
    </div>
    <div class="table-wrapper">
        <table id="service-table" width="100%">
            <tbody>
            </tbody>
        </table>
    </div>
  </form>
</div>

Can you clarify what your question is? Does your code work as expected, or is something else occurring? If something else is occurring, what is that something else? Include any error messages or unexpected behaviors. — Jacob
– Jacob, Commented Jun 26, 2020 at 2:22
The HTML name attribute is usually just used for radio buttons these days. It used to be used for form submission, but now everything has gone AJAX, so FormData is used in conjunction with the XMLHttpRequest. If you want to loop over an HTML class, you can do that with a for of loop on document.querySelectorAll('.classHere'). — StackSlave
– StackSlave, Commented Jun 26, 2020 at 2:34
@Jacob It works, but what i need is to add line number to each input name. such as name="product[0][lprice]" for first row, i try'd as i knew — Ali
– Ali, Commented Jun 26, 2020 at 4:53
@StackSlave yes, the next level is to use it as form to post table rows and save them to database. (each table tr as one row in database) — Ali
– Ali, Commented Jun 26, 2020 at 4:56
Get the Element using any selector (s) you want. Send it all via FormData. — StackSlave
– StackSlave, Commented Jun 29, 2020 at 22:38

Ahmed Sheashaa · Accepted Answer · 2020-06-26 02:37:25Z

You can post multiple inputs with the same name as an array, I suggest using something as

<select name="product_id[]" id="product_id_1">
<input name="lprice[]" id="lprice_1" tabindex="1" value="" placeholder="Price" readonly="" type="currency">
<input name="count[]" id="count_1" tabindex="1" value="" placeholder="Count" type="number">
<input name="price[]" id="price_1" tabindex="1" value="" readonly="" placeholder="Full Price" type="currency">

And whenever adding new rows, just increment the id, but do not change names.

In PHP, you will be able to loop through posted array and insert each row into you database. Here is an example

for($i=0; $i < count($_POST['product_id']); $i++) {
$productid = $_POST['product_id'][i];
$lprice = $_POST['lprice'][i];
$count = $_POST['count'][i];
$lprice = $_POST['price'][i];
//Insert a row with $productid, $lprice, $count, $lprice
}

Collectives™ on Stack Overflow

how to set variable in jquery attribute values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related