javascript - Two input fields with the same name - on change event -
i have 2 input fields same name - because business logic of project.
they that:
<input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" /> <input type="file" name="director_front_passport[]" class="app-file" /> i need append image name after input field on change event.but in way, how make difference between these 2 inputs?
i thought try differ them id attr, have clone button add more fields , don't think work on change event.
updated: code on change event following:
var inputs = document.queryselectorall( '.app-file' ); array.prototype.foreach.call( inputs, function( input ) { input.addeventlistener( 'change', function( e ) { //my code displaying image } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> i updated code using $(this) find changed input , code looks:
var inputs = document.queryselectorall( '.app-file' ); array.prototype.foreach.call( inputs, function( input ) { input.addeventlistener( 'change', function( e ) { var changed = $(this); var label = changed.next(), labelval = label.innerhtml, divname = label.next(); filename = e.target.value.split('\\').pop(); divname.html(filename); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" /> <input type="file" name="director_front_passport[]" class="app-file" />
you can use this keyword within event handler identify element raised event. try this:
$('.app-file').change(function() { $(this).after('<div>' + this.files[0].name + '</div>'); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" /> <input type="file" name="director_front_passport[]" class="app-file" /> with second example it's little odd call foreach in manner are. can call foreach on nodelist returned queryselectorall, this:
document.queryselectorall('.app-file').foreach(function(input) { input.addeventlistener('change', function(e) { // code displaying image }) }
Comments
Post a Comment