Add row to table using jquery

Question

I have the below HTML and Javascript code. I am trying to clone a row in a table and rename the ids of each input element. While I debug the script I can see the row being cloned and added to the table but at the end of the script it disappear from the HTML markup. I am using jquery-3.1.1.min.js . Can please someone tell me what I have done wrong?

<form name="input" action="Request.jsp" method="get">
    <TABLE id="flightData">
        <TR>
            <TD></TD>
            <TD></TD>
        </TR>
        <TR>
            <TD>GDS</TD>
            <TD><input id="code" type="text" name="Code"
                value="<%=Code%>" /></TD>
                <TD>CountryCode</TD>
            <TD><input id="countrycode" type="text" name="CountryCode"
                value="<%=countryCode%>" /></TD>
                <TD>Carrier Code</TD>
            <TD><input id="carriercode" type="text" name="CarrierCode"
                value="<%=carrierCode%>" /></TD>
                <TD>Flight Number</TD>
            <TD><input id="flightnumber" type="text" name="FlightNumber"
                value="<%=flightNumber%>" /></TD>
                <TD>Departure Date</TD>
            <TD><input id="departuredate" type="text" name="DepartureDate"
                value="<%=departureDate%>" /></TD>
                <TD>Departure Port</TD>
            <TD><input id="departureport" type="text" name="DeparturePort"
                value="<%=departurePort%>" /></TD>
            <TD>Arrival Port</TD>
            <TD><input id="arrivalport" type="text" name="ArrivalPort"
                value="<%=arrivalPort%>" /></TD>

    </TABLE>
    <P>
       <button id="newRowButton">Add Flight</button>

       <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
    </P>
   <script type="text/javascript">
   $("#newRowButton").click(function() {
        $('#flightData tbody').append($('#flightData tbody tr:last').clone());

        $('#flightData tr').each(function(i) {
            if (i === 1)
                return;

            var textinput = $(this).find('input');
            textinput.eq(0).attr('id', 'code' + i);
            textinput.eq(0).attr('id', 'countrycode' + i);
            textinput.eq(0).attr('id', 'carriercode' + i);
            textinput.eq(0).attr('id', 'flightnumber' + i);
            textinput.eq(0).attr('id', 'departuredate' + i);
            textinput.eq(0).attr('id', 'departureport' + i);
            textinput.eq(0).attr('id', 'arrivalport' + i);
        });
    });
   </script>

</form>

Answer 1

The problem you are experiencing is related to your button elements:

from MDN

type

The type of the button. Possible values are:

submit : The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

reset : The button resets all the controls to their initial values.

button : The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

Because the default value, if not specified, is "submit" this is your problem.

So, change your buttons from:

<button id="newRowButton">Add Flight</button>

to:

<button id="newRowButton" type="button">Add Flight</button>

Or you may add " e.preventDefault(); " inside yor event handler.

The snippet:

 $("#newRowButton").click(function(e) { // // Use preventDefault if the button is a submit default // button // //e.preventDefault(); $('#flightData tbody').append($('#flightData tbody tr:last').clone()); $('#flightData tr').each(function(i) { if (i === 1) return; var textinput = $(this).find('input'); textinput.eq(0).attr('id', 'code' + i); textinput.eq(0).attr('id', 'countrycode' + i); textinput.eq(0).attr('id', 'carriercode' + i); textinput.eq(0).attr('id', 'flightnumber' + i); textinput.eq(0).attr('id', 'departuredate' + i); textinput.eq(0).attr('id', 'departureport' + i); textinput.eq(0).attr('id', 'arrivalport' + i); }); }); 

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <form name="input" action="Request.jsp" method="get"> <table id="flightData"> <tr> <td></td> <TD></TD> </tr> <TR> <TD>GDS</TD> <TD><input id="code" type="text" name="Code" value="<%=Code%>" /></TD> <TD>CountryCode</TD> <TD><input id="countrycode" type="text" name="CountryCode" value="<%=countryCode%>" /></TD> <TD>Carrier Code</TD> <TD><input id="carriercode" type="text" name="CarrierCode" value="<%=carrierCode%>" /></TD> <TD>Flight Number</TD> <TD><input id="flightnumber" type="text" name="FlightNumber" value="<%=flightNumber%>" /></TD> <TD>Departure Date</TD> <TD><input id="departuredate" type="text" name="DepartureDate" value="<%=departureDate%>" /></TD> <TD>Departure Port</TD> <TD><input id="departureport" type="text" name="DeparturePort" value="<%=departurePort%>" /></TD> <TD>Arrival Port</TD> <TD><input id="arrivalport" type="text" name="ArrivalPort" value="<%=arrivalPort%>" /></TD> </table> <P> <button id="newRowButton" type="button">Add Flight</button> <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> </P> </form> 

Answer 2

First the button has the type submit by default so you should change it to button or it'll submit your form then refresh the page :

<button id="newRowButton" type='button'>Add Flight</button>

Also you should replace the zero's by other index's when you change the id attribute :

textinput.eq(0).attr('id', 'code' + i);
textinput.eq(1).attr('id', 'countrycode' + i);
textinput.eq(2).attr('id', 'carriercode' + i);
....

Hope this helps.