Clone table data input values to entire row onclick button - javascript

The below table I want to change the input value for first row become value="1" onclick the copy button.
This value="1" when I entered manually and the value should repeat to the entire row when I click the copy button.
Note: I couldn't found any script regarding this to add the tried code.
Kindly comment below for further clarification.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>


Copy this first value to the rest:
$(function() {
$(".btn-success").on("click", function(e) {
e.preventDefault(); // stop the link
var $inputs = $(this).closest("tr").find("input");
var val = $inputs.eq(0).val(); // take the first
$inputs.val(val);
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>


You could do it like this:
$('.table a.btn').click(function() {
var inputVal = $(this).prev().val();
var td = $(this).closest("td");
var sib = td.siblings().find("input");
sib.val(inputVal)
});
This will take the value from the input associated with the link/button and put that value into the other input's on the same tr
Demo
$('.table a.btn').click(function() {
var inputVal = $(this).prev().val();
var td = $(this).closest("td");
var sib = td.siblings().find("input");
sib.val(inputVal)
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>


You get the value of input using prev() inside click handler of the copy button.
Find parent td using closest and then get all its sibling tds. find input inside sibling tds and append first input value to the input existing values
$(document).ready(function(){
$('a.btn.btn-success').on('click', function(){
var val = $(this).prev('input').val();
var $td = $(this).closest('td');
var $siblings = $td.siblings();
//to append values
/*$siblings.find('input.form-control').each(function(){
$(this).val($(this).val() + val);
});*/
// to replace values
$siblings.find('input.form-control').val(val);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>


This JS code could be helpful.
jQuery(document).ready(function($) {
jQuery('.table a.btn').click(function(event) {
event.preventDefault();
var fieldVal = jQuery(this).siblings('.form-control').val();
jQuery(this).parent('td').siblings('td').children('.form-control').val(fieldVal);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>


In order to answer the question "Is it possible to place the button outside?":
Here is a version with the button in front of all the input fields:
Starting from the button itself (this) you look for the closest parent container of type td, then find all its siblings and their children of type input. The result is a jquery object with all the inputs of one table row. Then do the copying of values from the first (flds.eq(0)) to the rest of them all (flds.slice(1)).
$('.table a.btn').click(function() {
var flds = $(this).closest('td').siblings().find('input');
flds.slice(1).val(flds.eq(0).val());
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table"><thead><tr>
<th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th>
</tr></thead><tbody><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="1">
</td><td>
<input type="text" class="form-control" value="11">
</td><td>
<input type="text" class="form-control" value="11">
</td></tr><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="2">
</td><td>
<input type="text" class="form-control" value="2">
</td><td>
<input type="text" class="form-control" value="2">
</td></tr><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="3">
</td><td>
<input type="text" class="form-control" value="3">
</td><td>
<input type="text" class="form-control" value="3">
</td></tr></tbody></table>

Related

Change value of input in sibling hidden TD

When my delete button is clicked I would like to change the value of the "is_active" input that has the class of 'active' value from "yes" to "no".
So far I tried to using siblings to try and select the input with the class of 'active'. No luck.
Here is my code:
<script type="text/javascript">
$(document).on("click", ".delete", function(){
if ($(this).parents('.idcheck').length){
$(this).siblings("td").next().find('.active').val('no');
$(this).parents("tr").hide();
}
else
{$(this).parents("tr").remove();
}
$(".add-new").removeAttr("disabled");
});
</script>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>County</th>
<th>Street</th>
<th>City</th>
<th>Ward</th>
<th>Precinct</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<form id="" class="form" name="parts" method="post" action="">
<tr class="idcheck">
<td style="display:none;"><input type="hidden" class="form-control" name="username" id="username" value="user"></td>
<td><input type="text" class="form-control" name="first_name" id="first_name" value="John"></td>
<td><input type="text" class="form-control" name="last_name" id="last_name" value="Doe"></td>
<td><input type="text" class="form-control" name="county" id="county" value="my county"></td>
<td><input type="text" class="form-control" name="street" id="street" value="456 easy street"></td>
<td><input type="text" class="form-control" name="city" id="city" value="town"></td>
<td><input type="text" class="form-control" name="ward" id="ward" value="5"></td>
<td><input type="text" class="form-control" name="precinct" id="precinct" value="2"></td>
<td style="display:none;"><input type="hidden" class="form-control" name="id" id="id" value="1"></td>
<td style="display:none;"><input type="hidden" class="form-control active" name="is_active" id="is_active" value="yes"></td>
<td><a class="delete" title="" data-toggle="tooltip" data-original-title="Delete"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>

I figured it out, here is the updated code:
<script type="text/javascript">
$(document).on("click", ".delete", function(){
if ($(this).parents('.idcheck').length){
$(this).closest('tr').find('.active').val('no');
$(this).parents("tr").hide();
}
else
{$(this).parents("tr").remove();
}
$(".add-new").removeAttr("disabled");
});
</script>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>County</th>
<th>Street</th>
<th>City</th>
<th>Ward</th>
<th>Precinct</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<form id="" class="form" name="parts" method="post" action="">
<tr class="idcheck">
<td style="display:none;"><input type="hidden" class="form-control" name="username" id="username" value="user"></td>
<td><input type="text" class="form-control" name="first_name" id="first_name" value="John"></td>
<td><input type="text" class="form-control" name="last_name" id="last_name" value="Doe"></td>
<td><input type="text" class="form-control" name="county" id="county" value="my county"></td>
<td><input type="text" class="form-control" name="street" id="street" value="456 easy street"></td>
<td><input type="text" class="form-control" name="city" id="city" value="town"></td>
<td><input type="text" class="form-control" name="ward" id="ward" value="5"></td>
<td><input type="text" class="form-control" name="precinct" id="precinct" value="2"></td>
<td style="display:none;"><input type="hidden" class="form-control" name="id" id="id" value="1"></td>
<td style="display:none;"><input type="hidden" class="form-control active" name="is_active" id="is_active" value="yes"></td>
<td><a class="delete" title="" data-toggle="tooltip" data-original-title="Delete"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
I changed the line from :
$(this).siblings("td").next().find('.active').val('no');
To this:
$(this).closest('tr').find('.active').val('no');

How to assign input value to checkbox value, then calculate checked total?

How to assign a <input type="text" value=""> to a <input type="checkbox" value="">, without hardcoding a numerical value to the checkbox? Then calculating the value total based on what is checked?
For example, I have a form that is asking for the name of an item and its cost. Then when I click submit it adds the data into a table. I want to be able to check the checkbox and have it call on the value from the cost I entered. Is it possible to do something like <input type="checkbox" value="cost"> rather than assigning <input type="checkbox" value="10">?
The form is purely for visualization only. My actual code can post data and is more detailed with modals and what not.
$(document).on("change", ".check", function() {
var checked = $('.check:checked'),
sum = checked.get().reduce(function(prev, item) {
return prev + parseFloat(item.getAttribute('value'));
}, 0);
$('.addTotal').text(sum.toFixed(2));
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<form action="">
<div class="form-group">
<label for="name">Item name: </label>
<input class="form-control" type="text" name="itemname" placeholder="Item Name" />
</div>
<div class="form-group">
<label for="name">Cost: </label>
<input class="form-control" name="cost" placeholder="Cost (insert number only)" />
</div>
<button type="submit">Submit</button>
<button type="submit">Edit</button>
</form>
<br>
<br>
<table class="table table-hover table-sm bookstable">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" name="" value="cost" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="10"/></td> -->
<td>Item1</td>
<td>$10</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="" value="" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="30"/></td> -->
<td>Item2</td>
<td>$30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<div>Total $: <span class="addTotal"></span></div>
</td>
</tr>
</tfoot>
</table>

You can do this using jQuery's .parent() method.
jQuery Documentation
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector. The .parent() method is similar to the .parents() method.
Running Code
var total = 0;
$(document).on("change", ".check", function() {
var cost = parseFloat($(this).parent().parent().find(".cost").text().replace("$", ""));
if ($(this).is(":checked")) {
total += cost;
} else {
total += -cost;
}
$(".addTotal").text(total);
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<form action="">
<div class="form-group">
<label for="name">Item name: </label>
<input class="form-control" type="text" name="itemname" placeholder="Item Name" />
</div>
<div class="form-group">
<label for="name">Cost: </label>
<input class="form-control" name="cost" placeholder="Cost (insert number only)" />
</div>
<button type="submit">Submit</button>
<button type="submit">Edit</button>
</form>
<br>
<br>
<table class="table table-hover table-sm bookstable">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" name="" value="cost" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="10"/></td> -->
<td>Item1</td>
<td class="cost">$10</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="" value="" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="30"/></td> -->
<td>Item2</td>
<td class="cost">$30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<div>Total $: <span class="addTotal"></span></div>
</td>
</tr>
</tfoot>
</table>

input boxes value of table should not be greater then input box outside of table

Hello I have developed a form where input boxes value of table should not be greater then input box outside of table.
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>
in above jsfiddle all ENTER SANCTIONED SEATS sum will not be greater then "Enter total number of sanctioned seats" in onchange.

You need to use jquery keyup event as I mentioned in fiddle.
Please check this fiddle
Here I just made textbox value blank if sum of three sanctioned seats are greater than total.
Also i have cleare 3 textbox if you chane total textbox
Open this link : https://jsfiddle.net/5y6na3wr/7/

$(document).ready(function(){
$(".seats").on('keyup',function(){
var total = parseInt(0) ;
$( ".seats" ).each(function( index ) {
if($(this).val()){
total = total + parseInt($(this).val());
}
});
if(total > $("#sanctionedSeatsSummary").val()){
alert("total sanctioned Seats are greater then given sanctioned Seats");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>

check below snippet
$(document).ready(function(){
var ttl, val;
$("input[name=seats]").on('keyup', function(){
val = 0;
$("input[name=seats]").each(function(){
if(parseInt($(this).val().trim()) > 0)
val += parseInt($(this).val().trim());
});
ttl = parseInt($("#sanctionedSeatsSummary").val().trim());
if(val > ttl)
alert("your alert");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>

Autofill other fields automatically if one field is entered with jquery

Please check my fiddle.
Fiddle
When i enter any data in any rows in slab_range, i need to autofill all the other rows of 'Slab Range' with a value 'No Bid'. If i left blank, nothing has to be filled. Likewise if i enter any data in 'Part Number', all the other rows of 'Part Number' has to be filled with value '2'. The rows are coming from db, so i cant tell how many rows it will be, it should iterate all the rows.
<tr>
<td>
<input size="1" id="sl[0]" name="sl[0]" value="1" type="text">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>

There you go, now it's your task to refactoring the code because both methods are equals.
var ProcessTable = (function () {
var _slabs, _partsNumber;
var _init = function () {
_slabs = $('input[name^="slab_range"]');
_partsNumber = $('input[name^="item_partno"]');
_slabs.on('blur', _slabBlurHandler);
_partsNumber.on('blur', _partNumberBlurHandler);
};
var _slabBlurHandler = function (e) {
var value = $.trim($(this).val());
if (value !== '') {
_slabs.val('No bid');
} else {
_slabs.val('');
}
$(this).val(value); // Because the previous line override the original value
};
var _partNumberBlurHandler = function (e) {
var value = $.trim($(this).val());
if (value !== '') {
_partsNumber.val('2');
} else {
_partsNumber.val('');
}
$(this).val(value); // Because the previous line override the original value
};
return {
init: _init
}
})();
ProcessTable.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cart1" name="cart" method="post" class="single" action="price_edit_save.php?supplier_name=Jupiter+Microwave+Components+Inc&tender_id=151501">
<div class="clone_row">
<table style="border-collapse: collapse;" id="table" border="1" cellpadding="2" cellspacing="2" width="100%">
<thead>
<tr bgcolor="#E6E6FA">
<th width="4%">SlNo</th>
<th width="4%">Slab Range</th>
<th width="6%">Part Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input size="1" name="id[0]" value="9978" readonly="readonly" type="hidden">
<input size="1" id="sl[0]" name="sl[0]" value="1" type="text">
<input size="1" id="item_id[0]" name="item_id[0]" readonly="readonly" type="hidden">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>
<tr>
<td>
<input size="1" name="id[1]" value="9979" readonly="readonly" type="hidden">
<input size="1" id="sl[1]" name="sl[1]" value="2" type="text">
<input size="1" id="item_id[1]" name="item_id[1]" readonly="readonly" type="hidden">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>
<tr>
<td>
<input size="1" name="id[1]" value="9979" readonly="readonly" type="hidden">
<input size="1" id="sl[1]" name="sl[1]" value="2" type="text">
<input size="1" id="item_id[1]" name="item_id[1]" readonly="readonly" type="hidden">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>
</tbody>
</table>
</div>
<div class="addMoreDIV">
</div>
<table>
<tr>
<td>
<input value="--Update Data--" type="submit">
</td>
</tr>
</table>
</form>
And please, be more kindly when you ask for "help".

How to Read the Values From Input field inside td Jquery

I have a table and with in tds i had a text box
<table class="table ratemanagement customtabl-bordered " id="rate_table">
<tbody>
<tr>
<th><input type="checkbox" onclick="select_all()" class="check_all"></th>
<th>From Days*</th>
<th>To Days*</th>
<th>Rent*</th>
</tr>
<tr>
<td>
<input class="case" type="checkbox">
</td>
<td class="v">
<input id="rate_fromdays" class="form-control" name="fromdays" type="text">
</td>
<td>
<input id="rate_todays" class="form-control" name="todays" type="text">
</td>
<td>
<input id="rate_rent" class="form-control" name="rent" type="text">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox">
</td>
<td class="v">
<input id="rate_fromdays" class="form-control" name="fromdays" type="text">
</td>
<td>
<input id="rate_todays" class="form-control" name="todays" type="text">
</td>
<td>
<input id="rate_rent" class="form-control" name="rent" type="text">
</td>
</tr>
</tbody>
</table>
i want to read the values from text box i tried
var values = {};
$('.v input').each(function () {
values[$(this).attr('name')] = $(this).val();
});
and
$('input[name="fromdays"],[name="todays"],[name="rent"]').each(function () {
var fromdays = $(this).val();
alert(fromdays);
});
I want to store the values in independent variables how do i do that ex all fromdays to firstvariable, all todays to second variable
how do i do that
Thanks

var values = [];
$('.v input').each(function () {
values.push($(this).attr('name') = $(this).val());
});

You can store the values in three different arrays by checking the name attribute of the input fields
var fromdays=new Array();
var todays=new Array();
var rent=new Array();
$('#rate_table input[type="text"]').each(function () {
if($(this).attr('name')=="fromdays")
fromdays.push($(this).val())
if($(this).attr('name')=="todays")
todays.push($(this).val())
if($(this).attr('name')=="rent")
rent.push($(this).val())
});
JsFiddle

On button click, iterate over the inputs and push their values in to the respective array:
$(document).on('click', '#getVar', function() {
var fromVar = [];
var toVar = [];
$('input[name=fromdays]').each(function() {
fromVar.push($(this).val());
});
$('input[name=todays]').each(function() {
toVar.push($(this).val());
});
alert('from: ' + fromVar + ' - to: ' + toVar);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table ratemanagement customtabl-bordered " id="rate_table">
<tbody>
<tr>
<th><input type="checkbox" onclick="select_all()" class="check_all"></th>
<th>From Days*</th>
<th>To Days*</th>
<th>Rent*</th>
</tr>
<tr>
<td>
<input class="case" type="checkbox">
</td>
<td class="v">
<input id="rate_fromdays" class="form-control" name="fromdays" type="text">
</td>
<td>
<input id="rate_todays" class="form-control" name="todays" type="text">
</td>
<td>
<input id="rate_rent" class="form-control" name="rent" type="text">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox">
</td>
<td class="v">
<input id="rate_fromdays" class="form-control" name="fromdays" type="text">
</td>
<td>
<input id="rate_todays" class="form-control" name="todays" type="text">
</td>
<td>
<input id="rate_rent" class="form-control" name="rent" type="text">
</td>
</tr>
</tbody>
</table>
<button id="getVar">get variables</button>

Categories