Develop Reference

javascript get value of input which is a div in a div without id

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);

JQuery: input change -> find parent -> find next input -> value returns undefined

I am trying to get the next closest input of same class or different class that is available in the next row div child it says undefined am unable to get it.
[Fiddle]
$(".std_amt").change(function() {
alert($(this).parent('.row').next(".row").children("input.std_amt").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_0" id="relative_name_0" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_1" id="relative_name_1" value="">
<label class="help-inline"></label>
</div>
</div>
</div>

Try to use closest instead of parent like below
$(".std_amt").change(function() {
alert($(this).closest('.row').next(".row").find("input.std_amt").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_0" id="relative_name_0" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_1" id="relative_name_1" value="">
<label class="help-inline"></label>
</div>
</div>
</div>

.parent('.row') looks at the direct parent, it does NOT climb the tree. You need to use closest('.row') to reference the row. And you should use find() and not children() since the input is not a direct child.
$(this).closest('.row').next(".row").find("input.std_amt")

Append after focused child

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

Run .each loop to get value of contents inside divs

I have an html structure similar to the one below
<div id="factsParent" class="col-md-12">
<div id="factBody1" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" value="" class="fact form-control fact-title">
</div>
</div>
</div>
</div>
<div id="factBody2" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" id="fact2" value="" class="fact form-control fact-title">
</div>
</div>
</div>
</div>
I would like to loop through each of the .fact classes and then get the value of each input type=text
$('.fact').each(function(i){
console.log(this.$('input[name=fact]').val());
});
Running the code above gave me an undefined error, how would I run a loop through all .facts and then get value of the input[type=text]; I need to be able to get it exactly in this manner as I would be adding more input fields inside each div.

input elements has class .fact. you can simple iterate over input elements with class .fact by modifying the selector:
$('input.fact').each(function(i){
console.log($(this).val());//or this.value
});
for iterating over div elements:
$('div.fact').each(function(i){
console.log($(this).find('input').val());
});

The class .fact is quite overused in your markup; it is not clear whether you're referring to div.fact or input.fact. And there's another class that might cause confusion: input.Fact. So I have provided one of the possible ways you can approach this:
$('div.fact').each(function() {
console.log( $(':text', this).val() );
});
Of course, this code snippet is useless without an event. For example you may have a button which after the user has provided input the user would then click the button to fire up this code snippet as follows:
$('button').on('click', function() {
//above code
});
$('div.fact').each(function() {
console.log( $(':text', this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="factsParent" class="col-md-12">
<div id="factBody1" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" value="Test 1" class="fact form-control fact-title">
</div>
</div>
</div>
</div>
<div id="factBody2" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" id="fact2" value="Test 2" class="fact form-control fact-title">
</div>
</div>
</div>
</div>

Jquery clear form in a section

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);