Reopen toggle after form submit - php

Question

I am still working on my school project, which is almost finished.
With your help, I successfully created a working system that allows users to write, edit and delete data to/from the database.
The only problem I have right now us "user-friendly form." I managed to create auto-focus, insert correct values on edit so the user can see what was previously written in that field, etc.
I have my forms hidden with jquery. When a user clicks add, the form slides in. What I need to achieve is: "when a user clicks submit and the page refreshes and adds the element to the database, the form should appear again so users can add data faster."
Here is my code.
$(document).ready(function() {
$('#x').click(function() {
$('.y').toggle("slide");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="x">Click</div>
<div class="y" style="display: none;">
<div class="container">
<form action="insertzunanja.php" method="POST" id="x">
<input type="hidden" name="narocilo" value="0.1412312">
<input type="hidden" name="id" value="id-1">
<input type="text" name="dolzina" style="width:49%;" placeholder="Dolzina (v cm)">
<input type="text" name="sirina" style="width:49%;" placeholder="Sirina (v cm)">
<input type="text" name="kolicina" value="1" style="width:49%;" placeholder="Kolicina">
<input type="text" name="opombe" style="width:49%;" placeholder="Opombe">
<input type="submit" value="Send">
</form>
</div>
</div>
Thanks and best regards.

Answer 1

You can use AJAX call to send the data to php file instead of form action. According to your code you will have something like this:
<div id="x">Dodaj</div>
<div class="y" style="display: none;">
<div class="container">
<input type="hidden" name="narocilo" value="<?php echo $randomNum; ?>">
<input type="hidden" name="id" value="<?php echo $id; ?>">
<input type="text" name="dolzina" style="width:49%;" placeholder="Dolzina (v cm)">
<input type="text" name="sirina" style="width:49%;" placeholder="sirina (v cm)">
<input type="text" name="kolicina" value="1" style="width:49%;" placeholder="Kolicina">
<input type="text" name="opombe" style="width:49%;" placeholder="Opombe">
<input id="sub" type="submit" value="Send">
</div>
</div>
$(document).ready(function(){
$('#x').click(function() {
$('.y').toggle("slide");
});
});
$("sub").click(function(){
$.post("insertzunanja.php",
{
dolzina: $("input[name=dolzina]"),
sirin: $("input[name=sirina]")
},
function(){
$("input[name=dolzina]").val("");
$("input[name=sirina]").val("");
if($('.y').is( ":hidden" )) {
$('.y').toggle("slide");
}
});
});
Basically, when you click on button you call php with AJAX POST request passing two values dolzina and sirin retrieved by the html code(note: you have more values to pass so change it accordingly) to php file. Jquery deletes the values of the input fields and check if input fields are shown. If not the inputs fields are shown.

Answer 2

If you are using PHP to process the form submission and generate the code in your question, and you always want the form to be displayed after submission, you can do this:
At the PHP code identify submission (e.g. isset($_REQUEST['id']) ).
[if #1 is true] On generating jQuery code, add $('.y').show(); within the ready function (but separated from the existing click function).
Example:
<?php
// your existing code...
?>
$(document).ready(function() {
<?= ( isset($_REQUEST['id']) ? '$(".y").show();' : '' ); ?>
$('#x').click(function() {
$('.y').toggle("slide");
});
});
<?php
// your existing code...
?>