We Keep Coding

How to get inputbox value in ajax

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

Problem with querySelector() not modifying value, onblur or onfocus in <input> tag

I must be screwing something up. When I try to use querySelector() in Javascript I can't seem to modify the value, onblur and onfocus clauses of an input tag but I can modify it's id and name using JavaScript. Help!
I cloned a chunk of HTML code with the following;
const newAdjustment = lastAdjustment.cloneNode(true);
The input tag I'm modifying looks like this;
<input type="text" class="form-control text-right entered-amount"
id="Amount15" name="Amount15" value="$3.00"
onfocus="deformatAmount(15)" onblur="recalc(15)">
</input>
I have no problem using querySelector() to modify the id and name of the input tag;
const originalSequenceNumber = 15;
const newSequenceNumber = originalSequenceNumber + 1;
const originalAIdName = 'Amount' + originalSequenceNumber;
const newAIdName = 'Amount' + newSequenceNumber;
newAdjustment.querySelector("#" + originalAIdName).id = newAIdName;
newAdjustment.querySelector("#" + newAIdName).name = newAIdName;
This leaves me with the following;
<input type="text" class="form-control text-right entered-amount"
id="Amount16" name="Amount16" value="$3.00"
onfocus="deformatAmount(15)" onblur="recalc(15)">
</input>
I then try to modify value, onblur and onfocus with the following;
const newAOnfocus = 'deformatAmount(' + newSequenceNumber + ')';
const newAOnblur = 'recalc(' + newSequenceNumber + ')';
newAdjustment.querySelector("#" + originalAIdName).value = "$0.00 ";
newAdjustment.querySelector("#" + newAIdName).onfocus = newAOnfocus;
newAdjustment.querySelector("#" + newAIdName).onblur = newAOnblur;
and nothing happened. newAOnFocus, newOnBlur and the input element are as follows;
newAOnfocus = deformatAmount(16)
newAOnblur = recalc(16)
newAdjustment = <input type="text" class="form-control text-right entered-amount" id="Amount16" name="Amount16" value="$3.00" onfocus="deformatAmount(15)" onblur="recalc(15)">
After I append the child to the document and use document.querySelector() I can modify the value but not the onblur or onfocus clauses. What am I doing wrong? What clause am I missing from querySelector()? By the way, there a three input and three button tags in newAdjustment and I'm having the same problem with all six.
Correction about .value
.value was updated correctly. The page reflected the correct value in .value but when I did a console.log() of newAdjustment it displayed the original value from the cloning (.cloneNode()). I'm wondering if I'm having the same problem with the rest, which means I'm actually not having a problem at all. More testing to follow.

You can use setAttribute on the input.
So
newAdjustment.querySelector("#" + originalAIdName).value = "$0.00 ";
newAdjustment.querySelector("#" + newAIdName).onfocus = newAOnfocus;
newAdjustment.querySelector("#" + newAIdName).onblur = newAOnblur;
Becomes
newAdjustment.querySelector("#" + originalAIdName).setAttribute("value", "$0.00 ");
newAdjustment.querySelector("#" + newAIdName).setAttribute("onfocus", newAOnfocus);
newAdjustment.querySelector("#" + newAIdName).setAtribute("onblur", newAOnblur);

Check value of input field regardless of type

I've seen and read this question. Didn't quite find my answer there.
I have some code that accept an html template, and uses that template inside a form.
That template will contain x number of input fields.
Is there a way to check for a value in those input fields generically?
Kinda like this:
var inputFields = element.getElementsByTagName('input');
inputFields.forEach(function (element) {
var value = element.value;
// ... something
});
I know that won't work, but you get the idea.
I think I have to write special cases for different input types, but i thought I'd ask if anyone have any experience with this problem.
This is done in pure JavaScript, so I don't really need jQuery. Unless you have a really neat way to do it in jQyery, compared to just plain JavaScript.
EDIT: I need to check if any input has been entered into the field, whether it is a file or text. I need to remove the name attribute on those who have no value.

Using the following, I can't see that you need any special handling for different types. You can just read the value property:
<script>
var t = '<table>';
var inputTypes = ('hidden text tel url email password datetime date month week' +
' time number range color checkbox radio file submit image' +
' reset button').split(' ');
var type;
for (var i=0, iLen=inputTypes.length; i<iLen; i++) {
type = inputTypes[i];
value = type == 'number'? 10 : 'input type ' + type;
t += '<tr><td>' + type + '<td><input type="' + type +
'" name="' + type + 'Input" value="' + value + '">';
}
document.write(t + '<\/table>');
</script>
<button onclick="getValues(document.getElementsByTagName('input'))">Get values</button>
<script>
function getValues(inputs) {
var input;
for (var i=0, iLen=inputs.length; i<iLen; i++) {
input = inputs[i];
console.log(input.name + ': ' + input.value);
}
}
</script>
You may want to check that checkboxes and radios are checked. For that, getting the value can be:
if (input.type in {radio:'', checkbox:''}) {
if (input.checked) {
// get value
}
} else {
// get value
}

Input text value in url after clicking button

I would like to know how to input text value from a text field and adding it into an url after click Search button. So far I am not able to make that the value from input shows in the url. So what I have is this:
<input type="text" id="myText" value="Mickey">
<button onclick="myFunction()">Search</button>
and the javascript:
function myFunction() {
var x = document.getElementById("myText").value;
}
var sourceCode = '' + '<img src="' + imageBase + image + '" width="'+sizes[0]+'" height="'+sizes[1]+'"/>'
How can I get x value to be showing the value from the input text field?
Thanks in advance.

x does get the value of the input field, but your string build of sourceCode is riddled with errors (x is inside the double-quotes, image is undefined, etc). It also lies outside myFunction() so x is undefined too, and in any case will be executed before you click. If you comment out that line and add alert(x) inside myFunction() you can see that you do indeed capture the input, but the script fails and stops running.

try this:
function myFunction() {
var x = document.getElementById("myText").value;
var sourceCode = '' + '<img src="' + imageBase + image + '" width="'+sizes[0]+'" height="'+sizes[1]+'"/>';
}

.innerHTML to generate a new input?

i'm trying to use .innerHTML and appendChild to generate a new input with a value that is equal to a 's value. However it doesn't seem to be working and I don't understand why..
Here is my JS code:
function generateClass() {
var value = document.getElementById("Classes").value;
var originalDiv = document.getElementById("selectDiv");
var newDiv = document.createElement("div");
newDiv.innerHTML = "<input type='text' name='class' value='" + value + "' disabled />"
originalDiv.appendChild(newDiv);
}
The select is simply:
<select name="class" id="Classes">
can anyone tell me what i'm doing wrong?
Thanks

Sorry Guys,
I've fixed my problem, i'd been an idiot with some earlier JS code.
Sorry for wasting your time.