#Follow-up
Follow-up
#Follow-up
Follow-up
Javascript: Loop Looping through Elementselements
Consider the following simplified htmlHTML code:
It is desirable the for following functionality;functionality, if both textarea and email of a form are empty, then:
- theThe respective button should be disabled
- theThe respective optional class element should not be displayed
Where the empty_check() function is the following javascriptJavaScript code:
Issue
The javascript
The JavaScript code for this simple task seems to be over-complicated:
- tooToo many lines
- tooToo many if-else conditions
- needsNeeds some unusual functions such as
querySelector
Therefore, is it possible to simplify that?
ps: no jQuery, only javascript
Based on comments and answers, I'm now using the following htmlHTML code:
And the following javascriptJavaScript code:
Much better than initially!
Javascript: Loop through Elements
Consider the following simplified html code:
It is desirable the following functionality; if both textarea and email of a form are empty then:
- the respective button should be disabled
- the respective optional class element should not be displayed
Where empty_check() function is the following javascript code:
Issue
The javascript code for this simple task seems to be over-complicated:
- too many lines
- too many if-else conditions
- needs some unusual functions such as
querySelector
Therefore, is it possible to simplify that?
ps: no jQuery, only javascript
Based on comments and answers, I'm now using the following html code:
And the following javascript code:
Much better than initially!
Looping through elements
Consider the following simplified HTML code:
It is desirable the for following functionality, if both textarea and email of a form are empty, then:
- The respective button should be disabled
- The respective optional class element should not be displayed
Where the empty_check() function is the following JavaScript code:
Issue
The JavaScript code for this simple task seems to be over-complicated:
- Too many lines
- Too many if-else conditions
- Needs some unusual functions such as
querySelector
Therefore, is it possible to simplify that?
Based on comments and answers, I'm now using the following HTML code:
And the following JavaScript code:
Javascript: Loop through Elements
Consider the following simplified html code:
<body>
<form>
<textarea></textarea>
<input type="email">
<button type="submit"></button>
</form>
<form>
<textarea></textarea>
<input class="optional" type="email">
<button type="submit"></button>
</form>
<form>
<input type="email">
<button type="submit"></button>
</form>
... etc ...
</body>
It is desirable the following functionality; if both textarea and email of a form are empty then:
- the respective button should be disabled
- the respective optional class element should not be displayed
To achieve that, you might include onload and oninput events as follows:
<body onload="empty_check()">
<form>
<textarea oninput="empty_check()"></textarea>
<input type="email" oninput="empty_check()">
<button type="submit"></button>
</form>
<form>
<textarea oninput="empty_check()"></textarea>
<input class="optional" type="email" oninput="empty_check()">
<button type="submit"></button>
</form>
<form>
<input type="email" oninput="empty_check()">
<button type="submit"></button>
</form>
... etc ...
</body>
Where empty_check() function is the following javascript code:
function empty_check() {
var list = document.getElementsByTagName("form");
var n = list.length;
for(var i=0; i<n; i++) {
if(list[i].getElementsByTagName("textarea").length != 0) {
if( (list[i].getElementsByTagName("textarea")[0].value.length != 0) || (list[i].querySelector('input[type=email]').value.length != 0) ) {
list[i].getElementsByTagName("button")[0].disabled = false;
if(list[i].getElementsByClassName("optional").length != 0){
list[i].getElementsByClassName("optional")[0].style.display = 'block';
}
} else {
list[i].getElementsByTagName("button")[0].disabled = true;
if(list[i].getElementsByClassName("optional").length != 0){
list[i].getElementsByClassName("optional")[0].style.display = 'none';
}
}
} else {
if(list[i].querySelector('input[type=email]').value.length != 0) {
list[i].getElementsByTagName("button")[0].disabled = false;
if(list[i].getElementsByClassName("optional").length != 0){
list[i].getElementsByClassName("optional")[0].style.display = 'block';
}
} else {
list[i].getElementsByTagName("button")[0].disabled = true;
if(list[i].getElementsByClassName("optional").length != 0){
list[i].getElementsByClassName("optional")[0].style.display = 'none';
}
}
}
}
}
Issue
The javascript code for this simple task seems to be over-complicated:
- too many lines
- too many if-else conditions
- needs some unusual functions such as
querySelector
Therefore, is it possible to simplify that?
ps: no jQuery, only javascript
#Follow-up
Based on comments and answers, I'm now using the following html code:
<body onload="handleAllFormState()">
<form>
<textarea oninput="handleFormState(forms[0])"></textarea>
<input type="email" oninput="handleFormState(forms[0])">
<button type="submit"></button>
</form>
<form>
<textarea oninput="handleFormState(forms[1])"></textarea>
<input class="optional" type="email" oninput="handleFormState(forms[1])">
<button type="submit"></button>
</form>
<form>
<input type="email" oninput="handleFormState(forms[2])">
<button type="submit"></button>
</form>
... etc ...
</body>
And the following javascript code:
forms = document.getElementsByTagName("form");
function isFormEmpty(form) {
var list = form.querySelectorAll('textarea, input[type=email]');
var empty = true;
for (var i = 0; i < list.length; i++) {empty = empty && !list[i].value;}
return empty;
}
function handleFormState(form) {
var empty = isFormEmpty(form);
var optional = form.querySelector('.optional');
if (optional) {optional.style.display = empty? 'none' : 'block';}
form.querySelector('button').disabled = empty;
}
function handleAllFormState() {
for (var i = 0; i < forms.length; i++) {handleFormState(forms[i]);}
}
Much better than initially!