Change HTML attribute value using onclick event in jquery

Question

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="po" 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="person" 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="tin" value="<?php echo $tin; ?>" readonly="readonly" />
                </td>
            </tr>

            <tr>
                <td colspan="6" style="text-align: right">

                    <input type="button" 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,
        });
    });

When you click on update button right you want remove readonly from textbox , but its also submit form when you click on update button. — Devang Rathod
– Devang Rathod, Commented Aug 27, 2013 at 7:44
Check my edit i m sure it will help you to solve your issues — Devang Rathod
– Devang Rathod, Commented Aug 27, 2013 at 7:49

Dipesh Parmar · Accepted Answer · 2013-08-27 08:12:33Z

4

Try this code :

$('#submit_form').on('click', function () {
    $('input[name="suppliername"]').removeAttr('readonly');
});

Check my edit.

edited Aug 27, 2013 at 8:12

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

answered Aug 27, 2013 at 7:46

Devang Rathod

6,7342 gold badges25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jerielle Over a year ago

It works. But what if if im going back again to readonly how's that?

Devang Rathod Over a year ago

@RochelleCanale means ?

Anton · Accepted Answer · 2013-08-27 07:43:22Z

4

Try this

$('#submit_form').on('click', function () {
    $('input["readonly"]').removeAttr('readonly');
});

answered Aug 27, 2013 at 7:43

Anton

32.6k5 gold badges47 silver badges54 bronze badges

5 Comments

Devang Rathod Over a year ago

Where you find class .suppliername ?

Devang Rathod Over a year ago

i can't see any class with this name ?

Jerielle Over a year ago

Sorry guys my Update button is also a submit button I changed it to button

Devang Rathod Over a year ago

@Anton i didn't downvote infact i have also downvote ? so explain why down vote ?

Anton Over a year ago

@DevangRathod I didn't downvote either... both our answers are correct i infact upvoted

Collectives™ on Stack Overflow

Change HTML attribute value using onclick event in jquery

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related