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>
Related
i am loading handlebar templates in the two div locations(like add and edit tabs both are jsps) from the same page. so i have duplicate elements in the DOM object, since it is a template which is coming from server location. you can see the sample code below
<div id="add">
<div id="exploding">
<input type="text" name="city" id="city"/>
<input type="text" name="state" id="state"/>
...
</div>
</div>
<div id="edit">
<div id="exploding">
<input type="text" name="city" id="city"/>
<input type="text" name="state" id="state"/>
...
</div>
</div>
I can't modify the div container ids i.e exploding since some javascript functions attached to it based on that id to explode address field.
here the problem is if i made any changes to the edit tab, address "exploding" div, it is effecting in add tab address "exploding" since ids are repeated. i have tried jquery detach method to remove the dom elements, but didn't get proper result. Its a web application based on spring boot.
is there any possibility to load jsps dynamically through jquery, i have tried load method as well, but the call is going through controller. I didn't feel it as better option.
Thanks & Regards
krishna K
I am trying to set up a set of radio buttons using Bootstrap in javascript
The code I am trying is:
var viewedFilterButtons = $("<div>").addClass("btn-group").attr("data-toggle", "buttons");
viewedFilterButtons.append($("<label>").addClass("btn").addClass("btn-primary").append($("<input>").attr("id", "viewed-important").attr("type","radio").attr("name","viewed-filter").attr("value","important").attr("autocomplete","off").append($("<label for=\"viewed-important\">").text("Important"))));
viewedFilterButtons.append($("<label>").addClass("btn").addClass("btn-primary").append($("<input>").attr("id", "viewed").attr("type","radio").attr("name","viewed-filter").attr("value","viewed").attr("autocomplete","off").text("Reviewed")));
(note that I'm trying 2 different things to get the text into the button -- in the first input I'm embedding a label and in the second I'm just trying to set the text of the input. Neither is working right now.)
This generates the following HTML:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="viewed-important" name="viewed-filter" value="important" autocomplete="off" type="radio">
<label for="viewed-important">Important</label>
</input>
</label>
<label class="btn btn-primary">
<input id="viewed" name="viewed-filter" value="viewed" autocomplete="off" type="radio">Reviewed
</label>
</div>
Note that the input doesn't seem to be closed in the second case. I'm getting this HTML from the Web Console Inspector in Firefox.
What I'm getting is a set of tiny radio buttons with no text. The toggle behavior works fine.
What am I missing here? When I manually generate a set of labels for radio buttons like this directly in the HTML it works fine.
<label class="btn btn-primary">
<input id="viewed" name="viewed-filter" value="viewed" autocomplete="off" type="radio">Reviewed</input>
</label>
This is because you append the <label> inside the <input/>.
You're trying to do this :
<input> <label>Important</label> </input>
However, <input/> is a self-closing tag, not a container like a <div>.
You should design your structure like this :
<label> <input/> Important </label>
input elements cannot have children w3 specification. Put the label after it.
var viewedFilterButtons = $("#mainDiv").addClass("btn-group").attr("data-toggle", "buttons");
var inputElem = $("<input>").attr("id", "viewed-important").attr("type","radio").attr("name","viewed-filter").attr("value","important").attr("autocomplete","off");
viewedFilterButtons.append(inputElem)
.append($("<label for=\"viewed-important\">").addClass("btn").addClass("btn-primary").text("Important"));
<link href="https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<div id="mainDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am making a sign up page and the user have the option to either sign up as a an employee or as an administrator(radio buttons). If he chooses to signup as an administrator i need to add a Password field that he is supposed to know(the company should provide him with that password).
Here is what i tried
<form method="post" action="Registration.php" onSubmit="return valid(this)">
#some code here
Admin<input type="radio" name="radiobutton" id="v2" value="v2" onclick="ch()">
<script type="text/javascript">
function ch(){
var newInput=document.createElement("input");
newInput.setAttribute('type','password');
newInput.setAttribute('name','password');
newInput.setAttribute('value','password');
document.getElementById("v2").appendChild(newInput);
}
</script>
NOTE: This is my first time using javascript!
Edited the code,still doesn't work.
You created a new <input> element, but you never put it into the document.
If you want to see the element, you need to add it somewhere in the DOM tree by calling appendChild() on an existing element.
Jquery is much easier to use:
$(selector).append("<input type="password" name="password" value="password">");
Better way is to have a class called "hidden" that hides the element which has that class. so if we click on the employee radio, we give the admin fields' div the hidden class , thus hiding it and remove the hidden class from employee fields.
Admin<input type="radio" name="radiobutton" id="v2" value="v2" onclick="changefields(1)">
Employee<input type="radio" name="radiobutton" id="v2" value="v2" onclick="changefields(2)">
<div id='employees' class='hidden'>
<!-- input for employees -->
</div>
<div id='admins' class='hidden'>
<!-- input for admins -->
</div>
<script>
function changefields(type){
if(type==2){
$("#employees").removeClass("hidden");$("#admins").addClass("hidden");
}
else{
$("#admins").removeClass("hidden");$("#employees").addClass("hidden");
}
}
</script>
<style>.hidden{display:none}</style>
You need to create a new element.
var newInput=document.createElement("input");
and append the same element to DOM by appendChild().
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();
});
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.