How can I add attribute inside an input tag using jQuery?

Question

HTML is:

<div class="form-item" id="edit-image-upload-wrapper"><img id="img_prev" src="#">
     <label for="edit-image-upload">Upload Your Picture: <span class="form-required" title="This field is required.">*</span></label>
     <input type="file" name="files[image_upload]" class="form-file required" id="edit-image-upload" size="60"></input>

     <div class="description"><p>You need to provide a passport sized image in jpg/jpeg or png format. The image size has to be 100kb or lower.</p>
    </div>
    </div>

JS code:

$('#edit-image-upload-wrapper input').prepend('onchange="readURL(this);"');

due to this JS code input tag has been changed as follows:

<input type="file" name="files[image_upload]" class="form-file required" id="edit-image-upload" size="60">onchange="readURL(this);"</input>

I want to change as follows:

 <input type="file" name="files[image_upload]" class="form-file required" id="edit-image-upload" size="60" onchange="readURL(this);"></input>

How can I do this?

first thing <input> is a singular tag, means it has no end tag — mrdeveloper
– mrdeveloper, Commented May 10, 2014 at 11:31

T.J. Crowder · Accepted Answer · 2014-05-10 11:35:36Z

2

In general, to add (or update) an attribute to an element, you can use attr:

$('#edit-image-upload-wrapper input').attr('onchange', 'readURL(this);');

As that attribute is reflected as a property, prop would also work:

$('#edit-image-upload-wrapper input').prop('onchange', 'readURL(this);');

However, as you're using jQuery, I can't see any good reason for doing this as opposed to using proper event hookup, such as:

$('#edit-image-upload-wrapper input').on('change', function() {
    readURL(this);
});

And if you can change the readURL function so that it gets the URL from this rather than from its first argument, that can be simpler:

// Requires small change to `readURL`
$('#edit-image-upload-wrapper input').on('change', readURL);

Side note 1: Your input has its own id value (edit-image-upload), so those selectors could be simply #edit-image-upload, rather than #edit-image-upload-wrapper input.

Side note 2: Your HTML is invalid. input elements are "void" elements, they never have content, and so you never write an ending tag for them. E.g., you never write </input>. Any element that cannot have content (input, br, hr, and a few others) is never written with an end tag.

edited May 10, 2014 at 11:35

answered May 10, 2014 at 11:29

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

Abdus Sattar Bhuiyan Over a year ago

Uncaught TypeError: Object #<Object> has no method 'on'

T.J. Crowder Over a year ago

@AbdusSattarBhuiyan: Wow, you're using a really outdated copy of jQuery. I strongly recommend updating to something more recent. on was added in v1.7.0 nearly three years ago (current versions are v1.11.1 and v2.1.1). Anyway, with older versions it would be .bind("change", function... or in either version, just .change(function....

Ani · Accepted Answer · 2014-05-10 11:31:23Z

0

Use this:

$('#edit-image-upload-wrapper input').change(function() {
     //.....
});

answered May 10, 2014 at 11:31

Ani

4,5434 gold badges28 silver badges32 bronze badges

Collectives™ on Stack Overflow

How can I add attribute inside an input tag using jQuery?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related