Add dynamic inputs and insert data to MySQL using PHP

Question

I have a form which has inputs and there is a link called 'Add New Rows' that adds the same row underneath to insert more data if its needed with a remove Row Option. And when i click save button it should save the form with the data already having and the data which i added with Add New Rows. I tried different ways to achieve it, but nothing is working out. Iam putting the form.php page and save.php page.

Form.php is below:

    echo "<form name='cart' method='post' class='single' action='price_add_save.php'>";?>

while ($list5 = mysql_fetch_array($result)) {
    $slno1++;
        echo '<tbody>';
            echo '<tr>';
        echo "<td width='4%' class='addinput'><a href='#' class='addNew'>Add New</a><input size='1' type='hidden' name='id[$i]' value='{$list5['item_id']}' readonly/><input size='1' type='text' id='sl[$i]' name='sl[$i]' name='sl[$i]' value='{$list5['slno']}' readonly/><input size='1' type='hidden' id='item_id[$i]' name='item_id[$i]' value='{$list5['item_id']}' readonly/></td>";
        echo "<td width='4%'><select id='ifmain[$i]' name='ifmain[$i]'><option value='Yes'>Main Item</option><option value='No'>Sub Item</option></select></td>";
        echo "<td width='10%' id='addinput'><input type='text' size='15' id='item_name$i' name='item_name[$i]' placeholder='{$list5['item_name']}' value='{$list5['item_name']}'></td>";
        echo "<td width='10%'><input type='text' size='7' id='item_partno$i' name='item_partno[$i]' value='{$list5['item_partno']}'></td>";
        echo "<td width='15%'><textarea rows='4' cols='50' id='prod_description$i' name='prod_description[$i]'></textarea></td>";
        echo "<td width='3%'><input size='1' type='text' name='item_quantity[]' id='item_quantity[]' value='{$list5['item_quantity']}' /></td>";
        echo "<td width='3%'><input size='2' type='text' name='item_units[]' id='item_units[]' value='{$list5['item_units']}' readonly/></td>";
        echo "<td width='4%'><input size='5' type='text' name='unitprice[]' id='unitprice[]' /></td>";
        echo "<td width='8%'><input size='8' type='text' name='total[]' id='total[]' readonly class='total' /></td>";
        echo "</tr>";
        ++$i;
    }
echo '<input type="submit" value="--Save Data--" />';
</form>

Save.php is below:

$size = count($_POST['unitprice']);


$i = 0;
while ($i < $size) {
    $sl= $_POST['sl'][$i];
    $item_id= $_POST['item_id'][$i];
    $item_name= $_POST['item_name'][$i];
    $prod_description=$_POST['prod_description'][$i];
    $prod_description= mysql_real_escape_string($prod_description);


    $query = "INSERT INTO comparitive_st_sup SET tender_id='$tender_id', item_id='$item_id', ifmain='$ifmain', slno = '$sl',item_name = '$item_name',item_partno = '$item_partno',prod_description = '$prod_description',sup_itempartno = '$sup_itempartno',currency = '$currency_selected',slab_range= '$slab_range',qty = '$item_quantity',qty_sup = '$item_quantity_sup',item_units = '$item_units',item_units_sup = '$item_units_sup',unitprice = '$unitprice',total = '$total', total_inr='$total_inr', supplier_name='$supplier_name2' ";
    mysql_query($query) or die ("Error in query: $query");
    ++$i;
}

Please find the HTML below:

<html>

<head>
    <title>PRICE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script language="javascript" type="text/javascript">
            tinyMCE.init({
                toolbar: false,
                menubar: false,
                mode: "textareas",
                height: "150px",
                width: "180px"
            });
        </script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
</head>

