CODEWITHSUNDEEP
javascripthtmljqueryforms
Lori
Lori

Reputation: 130

Javascript IDs into variables onchange

My html form works perfectly and the javascript works perfectly...the only issue is I obviously don't want to repeat the code 15 times so I need the id's to be pulled into variables.

Simply trying to get three id's from whichever form is submitted onchange. my_btn_id, my_img_id, my_input_id. That's it. I've tried thousands of possible syntax variations, looked up hundreds of answers in here and nothing has not worked the way I need it to. I'm obviously missing something. All help is appreciated.

Here is the simplified html form:

<form action="#” method=" post " id=”my_form_id”>
    <input type="file " id="my_input_id "><br>
    <button type="submit " value="Upload " id="my_btn_id ">Upload</button>
</form>

Here is javascript - the id's i'm looking for are highlighted with **

$(document).on('change', '.btn-file :file', function () {
    var input = $(this),
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [label]);
});

$('.btn-file :file').on('fileselect', function (event, label) {
    var input = $(this).parents('.input-group').find(':text'),
        log = label;
    if (input.length) {
        input.val(log);
    } else {
        if (log) alert(log);
    }
});

function readURL(input) {
    **var imgid = "#my_img_id";**
    **var btnid = "#my_btn_id";**

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $(imgid).attr('src', e.target.result);
            $(btnid).show();
        }
        reader.readAsDataURL(input.files[0]);
    }
}

**var inputid = "#my_input_id";**

$(inputid).change(function () {
    readURL(this);
});

Upvotes: 0

Views: 86

Answers (2)

Barmar
Barmar

Reputation: 781088

$(this.form) will return the form that contains the input element that the event was triggered on. You can then use this to find the other elements you want.

var form = $(input.form);
var img = form.next("img");
var btn = form.find("input:submit");

There's no need to get their IDs, you can just use the jQuery objects themselves. E.g.

img.attr("src", e.target.result);
btn.show();

Full code:

function readURL(input) {
    var form = $(input.form);
    var img = form.next("img");
    var btn = form.find("input:submit");    

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            img.attr('src', e.target.result);
            btn.show();
        }
        reader.readAsDataURL(input.files[0]);
    }
}

$("input[type=file]").change(function() {
    readURL(this);
});

Upvotes: 2

Michael Rosario
Michael Rosario

Reputation: 56

Many ways to do this.

$("#my_input_id1, #my_input_id2, #my_input_id3").on("change",function(){
   var inputItem = $(this);  
   readURL(inputItem);
});

You can also create variables. For example:

<input type="file" class="inputItem" data-img="my_img_id1" data-btn="my_btn_id1">
<input type="file" class="inputItem" data-img="my_img_id2" data-btn="my_btn_id2">
<input type="file" class="inputItem" data-img="my_img_id3" data-btn="my_btn_id2">

Then with jQuery

$(".inputItem").on("change",function(){
     var imgid = $(this).attr("data-img");
     var btnid = $(this).attr("data-btn");

     // then you can create dynamic selectors
     // ...

     $("#"+imgid).attr('src', e.target.result);
     $("#"+btnid).show();

});

I hope this helps or point you to the right direction!

Upvotes: 1

Related Questions