I am trying to the find, and add, the value of indexed fields in each row of a table.
<tr>
<td><input name="Model[0].Name" type="hidden" value="0" /></td>
<td><input name="Model[0].Sched" type="hidden" value="0" /></td>
<td><input name="Model[0].Comp" type="hidden" value="0" /></td>
<td><input name="Model[0].NoShow" type="hidden" value="0" /></td>
<td><input name="Model[0].TotalHours" type="hidden" value="0" /></td>
</tr>
<tr>
<td><input name="Model[1].Name" type="hidden" value="0" /></td>
<td><input name="Model[1].Sched" type="hidden" value="0" /></td>
<td><input name="Model[1].Comp" type="hidden" value="0" /></td>
<td><input name="Model[1].NoShow" type="hidden" value="0" /></td>
<td><input name="Model[1].TotalHours" type="hidden" value="0" /></td>
</tr>
I would like to add Model[n].Sched + Model[n].Comp + Model[n].NoShow = Model[n].TotalHours for each row.
I think there must be a simple solution to this, but I must be searching for a solution using in the incorrect keywords.
TIA!
As I mentioned in my commend, iterate over each row and search for all inputs in each row. If you have to only get the inputs with the specific name, you can use the attribute contains selector:
$('tr').each(function() {
// Find the the input we want to set the value of
$(this).find('input[name*="TotalHours"]').val(
// Find the inputs we want to sum
$(this).find('[name*="Sched"], [name*="Comp"], [name*="NoShow"]')
// Get their values and convert them to numbers
.map(function() { return Number(this.value); })
.get()
// sum the values
.reduce(function(sum, v) { return sum + v; })
);
});
$('tr').each(function() {
// Find the the input we want to set the value of
$(this).find('input[name*="TotalHours"]').val(
// Find the inputs we want to sum
$(this).find('[name*="Sched"], [name*="Comp"], [name*="NoShow"]')
// Get theirs values and convert them to numbers
.map(function() {
return Number(this.value);
})
.get()
// sum the values
.reduce(function(sum, v) {
return sum + v;
})
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input name="[0].Sched" value="1" />
</td>
<td>
<input name="[0].Comp" value="2" />
</td>
<td>
<input name="[0].NoShow" value="3" />
</td>
<td>
<input name="[0].TotalHours" value="0" />
</td>
</tr>
<tr>
<td>
<input name="[1].Sched" value="4" />
</td>
<td>
<input name="[1].Comp" value="5" />
</td>
<td>
<input name="[1].NoShow" value="6" />
</td>
<td>
<input name="[1].TotalHours" value="0" />
</td>
</tr>
</table>
Iterate over each row and then inside iterate over each column. If the name doesn't contain TotalHours add it's value to the sum. If it does contain TotalHours then set the value equal to the sum. Here is an example with values not 0 and not hidden.
$('tr').each(function(index) {
var sum=0;
$('td input',this).each(function(){
if($(this).attr('name').indexOf('TotalHours')==-1){
sum+=parseInt($(this).val());
}else{
$(this).val(sum);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input name="[0].Sched" value="10" />
</td>
<td>
<input name="[0].Comp" value="20" />
</td>
<td>
<input name="[0].NoShow" value="30" />
</td>
<td>
<input name="[0].TotalHours" value="0" />
</td>
</tr>
<tr>
<td>
<input name="[1].Sched" value="5" />
</td>
<td>
<input name="[1].Comp" value="2" />
</td>
<td>
<input name="[1].NoShow" value="3" />
</td>
<td>
<input name="[1].TotalHours" value="0" />
</td>
</tr>
</table>
You can use JavaScript String search() Method to match the input name.
Searches a string for a specified value, and returns the position of the match. The value can be string or a regular expression. If no match is found the method returns -1.
Below, an iteration occurs through each tr
then each input, which searches for
a specific name, if not equal -1, the variable
totalHours receives the value:
$('tr').each(function() {
var totalHours = 0;
$(this).find('input').each(function() {
if ($(this).attr("name").search("Sched") != -1
|| $(this).attr("name").search("Comp") != -1
|| $(this).attr("name").search("NoShow") != -1) {
totalHours += Number($(this).val());
}
});
$(this).find('input[name*="TotalHours"]').val(totalHours);
});
Check it out:
JSFiddle
Related
I have the following dynamic table
I want to compare the value of submit Quantity textbox and Stock textbox together to check if Submit Quantity value is greater than stock value for all rows.
When submit Quantity textbox loses focus I want check, if Submit Quantity value is greater than stock, I want show an alert that "Not enough goods exist in stock" and Submit Quantity textbox must receive focus again.
My HTML and C#
<tbody>
#{ var i = 0;}
#foreach (var item in Model)
{
<tr>
<td></td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<input type="number" onblur="compare()" id="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" id="stock" readonly="readonly" class="form-control" />
</td>
</tr>
}
I have no idea how to do that
Any help will be appreciated
Thanks in advance
Edit:
This is what I have done to achieve the result but it only works on first row Submit Quantity textbox not on second row
function compare() {
$('#submitQ').each(function () {
let submit = $('#submitQ').val();
let quantity = $('#stock').val();
if (submit > quantity) {
alert('Not enough goods!')
$('#submitQ').select();
return false
}
})
You cannot have mutliple elements with same ids instead use class selector .Then , just get value of submit quantity using $(this).val() and stock value using .closest('tr').find('.stock').. then simply compare these values .
Demo Code :
$('.submitQ').on("blur", function() {
//get value of submit qnty
let submit = $(this).val();
//get stock
let quantity = parseInt($(this).closest('tr').find('.stock').val());
if (submit > quantity) {
alert('Not enough goods!')
$(this).focus(); //show focus
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<th>No</th>
<th>Name</th>
<th>Brand</th>
<th>Requested Quantity</th>
<th>Submit Quantity</th>
<th>Stock</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" value="something" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<!--use class-->
<input type="number" class="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" value="8" class="stock" readonly="readonly" class="form-control" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" value="something" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<input type="number" class="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" value="5" class="stock" readonly="readonly" class="form-control" />
</td>
</tr>
</tbody>
</table>
I am trying to create a table that when a user click update, it will get the first and second input value. I am trying to use prev to find the first two DOM element and get the value, but fail, what should I do? Any help is appreciated.
$('.update_button').on("click",function(){
var update_val_1 = $(this).prev().find('input:first').val();
var update_val_2 = $(this).prev().find('input:nth-child(2)').val();
alert(update_val_1);
alert(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="gridtable">
<td><input type="text" value="apple" /></td>
<td><input type="text" value="one" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="banana" /></td>
<td><input type="text" value="three" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="berry" /></td>
<td><input type="text" value="ten" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
The problem is that prev looks for sibling nodes. Your input elements are in different td's so they aren't siblings. Instead, you need to go to the parent row then grab the inputs from there.
Explicit example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var $firstCell = $parentRow.find('td:first-child');
var $secondCell = $parentRow.find('td:nth-child(2)');
var $firstInput = $firstCell.find('input');
var $secondInput = $secondCell.find('input');
var update_val_1 = $firstInput.val();
var update_val_2 = $secondInput.val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
Simplified example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var update_val_1 = $parentRow.find('td:first-child input').val();
var update_val_2 = $parentRow.find('td:nth-child(2) input').val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
I'm a big fan of the .closest(selector) and .find('selector') methods.
The first one goes up the dom until it finds the first match of the given selector.
The second one goes down the dom and finds all matches.
.eq(index) is like array[index] for jQuery. It takes a collection of jQuery elements and returns the one at the given index.
$('.update_button').on("click",function(){
var inputs = $(this).closest('.gridtable').find('input');
var value1 = inputs.eq(0).val();
var value2 = inputs.eq(1).val();
});
I am trying to compare value of a single text box value "totalmarkstoall" with multiple array of text box's "marksscored", the below my java script is comparing as well on key up function.
what am unable to do is if the value of "marksscored" that perticuler text box is greater then the "totalmarkstoall" then is shows the pop up :But it should erase the value also or should not allow to enter.
function scorecompare(idval) {
var marksscored = idval;
var totalmarkstoall = document.getElementById("totalmarkstoall").value;
if (parseInt(marksscored) > parseInt(totalmarkstoall))
{
alert("greater than Total Mrks");
} else {
}
}
<input id="totalmarkstoall" type="number" style="border: 1px solid #dbdbdb;" placeholder="Enter Total Marks"></input>
<table>
<tr>
<td>
<input type="text" name="marksscored[]" id="marksscored[0]" value="" onkeyup="scorecompare(this.value);"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="marksscored[]" id="marksscored[1]" value="" onkeyup="scorecompare(this.value);"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="marksscored[]" id="marksscored[2]" value="" onkeyup="scorecompare(this.value);"/>
</td>
</tr>
</table>
If you do something like this you know which inputfield the value came from.
HTML:
<table>
<tr>
<td>
marksscored Array of text box's
</td>
</tr>
<tr>
<td>
<input type="text" name="marksscored[]" id="marksscored[0]" value="" onkeyup="scorecompare(this);">
</td>
</tr>
<tr>
<td>
<input type="text" name="marksscored[]" id="marksscored[1]" value="" onkeyup="scorecompare(this);">
</td>
</tr>
<tr>
<td>
<input type="text" name="marksscored[]" id="marksscored[2]" value="" onkeyup="scorecompare(this);">
</td>
</tr>
</table>
JS:
function scorecompare(idval) {
var marksscored = idval;
var totalmarkstoall = document.getElementById("totalmarkstoall").value;
if (parseInt(marksscored.value) > parseInt(totalmarkstoall))
{
alert("greater then Total Mrks");
//do things with inputfield marksscored
} else {
}
}
Try this. Use keyUp event like this way.
$( ".marksscored" ).keyup(function() {
var marksscored = $(this).val();
var totalmarkstoall = document.getElementById("totalmarkstoall").value;
if (parseInt(marksscored) > parseInt(totalmarkstoall))
{
alert("greater then Total Mrks");
$(this).val("");
} else {
// do something
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input id="totalmarkstoall" type="number" STYLE=" border: 1px solid #dbdbdb;" placeholder="Enter Total Marks"></input>
<table>
<tr>
<td>
<input type="text" class="marksscored" name="marksscored[]" id="marksscored[0]" value="" />
</td>
</tr>
<tr>
<td>
<input type="text" class="marksscored" name="marksscored[]" id="marksscored[1]" value="" />
</td>
</tr>
<tr>
<td>
<input type="text" class="marksscored" name="marksscored[]" id="marksscored[2]" value="" />
</td>
</tr>
</table>
You can do something like this using jquery :
On keyup calculate the sum of all text fields
Check if the is greater than the Total
If it is the case Alert and erase the current text field $(this).val("");
see fiddle
Update:
Fiddle
i want to add all text box value inside the tabel using jquery.
<script>
str =0;
$(document).ready(function(){
$('#btn_res').click(function(){
$('#calculate').find("input[type=text]").each(function(){
str+=$(this).text();
})
$('#result').text(str);
});
});
</script>
you need
$(document).ready(function() {
$('#btn_res').click(function() {
var str = 0;
$('#calculate').find("input[type=text]").each(function() {
//need to use .val()
//also need to convert it to a numerical value for addition else string concatenation will be done
str += (+$(this).val() || 0);
})
$('#result').text(str);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="calculate">
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<button id="btn_res">Sum</button>
<div id="result"></div>
Use val() bacause you are getting form input fields values
$('#btn_res').click(function(){
$('#calculate').find("input[type=text]").each(function(){
str+=$(this).val();
})
$('#result').text(str);
});
My own suggestion would be the following:
$(document).ready(function() {
$('#btn_res').click(function() {
// find all the relevant input elements directly (no need
// to use 'find()'; then iterate over those elements with 'map()':
var str = $('#calculate input[type="text"]').map(function() {
// this returns the value of the input (as a number) or a 0 (if
// the input is not a valid number):
return parseFloat((this.value || 0));
// 'get()' converts the object to an array,
// 'reduce' reduces the array to a single result:
}).get().reduce(function(a, b) {
// returns the sum of the array's elements:
return a + b;
});
$('#result').text(str);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="calculate">
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<button id="btn_res">Sum</button>
<div id="result"></div>
References:
JavaScript:
Array.prototype.reduce().
parseFloat().
jQuery:
get().
map().
text().
<form name="quest" onsubmit="return validate();">
<table width="100%" border="1">
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td width="98">Response Type<font color="#CC0000">*</font></td>
<td>
<input type="radio" value="1" name="R1" onClick="showresponse(1)">
True/False
<input type="radio" value="2" name="R1" onclick="showresponse(2)">Single
Best Answer
<input type="radio" value="3" name="R1" onclick="showresponse(3)">Multiple
Answers</td>
</tr>
<tr>
<td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
<td>
<table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
<tr>
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="1" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb2" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="2" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="3" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb4" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="4" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb5" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="5" name="R3">
Answer</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
I want to validate to that a person can enter min 3 responses(Add response) and max 5 responses. once enter the response only allow to select the answer(radio button). pls anbody help me . thanks in advance
You can try this solution below.
Note that a full working example can be found at the end of this post.
Set the method method attribute of your <form> to GET or POST, and define its method attribute (= which specifies where to send the form's data)
Add an ID to each of your "Answer" checkboxes. You can provide them the following IDs, respectively: R1, R2, R3, R4, and R5. Provide different names to each input.
Disable your "Answer" checkboxes by adding the attribute disabled. Since you only want the responses to check / uncheck the checkboxes, we want to prevent the users from doing it.
Eg:
<input type="radio" value="1" name="R1" id="R1" disabled>
Add an the following events to each of your "Answer" text inputs:
onkeyup="toggle_checkbox(this, i);", where i should be the index related to the ID of the checkbox concerned (check the example below). The toggle_checkbox function is called every time we type something inside an "Answer" textbox, and checks, or unchecks, the checkbox associated to the text input we're typing in, depending on the latter's content:
if the content of the texbox is empty, the function unchecks the checkbox,
else, it checks it.
ondragstart="return false" which prevents to copy the content from a given textbox to another.
Eg:
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td>
<td>
<input type="radio" value="1" name="R1" id="R1" disabled>
Answer
</td>
In the example above, i is equal to 1, which is related to the concerned checkbox's ID R1.
In your <head>, add the following JS functions:
function toggle_checkbox(el, index) {
var val = el.value;
if(val!="") {
document.getElementById("R"+index).checked = "checked";
}
else {
document.getElementById("R"+index).checked = "";
}
}
function validate() {
var isok = false;
var nb_checked = 0;
for(var i =1; i<6; i++) {
var el = document.getElementById("R"+i);
if(el.checked) {
nb_checked++;
}
}
if(nb_checked < 3) {
alert("Enter at least 3 responses!");
}
else {
isok = true;
}
return isok;
}
As you can see, there are two functions: one is toggle_checkbox and the other is validate.
As explained a little bit previously, the function toggle_checkbox is called every time we type something inside an "Answer" textbox. This checks / unchecks the associated checkbox according to whether the content of the corresponding textbox is empty or not.
The function validate is called when we submit the form. It counts the number of "Answer" checkboxes which are checked with the variable nb_checked. If this number is lower than 3, then we alert the message Enter at least 3 responses!. Otherwise, we set the output variable isok to true, which will allow the form to be processed and sent to the link provided in the action attribute of the <form>
Full working example:
<!DOCTYPE html>
<html>
<head>
<script>
function toggle_checkbox(el, index) {
var val = el.value;
if(val!="")
document.getElementById("R"+index).checked = "checked";
else document.getElementById("R"+index).checked = "";
}
function validate() {
var isok = false;
var nb_checked = 0;
for(var i =1; i<6; i++) {
var el = document.getElementById("R"+i);
if(el.checked)
nb_checked++;
}
if(nb_checked < 3) alert("Enter at least 3 responses!");
else
isok = true;
return isok;
}
</script>
<head>
<body>
<form onsubmit="return validate();" method="post" action="http://www.google.com">
<table width="100%" border="1">
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td width="98">Response Type<font color="#CC0000">*</font></td>
<td>
<input type="radio" value="1" name="Ra" onClick="showresponse(1)">
True/False
<input type="radio" value="2" name="Rb" onclick="showresponse(2)">Single
Best Answer
<input type="radio" value="3" name="Rc" onclick="showresponse(3)">Multiple
Answers</td>
</tr>
<td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
<td>
<table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
<tr>
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td>
<td>
<input type="radio" value="1" name="R1" id="R1" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb2" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 2);" ondragstart="return false"></td>
<td>
<input type="radio" value="2" name="R2" id="R2" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 3);" ondragstart="return false"></td>
<td>
<input type="radio" value="3" name="R3" id="R3" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb4" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 4);" ondragstart="return false"></td>
<td>
<input type="radio" value="4" name="R4" id="R4" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb5" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 5);" ondragstart="return false"></td>
<td>
<input type="radio" value="5" name="R5" id="R5" disabled>
Answer</td>
</tr>
</table>
</td>
</tr>
</table>
<input type="submit" value="SUBMIT"/>
</form>
</body>
</html>
PS: Change the action attribute of the form. I set google's url just to let you see the redirection when the form is valid.
Hope this helps. Let me know if you have any questions.