<body>
    <div id="wrapper">

        <form name="cart" method="post" class="single" action="price_add_save.php?supplier_name=TE+Connectivity&amp;tender_id=150596">

            <div align="center">
                <h3>TE Connectivity</h3>
                <table style="border-collapse: collapse;" id="table" border="1" cellpadding="2" cellspacing="2" width="100%">
                    <thead>
                        <tr bgcolor="#E6E6FA">
                            <td width="4%">SlNo</td>
                            <td width="4%">Main Item</td>
                            <td width="10%">Item Name</td>
                            <td width="10%">Item Part No</td>
                            <td width="6%">Part No - Supplier</td>
                            <td width="4%">Slab Range</td>
                            <td width="3%">Qty</td>
                            <td width="4%">Qty Supplier</td>
                            <td width="3%">Units</td>
                            <td width="3%">Units Supplier</td>
                            <td width="4%">Unitprice</td>
                            <td width="6%">Total</td>
                            <td width="6%">Currency</td>
                            <td width="6%">Total INR</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td width="4%">
                                <input size="1" name="id[0]" value="0" readonly="readonly" type="hidden">
                                <input size="1" id="sl[0]" name="sl[0]" readonly="readonly" type="text">
                                <input size="1" id="item_id[0]" name="item_id[0]" value="0" readonly="readonly" type="hidden">
                            </td>
                            <td width="4%">
                                <select id="ifmain[0]" name="ifmain[0]">
                                    <option selected="selected" value="Yes">Main Item</option>
                                    <option value="No">Sub Item</option>
                                </select>
                            </td>
                            <td id="addinput" width="10%">
                                <input size="15" id="item_name0" name="item_name[0]" placeholder="" type="text">
                            </td>
                            <td width="10%">
                                <input size="7" id="item_partno0" name="item_partno[0]" type="text">
                            </td>
                            <td width="6%">
                                <input size="11" id="sup_itempartno0" name="sup_itempartno[0]" type="text">
                            </td>
                            <td width="4%">
                                <input size="3" class="slab_range" name="slab_range[]" id="slab_range[]" type="text">
                            </td>
                            <td width="3%">
                                <input size="1" data-validation="required" class="item_quantity" name="item_quantity[]" id="item_quantity[]" value="0" type="text">
                            </td>
                            <td width="4%">
                                <input size="1" data-validation="required" class="item_quantity_sup" name="item_quantity_sup[]" id="item_quantity_sup[]" type="text">
                            </td>
                            <td width="3%">
                                <input size="2" class="item_units" name="item_units[]" id="item_units[]" readonly="readonly" type="text">
                            </td>
                            <td width="3%">
                                <input size="2" data-validation="required" class="item_units_sup" name="item_units_sup[]" id="item_units_sup[]" type="text">
                            </td>
                            <td width="4%">
                                <input size="5" data-validation="required" class="unitprice" name="unitprice[]" id="unitprice[]" type="text">
                            </td>
                            <td width="8%">
                                <input size="8" name="total[]" id="total[]" readonly="readonly" class="total" type="text">
                            </td>
                            <td width="6%">
                                <select class="currency-select" data-validation="required" id="currency_change[]" name="currency_change[]">
                                    <option selected="selected" value="">select</option>
                                    <option value="USD" data-price="1">USD</option>
                                    <option value="INR" data-price="67.434191">INR</option>
                                    <option value="GBP" data-price="0.704985">GBP</option>
                                    <option value="EUR" data-price="0.91118">EUR</option>
                                    <option value="SGD" data-price="1.386987">SGD</option>
                                    <option value="AUD" data-price="1.347597">AUD</option>
                                    <option value="CAD" data-price="1.342118">CAD</option>
                                    <option value="CHF" data-price="0.997145">CHF</option>
                                    <option value="JPY" data-price="112.6934">JPY</option>
                                    <option value="MYR" data-price="4.129541">MYR</option>
                                    <option value="ZAR" data-price="15.43258">ZAR</option>
                                </select>
                            </td>
                            <td width="8%">
                                <input size="8" class="total1" id="total_inr[]" name="total_inr[]" type="text">
                            </td>
                            <input class="inrvalue" id="inrvalue" name="inrvalue" value="67.434191" type="hidden">
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td width="4%">
                                <input size="1" name="id[1]" value="937" readonly="readonly" type="hidden">
                                <input size="1" id="sl[1]" name="sl[1]" value="1" readonly="readonly" type="text">
                                <input size="1" id="item_id[1]" name="item_id[1]" value="937" readonly="readonly" type="hidden">
                            </td>
                            <td width="4%">
                                <select id="ifmain[1]" name="ifmain[1]">
                                    <option selected="selected" value="Yes">Main Item</option>
                                    <option value="No">Sub Item</option>
                                </select>
                            </td>
                            <td id="addinput" width="10%">
                                <input size="15" id="item_name1" name="item_name[1]" placeholder="Chlorophyll Meter" value="Chlorophyll Meter" type="text">
                            </td>
                            <td width="10%">
                                <input size="7" id="item_partno1" name="item_partno[1]" value=" SPAD 502 DL" type="text">
                            </td>
                            <td width="6%">
                                <input size="11" id="sup_itempartno1" name="sup_itempartno[1]" type="text">
                            </td>
                            <td width="4%">
                                <input size="3" class="slab_range" name="slab_range[]" id="slab_range[]" type="text">
                            </td>
                            <td width="3%">
                                <input size="1" data-validation="required" class="item_quantity" name="item_quantity[]" id="item_quantity[]" value="1" type="text">
                            </td>
                            <td width="4%">
                                <input size="1" data-validation="required" class="item_quantity_sup" name="item_quantity_sup[]" id="item_quantity_sup[]" type="text">
                            </td>
                            <td width="3%">
                                <input size="2" class="item_units" name="item_units[]" id="item_units[]" value="Nos" readonly="readonly" type="text">
                            </td>
                            <td width="3%">
                                <input size="2" data-validation="required" class="item_units_sup" name="item_units_sup[]" id="item_units_sup[]" type="text">
                            </td>
                            <td width="4%">
                                <input size="5" data-validation="required" class="unitprice" name="unitprice[]" id="unitprice[]" type="text">
                            </td>
                            <td width="8%">
                                <input size="8" name="total[]" id="total[]" readonly="readonly" class="total" type="text">
                            </td>
                            <td width="6%">
                                <select class="currency-select" data-validation="required" id="currency_change[]" name="currency_change[]">
                                    <option selected="selected" value="">select</option>
                                    <option value="USD" data-price="1">USD</option>
                                    <option value="INR" data-price="67.434191">INR</option>
                                    <option value="GBP" data-price="0.704985">GBP</option>
                                    <option value="EUR" data-price="0.91118">EUR</option>
                                    <option value="SGD" data-price="1.386987">SGD</option>
                                    <option value="AUD" data-price="1.347597">AUD</option>
                                    <option value="CAD" data-price="1.342118">CAD</option>
                                    <option value="CHF" data-price="0.997145">CHF</option>
                                    <option value="JPY" data-price="112.6934">JPY</option>
                                    <option value="MYR" data-price="4.129541">MYR</option>
                                    <option value="ZAR" data-price="15.43258">ZAR</option>
                                </select>
                            </td>
                            <td width="8%">
                                <input size="8" class="total1" id="total_inr[]" name="total_inr[]" type="text">
                            </td>
                            <input class="inrvalue" id="inrvalue" name="inrvalue" value="67.434191" type="hidden">
                        </tr>
                    </tbody>
                </table>
            </div>
            <br>
            <br>
            <table>
                <tbody>
                    <tr>
                        <td></td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input value="--Save Data--" type="submit">
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
        <script type="text/javascript">
            window.onload = function() {


                function calculateRowTotals(row) {
                    console.log("calculateRowTotals()", row);
                    var currency = row.find(".currency-select").val();
                    var conversionRate = row.find(".currency-select option[value=" + currency + "]").data("price");
                    var totalINR = row.find('.total').val();
                    //alert (totalINR);
                    //console.log(totalINR);
                    //console.log(conversionRate);
                    console.log("total1 => " + row.find('.total1').length);
                    //var newTotal = currency==="INR" ? totalINR : (totalINR * conversionRate / row.find('.inrvalue').val()).toFixed(3);
                    var newTotal = 0;
                    if (currency === "INR") {
                        newTotal = totalINR;
                    } else if (currency === "USD") {
                        newTotal = ((totalINR * row.find('.inrvalue').val()).toFixed(3));
                    } else {
                        newTotal = (((row.find('.inrvalue').val() / conversionRate) * totalINR).toFixed(3));
                    }
                    console.log("New total is " + newTotal + " & old one is " + row.find('.total1').val());
                    row.find('.total1').val(newTotal);
                    //row.find('.price_unit').val((newTotal/row.find('.qty').val()).toFixed(3));
                }

                $(document).ready(function() {
                    //$("select").change(function (event, processing) {
                    $(".currency-select").change(function(event, processing) {
                        console.log("A row changed", processing, event);
                        var row = $(this).closest('tr');
                        var table = row.closest('table');
                        var currency = $(this).val();
                        if (processing) {
                            // Calculate me
                            calculateRowTotals($(row));
                        } else {
                            // Calculate other if not processing yet
                            table.find("tr").each(function() {
                                $(this).find("select").val(currency).trigger("change", 1);
                            });
                        }
                    });
                });
            }
        </script>
        <script type="text/javascript">
            $('#table :input').change(function() {
                var $tr = $(this).closest('tr'),
                    $totInr = $tr.find('[name="total_inr[]"]'),
                    unitprice = +$tr.find('[name="unitprice[]"]').val() || 0,
                    qty = +$tr.find('[name="item_quantity_sup[]"]').val() || 0,
                    $currency = $tr.find('[name="currency_change[]"] option:selected'),
                    currency = $currency.val(),
                    inr = $('#inrvalue').val();

                var total = unitprice * qty;
                $tr.find('[name="total[]"]').val(total);
            })
        </script>
    </div>


    <script type="text/javascript">
        $('form#cart').submit(function(e) {
            $(this).children('input[type=submit]').attr('disabled', 'disabled');
        });
    </script>
</body>

</html>

@Indra Can you pls guide me on how to achieve this? I need a Add New link which should add a new row in the bottom of the record and i should be able to save it. I tried so many methods, but nothing is working out — Sanju Menon
– Sanju Menon, Commented Mar 14, 2016 at 11:36
You can refer this link stackoverflow.com/questions/28558433/… if it helps. — Indrajit
– Indrajit, Commented Mar 14, 2016 at 11:44
i think i should change the complete code to achieve this. Anyways thanx.. — Sanju Menon
– Sanju Menon, Commented Mar 14, 2016 at 11:48
Can you share the parsed code(Processed code after PHP execution )? — Rayon
– Rayon, Commented Mar 15, 2016 at 4:15

Collectives™ on Stack Overflow

Add dynamic inputs and insert data to MySQL using PHP

0

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Post as a guest

Linked