Add readonly to input fields in jQuery

Question

I have problems adding readonly to some input fields.

I have this code in the <head>

$(document).ready(function() {
    $('#powermail_field_ordreid').prop('readonly', true);
    $('#powermail_field_destination').prop('readonly', true);
});

And then I have these 2 out of 6 input fields, that I need to add the readonly on.

<div id="powermail_fieldwrap_9" class="powermail_fieldwrap powermail_fieldwrap_input powermail_fieldwrap_9 ">
    <label class="powermail_label" for="powermail_field_ordreid"> Ordre id </label>
    <input id="powermail_field_ordreid" class="powermail_field powermail_input " type="text" value="0521104821">
</div>
<div id="powermail_fieldwrap_7" class="powermail_fieldwrap powermail_fieldwrap_input powermail_fieldwrap_7 ">
    <label class="powermail_label" for="powermail_field_destination"> Destination </label>
    <input id="powermail_field_destination" class="powermail_field powermail_input " type="text" value="Luxembourg">
</div>

I have tried .attr() and now im using .prop() because I'm using jQuery 1.10+, but I can still edit the input fields, what's wrong.

...EDIT... Can see its works fine, on jsfiddel - so can someone tell me if its an other script that blok it here http://wnf.dk/bestillingsform.html?tx_powermail_pi1[field][7]=Luxembourg the 2 first fields have the readonlyadd.

As @BenM says, this works fine. Have you checked the console for errors elsewhere in your code? — Rory McCrossan, May 21 '14 at 08:59
Are you using duplicate IDs??? Are these elements generated dynamically after DOM is ready? Why don't you set it by default directly on these inputs? BTW, you should try to replicate your issue on jsFiddle — A. Wolff, May 21 '14 at 09:00
thats funny, I can see its working in jsfiddle, but its not working in the main code. @A. Wolff yes i think so, about the generation. — Thomas Bøg Petersen, May 21 '14 at 09:06
i tried to repricate your problem on fiddle http://jsfiddle.net/Zz8na/ the readonly is working fine there — Manish Gautam, May 21 '14 at 09:07
@Thomas, when navigating your site, the error console shows `$(...).responsiveimages is not a function`. Looks like you're missing a plugin. — Frédéric Hamidi, May 21 '14 at 10:19

score 2 · Accepted Answer · edited May 23 '17 at 11:58

2

Your web, console log: Uncaught ReferenceError: $ is not defined

You should put the references to the jquery scripts first. Uncaught ReferenceError: $ is not defined?

edited May 23 '17 at 11:58

Community

1
1

answered May 21 '14 at 09:45

jandro5

56
2

Close, but apparently only the responsive images plugin is missing, not the whole jQuery. – Frédéric Hamidi May 21 '14 at 10:20
Hi Frederic i edit the code for 30 min ago, to user2261516, so that worked to switch some of the JS files from footer to header, THX user 2261516 – Thomas Bøg Petersen May 21 '14 at 10:35

Najib · Answer 2 · 2014-05-21T09:27:49.000

1

<script>
    $(document).ready(function(){
        $('#powermail_field_ordreid').attr('readonly', true);
        $('#powermail_field_destination').attr('readonly', true);
    });
</script>

it works for jQuery <1.9

jQuery 1.9+

<script>
        $(document).ready(function(){
            $('#powermail_field_ordreid').prop('readonly', true);
            $('#powermail_field_destination').prop('readonly', true);
        });
    </script>

you may look at http://jsfiddle.net/najibcse/M7rkB/

edited May 21 '14 at 09:27

answered May 21 '14 at 09:02

Najib

472
2
7

3

But OP is using `jQuery 1.10+` – A. Wolff May 21 '14 at 09:03
What is the point of your answer? The questioner is already using your second code snippet. – Frédéric Hamidi May 21 '14 at 09:08
I have used http://code.jquery.com/jquery-1.11.1.min.js for test and both attr & prop works for me. @Frédéric Hamidi please look at http://jsfiddle.net/najibcse/M7rkB/ – Najib May 21 '14 at 09:26
1

@Najib U are not reading the question, and see/read what other have wrote. – Thomas Bøg Petersen May 21 '14 at 09:28
@thomas-bog-petersen yap, for the time being I was testing in jsfiddle. – Najib May 21 '14 at 09:33

Add readonly to input fields in jQuery

2 Answers2