Jquery Editable input textbox field

Question

I have created this simple form

<html>
<head>
 <title>Datatable</title>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script type="text/javascript" src="../jquery-1.11.3.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="../jquery/Jobseeker/EditDatatable.js"></script>
</head>

<body>
<form>
<table id="example">
<tr>
<td>
<label>Ab Va</label>
</td>
<td>
<input type="text" value="99"/>
</td>
</tr>
<tr>
<td>
<label>Sa Va</label>
</td>
<td>
<input type="text" value="9986"/>
</td>
</tr>

</table>
<button id="btn">Edit</button>
</form>
</body>
</html>

The jquery code to edit the input textbox of this table is

$(document).ready(function() {
    var table = $('#example').DataTable();

    $('button').click( function() {
        var data = table.$('input, select').serialize();
        alert(
            "The following data would have been submitted to the server: \n\n"+

        );
        return false;
    } );
} );

The problem what I am facing is the input textbox field id editable without click of the button "Edit". But I want it to be editable only when the user clicks on the Edit button. Please let me know how can i do this

Answer 1

you can add disabled attribute to input and then remove it on btn click.

<input type="text" value="99" disabled/>

<input type="text" value="9986" disabled/>


$(document).ready(function() {
    var table = $('#example').DataTable();

    $('button').click( function() {
        $('input').removeAttr('disabled');
        var data = table.$('input, select').serialize();
        alert("The following data would have been submitted to the server: \n\n");
        return false;
    } );
} );

Answer 2

Use this

$(document).ready(function() {
 var table = $('#example').DataTable();

 $('button').click( function() {
    $("input[type=text]").attr("readonly", false); 

    var data = table.$('input, select').serialize();
    alert("The following data would have been submitted to the server: \n\n"+);
    return false;
 });
});

And change your input type="text" tags with readonly attribute as below

<input type="text" value="99" readonly />

Jquery Editable input textbox field

Question

2 answers

solution1
0 2017-07-05 12:19:36

solution2
0 2017-07-05 12:25:08

Jquery Editable input textbox field

Question

2 answers

solution1 0 2017-07-05 12:19:36

solution2 0 2017-07-05 12:25:08

solution1
0 2017-07-05 12:19:36

solution2
0 2017-07-05 12:25:08