everybody!
I want to do following: When clicked on check box one or more div tags must change their css-style. I have this little javascript:
function changeStyle(o) {
if(o.checked) {
document.getElementById(o.getAttribute("value")).setAttribute('class','on');
}
else {
document.getElementById(o.getAttribute("value")).setAttribute('class','off')
}
}
and the html is:
<input type="checkbox" onclick="changeStyle(this);" value="div1" /> Div1<br />
<input type="checkbox" onclick="changeStyle(this);" value="div2" /> Div2<br />
<input type="checkbox" onclick="changeStyle(this);" value="div3" /> Div3<br />
<input type="checkbox" onclick="changeStyle(this);" value="div4" /> Div4<br />
<input type="checkbox" onclick="changeStyle(this);" value="div5" /> Div5<br />
<div id="div1" class="off">I'm in div 1</div><br />
<div id="div2" class="off">I'm in div 2</div><br />
<div id="div3" class="off">I'm in div 3</div><br />
<div id="div4" class="off">I'm in div 4</div><br />
<div id="div5" class="off">I'm in div 5</div><br />
<div id="div2" class="off">I'm in div 2</div><br />
But in this case when I have more than one div with the same id only the first div changes its style from .on to .off
How can I make so when I click on check box to change the css-style to all div tags with same id as the check box value?
Thank you in advance!
id must always be unique instead if id use class attribute that must work something like this
> <div class="div1 off">I'm in div 1</div><br />
Elements in the DOM shouldn't have the same id; they should always be unique. Consider giving the divs the same class, eg class="div1", etc. Then do getElementsByClassName on the checkbox value.
To change the css-style to all div tags. you must use classes not id's.
So change div id="div1" to div class="div1".
When you use an id, the browser will search for the ID, once it finds the FIRST id, it uses that AND STOPS searching, it doesnt not continue to look for more id's.
If you use classes, it will search the entire page for as many classes as it can find, then do whatever you want to EACH class..
So basically, change your id's to classes and everything should be fine.
Update
Here is a working JSFiddle:
Basically, first I changed the function name to lowercase (i dont know why, but "changeStyle" was not found in JSFiddle, but "changestyle" was.
BTW - Your ID's are fine, you dont need to replace them for classes. You function was just not being found.
Related
I'm new using Jquery.
I'm trying get Objects that are part of a form when i press a button.
My problem is that i have multiples forms with the same class "formulario"and when I press the button Jquery give me all forms that has the same type class and I just want the forms where the button was pressed.
I have something like this:
<div class ="card">
<div class = "card-header">
First Form
</div>
<div class= "card-body">
<form class="formulario">
<label>Input one</label>
<input type text= "text"></input>
<label>Input Two</label>
<input type text= "text"></input>
<form/>
<button class= "btn">Press</button>
<div/>
</div>
<div class ="card">
<div class = "card-header">
Second Form
</div>
<div class= "card-body">
<form class="formulario">
<label>Input one</label>
<input type text= "text"></input>
<label>Input Two</label>
<input type text= "text"></input>
<form/>
<button class= "btn">Press</button>
<div/>
</div>
I tried using Jquery with something like this:
$('.btn').on("click", function () {
$(this).parents().find('.formulario');
});
it give me all the forms that have the class "formulario", but I just want the form where the button was pressed.
In other words, I just want to look for the parents where the button is, I don't want to look in all html document.
In order to get the nearest formulario class you can use .closeset.
$('.btn').on("click", function () {
$(this).closeset().find('.formulario');
});
Keep in mind that if you include the button inside the form tag and add the attribute type=submit to it it will trigger the onsubmit method from the current form. There you can take action based on that method and semantically that should be the correct way.
I guess the closest method from JQuery also might work, but it should be easier to do it with HTML5 form way.
I am having a difficult time targeting the closest div sitting on top of my button element. The markup is here:
<div class="row kennelEntry">
<label for="kennel-1">Name of Kennel</label>
<input type="text"
maxlength="50"
tabindex="1"
name="kennel-1"
id="kennel-1" />
</div>
<button class="duplicateKennel">New Kennel</button>
When .duplicateKennel is clicked, I want to grab the .kennelEntry element, so that I can add a new element directly underneath.
For full disclosure, the goal here is when button is clicked, I can duplicate that entire .row, to build a dynamic form where user can create as many entries and those are saved in my backend. When duplicated, I just need to alter the label and name properties for the label and input. I'm just having a hard time targeting the closest kennelEntry to the button being targeted.
You can use jQuery's .prev() for that :
$('.duplicateKennel').on('click', function(){
$(this).before($(this).prev().clone());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row kennelEntry">
<label for="kennel-1">Name of Kennel</label>
<input type="text" maxlength="50" tabindex="1" name="kennel-1" id="kennel-1" />
</div>
<button class="duplicateKennel">New Kennel</button>
Consider the following code:
<form id='f' style='display: none'>
<input type='text' id='style'/>
</form>
<button onclick='document.getElementById("f").style.display = "block"'>Click</button>
After clicking on the button, I would expect the form to become visible, but it doesn't. Why is that?
Note that if one of the following conditions is true it works as expected:
input id is not named "style"
another tag such as div is used instead of form
a non form element tag is used instead of input (i.e. tags such as p or div work fine; input, textarea and button don't)
Control elements inside a form become properties of form element also. So you are making the style property of the <form> reference an input by using style as it's id.
If you add console.log(document.getElementById('f').style) it will return <input id="style"> instead of the expected style rules of the element
I would wrap the form in a container and apply inline style to that container instead. It's rare that you would use a <form> as a block element
<div id="f" style='display: none'>
<form>
<input type='text' id='style' />
</form>
</div>
<button onclick='document.getElementById("f").style.display = "block"'>Click</button>
It's because by using 'id='style' in the child element you are creating a reference to that child instead of accessing the style of the parent, in order to fix that you should use a different name for the id.
Example: https://jsfiddle.net/kwz3v9fx/2/
<form id='f' style='display: none'>
<input type='text' id='anotherName'/>
</form>
<button onclick='document.getElementById("f").style.display = "block"'>Click</button>
This is happening because inline style (style="display: none;") has priority over your internal style (document.getElementById("f").style.display = "block"). To fix this, use setAttribute instead:
<form id='f' style='display: none'>
<input type='text' id='style'/>
</form>
<button onclick='document.getElementById("f").setAttribute("style", "display: block;")'>Click</button>
You can see why this is because <form> elements are treated as objects in JavaScript, and when the child elements have either a name or id property, that is added as a property to the form object. See the snippet below:
console.log(document.getElementById("f").style);
/*This shows the <input> element rather than the styles
applied to the actual <form> element*/
<form id="f">
<input type="text" id="style" />
</form>
Let's say that I have some HTML like this:
<div>
<div class="required another_class">
<div class="some_class">
<input type="checkbox" name="some_check" value="" />
</div>
</div>
</div>
How do I find the parent div of the checkbox that has the class required? As you can see above, the div has two classes required and another_class. Therefore something like this:
$(':checkbox').closest('div[class=required]');
Will not work. I thought I could do something like:
$(':checkbox').closest('div').hasClass('required');
But that doesn't work either.
You can use CSS selector in .closest(), just like that :
$(':checkbox').closest('div.required');
Alternatively you can also use
$(':checkbox').parents('div.required')
I am trying to the select the next closest div to the input tag changed. When I run this nothing happens. I have tried the closest tag and the next tag.
$("input[id='declined']").change(function(){
$(this).next('div.textarea_container').fadeIn();
});
Html:
<div id="gcheckbox">
<input type="radio" id="name10" class="guidelines" name="Confirmed diagnosis of melanoma" value="Accepted">
<input type="radio" class="guidelines no_margin" name="Confirmed diagnosis of melanoma" id="declined" value="Declined">
<label>Confirmed diagnosis of melanoma</label>
<div class="textarea_container">
<textarea placeholder="reason" id="notearea0"></textarea>
</div>
</div>
I have now made a sample file.
http://jsfiddle.net/dMmuW/
jQuery's next function only works for the adjacent sibling element, use nextAll to get all sibling elements after the selected one and filter to the one you want.
$('#declined').change(function () {
$(this).nextAll('div.textarea_container').fadeIn();
});