JavaScript function doesn't work in form loop

Question

JavaScript work only in first iteration, doesn't affect on the field from second iteration.

forloop Code Sample

 {% for i in userlist %}
    <input id="a" type="email" value="{{i.email}}">
    <input id="b" type="text" value="{{i.date_of_birth}}">
    <input id="c" type="text" value="{{i.mobile}}">
 {% endfor %}

Button for disable editing

<button onclick="disableProfileEditing()" type="button"> Disable </button>

Button for enable editing

<button onclick="enableProfileEditing()"> Edit</button>

JavaScript function

function disableProfileEditing() {
    document.getElementById(a).disabled = true;
    document.getElementById(b).disabled = true;
    document.getElementById(c).disabled = true;
}


function disableProfileEditing() {
    document.getElementById(a).disabled = false;
    document.getElementById(b).disabled = false;
    document.getElementById(c).disabled = false;
}

Don't repeat ids. Ids are expected to be unique. Use classes and contextual lookups instead. — Taplar, Sep 09 '20 at 19:41
What kind of JavaScript are you using? Looks like some kind of server based template, can you put the name of that language as a tag? — B''H Bi'ezras -- Boruch Hashem, Sep 09 '20 at 19:41
Related: https://stackoverflow.com/questions/59887834/getting-the-value-of-the-input-field-using-jquery/59888053#59888053 — Taplar, Sep 09 '20 at 19:42
That's obviously not valid JS/HTML in the first code block, can you add a tag for the framework you're using? — John Montgomery, Sep 09 '20 at 19:42
if a loop, you have 2 o more inputs with the same id, thats is the problem — metalbox, Sep 09 '20 at 19:46

score 1 · Accepted Answer · answered Sep 09 '20 at 19:49

1

Ok regardless of how the for loop is made, what it is doing is making many elements with the same I'd, which is a problem. Instead you can give them all a unique class, or data attribute, but class is simpler and more widely supported, then in your function you have to get all elements with that class (or data attribute) and do the hiding etc.

So for the for loop


 {% for i in userlist %}
    <input  class="email" type="email" value="{{i.email}}">
    <input class="dob" type="text" value="{{i.date_of_birth}}">
    <input class="mobile" type="text" value="{{i.mobile}}">
 {% endfor %}

Just changed the IDs to class, so you can have more than one. Now for the first function just get all of each class (and the second one I'll leave for you to figure out)

function disableProfileEditing() {
    Array.apply(0,document.getElementsByClassName("email")).forEach(x=> x.disabled = true);
    Array.apply(0,document.getElementsByClassName("dob")).forEach(x=> x.disabled = true);
    Array.apply(0,document.getElementsByClassName("mobile")).forEach(x=> x.disabled = true);
}

OR you could have just made a surrounding container div with a unique ID then just made the for loop add elements into that, probably would have been simpler if you want to show or hide them all together

answered Sep 09 '20 at 19:49

B''H Bi'ezras -- Boruch Hashem

3,665
3
33
83

For ES6 `[...document.querySelectorAll('.email, .dob, .mobile')].forEach` would be more concise. – Taplar Sep 09 '20 at 20:02
okay this will work if their any other way without using the class, becouse in my code use class for field style and properties – Sarath Chandran Sep 09 '20 at 20:04
@taplar I'm trying to support older browsers, hence the Array.apply – B''H Bi'ezras -- Boruch Hashem Sep 09 '20 at 20:05
@sarath yes add a div surrounding all the elements with a unique ID, so `
{%for loop of elements%} all the elements you want {%endfor%}
` then reference it in the function using the id "all" – B''H Bi'ezras -- Boruch Hashem Sep 09 '20 at 20:07
okay and one more doubt, I have a div , classname="modal-footer" can you show me the code for how can i hide and unhhide the div using these buttons – Sarath Chandran Sep 09 '20 at 20:16
@ bluejayke okay in the same way the hide and unhide will be work – Sarath Chandran Sep 09 '20 at 20:22
@sarath first add an ID to the div as a new attribute, then in some other function reference that ID, either using document.getElemenyById or just by using the id itself, then call .style.display="none", and to show it do instead ="" so really quick `
stuff in div
` then if course just make a button somewhere with an id `` then add onclick `` although I don't know classname? – B''H Bi'ezras -- Boruch Hashem Sep 09 '20 at 20:26
okay fine, and i dont understand exactly what is happening here ------ **Array.apply(0,document.getElementsByClassName("mobile")).forEach(x=> x.disabled = true);** ----- can you give me a simple explanation of the above line of code if you are okay? – Sarath Chandran Sep 09 '20 at 20:36
@sarath the main part is `document.getElementsByClassName("mobile")`, this means that we literally get all the elements in html, that have the class (or "class name") of mobile, and that returns a list of elements. The Array.apply part is just in order to use .forEach after, which basically how's through each of the elements in that new list that was returned and disabled each one of them – B''H Bi'ezras -- Boruch Hashem Sep 09 '20 at 20:45
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/221234/discussion-between-sarath-chandran-and-bluejayke). – Sarath Chandran Sep 09 '20 at 20:49

JavaScript function doesn't work in form loop

1 Answers1