0

I have created a form, here when click on edit button from a dynamically created table it is not fetching the form values.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Generate Challan </title>

<link type="text/css" href="styles.css" rel="stylesheet" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://code.google.com/p/jquery-json/downloads/detail?name=jquery.json-2.2.min.js"></script>
    <script type="text/javascript">                    

    data = new Array();

    $(document).ready(function(){
                $(".addbutton").click(function() {
                        var row = new Array(12);
                        row[0] = $("#txtbox1").val();
                        row[1] = $("#txtbox2").val();
                        row[2] = $("#txtbox3").val();
                        row[3] = $("#txtbox4").val();
                        row[4] = $("#H1").val();
                        row[5] = $("#I1").val();
                        row[6] = $("#G1").val();
                        row[7] = $("#J1").val();
                        row[8] = $("#B1").val();
                        row[9] = $("#C1").val();
                        row[10] = $("#D1").val();
                        row[11] = $("#E1").val();

                        data.push(row);
                        refresh();
                });

               $('#myform')[0].reset();    //reset form stmt

                //Edit function
                var $tds = null;
                $('#datatable').on('click', 'td:last-child', function (e) {
                    var $tr = $(this).parent(),
                        $tds = $tr.children(),
                        sname = $tds.eq(0).text().trim(),
                        mon = $tds.eq(1).text().trim();
                        year = $tds.eq(2).text().trim();
                    $('#G1 option').each(function () {
                        if ($(this).text().trim() == sname) {
                            $(this).prop('selected', true);
                            return false;
                        }
                    });
                    $('#H1 option').each(function () {
                        if ($(this).text().trim() == mon) {
                            $(this).prop('selected', true);
                            return false;
                        }
                    });
                    $('#I1 option').each(function () {
                        if ($(this).text().trim() == year) {
                            $(this).prop('selected', true);
                            return false;
                        }
                    });
                    $('#J1').val($tds.eq(3).text().trim())
                    $('#E1').val($tds.eq(4).text().trim())
                    e.preventDefault();
                });

                $("#myform").submit(function(){
                    var val = $.toJSON(data);
                    $("#data").attr("value",val);

                    if(data.length == 0){
                            alert("Table is empty !");
                            return false;
                    }else{
                            return true;
                    }
                });


    });

    function refresh(){
        $("#datatable").find("tr:gt(1)").remove();
        publishtable();
    }

    function publishtable(){
                for(var c=0;c<data.length;c++){

                    var trow = $('<tr valign="middle">').addClass("contact");
                    $("<td>").text(c+1).appendTo(trow);

                    for(var i=0;i<12;i++){
                            $("<td>").text(data[c][i]).appendTo(trow);
                    }

                    var abutton = $('<input type="button" class="editrow" value="Edit">');
                    var acell = $("<td>");

                    abutton.appendTo(acell);
                    acell.appendTo(trow);

                    $("#datatable").append(trow);               
                }
    }

            //Summation
            function sum() {
                var txtFirstNumberValue = document.getElementById('B1').value;
                var txtSecondNumberValue = document.getElementById('C1').value;
                var txtThirdNumberValue = document.getElementById('D1').value;

                var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtThirdNumberValue);
                if (!isNaN(result)) {
                    document.getElementById('E1').value = result;
                }
            }

    </script>

</head>
<body>
<h2><center>Sample Form</center></h2>
        <h5><center>(Rule 23(1) &AMP; Rule 24(1))</center></h5>
<br/><br/>

<table border="0">

    <tr>
                <td><label for="name">Received from Shri:</label></td>
                <td><input type="text" name="name" id="txtbox1" class="txtbox">&nbsp;&nbsp;</td>
            </tr>
            <tr>
                <td><label for="address">Address:</label></td>
                <td><input type="text" name="address" id="txtbox2" class="txtbox">&nbsp;&nbsp;</td>
            </tr>
            <tr>
                <td><label for="address">Email:</label></td>
                <td><input type="text" name="email" id="txtbox3" class="txtbox">&nbsp;&nbsp;</td>
            </tr>
            <tr>
                <td><label for="mobileNo">Mobile No:</label></td>
                <td><input type="text" name="mobile" id="txtbox4" class="txtbox">&nbsp;&nbsp;</td>
            </tr>
            <tr>
                <td> <label for="month">Month:</label></td>
                <td><select name="month" id="H1">
                        <option>Select Month</option>
                        <option>January</option>
                        <option>February</option>
                        <option>March</option>
                        <option>April</option>
                        <option>May</option>
                        <option>June</option>
                        <option>July</option>
                        <option>August</option>
                        <option>September</option>
                        <option>October</option>
                        <option>November</option>
                        <option>December</option>
                    </select></td>
                    <td><label for="year">Year:</label></td>
                    <td><select name="year" id="I1">
                        <option>Select Year</option>
                        <option>2014</option>
                        <option>2015</option>
                        <option>2016</option>
                        <option>2017</option>
                    </select><td>
            </tr>
            <tr>
                <td><label for="serviceName">Service Name:</label></td>
                <td><select name="G1" id="G1"> 
                        <option>services</option>
                    </select></td>
            </tr>
            <tr>
                <td><label for="details">Details:</label></td>
                <td><input type="text" name="details" id="J1" class="txtbox" ></td>
            </tr>
            <tr>
                <td><label for="tax">Tax:</label></td>
                <td><input type="text" name="tax" id="B1" value="" class="txt" onkeyup="sum();" /></td>
            </tr>
            <tr>
                <td><label for="cess">Cess:</label></td>
                <td><input type="text" name="cess" id="C1" value="" class="txt" onkeyup="sum();" /></td>
            </tr>
            <tr>
                <td><label for="penalty">Interest/Penalty:</label></td>
                <td><input type="text" name="penalty" id="D1" value="" class="txt" onkeyup="sum();" /></td>
            </tr>
            <tr>
                <td><label for="total">Total:</label></td>
                <td><input type="text" name="total" id="E1" value="" class="txtbox"  /></td>
            </tr>
            <td>    
                <input type="button" name="mybutton" class="addbutton" id="addbutton" value="Add">&nbsp;&nbsp;
            </td>
    </tr>
