Grid with multiple input fields per row - javascript

I have a "grid" with several input fields per row. Lets say each input field represents a day of the week.
html:
<table id="grid">
<tr>
<td><input class="fri" type="text" value="foo" /></td>
<td><input class="mon" type="text" value="bar" /></td>
<td><input class="tue" type="text" value="baz" /></td>
<td><input class="wed" type="text" value="x" /></td>
<td><input class="thu" type="text" value="y" /></td>
</tr>
...
jQuery:
$('#grid').on('change', '.fri', function () {
var value = $(this).val();
//do something
});
$('#grid').on('change', '.mon', function () {
var value = $(this).val();
//do something
});
// And so on...
There can be any number of rows, all having the same fields.
I made a working fiddle of what I am trying to do.
However, I feel I am repeating myself a little too much (with the jQuery) and I was wondering if there is a way to do the above more concisely (preferably using jQuery).

You can rather use element selector instead of using individual IDs and then binding them:
$('#grid').on('change', 'input:text', function () {
var value = $(this).val();
//do something
});
Also if you have other textboxes in same table which you don't want to target then use multiple class selector:
$('#grid').on('change', '.fri,.mon,.tue', function () {
var value = $(this).val();
//do something
});

You could use event.target like this:
$('#grid').on('change', function (e) {
alert(e.target.value);
});
This would be the only jQuery you need.

Related

How to get the value of Input type number inside a table

