I tried to put my data tables in another file and load that via ajax, sadly the form submission doesn't work anymore.
I just get the following error: Uncaught TypeError: this.type is undefined, the idRow Value is still submitted (I can print that to console) so at the moment I don't get why it says that it is undefined.
When all was in a single page the following was working without Problems:
Form creation and submission after button click:
<script>
function submitForm(rowid) {
form = document.createElement("form");
form.action = "save_tables.php"; /
form.method = "post";
form.style.display = "none";
$("#"+rowid+" td").children().each(function() {
if(this.type.substring(0,6) == "select") {
input = document.createElement("input");
input.name = this.name;
input.type = "hidden";
input.value = this.value;
form.appendChild(input);
} else {
$(this).clone().appendTo(form);
}
});
document.body.appendChild(form);
form.submit();
}
</script>
Example for one entry in the table
<tr id="entry_4" class="row100 body">
<td><input type="text" name="lang"/></td>
<td><input type="text" name="l_code"/></td>
<td><input type="text" name="code"/></td>
<td><button onclick="submitForm('entry_4')">Change</button></td>
</tr>
I replaced the table with the following and then loaded the tables via ajax.
<div align="center" id="selection">
<button onclick="showTables('lang')">Lang</button>
<button onclick="showTables('cat')">Cat</button>
</div>
<div id="target">
</div>
<script>
function showTables(showtype) {
$.get(`load_tables.php?show=${showtype}`, function(data) {
$('#target').html(data);
})
}
</script>
Found the problem and a fix, even though I don't know why it happens.
When loading the table via ajax, this.type is undefined for some inputs so I changed the
if(this.type.substring(0,6) == "select") {
to the following to get it working:
if(typeof this.type != 'undefined' && this.type.substring(0,6) == "select") {
All inputs are submitted (even if there is a select one) so it works for me