Laravel add row to table without refreshing page - html

Question

I'm trying to add row to the table without refreshing page is it possible without using js? Basically I have a table and input in the modal my problem is that I need to refresh the page whenever I'm adding data to table which closes modal and data from the table has to be saved only when pressing save button in the modal. Maybe it is possible to do that using Laravel Controllers?
<table class="table" style="margin-top: 16px">
<tbody>
<tr>
<td class="table-text">
<div style="float: left">TASK NAME</div>
</td>
<td style="width: 10%">
<div style="float: end">DELETE</div>
</td>
</tr>
</tbody>

Answer 1

This is not possible without javascript.
Assuming you are using jquery, I would do something like this:
$('form').on('submit', function(e) {
e.preventDefault(); // Disable the sending of the form
var one = $('#one').val();
var two = $('#two').val();
$('#one').val('');
$('#two').val('');
$.ajax({
url: "/api/products/add",
method: 'post',
data: {
product: one,
price: two
},
success: function(){
appendToTable(one, two);
}
});
appendToTable(one, two); // The Success function in this ajax would never reach, because the url is not set. Thats because the function is called here.
});
function appendToTable(one, two) {
$('table').append(`
<tr>
<td>${one}</td>
<td>${two}</td>
</tr>
`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/api/products/add" method="post">
<input id="one" name="product" type="text" placeholder="product" required>
<input id="two" name="price" type="number" placeholder="price" required>
<button>Add</button>
</form>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>PC</td>
<td>500</td>
</tr>
</table>
You disable the forms default behavior (submitting) and do the nessesarry work with js (or jquery). If the user hover disables js, the form submits as normal and sends the data.