How to get inputbox value in ajax - javascript

I have a table that displays data via ajax with values printed by html in table:
table.row.add({
'idrefaccion': respuesta['idrefaccion'],
'costo': "<input type='number' min='1' name='iptCosto' id='iptCosto' class='form-control form-control-sm' required>",
'acciones': "<center>"
}).draw();
On 'costo' cell I show an inputbox to enter a value. Later below I try to get the values of the cells:
table.rows().eq(0).each(function(index) {
var row = table.row(index);
var data = row.data();
arr[index] = data['idrefaccion'] + "," + data['costo'];
formData.append('arr[]', arr[index]);
});
I have tried to get the value using the id of the input but it throws me an "undefined" value
the value of "idrefaccion" shows it well but the one of "cost" shows me the code of the input tag
I hope someone can guide me a little how to solve it.
Cheers!
enter image description here

Related

How to use onchange function with a dynamic id that uses brackets

I have a php table created by a mysqli query where I want users to be able to update the date values of a text cell. For other formatting reasons, I have chosen not to use the date input.
My script works for other forms with an id that does not include brackets and changes the form value immediately and correctly. However, when I apply the onchange function to the table cell, it seems the brackets in the id may be holding me up. I can see in the console that I am calling the correct bracketed id, however, nothing else happens.
Here is my cell:
<td>
<input type='text' class='form-control form-control-sm'
id='tbl_date01[".$tbl_ID."]' name='tbl_date01[".$tbl_ID."]'
value='".$tbl_date01."' onchange=\"dateChange()\" required />
</td>
Here is my script:
function dateChange(){
var id = (event.target.id);
var y = document.getElementById(id).value;
if(y === '?'){
$("#"+id).val(new Date().toJSON().slice(0,10).substring(5,7) + '/' + new Date().toJSON().slice(0,10).substring(8,10) + '/' + new Date().toJSON().slice(0,10).substring(0,4));
return;
};
};

Assign Empty Value to Input Field

I'm working on a Chrome Extension where I need to check whether a field in a form submission exists and is not blank, and if so, add that to another form (in lieu of doing a post request).
I'm checking whether it exists and is not blank here:
if(document.getElementById("txtBaseAnn").value !== '' && document.getElementById("txtBaseAnn").value !== null) {
txtBaseAnn = document.getElementById("txtBaseAnn").value
} else {
txtBaseAnn = '';
}
And I'm using that variable to build a form like this:
newForm += "<input type='text' name='txtBaseAnn' value='" + txtBaseAnn + "'>";
If there's a value in the form, it works. If it's blank, however, what I get is this:
<input type='text' name='txtBaseAnn' value>
When what I want is this:
<input type='text' name='txtBaseAnn' value=''>
Seems to me your issue is that you're trying to select your element with getElementById but you are using name not id.
If you were using id correctly, then it wouldn't matter if value was written as <input type='text' id='txtBaseAnn' value>
The result of document.getElementById("txtBaseAnn").value would be ""

Retrieving a value from innerHTML or textContent using JQuery map function

Using information I found in this question I have been able to retrieve my driver information, and combining it with rowIndex place it in the correct cell.
reservations.rows[whichRow].cells[7].innerHTML = which_driver;
reservations.rows[whichRow].cells[7].textContent = which_driver;
I've tried both and the proper data shows.
Now using information I found in another question (I can't find it) I have been using this function to retrieve the values as I loop through the selected rows (checkbox)
<script type="text/javascript">
$(function()
{
$('#submitButton').click(function(){
var values = $("#main_table table input[name=name]:checked").map(function() {
row = $(this).closest("tr");
return {
recordid : $(row).find('input[name=record_id]').val(),
firstname : $(row).find('input[name=firstname]').val(),
lastname : $(row).find('input[name=lastname]').val(),
timeneeded : $(row).find('input[name=timeneeded]').val(),
dateneeded : $(row).find('input[name=dateneeded]').val(),
pickup : $(row).find('input[name=pickup]').val(),
dropoff : $(row).find('input[name=dropoff]').val(),
drivername : $(row).find('textContent[name=driver_name]').val()
}
}).get();
console.log(values);
});
});
When I view the objects in the console all the other fields show the correct, but driver name is 'undefined'.
Is there a way to grab that information or a way to put the data from the popup into the "value" of the proper cell. So far, I haven't been able to get that data to show.
Thank you
Here's the actual from the HTML -
"<td id="driverlist" width='125' align='left' onClick="selectValue('id',this)" value="?" > <input type="text" id="driver_name" name='driver_name' "size='15' style='font-weight: 700' value=''"> </td>"
When the user clicks in the field it fires a function that returns the rowIndex and then fires the Popup, once a person is selected then it returns the value and fills in the proper cell –
I modified the map function to read
drivername : $(row).find('textContent[name=driver_name]').text()
and now it at least returns "" and not undefined. –
The solution was to use
: $(row).find('td:eq(7)').text()

How to store the values of an appended table row in an array variable using onchange event?

I have an ajax function that gets the values from the database and then appends those data to a table. Now, there are instances that there will be 2 or more records from the database that are being retrieved, so 2 or more table rows are also appended.My problem is, how would I able to store those values in an array variable if 2 or more values are appended on the table? Here are the codes. Thank you for the help.
$.post("{{ url('create_po') }}", { 'prod_IDs': valArray }, function(data){
var obj = JSON.parse(data);
for(var i = 0; i < obj.prodval.length; i++){
txt += "<tr class='info '><td><input type='number' class='form-control' style='width:100px;' value='0'/>"+
"</td><td>"+obj.prodval[i].unit+
"</td><td>"+obj.prodval[i].pharmaceutical+
"</td><td>"+obj.prodval[i].packaging+
"</td><td><input type='text' class='form-control' style='width:100px;' value='"+obj.prodval[i].price+"' disabled=disabled />"+
"</td><td><input type='text' class='form-control' style='width:100px;' value='0' disabled=disabled />"+
"</td></tr>";
}
$("#tbl-po-list").append(txt);
});
Table
<table id="tbl-po-list">
<tbody id="po-create"></tbody>
</table>
Bind Function to get the values onchange
$(function(){
var arrayVar = [];
$('#tbl-po-list').on( 'change keyup' , 'input[type="number"]' ,function(){
$(this).val();
$(this).parents('.info').find('.price').val();
$(this).parents('.info').find('.total').val());
});
});
I just dont know how to take a step here. How would I save the values in the array variable "arrayVar" during onchange event? What if there are 2 rows? How would I save it?
Appended rows sample image
Just store it in an object:
var data = {
qty: $(this).val(),
price: $(this).parents('.info').find('.price').val(),
total: $(this).parents('.info').find('.total').val()
}
Then when you retrieve it (based upon your image):
arrayVar[0].price // 45
arrayVar[1].price // 12

Getting value after added input box

i use a javascript to add a input box in my table as below:
var inputtopik = "topik" + 1;
$("#titleinput tbody").append("<tr><td> Topik " + topikno +
" : </td><td><input type='text' id='" +
inputtopik +"' style='WIDTH:498px;' ></td></tr>");
and then try to get the value by this
var topik = document.getElementById('inputtopik').value;
but got an error state
Uncaught TypeError: Cannot read property 'value' of null
i wonder why? maybe it cannot find the input box that ive just add? how to fix?
help :(
the value of inputtopik is "topik1". So you should do
var topik = document.getElementByID(inputtopik).value;
without the single quotes.
if you are using jQuery... one other way to get the value of input text is this:
var topik = $('#topik1').val();

Categories