Develop Reference

Update table as soon as a new database table row is inserted

So I want to know how I should make a table, written in PHP 8, that updates as soon a new insert has been made in the database table (SQL Server 2019). I've created a simple table like this:
<table>
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1.1</td>
<td>text1.2</td>
<td>text1.3</td>
</tr>
</tbody>
</table>
Then I've added a button that creates some input fields, and when these are submitted, the data is inserted into the database. But the only way I know to update the table is to reload the page so the table now has the new row. But I've seen websites that do this without reloading the site, and want to know how? My guess is to make some kind of listener, but how I dont know.
the submit button with some inputs could be something like this:
<form>
<input type="text" id="html" name="fav_language" value="">
<label for="html">HTML</label><br>
<input type="text" id="css" name="fav_language" value="">
<label for="css">CSS</label><br>
<input type="text" id="javascript" name="fav_language" value="">
<label for="javascript">JavaScript</label>
<input type="submit" value="Submit">
</form>
All this should just be pure self written code, not JQuery or something like that.

If you want your forms to submit without reloading, you should use AJAX.
E.g. Almost all of the chat boxes in the websites use AJAX to submit information.
I think this question will help you.
If you want to use AJAX with PHP you can simply make AJAX to call your PHP file for submitting information.
Look at this page to learn more.
If you want to use AJAX without any library you can do that with XMLHttpRequest. more info

Looking to take Quantity from a text input and use OnClick="location.href" to push information to new page

Currently I am using this to submit a quantity of 1 product to my cart page with a simple Onclick add to cart button.
<td class="data_cell dataFontColor">
<label onClick="location.href='cart/?PartNo=#NPart#&Qty=1'">Add to
Cart</label></td>
<td class="data_cell dataFontColor">
<cfif IsDefined ("getPrice2.Price") AND getPrice2.Price eq "">
I am trying to implement a text box to submit any quantity the user wants, but on submit the page moves but nothing is added to cart. I know it's something wrong with the Qty= in the OnClick, but can't seem to figure it out. Any help would be appreciated!
<td class="data_cell dataFontColor">
<td><input type="text" name="Qty" size="4" value= "Qty" maxlength="9"/></td>
<td class="data_cell dataFontColor">
<label onClick="location.href='shop/?PartNo=#NPart#&Qty=#Trim (Qty)#'">Add to
Cart</label></td>

The reason this is not working is because you can't do what you're attempting using ColdFusion which processes the page server-side. User typed inputs are processed client-side.
First, I would add an id attribute to your input tag.
<input type="text" id="Qty" name="Qty" size="4" value= "Qty" maxlength="9"/>
Once your input has an ID, now you can now extract the value client-side using JavaScript.
<label onClick="location.href='shop/?PartNo=#NPart#&Qty="+document.getElementById("Qty").value.trim()>Add to Cart</label>

Submitting a dynamically generated form

I'm creating a website, and I have a form that gets created by Django. Once the page is loaded, the user can add text inputs to the form by clicking a button. The problem is that when the submit button is clicked, only the text inputs that were originally created by Django get submitted. In other words, the extra text inputs that were added dynamically don't get submitted.
I'm guessing that this is due to the fact that the submit button is only "aware" of form elements that were present when the page was loaded, and not dynamically loaded elements. With that in mind, I'm guessing I need to use some kind of Javascript in order to submit all of the form elements, including the dynamically added ones, but I can't figure out how to do it.
I've tried the jQuery submit function, but I don't really know what I'm supposed to do with it. Any tips would be appreciated!
EDIT: Here's a code snippet, which shows what the HTML looks like after 2 more text inputs have been added dynamically to the "origin"
<table>
<form class="dataInput" action="/foner/116" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='YYuqTzXUVosu1s2HD3zS00DpoPwQ7N0k' />
<tbody class="origin">
<tr>
<th>
<label>Origin:</label>
</th>
<td>
<input id="id_Origin-0" maxlength="200" name="Origin-0" type="text" value="A native of Georgia" /> // PRESENT AT PAGE LOAD
</td>
<td>
<button class="adder origin">+</button> // USER CLICKS THIS TO APPEND MORE TEXT INPUTS TO THE FORM
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
</tbody>
<tr>
<th>
<label>Notes:</label>
</th>
<td>
<input class="submitButton" type="submit" value="S" />
</td>
</tr>
</form>
</table>