</table>

<br/>
<br/>
<br/><br/><br/>
    <table id="datatable" class="contacts" border="1">
    <thead>
        <tr>
            <td class="contactDept" colspan="13">Generated rows</td>
        </tr>
    </thead>

    <tbody>
        <tr class="contact_head">
            <td>S.No.</td>
            <td>Name</td>
            <td>Address</td>
            <td>Email</td>
            <td>Mobile</td>
                            <td>Month</td>
                            <td>Year</td>
                            <td>Service</td>
                            <td>Details</td>
                            <td>Tax</td>
                            <td>Cess</td>
                            <td>Penalty</td>
                            <td>Total</td>
            <!--<td><a href="#" >Edit</a></td>-->
        </tr>
    </tbody>
</table>
<br/>
<form id="myform" action="save/saveTable.action" method="post">
    <input type="hidden" id="data" name="data">
    <input type="submit" name="submitbutton" class="submitbutton" id="submitbutton" value="Submit Form">
</form>

Here when click on add, form values are displaying on the table. When click on submit button, I am passing the table(dynamically generated table) to some action class. Before submitting the table I have to perform edit operation. I have written a code for edit function but unable to edit. Please help me to solve..

user4627344
  • 35
  • 11

1 Answers1

0

You made a mistake in your var declaration.

For exemple, you have written mon = $tds.eq(1).text().trim();

It should be mon = $tds.eq(5).text().trim();

Because $tds.eq(1) is the name, not the month.

That's why 

$('#H1 option').each(function () {
    if ($(this).text().trim() == mon) {
        $(this).prop('selected', true);
            return false;
    }
});

never appends.

Please see this working demo

UpDate 1 :

$('#datatable').on('click', 'td:last-child', function (e) {
    var $tr = $(this).parent(),
    $tds = $tr.children(),
    name = $tds.eq(1).text().trim(),
    adress = $tds.eq(2).text().trim(),
    email = $tds.eq(3).text().trim(),
    mobile = $tds.eq(4).text().trim(),
    mon = $tds.eq(5).text().trim(),
    year = $tds.eq(6).text().trim(),
    service = $tds.eq(7).text().trim(),
    details = $tds.eq(8).text().trim(),
    tax = $tds.eq(9).text().trim(),
    cess = $tds.eq(10).text().trim(),
    penalty = $tds.eq(11).text().trim(),
    sum = $tds.eq(12).text().trim();
...
EdenSource
  • 3,387
  • 16
  • 29
  • Thank you @EdenSource. I have gone through the working demo it is working perfect. But when I do the same within my netbeans its not performing any action. I mean it is not fetching that row values onto form. – user4627344 Mar 30 '15 at 09:05
  • Do you have an on-line demo of what you've done ? Do you have any error into the dev tool ? – EdenSource Mar 30 '15 at 09:08
  • You have a problem with your table structure by the way. When "adding" a contact, you create a new cell (for the edit button), and your table is only 13 columns (1st TR TD is colspan=13). But that's not the source of the problem – EdenSource Mar 30 '15 at 09:18
  • This is the working demo http://jsfiddle.net/ca078/nofujftq/ . Where did I go wrong. – user4627344 Mar 30 '15 at 09:20
  • You forgot the var declaration just after `$('#datatable').on('click', 'td:last-child', function (e) {` , see update 1 in my answer. This is what I had in my demo, you can keep only the ones you need. – EdenSource Mar 30 '15 at 09:26
  • Yes I have gone with that. Even though its not working. – user4627344 Mar 30 '15 at 09:38
  • It works if you set the Fiddle settings on "No wrap - In head", see demo here : http://jsfiddle.net/ggyswLvf/1/ . it is well explained here : http://stackoverflow.com/questions/26985800/what-is-the-difference-between-onload-ondomready-no-wrap-in-head-and-no-w . For your own page, be sure your sum() function is declared in the head section (or your .JS file called in head). You can also add your keyup listener with jquery in $(document).ready : `$( "#inputToSummerize" ).keyup(function() {//YourStuff});` – EdenSource Mar 30 '15 at 10:11