I have the below HTML. Can someone please tell me how I can loop through all the divs with the class "tab-pane" and see if any element inside the div has a class
"input-validation-error" and then just change the background color of that div.
In this example the first div and the third div with "tab pane" class should have their background property change. I know how to loop through each but not sure how to look for specific properties inside child elements.
<ul id="sellerAppTabs">
<li title="General Information">Section I</li>
<li title="Affiliate Information">Section II</li>
<li title="Affiliate Information">Section II</li>
</ul>
<div class="tab-pane" id="tab">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error">
<input type="text" class="input-validation-error">
</div>
</div>
<div class="tab-pane" id="tab1">
<div class="test2">
<h1>Some Data</h1>
<input type="text">
<input type="text">
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error">
<input type="text" class="input-validation-error">
</div>
</div>
So I have to loop through the a tags in the sellerAppTabs ul section which have their ids matched to the divs and then if the div has any "input-validation-error" class then I have to change the background color of the li above the a tag.
Use .has() or :has()
$('.tab-pane').has('.input-validation-error').css({background: '#C55'})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error">
<input type="text" class="input-validation-error">
</div>
</div>
<div class="tab-pane">
<div class="test2">
<h1>Some Data</h1>
<input type="text">
<input type="text">
</div>
</div>
<div class="tab-pane">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error">
<input type="text" class="input-validation-error">
</div>
</div>
this worked for me:
<script type="text/javascript">
var els = document.getElementsByClassName('input-validation-error');
for(var x=0; x<els.length; x++){
if( els[x].value == '' ){
els[x].parentNode.parentNode.style.backgroundColor = '#f00';
}
}
</script>
No need to loop. Just use a :has() selector
$('.tab-pane:has(.input-validation-error)').css('background', 'red');
$('.tab-pane:has(.input-validation-error)').css('background', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="tab-pane">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error">
</input>
<input type="text" class="input-validation-error">
</input>
</div>
</div>
<div class="tab-pane">
<div class="test2">
<h1>Some Data</h1>
<input type="text">
</input>
<input type="text">
</input>
</div>
</div>
<div class="tab-pane">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error">
</input>
<input type="text" class="input-validation-error">
</input>
</div>
</div>
Since you are using jQuery, a simple .each() function would suffice. Followed by .find() for the input validation class
$('.tab-pane').each(function(){
$(this).find('.input-validation-error').each(function() {
//change the color
});
});
You can do this with each and find:
$(".tab-pane").each(function() {
if ($(this).find(".input-validation.error")) {
// $(this) points to the div.tab-pane!
$(this).css("background-color", "red")
}
});
You could use JQuery filter functionality:
$('.tab-pane')
.filter(':has(.input-validation-error)');
.css('background', 'red');
Get the elements with querySelectorAll
Filter the desired elements with filter
Iterate with forEach
[].filter.call(
document.querySelectorAll('.tab-pane'),
function(elem) { return elem.querySelector('.input-validation-error'); }
).forEach(function(elem) { elem.style.backgroundColor = color; });
[].filter.call(
document.querySelectorAll('.tab-pane'),
function(elem) { return elem.querySelector('.input-validation-error'); }
).forEach(function(elem) { elem.style.backgroundColor = '#C55'; });
<div class="tab-pane">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error"/>
<input type="text" class="input-validation-error"/>
</div>
</div>
<div class="tab-pane">
<div class="test2">
<h1>Some Data</h1>
<input type="text"/>
<input type="text"/>
</div>
</div>
<div class="tab-pane">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error"/>
<input type="text" class="input-validation-error"/>
</div>
</div>
Try and stick with Vanilla JS by using getElementsByClassName().
getElementsByClassName() returns a list of elements of which you can iterate through for your operations.
Related
I have a chatbubble that when clicked, I want it to disappear and a chat window should come up.
The chat window is the wrapper div. I set it display = 'none' in the html code below. Then in the onclick of chatBubble I show the wrapper div using jQuery
So initially I shouldn't see the chat window. But I see it. Also when I click on the chatbubble, I get error Uncaught TypeError: "#wrapper".show is not a function. What am I missing?
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" display = 'none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
Relevant portion of javascript
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
('#wrapper').show();
})
});
Please suggest.
You are setting the style property in the wrong way. You have to set it through style attribute. show() is a jQuery function and you are missing that just before ('#wrapper').show(); which leads to the error.
Try the following:
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
$('#wrapper').show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" style='display:none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
<div class="div" id="div">
<div class="row">
<div class="col1">
<input type="text">
<!--I need to get a value of these inputs-->
</div>
<div class="col2">
<input type="text">
<!--I need to get a value of these inputs-->
</div>
</div>
<div class="row">
<div class="col1">
<input type="text">
<!--I need to get a value of these inputs-->
</div>
<div class="col2">
<input type="text">
<!--I need to get a value of these inputs-->
</div>
</div>
</div>
How to get values of all of inputs in div and how to check in which div input in(col1 or col2);
in my case div with class "row" will be added via firebase database.
const inputs = document.querySelectorAll(".div > .col");
alert(inputs.value);
Using JavaScript, try looping with forEach
var inputElem = document.querySelectorAll(".row input");
inputElem.forEach(function(obj){
console.log(obj.value)
})
Snippet:
var inputElem = document.querySelectorAll(".row input");
inputElem.forEach(function(obj){
console.log(obj.value)
})
<div class="div" id="div">
<div class="row">
<div class="col1">
<input type="text" value="one">
<!--I need to get a value of these inputs-->
</div>
<div class="col2">
<input type="text" value="two">
<!--I need to get a value of these inputs-->
</div>
</div>
<div class="row">
<div class="col1">
<input type="text" value="three">
<!--I need to get a value of these inputs-->
</div>
<div class="col2">
<input type="text" value="four">
<!--I need to get a value of these inputs-->
</div>
</div>
</div>
I think this could work:
$("div input").each(function(){
// Get the value:
console.log($(this).val());
// check in which div input in(col1 or col2)
console.log($(this).closest("div").attr("class"));
});
Try this:
const inputs = document.getElementById('div').getElementsByTagName('input');
console.log(inputs[0].value, inputs[1].value);
See an example here: https://jsfiddle.net/xbdd6q13/
I have an HTML page generated with some default values for input fields. Here is the HTML and JavaScript:
$('#trigger').click(function () {
var content = $(this).parent().find('.content');
content.find('#name').val("Young man");
content.find('#age').val("25");
alert(content.find('#name').val());
alert(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>
I am trying to get the div assigned to a variable, then change the values of name and age through this handle. The first alert method confirms that they are changed. But why is content.html() still outputs the original html? How can I make html() output the updated data?
jQuery .val() method never updates the value attribute. You can change it with .attr() method.
$('#trigger').click(function() {
var content = $(this).parent().find('.content');
content.find('#name').attr("value", "Young man");
content.find('#age').attr("value", "25");
alert(content.find('#name').val());
alert(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>
Assign the new value using attr().
$('#trigger').click(function () {
var content = $(this).parent().find('.content');
content.find('#name').attr("value", "Young man");
content.find('#age').attr("value", "25");
console.log(content.find('#name').val());
console.log(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>
New to jquery. I want to do a slideToggle to accordion collaps and expand a section.
When clicking the header, I want to expand/collapse everything in "#section".
<h3 id="assignments">Assignments</h3>
<div id="section">
Assignment Count <input type="number" name="assignment_count">
</div>
I have the code that works below. But I want to make it generic so that if I have any header I click, it will only collapse the section below it and not all div's with an id of "#section"
$(document).ready(function(){
$("h3").click(function(){
$("#section").slideToggle();
});
});
You can use DOM traversal to achieve this. In the click handler for the h3, the next() function can be used to retrieve the following element. Try this:
$('h3').click(function() {
$(this).next('div').slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Assignments</h3>
<div>
Assignment Count
<input type="number" name="assignment_count">
</div>
<h3>Foo</h3>
<div>
Foo Count
<input type="number" name="foo_count">
</div>
<h3>Bar</h3>
<div id="section">
Bar Count
<input type="number" name="bar_count">
</div>
You can use .next() which gets the immediately following sibling.
$(document).ready(function(){
$("h3").click(function(){
$(this).next("#section").slideToggle();
});
});
Also, since you want to make it generic do not use IDs. Use classes instead. Something like this
<h3 class="assignments">Assignments</h3>
<div class="section">
Assignment Count <input type="number" name="assignment_count">
</div>
$("h3").click(function(){
$(this).next(".section").slideToggle();
});
$("h3").click(function() {
$(this).next(".section").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 class="assignments">Assignments 1</h3>
<div class="section">
Assignment Count
<input type="number" name="assignment_count" />
</div>
<h3 class="assignments">Assignments 2</h3>
<div class="section">
Assignment Count
<input type="number" name="assignment_count" />
</div>
<h3 class="assignments">Assignments 3</h3>
<div class="section">
Assignment Count
<input type="number" name="assignment_count" />
</div>
<h3 class="assignments">Assignments 4</h3>
<div class="section">
Assignment Count
<input type="number" name="assignment_count" />
</div>
using :header you can trigger "on" click event on any header say h1,h2,h3,h4,h5,h6..
$(document).ready(function(){
$(":header").on('click',function(){
$(this).nextUntil(":header").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="assignments1">Assignment1</h1>
<div id="section">
Assignment Count <input type="number" name="assignment_count">
</div>
<h2 id="assignments2">Assignments2</h2>
<div id="section">
Assignment Count <input type="number" name="assignment_count">
</div>
<h3 id="assignments3">Assignments3</h3>
<div id="section">
Assignment Count <input type="number" name="assignment_count">
</div>
In my code i am using six tabs now i want to know which tab is active .one more thing is that each tab call the same function on clicking and i want to check activation tab(either tab1,tab2 ..) on button click which call other function and in that function i want to check active tab below i explain my problem with code
If i say my problem in one line that want to know active tab on clicking button which call javascript function ,function not on tab clicking*
here i m not putting all code of pages but only require code ,Hope you understand my problems and i provide needed code
Thanks in advance
Add.jsp
This is the page on which i am using tabs
<form action="AddInspServlet" method="Post" enctype="multipart/form-data"> <div>
<div id="slider">
<div class="form-step" >
<div class="row">
<div class="form-left">container Number *</div>
<div class="form-right"><input type="text" id="fname" name="contno" class="form-input" onblur="sending(this.value)"/></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Container type *</div>
<div class="form-right"><input type="text" id="lname" name="conttype" disabled="disabled" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Inspection type *</div>
<div class="form-right">
<select id="gender" name="insptype">
<option value="0">Select</option>
<option value="Gate In">Gate In</option>
<option value="Gate Out">Gte Out</option>
</select>
</div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Place</div>
<div class="form-right"><input type="text" id="places" name="places" class="form-input" /></div>
<div class="form-error"></div>
</div>
</div>
<div class="form-step" >
<div class="form-left1">
<div class="container1">
<ul class="tabs">
<li>Left</li>
<li>Right</li>
<li>Top</li>
<li>Bottom</li>
<li>Front</li>
<li>Rear</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div id="hidendiv"></div>
<h2>Left Side</h2>
<div id="leftside">
</div>
<input type="file" name="img1" id="img1" onchange="return ValidateFileUpload('img1')" />
</div>
<div id="tab2" class="tab_content">
<h2>Right Side</h2>
<div id="rightside">
</div>
<input type="file" name="img2" id="img2" onchange="return ValidateFileUpload('img2')" />
</div>
<div id="tab3" class="tab_content">
<h2>Top Side</h2>
<div id="topside">
</div>
<input type="file" name="img3" id="img3" onchange="return ValidateFileUpload('img3')" />
</div>
<div id="tab4" class="tab_content">
<h2>Bottom Side</h2>
<div id="bottomside">
</div>
<input type="file" name="img4" id="img4" onchange="return ValidateFileUpload('img4')" />
</div>
<div id="tab5" class="tab_content">
<h2>Front Side</h2>
<div id="frontside">
</div>
<input type="file" name="img5" id="img5" onchange="return ValidateFileUpload('img5')" />
</div>
<div id="tab6" class="tab_content">
<h2>Rear Side</h2>
<div id="rearside">
</div>
<input type="file" name="img6" id="img6" onchange="return ValidateFileUpload('img6')" />
</div>
</div>
</div>
</div>
<div class="form-right1">
<img src="images/noimg.jpg" height="288px" width="400px" id="blah">
</div>
<div style=" width: 200px; margin-top:225px; margin-left:300px">Remarks: <input type="text" width="100px" name="remark"/></div>
</div>
</div>
</div>
<div class= "ash" style="width:auto; margin-left:35%; float: left;">
<input type="submit" name="btn" id="submit" value="AddInspection" onclick="im()" />
<input type="submit" name="btn" value="Cancel"/>
</div>
</form>
JAVA Script function:
This is the function on which i want to know which tab is active that is defined in above jsp
<script type="text/javascript">
function im()
{
/*alert("calling im function");
var tabname = document.getElementById("tab1");
if(tabname){
alert("tab1 is active");
}else{
alert("tab 1 is not active");
}*/
if($('#img1').val()=="" || $('#img2').val()=="" || $('#img3').val()=="" || $('#img4').val()=="" || $('#img5').val()=="" || $('#img6').val()=="")
{
alert("Please select image");
$('#submit').prop('disabled',true);
}
else
{
$('#submit').prop('disabled',false);
}
}
Try like
$('.tab').click(function(){
var a=$(this).attr('id');
$('#sample').html('Active Tab is'+a);
});
Fiddle
you can assign same class to all tab and bind the click function in document ready, you will get the current object by 'this'.
$('.tab').click(function(){
$(this).val();
});
$('.tab').click(function(){
var x=$(this).prop('id');
$('#lbl').html('Active Tab'+ x);
});
I'm new here but you could add a worthless class to the active tab on click, then on the button click retrieve the id or whatever you want.
jQuery
//edit: added function to add and remove class, replaced text to illustrate
$(function () {
$('.tab_content').click(function () {
$('.tab_content').removeClass('active').text('');
$(this).addClass('active').text('am active');
})
$('#button').click(function () {
$('.tab_content').each(function () {
if ($(this).hasClass('active')) {
alert($(this).attr('id')+" is the active tab");
alert($(this).text()+" is the text");
}
});
});
});
html
<div id='1' class='tab_content'>not</div>
<div id='2' class='tab_content active'>am active</div>
<div id='3' class='tab_content'>not</div>
<div id='4' class='tab_content'>not</div>
<button id='button' style='width:50px; height:50px;'>Click</button>
Here is a working fiddle: http://jsfiddle.net/Lv5VJ/2/
I'm sure there are better ways but hey, I'm trying haha.