Ok, I was able to solve the problem. I had a table that was arranging all of the text inputs for the form, and the table also enclosed the form itself. It turns out that by inverting this, and enclosing the table inside of the form, all of the dynamically generated inputs get POSTed successfully. Thanks again to those who gave input in the comments above -- it's always helpful to get other opinions & perspectives.
So my question is (I know you're not supposed to ask questions in answers, but in case anyone feels like responding...): How was I supposed to know this? If you're using a compiled language, this is something that a compiler would probably catch for you. Is it just the kind of thing that you get the hang of with experience? Are there any books that would help me to get a handle on elementary problems like this? I find web development to be very tedious and frustrating because I often get hung up for long periods of time on trivial errors like this, and I'm assuming it doesn't have to be this way; I just don't quite know how to improve.

Re-populate dynamic javascript after failed Codeigniter validation

I have a javascript form that allows users to add data to MySQL table via php. The form allows the user to dynamically add more data inputs if they need more than the single input that is given initially.
The user clicks on the the "Add Budget Item" button to add more items.
The form in the view looks like this:
<input type="button" value="Add Budget Item" onClick="addRow('dataTable')" />
<input type="button" value="Remove Budget Item" onClick="deleteRow('dataTable')" />
<br>
<p>(All actions apply only to entries with check marked check boxes only.)</p>
</p>
<table id="dataTable" class="form" border="1">
<tbody>
<tr>
<p>
<td >
<input type="checkbox" name="chk[]" checked="checked" value ='<?php echo set_value('chk[]') ?>' />
</td>
<td>
<label>Item/Procedure</label>
<input type="text" name="itm_nm[]" value ='<?php echo set_value('itm_nm[]') ?>'/>
</td>
<td>
<label for="itm_trig">Trigger/Visit</label>
<input type="text" class="small" name="itm_trig[]" value ='<?php echo set_value('itm_trig[]') ?>'/>
</td>
<td>
<td>
<label for="itm_amt">Budget Amount</label>
<input type="text" class="small" name="itm_amt[]" value ='<?php echo set_value('itm_amt[]') ?>'>
</td>
</p>
</tr>
</tbody>
</table>
The form is submitted to the validation controller. Upon a failed validation I would like the form to be repopulated with all the dynamically created fields and their data that was input by the user.
The validation basically looks like this:
function index(){
$this->form_validation->set_rules('itm_nm[]', 'Item Names', 'required');
$this->form_validation->set_rules('itm_trig[]', 'Item Triggers/Visits', 'required');
$this->form_validation->set_rules('itm_amt[]', 'Item Amounts', 'required|decimal');
if ($this->form_validation->run() == FALSE) {
$this->load->view('build_bud2');
}
When the view is returned, this works fine for the first form item that is not dynamically generated by the user. But, none of the dynamically generated data fields appear (and are obviously not re-populated with the previously submitted data).
How can I get the dynamically generated data fields to re-appear and be re-populated the same way the initial data does when validation fails?

I would do it this way, using a JSON view with Codeigniter and Ajax instead of "posting" the form.
Submit your form with AJAX, to your PHP script.
The PHP script takes the fields and sends back a JSON response
If there is one or more validation error(s), send back an appropriate JSON response with all the fields and errors. The response could be the field ID with the error message, for example.
The JS takes the JSON response and display the errors (if there are any).
If you want to use a POST anyway, you have, at least, 2 choices:
Output a JSON representation of what the user entered that will be available in JavaScript. Then, loop trough all the fields and "redo" the field structure based on the JSON representation.
Or, make a PHP representation of what the user entered (in objects or in an array) and loop trough the fields, in PHP, and display all fields one by one.

I would do it this way:
Hit Submit Button form
Validate input
If validation failed, pass the same POST data to the view page (again)
Manipulate the passed POST data in view using foreach loops and
stuff.
By the way, this link may help or give you an idea
How can I use CodeIgniter's set_value for a field that's an array?

Onchange not detecting field change with Google form autocomplete

I have google autocomplete form on my page. What I'm trying to do is to use on change on city field from the form to query base and display result on the page via ajax and php. If you are familiar with googles form autocomplete, user inputs something in one input field and when he has finished form is filled with data.
Problem is that nothing is firing when form is filled with googles function, but when I input manually something in city field everything is working like it should. I've tried with onchange and oninput event but no joy.
Here is html layout:
<div id="locationField">
<input id="place" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true" **onchange="getCity(this.value)"**></input></td>
</tr>
</table>
Any other way to detect the change?

Most autocompletes will not trigger an onchange event (true of browser autocompletes too).
You'll need to bind the event you want to the Google Maps autocomplete object using .addListener().
For an example check out this other Stack Overlow answer (by Jorge) and the fiddle posted in the accepted answer there.
Also see Google's own documentation on how to handle events.