Tuesday, 27 August 2013

Change HTML attribute value using onclick event in jquery

Change HTML attribute value using onclick event in jquery

Hello guys I just want to ask how can i change html attribute values using
an event in jquery. For example I have a user list filled with information
and there is a button update and cancel. The user information is READONLY
but when the user click the button update it will remove the READONLY
attribute in my textboxes.
Here's my simple code:
<div style="display: none" id="form_edit" class="k-content">
<table border="0">
<tr>
<td>
&nbsp;&nbsp;&nbsp;<label>P.O. #</label>
</td>
<td>
&nbsp;&nbsp;&nbsp;<input type="text"
name="suppliername" value="<?php echo $order_code; ?>"
readonly="readonly" />
</td>
<td>
&nbsp;&nbsp;&nbsp;<label>SUPPLIER NAME</label>
</td>
<td>
&nbsp;&nbsp;&nbsp;<input type="text"
name="suppliername" value="<?php echo $sname; ?>"
readonly="readonly"" />
</td>
<td>
&nbsp;&nbsp;&nbsp;<label>Contact Person</label>
</td>
<td>
&nbsp;&nbsp;&nbsp;<input type="text"
name="suppliername" value="<?php echo $contactperson;
?>" readonly="readonly" />
</td>
</tr>
<tr>
<td>
&nbsp;&nbsp;&nbsp;<label>TIN #</label>
</td>
<td>
&nbsp;&nbsp;&nbsp;<input type="text"
name="suppliername" value="<?php echo $tin; ?>"
readonly="readonly" />
</td>
</tr>
<tr>
<td colspan="6" style="text-align: right">
<input type="submit" value="UPDATE" class="k-button"
id="submit_form"/>
<input type="button" value="HIDE" class="k-button"
id="close_form"/>
</td>
</tr>
</table>
</div>
My jquery
$("a[name=edit_order]").click(function (e) {
$("#window_edit").data("kendoWindow").open();
e.preventDefault();
});
$("a[name=remove_order]").click(function (e) {
$("#window_remove").data("kendoWindow").open();
e.preventDefault();
});
/*here's the part that will remove the readonly attribute but how can
i do that?
$("#update_supplier").click(function(){
$("#form_edit").show({
effect: "blind",
animation: 1000
});
$("#update_supplier").hide({
effect: "fade",
animation: 1000,
});
});
/*if close bring back again the readonly*/
$("#close_form").click(function(){
$("#form_edit").hide({
effect: "blind",
animation: 1000
});
$("#update_supplier").show({
effect: "fade",
animation: 1000,
});
});

No comments:

Post a Comment