get updated value in jquery inline editing?
I can't get updated value of text box in following codes.
<html>
<head>
<script src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#edit").click(function(){
if($(this).html() == "Edit"){
$(this).html("Update");
var my_val = $(this).parents().find("#name").html();
var new_html = "<input type='text' value='" + my_val + "' />";
$(this).parents().find("#name").html(new_html);
return false;
}else{
if($(this).html() == "Update"){
var txt_box = $(this).parents().find("#name").html();
alert($(txt_box).val());
}
}
});
});
</script>
</head>
<body>
<table id='test_table'>
<tr>
<td id='name'>My Name</td>
<td><a href='#' id='edit'>Edit</a></td>
</tr>
开发者_高级运维 </table>
</body>
</html>
Change
var txt_box = $(this).parents().find("#name").html();
to
var txt_box = $(this).parents().find("#name > input");
That's because the first will always result in :
<input type="text" value="My Name">
Remove the .html() on this line:
var txt_box = $(this).parents().find("#name").html();
And the $() wrapper in the alert. So you have:
var txt_box = $(this).parents().find("#name");
alert(txt_box.val());
May be it will be better and simpler to use jquery plugin like jquery-in-place-editor (see demo here)?
加载中,请稍侯......
精彩评论