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

JavaScript mask money doesn't work after adding another input in table

I am new in JavaScript and jQuery, and I have a problem when I use the mask money plugin. It worked well, but when I make some JavaScript to add another input in table, the new row doesn't work with the maskmoney even though it had the same class
Here's my table:
<thead>
<tr>
<td width="100"><center>Waqaf</center></td>
<td width="100"><center>Operasional Sekolah</center></td>
<td width="100"><center>Seragam</center></td>
</tr>
</thead>
<tbody>
<tr>
<td width="100"><input type="text" class="form-control price" name="waqaf" id=""></td>
<td width="100"><input type="text" class="form-control price" name="operasional_sekolah" id=""></td>
<td width="100"><input type="text" class="form-control price" name="seragam" id=""></td>
</tr>
</tbody>
The JS for adding new field was running well, when I've checked the inspect element outputing input with same class. And the problem is in the plugin JS mask money
<script type="text/javascript">
$('input.price').number( true, 2 );
</script>
(see picture below)
BUT when I manually make another text input it worked well
Why doesn't it work even though I make another field with js event with same input and class?

You should do $('input.price').number( true, 2 ); each time a new row is created, the method currently only applies to the first row.

If you mean this plugin, then it's important to know it uses $.bind to handle events. It means that new inputs won't be handled in any way by this plugin. Today we should use $.on for this kind of bindings (and '$.live' in early versions of jQuery).

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.

How to structure/control the data that was submitted by a Form?

Let's assume I have a Form like this:
<form>
<table>
<thead>
<th>
Submit?
</th>
<th>
Data
</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="c1">
</td>
<td>
<input name="t1">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="c2">
</td>
<td>
<input name="t2">
</td>
</tr>
</tbody>
</table>
</form>
If I submit that form. An Array will be submitted that contains the checkboxes (if checked) and the regular input.
Now I want it to either:
Submit each row as a row in the array
Only submit the content of the row if the checkbox is checked.
Is there a way to accomplish that?
Edit:
Right now I am submitting the Data like this:
$.post(url, { attributes: $(form).serializeArray() })
I'd love to do it with HTML-Markup, if possible. As this would be the right way in my opinion.
I actually don't want to do some JS/PHP Array juggling. Unless there is a nice way to do it. Right now I can only think of some quite ugly foreach stacking.

Alright here is how I solved it:
Leave the form as it is.
Just do some JS Magic. Instead submitting the Form I do the following:
var submitData = {};
$("input:checked.attributCheckbox").each(function() {
var id = $(this).attr('name');
// This is how I get the input for the checkbox.
var val = $("input[type=number][name="+ id +"]").val();
submitData[id] = val;
});
$.post(url, {attributes : submitData});
Well it's not the perfect solution I hoped for. But it works quite nice. Maybe somebody can come up with a better way to solve it?

unable to hide and show a particular table row with the same id names inside a div using jquery

I am creating a website and there are some pages containing the <div> tags as the wrapper of <table>. A <tr> of each table contains a <form> and another <tr> contains some <a> tags. I am using these anchor tags to make buttons just to add hide and show functionality. Whenever some new data is fetched from database, the set of said html structure is created dynamically. Every <div> contains the same id and every <tr> also containing the <form> assigned the same id. Below is my example htmlfor the better explanation.
HTML
<div class='static_archive'> // First Wrapper
<table>
<tr>
<td>Some data</td>
<td>Some data</td>
<td>
<a id='show_hide_details' href='#'>Show/Hide Button</a>
</td>
</tr>
<tr id='form_container'>
<td colspan='3'>
<form>
<input type='text' name'first' />
<input type='text' name'second' />
<input type='text' name'third' />
</form>
</td>
</tr>
</table>
</div>
<div class='static_archive'> // Second Wrapper
<table>
<tr>
<td>Some data</td>
<td>Some data</td>
<td>
<a id='show_hide_details' href='#'>Show/Hide Button</a>
</td>
</tr>
<tr id='form_container'>
<td colspan='3'>
<form>
<input type='text' name'first' />
<input type='text' name'second' />
<input type='text' name'third' />
</form>
</td>
</tr>
</table>
</div>
jQuery
$(document).ready(function(){
$("#form_container").hide();
$("#show_hide_details").click(function(){
$("#form_container").toggle();
});
});
As soon as the page loads, $("#form_container").hide(); hides all the <tr> containing the <form>. By clicking hide/show button with the toggle effect, hides and shows the every content with the same id.
I want to show only one form at a time when a particular button is hide/show button is pressed. How can i control such behavior?
With a new record fetched, a new DIV is created with only one table inside it. And the table contains only one form. The table row containing the form needs to be hide/show.
Here is the jsfiddle with my code structure jsfiddle
Every clicked hide/show should effects the respective form.
I have edited my post. Please have a look now.

You can use $(this) to do the toggle with particular block.
$(this).closest('tr').next("#form_container").toggle();
You should not use same id for multiple elements, assign class and use that
$(this).closest('tr').next(".form_container").toggle();

I think u want this or may this help u.
You can not have same id's for different controls.So u can have id's staring with same string
You can use ^ here:
$(document).ready(function(){
$("[id^='form_container']").hide();
$("#show_hide_details").click(function(){
$(this).parents().next("tr").toggle();
});
});
jsfiddle

I assume you want to show all of them hidden first. Obviously, you have to replace the id's with class.
$(document).ready(function(){
$(".form_container").hide();
$(".show_hide_details").click(function(){
$(this).parents("tr").next().toggle();
});
});