I have a table with several rows in which one of the cells has an imput type = number. I want to go through all the rows and get the number that is in that cell. I'm really lost on how to do it.
<tr class="iterate">
<td class="cantidad"> <input type="number"
onchange="actualizar()" name="cantidad" placeholder="0" min="0" max="99"></td>
</tr>
function actualizar(){
var total=0;
$("tr.iterate").each(function() {
var quantity1 = $(this).find(".cantidad").innerHTML,
alert(quantity1);
});
}
I tried with innerHTML, value, text() and with none of them working.
.cantidad is the td element not the input you are looking for. You have to find the input inside the .cantidad.
Also I will prefer oninput event instead of onchange:
$(this).find(".cantidad input").val()
function actualizar(){
var total=0;
$("tr.iterate").each(function() {
var quantity1 = $(this).find(".cantidad input").val();
alert(quantity1);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="iterate">
<td class="cantidad"> <input type="number"
oninput="actualizar()" name="cantidad" placeholder="0" min="0" max="99"></td>
</tr>
</table>
Please Note: innerHTML and value used when using vaniall JS, you can not use them on jQuery referenced element.

Call table row name attribute instead of .eq(n)

i want this code to be reusable ,instead of this :
$(this).closest("tr").find("td input").eq(1).val()
i was hoping for calling it by name using :
(($(this).closest("tr").find("td input").attr("name")) so i dont have to set every .eq(n)
but its not working :
here's my jquery code :
$('.tdiv').on("click", "#tddelete", function () {
if ($(this).closest("tr").find("td input").eq(1).val() == "ADD") alert("add");
else alert("change");
});
see this working FIDDLE for my first code.
id attributes should be unique. Also you're looking for the attribute selector in jQuery. EG.
$(this).closest("tr").find("td input[type='text']").val();
JS
$('.tdiv').on("click", ".tddelete", function () {
var inputVal = $(this).closest("tr").find("td input[type='text']").val();
alert(inputVal);
});
UPDATE FIDDLE
UPDATE BASED ON COMMENTS
It appears that you could have more than one input of type text in your table cell. As such i would suggest adding a class to the input element you are looking to get the value from.
HTML
<table class="tdiv">
<tr>
<td>
<input type="button" class="tddelete" />
</td>
<td>
<input type="text" class="getVal" value="ADD" />
</td>
</tr>
<tr>
<td>
<input type="button" class="tddelete" />
</td>
<td>
<input type="text" class="getVal" value="CHANGE" />
</td>
</tr>
</table>
JS
$('.tdiv').on("click", ".tddelete", function () {
var inputVal = $(this).closest("tr").find(".getVal").val();
alert(inputVal);
});
EXAMPLE FIDDLE
First of all you should not use id for multiple elements, so change id="tddelete" to class="tddelete" for all button elements.
<input type="button" class="tddelete" />
You can find for input element present in next td of button's parent td. Don't forget to put name attribute for input elements.
$('.tdiv').on("click", ".tddelete", function () {
var val = $(this).closest("td").siblings().find("input[name=flag]").val();
alert(val);
});
Demo
Instead of using attr, use an attribute selector in your find method .find("td input[name=somename]")
$('.tdiv').on("click", "#tddelete", function () {
if ($(this).closest("tr").find("td input[name=somename]").eq(1).val() == "ADD") alert("add");
else alert("change");
});

Jquery .change() only updates results one time

I have 3 input fields. #first, #second, and #third, as well as a fourth field #theResult.
<div id="addFields">
<span id="addFieldsHeader">Add The Fields</span>
<table style="margin:0 auto;">
<tr>
<td style="width:80px;">First
<input id="first" size="5" value="3" name="first" style="width:75px" />
</td>
<td style="width:80px;">Second
<input id="second" size="5" value="5" name="second" style="width:75px" />
</td>
<td style="width:80px;">Third
<input id="third" size="6" maxlength="7" name="third" style="width:75px" value="0" />
</td>
<td style="width:80px;">Result
<input id="theResult" size="7" maxlength="7" name="result" style="width:75px" value="0" />
</td>
</tr>
</table>
</div>
I have tried to write a jQuery script that will add the values of #first, #second, and #third together and display the results in #theResult.
I did find docs for the .change() function here which looked like it would suit my needs better than .blur() or .keyup(), as I want the value of #theResult to update each time the value of #first, #second, or #third is changed by the user.
I have the following jQuery:
$(document).ready(function () {
var first = parseInt($("#first").val(), 10);
var second = parseInt($("#second").val(), 10);
var third = parseInt($("#third").val(), 10);
var theResult = first + second + third;
$("#addFields input").change(function () {
$("#theResult").val(theResult);
});
});
When I change a value in any of the inputs #theResult does update, but it only works once and after that I have to reload the page again to get it to work. Also, only the initial values are added, not the updated values. Fiddle is here
Anyone with experience I greatly appreciate your help :)
$(document).ready(function() {
$("#addFields input").change(function() {
var first = parseInt($("#first").val(),10);
var second = parseInt($("#second").val(),10);
var third = parseInt($("#third").val(),10);
var theResult = first + second + third;
$("#theResult").val(theResult);
});
});
You just have to move the variables inside the change() function, so it updates each time.
JSFiddle
You Only need to bring you variables in the change function
$("#addFields input" ).change(function() {
var first = parseInt($("#first").val(),10);
var second = parseInt($("#second").val(),10);
var third = parseInt($("#third").val(),10);
var theResult = first + second + third;
$("#theResult").val(theResult);
});
it because the new value is not assigned to those variables
Try like this:
$(function() {
$("#addFields input" ).change(function() {
var first = parseInt($("#first").val(),10);
var second = parseInt($("#second").val(),10);
var third = parseInt($("#third").val(),10);
var theResult = first + second + third;
$("#theResult").val(theResult);
});
});

jquery get next input element value in <td>

I have some piece of an html table which reads like
<table>
<tr>
<td>
<input type="text" class="myclass" name="first_ele[]" value="100" />
</td>
<td>
<input type="text" class="anotherclass" name="secon_ele[]" value="" />
</td>
</tr>
</table>
I have a piece of jquery that will get the value of the element that contains class "myclass" on keyup and I am getting the proper value.
I need to get the value of the next input element.
FYI , The table gets rows added dynamically.
My issue is I don't know how to point to the next available input element.
my jquery to get the element which has the class "myclass" is as follows.
$('.tInputd').keyup(function(){
var disc = $(this).val();
});
your help is greatly appreciated.
Try
$('.myclass').on('keyup', function () {
var disc = $(this).closest('td').next().find('input').val();
});
or
$('.myclass').on('keyup', function () {
var disc = $('.anotherclass').val();
});

Append table row to table using getElementByID?

I want to be able to append an additional row to my table. The way the code is now, it just adds two input boxes outside of the table regardless of where I insert it. When I inspect in my browser, it looks like the table tags have been stripped, is there something wrong with using the getElementByID function?.
My Hidden row to be added to the table:
<div id="rowToBeAdded" style="display: none">
<tr>
<td><input type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /></td>
<td><input style="margin-right:2em;" type="text" value="" name="newLinkTitle[]" size="50" /></td>
<td><input type="text" value="http://" name="newLinkAddress[]" size="50" /></td>
</tr>
</div>
After the last </tr> of my table I have:
<span id="addRowHere">
<input type="button" id="moreFields" value="Add more links" onclick="init()" />
</span>
And here's my Javascript:
function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
}
function moreFields() {
var newFields = document.getElementById('rowToBeAdded').cloneNode(true);
newFields.style.display = 'block';
var newField = newFields.childNodes;
var insertHere = document.getElementById('addRowHere');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
Try this
http://jsfiddle.net/blackjim/yGVWM/3/ EDIT: fixed the remove button
document.getElementById('moreFields').onclick = addMoreFields; // set binding
var newRow = document.getElementById('rowTemplate').cloneNode(true),
myTable = document.getElementById('myTable');
function addMoreFields() {
myTable.appendChild(newRow.cloneNode(true));
}
And you should make a function for removing a line also. Try it yourself. And use classes and id to get your elements.

Categories

Resources