I need to calculate selected checkbox only that foreach in a table field (harga_obat*jumlah)
This is my foreach data
#foreach ($obat as $o)
<tr>
<td>
<input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}"
onkeyup="sum()">
</td>
<td>
<input id="jumlah" type="text" class="form-control" name="jumlah" onkeyup="sum()">
</td>
<td>
<input id="total" type="text" class="form-control total-harga" name="total_harga" onkeyup="sum()" readonly>
</td>
</tr>
#endforeach
This is what I have tried, this is just working for one row like picture below
function sum() {
var harga = document.getElementById('harga').value;
var jumlah = document.getElementById('jumlah').value;
var hasil = parseInt(harga) * parseInt(jumlah);
if (!isNaN(hasil)) {
document.getElementById('total').value = hasil;
}
}
You can only use an id once in a page, id = identifier, so you can use the object id to make sure it's unique and pass it to the sum function
For example
#foreach ($obat as $o)
<tr>
<td>
<input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga-{{ $o->id }}" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}"
onkeyup="sum({{ $o->id }})">
</td>
<td>
<input id="jumlah-{{ $o->id }}" type="text" class="form-control" name="jumlah" onkeyup="sum({{ $o->id }})">
</td>
<td>
<input id="total-{{ $o->id }}" type="text" class="form-control total-harga" name="total_harga"
onkeyup="sum({{ $o->id }})" readonly>
</td>
</tr>
#endforeach
<script>
function sum(id) {
var harga = document.getElementById('harga-' + id).value;
var jumlah = document.getElementById('jumlah-' + id).value;
var hasil = parseInt(harga) * parseInt(jumlah);
if (!isNaN(hasil)) {
document.getElementById('total-' + id).value = hasil;
}
}
</script>
Hope this helps
Since you have multiple lines to foreach, you cannot rely on unique ids. One (inelegant?) solution could be to define dynamic different ids for each row and pass that id to your sum method.
Another solution would be to use a more generic approach that bind the sum method to each row, and passing it the parent scope, an only working with the existing ids, like below:
function sum(parent) {
var harga = parent.querySelector('[name="harga_obat"]').value;
var jumlah = parent.querySelector('[name="jumlah"]').value;
var hasil = parseInt(harga) * parseInt(jumlah);
if (!isNaN(hasil)) {
parent.querySelector('[name="total_harga"]').value = hasil;
}
}
function bind(el) {
el.addEventListener('keyup', function (event) {
sum(event.currentTarget.closest("tr"));
});
}
document.querySelectorAll('[name="harga_obat"]').forEach(function (element) {
bind(element);
});
document.querySelectorAll('[name="jumlah"]').forEach(function (element) {
bind(element);
});
<table>
<tr>
<td>
<input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}">
</td>
<td>
<input id="jumlah" type="text" class="form-control" name="jumlah">
</td>
<td>
<input id="total" type="text" class="form-control total-harga" name="total_harga" readonly>
</td>
</tr>
<tr>
<td>
<input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}">
</td>
<td>
<input id="jumlah" type="text" class="form-control" name="jumlah">
</td>
<td>
<input id="total" type="text" class="form-control total-harga" name="total_harga" readonly>
</td>
</tr>
</table>
Related
I am creating a dynamic form in a Backbone.js view. I want to get all the JSON data from the form in my view without using jQuery. Is there any way to get the data?
For example: When You check the checkbox, I only want the data for the checked field.
<table class="table">
<thead>
<tr>
<th></th>
<th>{{labels.selectImage}}</th>
<th>{{labels.nameVisibleToShop}}</th>
<th>{{labels.sourceCode}}</th>
<th>{{labels.pricePerItem}}</th>
</tr>
</thead>
<tbody>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
</tbody>
</table>
I'm trying to generate objects from array variants using jquery but i didn't get proper solution for that can anyone help?
here is my HTML code.
<table>
<tr class="variants">
<td>
100g/
<input id="100g" name="variant_name" type="hidden" value="100g">
m/
<input id="m" name="variant_name" type="hidden" value="m">
blue
<input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>...</td>
<td>...</td>
</tr>
<tr/>....</tr>
<tr/>....</tr>
I need output something like that.
{
"100g":{
"m":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
},
"s":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
}
},
"200g":{
"m":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
},
"s":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
}
}}
here is fiddle link for more information.
https://jsfiddle.net/fhLqsz3w/
It would be greatly appreciated if someone helped me
You can iterate through each tr of the table. Iterate through all the input tag of a row. For all the hidden input, if the key (value is the value of the input element) is present, move to next object otherwise create an object corresponding to that key. For all the non-hidden field, accumulate values in an object accumulator, after exiting the loop, now add the non-hidden object to the original object.
$('#update_btn').click(function(e) {
var obj = {};
$('table tbody tr').each(function() {
var temp = obj;
var notHidden = {};
$(this).find('input').each(function(i,e) {
if(e.type=="hidden"){
if(!(e.value in temp))
temp[e.value] = {};
temp = temp[e.value];
}
//added textbox value
if(e.type!="hidden"){
notHidden[e.getAttribute('name')] = e.value;
}
})
Object.assign(temp, notHidden);
});
console.log(obj);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-hover table-condensed" id="variants">
<tbody>
<tr><th> Variant </th> <th> SKU </th><th>Cross Price and Price</th> <th> Qty</th> <th> Image Link/ID </th></tr>
<tr class="variants">
<td>
100g/ <input id="100g" name="variant_name" type="hidden" value="100g">
m/ <input id="m" name="variant_name" type="hidden" value="m">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
100g/ <input id="100g" name="variant_name" type="hidden" value="100g">
s/ <input id="s" name="variant_name" type="hidden" value="s">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
200g/ <input id="200g" name="variant_name" type="hidden" value="200g">
m/ <input id="m" name="variant_name" type="hidden" value="m">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-7">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
200g/ <input id="200g" name="variant_name" type="hidden" value="200g">
s/ <input id="s" name="variant_name" type="hidden" value="s">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-7">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr></tbody>
</table>
<button id="update_btn">click
</button>
I am trying to read data from input field inside "td" with an id inside the "tbody"
The html structure is like this:
<tbody id="tbody1">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
Here the "tbody" id is changing dynamically and tr can be in between 1 to 10 for each "tbody".
What i want is to read all the data of "bacthNo","location" and "qty" for each tbody and push into an array on form submit. I had tried several approach but not able to fetch data from this complicated form.
Kindly Help.
apply class to all of your fields and then access using each function of jquery like this
<tr>
<td>
<input type="text" id="bacthNo" class="bacthNo form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="location form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="qty form-control md-has-value" required="">
</td>
$('#tbody1').find('tr').each(function () {
var eachtr = $(this);
eachtr.find('.bacthNo').val();
eachtr.find('.location').val();
eachtr.find('.qty').val();
//get your all fields
}
for example see this jsfiddle
$('#tblOne > tbody > tr').each(function() {
alert($(this).find("td:first>input").val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblOne">
<tbody id="tbody1">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
</table>
something like this:
document.addEventListener("DOMContentLoaded", function (event) {
var _rows = document.querySelectorAll('table tr');
//depending on your markup you could use also:
// var _rows = document.querySelectorAll('tr');
// var _rows = document.querySelectorAll('tbody tr');
//or THE WORST CASE if you cannot really change your html:
//document.querySelectorAll('tbody[id*="tbody"] tr');
_rows.forEach(function (row) {
var _bacthNo = row.querySelector('#bacthNo');
var _location = row.querySelector('#location');
var _qty = row.querySelector('#qty');
console.log(_bacthNo.value)
console.log(_location.value)
console.log(_qty.value)
});
});
<table>
<tbody id="tbody1">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
</table>
In my project the var ans3 is calculated through javascript! I just want to built another script which should auto display some text into the Category of Ans3 Field according to the values of the calculated var3 and age.
Sample example criteria:
if ans3 < 5 and age < 18 ----> display: Normal Range,
else if ans3 < 10 and age < 50 -----> display: Increased Range,
else ... display: Out of Limits!
I know that this may be done using conditions but i can't exactly figure it out! any thoughts please would be usefull!
<html>
<head>
</head>
<body>
<style>
#ans, #ans2 {
display:none;
}
</style>
<div id="bodyfatmonitoring">
<form name="fatmonitor" Method="post" id="fatmonitor" enctype="multipart/form-data">
<h2 style="color:#b3b3cc;">Calculator</h2>
<table>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td>
<label for="first">First: *</label>
<input type="text" name="first" size="35" id="first" required autocomplete="off">
</td>
<td>
<label for="fifth">Fifth: *</label>
<input type="text" name="fifth" size="35" id="fifth" autocomplete="off">
</td>
</tr>
<tr>
<td>
<label for="second">Second: *</label>
<input type="text" name="second" size="35" id="second" autocomplete="off">
</td>
<td>
<label for="sixth">Sixth: *</label>
<input type="text" name="sixth" size="35" id="sixth" autocomplete="off">
</td>
</tr>
<tr>
<td>
<label for="third">third: *</label>
<input type="text" name="third" size="35" id="third" autocomplete="off">
</td>
<td>
<label for="seventh">Seventh: *</label>
<input type="text" name="seventh" size="35" id="seventh" autocomplete="off">
</td>
</tr>
<tr>
<td>
<label for="fourth">Fourth: *</label>
<input type="text" name="fourth" size="35" id="fourth" autocomplete="off">
</td>
<td>
<label for="age">Age: *</label>
<input type="text" name="age" size="35" id="age" autocomplete="off">
</td>
</tr>
<input type="text" name="ans" size="35" id="ans"/>
<input type="text" name="ans2" size="35" id="ans2"/>
<tr>
<td>
<label for="firstname2">Name | Lastname: *</label>
<input type="text" name="firstname2" size="35" id="firstname2" autocomplete="off"/>
</td>
<td>
<label for="mandate">Date: *</label>
<input type="date" name="mandate" size="35" id="mandate" autocomplete="off"/>
</td>
</tr>
<tr>
<td>
<label for="ans3">Ans3 %: *</label>
<input type="text" name="ans3" size="35" id="ans3" autocomplete="off"/>
</td>
<td>
<label for="category">Category of Ans3: *</label>
<input type="text" name="category" size="35" id="category" autocomplete="off"/>
</td>
</tr>
<tr>
<td>
<button type="button" id="calculator" name="calculator" onclick="Calculate();">Υπολογισμός</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<script>
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var third = document.getElementById('third').value;
var fourth = document.getElementById('fourth').value;
var fifth = document.getElementById('fifth').value;
var sixth = document.getElementById('sixth').value;
var seventh = document.getElementById('seventh').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second) + parseInt(third) + parseInt(fourth) + parseInt(fifth) + parseInt(sixth) + parseInt(seventh);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value) + 0.00000055 * Math.pow(parseInt(document.getElementById('ans').value), 2) - 0.00028826 * parseInt(document.getElementById('age').value);
document.getElementById('ans3').value = ((4.95 / document.getElementById('ans2').value) - 4.5) * 100;
}
</script>
I am trying to create an array from the content of a table. The content of the tables looks something like this:
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
And the script that I have written is like this
$(document).on('click', '#guardarBtn', function (event) {
var content=[];
$('.rowUpdate').each(function (i) {
$(this).find('td').each(function (j, v) {
if (j != 0) {
var input = $("input", this),
name = input.attr("name").substring(0, input.attr("name").length),
value = input.val();
alert(value);
content[name] = value;
alert(JSON.stringify(content));
}
});
//alert(content);
rows.push(content);
});
});
But when I click on the button to get the content of the columns of the table and save it in an array it shows blank
UPDATED Js Fiddle link is here
Thanks in advance
Check this one. I changed var content= []; to var content= {};
$(document).on('click', '#guardarBtn', function (event) {
var content= {};
$('.rowUpdate').each(function (i) {
$(this).find('td').each(function (j, v) {
if (j != 0) {
var input = $("input", this),
name = input.attr("name").substring(0, input.attr("name").length),
value = input.val();
content[name] = value;
// alert(JSON.stringify(content));
}
});
alert(JSON.stringify(content));
// rows.push(content);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
Try this (keep the HTML the same):
$(document).on('click', '#guardarBtn', function (event) {
var rows = [];
$('.rowUpdate').each(function (i) {
var row = {};
$(this).find('td').each(function (j, v) {
if (j != 0) {
var input = $("input", this),
name = input.attr("name").substring(0, input.attr("name").length),
value = input.val();
row[name] = value;
}
rows.push(row);
});
});
Shorter way to access :
$(document).on('click', '#guardarBtn', function (event) {
var content = {};
$('.rowUpdate').each(function (i) {
$(this).find('input[type=text]').each(function(){
content[$(this).attr("name")] = $(this).val();
});
});
alert(JSON.stringify(content));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
Try This :
<form name="form_name" id='form_name'>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
</form>
js Here :
$(document).on('click', '#guardarBtn', function (event) {
var row=[];
$('.rowUpdate').each(function (i) {
var content=[];
$(this).find('input').each(function(key,value){
var field_name=$(this).attr('name');
var field_value=$(this).val();
content[field_name]=field_value;
});
row.push(content);
});
console.log(row);
});
If I well understand the question, you just need for something like this (I'm not sure however why you used nested each loops - is there any reason of this? Do you have more code in between these loops?)
$(document).on('click', '#guardarBtn', function(e){
var content={};
$('.rowUpdate td').find('input').each(function(){
content[this.name] = this.value;
});
alert(JSON.stringify(content));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>