Here is my code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
$('.edit_button').click(function(){
console.log($(this).siblings().text());
modifications($(this));
});
});
function modifications(cell){
var form = '<form> <input type="text" id = "newText" size = "30" value='+cell.siblings().text()+'></form>';
cell.parent('td').append(form).focus();
cell.parent().children('.link').toggle();
$('#newText').keypress(function (e) {
if (e.which == 13) {
console.log("form submitted");
e.preventDefault();
var new_text = cell.parent('td').children('#newText').val();
//Show hyperlink with new value
cell.parent().children('.link').toggle();
cell.parent().children('.link').text(new_text);
//Hide text box
cell.parent().children('.newText').hide();
}
});
}
</script>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Company</th>
<th>E-Mail</th>
</tr>
<tr>
<td>Sergey brin</td>
<td>Google</td>
<td class="email">
<a class = "link" href= "www.gmail.com"> sergey.brin@gmail.com </a>
<button class = "edit_button" type="button" style = "float:right">Edit !</button>
</td>
</tr>
<tr>
<td>Elon Musk</td>
<td> Amazon </td>
<td class="email">
<a class = "link" href = "www.spacex.com">elon.musk@spacex.com </a>
<button class= "edit_button" type="button" style = "float:right">Edit !</button>
</td>
</tr>
<tr>
<td> Bill Gates </td>
<td> Microsoft </td>
<td class="email">
<a class = "link" href = "www.microsoft.com"> bill.gates@hotmail.com </a>
<button class="edit_button" type="button" style = "float:right">Edit !</button>
</td>
</tr>
</table>
</body>
</html>
Problem Statement : I want a textbox to appear when edit button is clicked, and after editing when enter is pressed the contents of the textbox should change to hyperlink, else if Escape is pressed original contents of the hyperlink should be restored.
What am I missing here? I am not even able to fetch value from the textbox. Can somebody brainstorm with me?