One event handler for multiple keyup events

One event handler for multiple keyup events - javascript

I want to instantly display the user's input so each input has a corresponding display div.
the html:
<div class="row">
<div class="col-lg-3">
<?php echo $this->Form->input('contact_person'); ?>
</div>
<div class="col-lg-3">
<?php echo $this->Form->input('mobile'); ?>
</div>
<div class="col-lg-3">
<label for=""><?php echo __('Contact Person'); ?></label>
<div id="test1"></div>
</div>
<div class="col-lg-3">
<label for=""><?php echo __('Mobile'); ?></label>
<div id="test2"></div>
</div>
</div>
the javascript:
$('#PostContactPerson').keyup(function(){
$('#test1').html(this.value);
});
$('#PostMobile').keyup(function(){
$('#test2').html(this.value);
});
I am new to Javascript.. is there a way to combine all these same scripts so one key function handles all instant input display?

$('input').keyup(function(){
var outputId = null;
switch ($(this).attr('name')) {
case 'contact_person': outputId = '#test1'; break;
case 'mobile': outputId = '#test2'; break;
}
$(outputId).html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<input name='contact_person' type="text" />
</div>
<div class="col-lg-3">
<input name='mobile' type="text" />
</div>
<div class="col-lg-3">
<label for="">Contact Person</label>
<div id="test1"></div>
</div>
<div class="col-lg-3">
<label for="">Mobile</label>
<div id="test2"></div>
</div>
</div>
Consider this (I changed the HTML for the example to work, but your HTML is just fine)
But you may want to change the ID of your output fields:
$('input').keyup(function(){
$('#output_'+$(this).attr('name')).html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<input name='contact_person' type="text" />
</div>
<div class="col-lg-3">
<input name='mobile' type="text" />
</div>
<div class="col-lg-3">
<label for="">Contact Person</label>
<div id="output_contact_person"></div>
</div>
<div class="col-lg-3">
<label for="">Mobile</label>
<div id="output_mobile"></div>
</div>
</div>
In this case the ID of the output field is the same as the name of your input field, but with a prepended "output_"
Or if you have some fields which shoudl not work with output field, consider telling the input-fields that they have an output field:
$('input').keyup(function(){
var outputId = $(this).data('output');
if (outputId) {
$(outputId).html($(this).val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<input name='contact_person' type="text" data-output="#test1" />
</div>
<div class="col-lg-3">
<input name='mobile' type="text" data-output="#test2" />
</div>
<div class="col-lg-3">
<label for="">Contact Person</label>
<div id="test1"></div>
</div>
<div class="col-lg-3">
<label for="">Mobile</label>
<div id="test2"></div>
</div>
</div>
Notice the data-output-attribute to link to output-div.

You can find out the source of the event of the handler function two ways: this or event.target:
<div>first</div>
<div>second</div>
<script>
var divs = document.getElementsByTagName("div");
for(var i=0; i<divs.length; ++i) divs[i].addEventListener("click",function(e) {
alert(e.target.innerHTML);
alert(this.innerHTML);
});
</script>
Try clicking the divs on the fiddle.
There are many methods for DOM traversal, but if you want to use ids, you can create dictionary:
var targets = {
"PostContactPerson": "test1",
"PostMobile": "test2"
};
and the handler function would be
function(e) {
$('#'+targets[this.id]).html(this.value);
}

Related

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

On button click assign div inner html to input field value

What I want is when someone click on button, set the phone number to input value. The block is a loop in which different email and phone number appears. if some one click in a specific block get the phone number from that block only. Thanks.
<div class="block">
<div class="phone"><span>+1234567</span></div>
<div class="email">
<span>email#email.com</span>
<button>CLick</button>
</div>
</div>
<div class="block">
<div class="phone"><span>+7696686</span></div>
<div class="email">
<span>another#email.com</span>
<button>CLick</button>
</div>
</div>
<div class="block">
<div class="phone"><span>+897979877</span></div>
<div class="email">
<span>email2#email.com</span>
<button>CLick</button>
</div>
</div>
<input type="text" value="" id="phone">
Here is my code:
jQuery(document).ready(function() {
jQuery(".block button").click(function() {
var contents = jQuery(this).find(".phone span").text();
jQuery("#phone").val(contents);
});
});

You tagged jQuery so I'm assuming it's ok for you to receive an answer using jQuery. Try something similar to:
$('button').click(function(){
var phoneNumber = $(this).closest('.phone').find('span').text();
});

Try this-
jQuery(document).ready(function($) {
$(".block").each(function() {
$(this).find('button').click(function(){
var contents = $(this).parents('.block').find('.phone span').text();
$("#phone").val(contents);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
<div class="phone"><span>+1234567</span></div>
<div class="email">
<span>email#email.com</span>
<button>CLick</button>
</div>
</div>
<div class="block">
<div class="phone"><span>+7696686</span></div>
<div class="email">
<span>another#email.com</span>
<button>CLick</button>
</div>
</div>
<div class="block">
<div class="phone"><span>+897979877</span></div>
<div class="email">
<span>email2#email.com</span>
<button>CLick</button>
</div>
</div>
<input type="text" value="" id="phone">

Show hidden fields when checkbox is checked?

Hi I have multiple checkboxes of similar kind. I am applying javascript on the checkbox to show hidden fields. I have created a js code which works for a single checkbox, I want to apply a code that will work for all checkboxes.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox" type="checkbox">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox" type="checkbox">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
JS Code :-
var checkbox = document.getElementById('checkbox');
var box = document.getElementById('box');
checkbox.onclick = function() {
console.log(this);
if (this.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
};
Now the thing is i can make individual javascript for all checkboxes but that will contain numerous js code, I want that a single javascript function can unhide the elements from every checkbox when clicked. A single js code should work for all checkboxes. Kindly please provide a way of doing it with plain javascript or jquery.

Try this
on your check box's onchange event call function onchange="showHiddenField(this)"
and function is like
function showHiddenField(currentObject) {
var inputDiv = $(currentObject).parent().next();
if ($(currentObject).is(":checked")) {
$(inputDiv).show().focus();
}
else {
$(inputDiv).hide();
}
}

Use javascript function to make it.
function toggleFields(boxId, checkboxId) {
var checkbox = document.getElementById(checkboxId);
var box = document.getElementById(boxId);
checkbox.onclick = function() {
console.log(this);
if (this.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
};
}
toggleFields('box1', 'checkbox1');
toggleFields('box2', 'checkbox2');
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<!--<input id="checkbox" type="checkbox">-->
<input id="checkbox1" type="checkbox">
</div>
<!--<div class="col-md-4" id="box" style="display: none;">-->
<div class="col-md-4" id="box1" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<!--<input id="checkbox" type="checkbox">-->
<input id="checkbox2" type="checkbox">
</div>
<!--<div class="col-md-4" id="box" style="display: none;">-->
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

Okay this is how this works, each checkbox will have the id of its box as a class, so that when ever that checkbox is clicked, we will use its class to make its box visible. This will work even if you have 1000 checkboxes
var checkbox = document.querySelectorAll("#check1, #check2");
for (i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = function() {
if (this.checked) {
document.getElementById(this.getAttribute('class')).style['display'] = 'block';
} else {
document.getElementById(this.getAttribute('class')).style['display'] = 'none';
}
};
}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check1" type="checkbox" class="box">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check2" type="checkbox" class="box2">
</div>
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

Yes you can do this. Solution in below code. i did this using JQuery.
$('input[type="checkbox"]').click(function(){
console.log(this);
// $(this).parent().next().css('display','block');
$(this).parent().next().toggle('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input name="chkbox" type="checkbox">
</div>
<div class="col-md-4" data-box="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input name="chkbox" type="checkbox">
</div>
<div class="col-md-4" data-box="box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

First Please note down in your mind "id" is only apply on a single elemnt on each page for multiple element you can apply a "class"
id="checkbox" replace with class="checkbox"
in Jquery
$(document).ready(function(){
$(".checkbox").change(function(){
if($(this).prop("checked")){
$(this).parents(".row").find(".box").show();
}else{
$(this).parents(".row").find(".box").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input class="checkbox" type="checkbox">
</div>
<div class="col-md-4 box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input class="checkbox" type="checkbox">
</div>
<div class="col-md-4 box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

You can use querySelectorAll("[type='checkbox']") to select all checkbox and iterate through the elements using for loop.
Note : The id should be unique for each element.
var checkbox = document.querySelectorAll("[type='checkbox']");
for (i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = function() {
if (this.checked) {
document.getElementById(this.getAttribute('class')).style['display'] = 'block';
} else {
document.getElementById(this.getAttribute('class')).style['display'] = 'none';
}
};
}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check1" type="checkbox" class="box">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check2" type="checkbox" class="box2">
</div>
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

The most narrowed (static) suggestion from your code:
$(document).ready(function() {
$('input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}
});
});
Use class attribute to get dynamic process.

Tested on google Chrome works.
gets id of input takes the number after "checkbox(gets_target)" string. creates a id with adding this number to end of "box"+number string
HTML :
<input onChange="display_hidden_field(this)" id="checkbox2" type="checkbox">
<div id="box2" style="display:none;">content</div>
Javascript :
function display_hidden_field(checkbox){
var box_id = checkbox.id;
var search_pattern = /checkbox(.*?)$/g;
var number = search_pattern.exec(box_id);
number = number[1];
box_id = 'box'+number;
var box = document.getElementById(box_id);
if(checkbox.checked){
box.style.display = 'block';
}else{
box.style.display = 'none';
}
}

You can use code like this what i did in this your every checkbox id create like this "checkbox_1" and your box id like this box_1 and so on other numbers please check below code you will get idea what you need to do with your html and java script.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox_1" type="checkbox" onclick="myfunction(this);">
</div>
<div class="col-md-4" id="box_1" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox_2" type="checkbox" onclick="myfunction(this);">
</div>
<div class="col-md-4" id="box_2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
<script>
function myfunction(obj)
{
var element_index = obj.id.split("_");
console.log('box_'+element_index[1]);
var box = document.getElementById('box_'+element_index[1]);
if(obj.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
}
</script>
Here in script i have given function name myfunction but you can set your function name as per your need. may this is helpful for you.

Jquery\JS - Having troubles creating an array of objects from input fields

I have two rows, where each row consists of 3 input fields. I'm trying to create an array of objects, where each object has 3 properties (each input field data is saved in the corresponding property. I cant figure out how to create these objects. Right now the output is 6 objects with 1 property, instead of 2 objects with 3 properties each. Please advise.
JSfiddle example is here.
HTML:
<div id="reward-container"><!--rewards container -->
<div id="div1" class="">
<p class="s7-gift-title"><span class="reward-num"></span>first row</p>
<div class="text-left">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="form-group form-group-default">
<label class="to-uppercase">label1</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4">
<div class="form-group form-group-default">
<label class="to-uppercase">label2</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg- col-md-3 col-sm-3">
<div class="form-group form-group-default">
<label class="to-uppercase">label3</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div id="div2" class="">
<p class="s7-gift-title"><span class="reward-num"> </span>second row</p>
<div class="text-left">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="form-group form-group-default">
<label class="to-uppercase">label1</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4">
<div class="form-group form-group-default">
<label class="to-uppercase">label2</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg- col-md-3 col-sm-3">
<div class="form-group form-group-default">
<label class="to-uppercase">label3</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div><!--end rewards container -->
<button class="btn btn-lg btn-success" id="save">save</button>
JS:
$("#save").click(function(){
var giftsObjs=[];
var rewardContainer = $("#reward-container").children();
var inputPerRow;
for(var i=0;i<rewardContainer.length;i++){
inputPerRow=$(rewardContainer[i]).find("input");
for(var k=0;k<inputPerRow.length;k++){
if($(inputPerRow[k]).val()==""){
alert("Please fill all fields before you proceed.");
return;
}else{
switch (k){
case 0:
giftsObjs.push({
description: $(inputPerRow[k]).val()
});
break;
case 1:
giftsObjs.push({
value: $(inputPerRow[k]).val()
});
break;
case 2:
giftsObjs.push({
quantity: $(inputPerRow[k]).val()
});
break;
}//end of switch
}
}
}
console.log("array of gifts object: "+giftsObjs);
});

You can make use of .map().get() something like this:
$(function() {
$('#save').click(function(e) {
var arr = $('#reward-container > div').map(function(i, v) {
return {
description: $('input', this).eq(0).val(),
value: $('input', this).eq(1).val(),
quantity: $('input', this).eq(2).val()
};
}).get();
$('#logger').html('<pre>' + JSON.stringify(arr) + '</pre>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reward-container">
<!--rewards container -->
<div id="div1" class="">
<p class="s7-gift-title"><span class="reward-num"></span>first row</p>
<div class="text-left">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="form-group form-group-default">
<label class="to-uppercase">label1</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4">
<div class="form-group form-group-default">
<label class="to-uppercase">label2</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg- col-md-3 col-sm-3">
<div class="form-group form-group-default">
<label class="to-uppercase">label3</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div id="div2" class="">
<p class="s7-gift-title"><span class="reward-num"> </span>second row</p>
<div class="text-left">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="form-group form-group-default">
<label class="to-uppercase">label1</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4">
<div class="form-group form-group-default">
<label class="to-uppercase">label2</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg- col-md-3 col-sm-3">
<div class="form-group form-group-default">
<label class="to-uppercase">label3</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
<!--end rewards container -->
<button class="btn btn-lg btn-success" id="save">save</button>
<div id='logger'></div>

You were almost there but for some changes in the logic:
Updated the JavaScript:
$("#save").click(function(){
var giftsObjs=[];
var rewardContainer = $("#reward-container").children();
var inputPerRow;
for(var i=0;i<rewardContainer.length;i++){
var obj = {};
inputPerRow=$(rewardContainer[i]).find("input");
for(var k=0;k<inputPerRow.length;k++){
if($(inputPerRow[k]).val()==""){
alert("Please fill all fields before you proceed.");
return;
}else{
// Do not push the property to the array directly here. Instead add the property to an object.
switch (k){
case 0:
obj.description= $(inputPerRow[k]).val()
break;
case 1:
obj.value= $(inputPerRow[k]).val()
break;
case 2:
obj.quantity= $(inputPerRow[k]).val()
break;
}//end of switch
}
}
giftsObjs.push(obj);
}
console.log("array of gifts object: "+giftsObjs);
console.log(giftsObjs);
});
Working fiddle: http://jsfiddle.net/sandenay/cu6nebx2/3/

Updated your fiddle, checkout.
Istead of adding an item on each loop, I changed giftsObjs.push({...}) to
giftsObjs[i].property=value where giftsObjs[i] is an object in one line.
for(var i=0;i<rewardContainer.length;i++){
inputPerRow=$(rewardContainer[i]).find("input");
giftsObjs[i] = {};
for(var k=0;k<inputPerRow.length;k++){
if($(inputPerRow[k]).val()==""){
alert("Please fill all fields before you proceed.");
return;
}else{
switch (k){
case 0:
giftsObjs[i].description = $(inputPerRow[k]).val()
break;
case 1:
giftsObjs[i].value = $(inputPerRow[k]).val()
break;
case 2:
giftsObjs[i].quantity = $(inputPerRow[k]).val()
break;
}//end of switch
}
}
}

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>

Develop Reference

JavaScript is the programming language of the Web.

One event handler for multiple keyup events - javascript

Related

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

On button click assign div inner html to input field value

Show hidden fields when checkbox is checked?

Jquery\JS - Having troubles creating an array of objects from input fields

Run .each loop to get value of contents inside divs

Categories

Resources