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

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;
};
};

How to get the value only from an input box that contains value out of multiple input boxes

I would like to get the value from an input box that contains value. Only one of them contains some value out of 3 and remaining 2 are empty:
The code mentioned below doesn't seems to work:
var a = $('input').eq(0).val();
if (a == undefined) {
a = $('input').eq(1).val();
//if still undefined try the next input box
if (a == undefined) {
a = $('input').eq(2).val();
}
}
console.log(a);

If you're trying to find the input that has a value entered you can use filter() instead of repeatedly checking them. Try this:
var $field = $('input').filter(function() {
return $(this).val().trim() != '';
});
console.log($field.val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" />
<input type="text" value="foo" />
<input type="text" value="" />
Note that the above assumes that only one field will ever have a value. If there will be multiple, then you'll need to loop over the resulting collection in $field.

2-step dynamical echo of a php in innerHTML

step 1: I have a form where input fields will be generated dynamically by innerHTML.
var d = document.getElementById("d1p_1");
d.innerHTML += "<input class='add' name='field_" + i + "' type='text'>";
step 2: now I would like to echo a php variable of each value to each dynamically generated input field. Something like:
d.innerHTML += "<input class='add' name='field_" + i + "' type='text' value='"<?php echo $field_" + i + "; ?>" + "'>
How can I archieve that?
Thanks in advance.
To give further information:
This is for a form where an user can add fields, depending from how many fields he needs and will be adding. Now it could be that an user adds more fields than he usually needs and enters data somewhere between field_1 and field_280. To catch the field_x where he entered data I need to echo the value of that input field.
$field_1 = value of field_1 if given;
...
$field_280 = value of field_280 if given;
The innerHTML will add the input fields dynamically by a counter for i. So I dont know what input will be given on which field. Thats why I need to generate the PHP echo part dynamical as well. Like:
<?php echo $field_" + i + "; ?>
The whole process:
form -> contains first just one input field (user will make some inputs) -> by clicking a button there will be added further input fields (1 click 1 field and user does not need to fill in data before he can add another fields) -> now imagine that a user will add 3 fields and has given input on first and third input field -> name="field_1" and name="field_3" ->
the name of each input field is generated by i++ -> the value is empty otherwise the form will be posted -> now the user will submit the form.
this means the value to echo would be $field_3 = (isset($_POST['field_3'])) ? $_POST['field_3']; : ''; -> this variable exist for all i so each variable is set in the php part before BUT to catch the right input name="field_i" with $field_i and to echo this match is the problem.
So by clicking submit the page would be reloaded and instead of only just one input field like from before now would be there 2 input fields. first would be name="field_1" and the second would be name="field_3" because user has left out input name="field_2" before. So name="field_3" needs to echo the right value depending from a dynamically generated name="field_"+ i +"what means that when the name tag is generated dynamically the php tag needs also to be generated dynamically to match each other.

i is a JavaScript variable so including it in a php declaration is giving you problems
You may implement your string concatenation out of the php code as follows
<?php
$field_="stavo";
?>
<script type="text/javascript">
var i=10;
var d = document.getElementById("d1p_1");
d.innerHTML+= "<input class='add' name='field_" + i + "' type='text'>";
d.innerHTML += "<input class='add' name='field_" + i + "' type='text' value='<?php echo $field_; ?>"+i+"'>";
</script>
Of course you must be having this in your Html
<div id="d1p_1"></div>

Javascript controls html so the external js does not see the html name field

I am building a form using a js+html and I ran into a problem. There's a part of my form where user should be able to click on a textfield and pick a date & time from a calendar(anytime.js by MAM3), and since my form(partial code) is built this way:
third_list = "<table class='table'>";
if (radio_array[genIndex] == reserve) {
third_list += "<tr><td id='Date:'><label><span id='Date'>Date:</span><input type='text' id='Date' name='_date' size='20' onfocus='showMessage()'/></label></td>";
third_list += "<td id='Time:'><label><span id='Time'>Time:</span><input type='text' id='Time' name='_time' size='20' /></label></td>";
document.getElementById("third").innerHTML = third_list;
l3_value = "";
return;
}
and by putting this to the html:
<script type="text/javascript">
AnyTime.widget
( "Date",
{ format: "%m/%d/%Z" }
);
AnyTime.widget
( "Time",
{ format: "%h:%i:%p" }
);
</script>
it does not pop-up a calendar.
Side notes: I have included all of the required js&css files and tried to see if it works on a seperate text field out from js, and it works. I think the reason it doesnt work is it is controlled by js, so the anytime.js does not see it as a html name field.
SN2: onfocus='showMessage()' in my js is to show a message when a user clicks on a text field.
How do I make it work?

A couple of issues:
First, you have more than one element with the id values Date and Time. id values must be unique in the document. I expect the script isn't getting the element it expects and is failing to init. The documentation for AnyTime seems to suggest it uses the first argument you give AnyTime.widget as an id and expects to get an input field. In your case, it usually won't on most browsers, because when faced with an invalid structure featuring duplicate ids, most browsers will return the first one when you ask for "the" element with that id, which in your case is a span rather than an input field.
Your Date elements:
<span id='Date'>Date:</span><input type='text' id='Date' ... />
<!-- ^--- one ^--- two -->
The Time is the same sort of problem.
Separately from that, I suspect you need to ensure that the elements exist when you call AnyTime.widget. I don't know where you have that script tag that calls it, but what you need to do is make this calls after you've executed the line
document.getElementById("third").innerHTML = third_list;
...so that the elements in question exist in the DOM. So for instance:
third_list = "<table class='table'>";
if (radio_array[genIndex] == reserve) {
third_list += "<tr><td id='Date:'><label><span id='Date'>Date:</span><input type='text' id='Date' name='_date' size='20' onfocus='showMessage()'/></label></td>";
third_list += "<td id='Time:'><label><span id='Time'>Time:</span><input type='text' id='Time' name='_time' size='20' /></label></td>";
document.getElementById("third").innerHTML = third_list;
l3_value = "";
setUpWidgets();
return;
}
// ...elsewhere in the same scope or a containing scope:
function setUpWidgets() {
AnyTime.widget
( "Date",
{ format: "%m/%d/%Z" }
);
AnyTime.widget
( "Time",
{ format: "%h:%i:%p" }
);
}
That creates a function, which you call when the elements are there.
Side note: You also have an id that looks like this:
<td id='Date:'>
Although that's a valid id in HTML5, it wasn't valid in HTML4 and isn't valid in CSS. So if you try to use that id in a CSS-style selector (for instance, with jQuery), you'll probably run into trouble.