I have a div with the ID wrapper, and I am using .append() to insert some content at the end of that div, like this:
$("#wrapper").append('Some divs and input fields');
However, I also want the option to insert a new child after the focused content div in the wrapper.
So if the HTML output looks like this:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First div
<input type="text" />
</div>
</div>
<div class="content">
<div class="subcontent">
Second div
<input type="text" />
</div>
</div>
</div>
And the input field in the first content div is in focus, I want to insert an element after that div, so I get this:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First div
<input type="text" />
</div>
</div>
<div class="content">
<div class="subcontent">
Third div
<input type="text" />
</div>
</div>
<div class="content">
<div class="subcontent">
Second div
<input type="text" />
</div>
</div>
</div>
How would I do this?
$(':focus') will give you the focused element and closest('.content') gives its ancestor with class content and then you use after to insert the element.
$(':focus').closest('.content').after(whatever_element_you_want_to_add);
As you said
The append function is triggered by pressing enter.
You can try this code. It gets triggered on pressing enter key on input :
HTML:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First div
<input type="text" />
</div>
</div>
<div class="content">
<div class="subcontent">
Second div
<input type="text" />
</div>
</div>
</div>
JS:
$('#wrapper').on("keyup",'input',function(e){
if(e.keyCode == 13)
{
$(this).closest('.content').after("<div class='content'> <div class='subcontent'>Some div<input type='text' /> </div></div>")
}
});
Fiddle
Related
i can not change the html part of the project
i just can change the js
i suppose to get the value of the input which is the div in the div with no id
for example like this:
<div id="s-Input_1" class="pie text firer commentable non-processed" datasizewidth="235px" datasizeheight="40px" dataX="117" dataY="39" ><div class="backgroundLayer">
</div>
<div class="paddingLayer">
<div class="content">
<div class="valign">
<input type="text" value="Productid" maxlength="100" tabindex="-1" placeholder=""/>
</div>
</div>
</div>
</div>
and
alert(document.getElementById("myText").value);
Just use querySelector. Here is what you need.
alert(document.querySelector(".valign>input").value)
<div id="s-Input_1" class="pie text firer commentable non-processed" datasizewidth="235px" datasizeheight="40px" dataX="117" dataY="39" ><div class="backgroundLayer">
</div>
<div class="paddingLayer">
<div class="content">
<div class="valign">
<input type="text" value="Productid" maxlength="100" tabindex="-1" placeholder=""/>
</div>
</div>
</div>
</div>
You need to specify the id for the input
Then this section here can read the value in it
alert(document.getElementById("myText").value)
You can use getElementsByTagName to get the elements without id.
alert(document.getElementByTagName("input")[0].value);
I have this little html code:
<!-- one -->
<div id="parent-one">
<div id="head-one">
<!-- some code here -->
</div>
<div>
<div>
<input type='text' value='x' name='name'>
</div>
</div>
</div>
<!-- two-->
<div id="parent-two">
<div id="head-two">
<!-- some code here -->
</div>
<div>
<div>
<input type='text' value='y' name='name'>
</div>
</div>
</div>
As you can see the input text is inside a child that has as parent the next div after a div with an id. Is there a way to get the input value without setting up an id for itself based on head-n id?
I have parent-x divs and I could set an id for each input but then I guess - not sure - I would have to define a variable that contains the input value x times -foreach id and I would like to avoid that.
So far I tried this:
//head-x being either one of those head divs
var test = $('#head-x').next('div').find('input:text').val();
//head-x being either one of those head divs
var test = $('#head-two').next('div').find('input:text').val();
console.log(test)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- one -->
<div id="parent-one">
<div id="head-one">
<!-- some code here -->
</div>
<div>
<div>
<input type='text' value='x' name='name'>
</div>
</div>
</div>
<!-- two-->
<div id="parent-two">
<div id="head-two">
<!-- some code here -->
</div>
<div>
<div>
<input type='text' value='y' name='name'>
</div>
</div>
</div>
I saw this comment...
I need to send that value trough ajax to a php script - that happens onclick on head-x
So you already have a click handler for the Ajax...
From what I see, you could make a good use of the attribute selector and the "begins with" operator ^=.
And then, use $(this) instead of $("#head-one") or $("#head-two").
$("[id^='head-']").on("click",function(){
var inputValue = $(this).next().find("input").val();
console.log(inputValue);
});
[id^='parent']{
padding:1em;
}
[id^='head']{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- one -->
<div id="parent-one">
<div id="head-one">
Click on the "head-one"!
</div>
<div>
<div>
<input type='text' value='x' name='name'>
</div>
</div>
</div>
<!-- two-->
<div id="parent-two">
<div id="head-two">
Click on the "head-two"!
</div>
<div>
<div>
<input type='text' value='y' name='name'>
</div>
</div>
</div>
Instead of id use class and You can bind click event handler and read input value from next div.
$(function(){
$("div.head").on("click", function(){
var $next = $(this).next();
var value = $next.find('input[type=text]').val();
console.log(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent-one">
<div class="head">
Head 1
<!-- some code here -->
</div>
<div>
<div>
<input type='text' value='x' name='name'>
</div>
</div>
</div>
<!-- two-->
<div id="parent-two">
<div class="head">
Head 2
<!-- some code here -->
</div>
<div>
<div>
<input type='text' value='y' name='name'>
</div>
</div>
</div>
I have HTML like this
<div class="wsdRow">
<div class="ib swsLbl">(new)</div>
<div class="ib swsLbl">
<input type="text" class="wsd">
</div>
<div class="ib swsLbl">
<input type="text" class="wsAmount numbersOnly">
</div>
<div class="ib swsLbl">
<button class="saveWC">save</button>
<button class="delWC">-</button>
<div class="wcResult ib"></div>
</div>
<div class="clr"></div>
</div>
Then I bind the 'saveWC' button like this with a test function
$(".saveWC").click(function(){
var thisDesc= $(this).parent().siblings().find(".wsd").val();
console.log(thisDesc);
});
What I want is to target the wsd class which is a child of the button's parent's sibling but I keep getting "undefined".
for the following:
<div class="section grouping">
<div class="sectionControl">
<div class="parent row errorOn">
<div class="validGroupControl">
<div class="row2 itemWrap clearfix">
<label>Login1 (adress e-mail)<span class="iconReq"> </span>:</label>
<input type="text" class="text">
</div>
<div class="itemWrap clearfix">
<label>Input field1<span class="iconReq"> </span>:</label>
<input type="password" class="text">
</div>
remove
</div>
</div>
</div>
<div class="row addControl">
Add
</div>
</div>
when I run this:
$('div.addControl a.button').click(function () {
var parent = $(this).closest('.section.grouping').find('.parent:last');
parent.after(parent.clone());
});
it clones 'parent' section which works great. But i want it to clone it without values in the input fields.
what's the best way to clear all input fields in a section?
thanks
Can't see any reason why this won't work..
var oClone = parent.clone();
oClone.find("input").val("");
parent.after(oClone);
if we have div like this
<div id="1">
<input type="text" />
<div id="2"></div>
</div>
<div id="3">
<div id="4">
<input type="text" />
</div>
</div>
now if i want to jump from div of id=4 to input tag of <div id="1">
using parent child relationship how can i jump to that particular input tag.
Please help
Thanks..
$('#4').parent().prev().children('input:first')
Of course this assumes that div#1 is always the previous sibling of div#3, like you have in the example.
document.getElementById("4").childNodes[0].
Though if you are using jquery it would be something like:
$("#4").children(":input")
IDs can't start with a number, so I change your code to:
<div id="id1">
<input type="text" />
<div id="id2"></div>
</div>
<div id="id3">
<div id="id4">
<input type="text" />
</div>
</div>
So, that makes it:
$("#id4").parents("body").children("div:first").children("input")
Another, shorter version:
$("#id4").parents("body").find('input')
Or the fast way:
$("input:first")