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();
});
Related
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.
I'm trying to append an HTML string to
var field = '<input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value="">'
var jfield = $(field);
$('#featureContainer').append(jfield);
When the button is clicked it will crete a input field, but if I click again it creates the input in the same row.
How can I make a new row with the input in it?
The following is my HTML code
<tr>
<td id="featureContainer"></td>
</tr>
If I click the button for the second time it creates it in the same row.
I want it to create it in new row.
As we don't know wether trs are wrapped inside table or tbody, .... We have to look for the closest tr and then get its parent then append a new row to that parent.
So, you should replace this:
$('#featureContainer').append(jfield);
with:
$('#featureContainer').closest('tr').parent().append('<tr><td>' + field + '</td></tr>');
NOTE: that inside field you have a static ID which will be on all the inputs you spawn which will be wrong since IDs are unique. So you may want to assign diferent IDs for diferent inputs.
You can just add the html code into field variable, like below:
var field = "<tr><td id="featureContainer"><input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value=""></td>
</tr>"
var jfield = $(field);
Assuming there is a button with id = 'add' and a table with id='data', then you can add this after above code:
$('#add').click(function(){
$('#data').append(jfield);
});
Your on the right track. But you don't need the jfield.
this appends the value of 'field' inside the td element:
$('#featureContainer').append(field);
but what you want is to append inside the table. So give your table a id (or the tbody) and do the following:
You need to embed the field inside a <tr><td> section and append that as a whole.
var field = var field = '<tr><td><input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value=""></td></tr>';
then in the click event:
$('#tableid').append(field);
Thr issue with your code is that you are trying to append to an element using id selector. Since in a valid html there should be only a single element with an unique id, you will be appending the new element always to the same td#featureContainer.
I will suggest you to change the id to class. To select the td.featureContainer where you need to append the new element, you can check inside the clicked button element event handler and find the td.featureContainer
$(".feature").on("click", function() {
var field = '<input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value="">'
var jfield = $(field);
$(this).parent().prev(".featureContainer").append(jfield);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td class="featureContainer"></td>
<td>
<input type="button" class="feature" value="click for row one">
</td>
</tr>
<tr>
<td class="featureContainer"></td>
<td>
<input type="button" class="feature" value="click for row two">
</td>
</tr>
</table>
First the id should be unique in the same document so better to use a common classes instead, then you could use append() to add new row (including tr/td), check the example below.
Hope this helps.
$('#add-row').on('click', function(){
var field = '<input type="text" name="featureName" class="form-control" placeholder="Feature Name" value="">'
$('table').append('<tr><td>'+field+'</td></tr>');
console.log($('table tr').length+' rows');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Default row</td>
</tr>
</table>
<button id='add-row'>Add row</button>
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");
});
I want a javascript function for mapping checkbox id with the value of someother field in grails
i have a gsp page with checkbox and cost field as follows
<td>
<g:checkBox type="checkbox" class="select_all" name="counTestUnit" id="${testUnitInstance.id}" />
</td>
<td>
<g:textField name="cost" maxlength="20" required="" id="${testUnitInstance.id}" />
</td>
i want a javascript function with mapping between checked checkbox id with cost field
you need a on change function for the check box and add intital for the id to diffrentiate it the cost text field,since intital follows ID later on you extract that ID and find the corresponding cost field.
"c_${testUnitInstance.id}"
example
<g:checkBox type="checkbox" class="select_all" name="counTestUnit" id="c_${testUnitInstance.id}" onChange="FindCost('c_${testUnitInstance.id}')"/>
<g:javascript>
function FindCost(chckboxname){
console.log("check Status:"+$("#"+chckboxname).prop("checked"));
var arrayOfchckBoxId = chckboxname.split("_"); //parse the two parts of the name after _
var commnidforcheckandcost = arrayOfchckBoxId[1];
var initialname = arrayOfchckBoxId[0];
var currentCheckbox = "#"+chckboxname ;
console.log("ID:"+arrayOfchckBoxId[1]);
console.log("Name:"+currentCheckbox);
if(initialname == 'c'){
//display the corresponsing cost text field.
$("#"+commnidforcheckandcost").show() //display the cost with a give id like checkbox
}
</g:javascript>
i guess this should resolve your problem for more help see ,the javascript console debug.
You can do as below
<td>
<g:checkBox type="checkbox" class="select_all" name="counTestUnit" id="checkbox${testUnitInstance.id}" onclick="mapCheckAndField(${testUnitInstance.id})"/>
</td>
<td>
<g:textField name="cost" maxlength="20" required="" id="textField${testUnitInstance.id}" />
</td>
<script>
function mapCheckAndField(testUnitId)
{
//we know that now checkboxId is "checkbox"+testUnitId
//and corresponding textField id is "textField"+testUnitId
//Simply you will get the value of checkbox corresponding textField value as below
$("#textField"+testUnitId).val()
}
</script>
I have a div tag as follows:
<div id="DataEntryForm" style="position:absolute; left:100px;top:175px;width:350px; z-index:2;background-color:yellow; visibility:hidden;border-top-color: black;">
<table id="DataEntryFormTable" style=" width:100%" style="margin-top: -50px;">
<tr><td> Build Name</td><td> <input type="text" id="BuildName" name="BuildName" value="" /></td></tr>
<tr><td> Build Description</td><td> <input type="text" id="BuildDesc" name="BuildDesc" value="" /></td></tr>
<tr><td> Software Details</td><td> <input type="text" id="SoftwareDetail" name="SoftwareDetail" value="" /> </td></tr>
<tr><td> Hardware Details</td><td> <input type="text" id="HardwareDetail" name="HardwareDetail" value="" /> </td></tr><br>
<tr><td> </td></tr>
<tr>
<td>
<input type="button" value="Save" onclick="saveRecord()" /></td>
<td> <input type="button" value="Cancel" onclick="cancelOperation()"/></td>
</tr>
<br>
</table>
</div>
I want to load the values from the database to the input type text. So, I need to get the id of each node in order to match with my json value and node id and to assign the value to it. I'm trying with the following to achieve this. But, I cannot get the id value. Anyone, please help me out on this. Thanks ..
var nodes = deform.childNodes;
index =0;
// Load the first record in the collection.
// It is expected to have only one object in JS Object collection
var dbRecord= dbRecords[0];
while (index < nodes.length)
{
if(nodes[index].type=="text")
{
nodes[index].value = dbRecord[nodes[index].id];
}
index++;
}
id is the correct property. the problem is that you are not retrieving the nodes that you are trying to retrieve from your table. Using .children() or .childNodes(), only gets direct children of your element, so you need to drill down further into your table to access the text inputs your are trying to fill. Alternatively, if you want to use jQuery, a single selector could do the trick:
$("#DataEntryFormTable input[type='text']")
If you don't use jQuery, I would use .children() recursively to find the elements you're looking for.
edit: Also, make sure you include parenthesis when calling a function, so
var nodes = deform.childNodes;
would be
var nodes = deform.childNodes();
edit again:
... I didn't see the data that you provided. since you have the ID's that you need in your JSON data, you can look up the elements directly using those ids. Try this:
dbRecord= [{"HardwareDetail":"[B","BuildDesc":"Testing1","BuildID":"BL002","BuildName":"Second Name","SoftwareDetail":"ss"}];
record = dbRecord[0];
for (attr in record){
el = document.getElementById(attr);
if (el)
document.getElementById(attr).value = record[attr];
else
console.debug('no HTML element with ID ' + attr);
}
I don't think console.debug works in some browsers (IE?), so you'll want to take that part out when you're finished testing.