<script>
function update(elem)
{
var ele=$(elem).siblings('label#test').html();
var a=document.getElementById('test');
var htm = '<input type="text" name="modal" id="modal" style="width:70%;" value="'+$(elem).siblings('label#test').html();+'"/>';
$dialog.html(htm)
.dialog({
autoOpen: true,
position: 'center' ,
title: 'UPDATE',
draggable: false,
width : 300,
height : 40,
resizable : false,
modal : true,
buttons: { "Save Changes" : function() { if($('#modal').val() != ''){a.value=$('#modal').val();$dialog.dialog('close');} else {alert('Please input a new value for test');} } }
});
$dialog.dialog('open');
}
$(document).ready(function() {
var flag=0;
$("input:radio[@name=template]").click(function() {
var checkedoption = $(this).val();
if (checkedoption == "template3")
{
if (flag == 0)
{
var html = '<input type="text" name="val" id="val" /> <input type="button" value="Add" id="add"><br>';
$('#useroptions').append(html);
flag=1;
$('#add').click(function(){
var a = $('#val').val();
if (a == '')
{
alert('Enter options');
}
else
{
var section= '<tr class="clickable"><td id="userval" BGCOLOR="#FF6699"><label id="test">' + a + '</label> <IMG SRC="/media/img/chunkedit.gif" onclick="javascript:update(this);" > <IMG SRC="/media/img/close.gif" onclick="javascript:remove(this);" ></td></tr>';
$('#useroptions').append(section);
}
});
}
}
});
});
</script>
<form>
<table>
<tr><td>
<div id="useroptions"></div>
</tr></td>
</table>
</form>
Want to know how to update the value of test in the code above? Feel free to ask.