We Keep Coding

How Can I Get Values from Dialog in HTML and JavaScript, and Display it in PHP page

I have a HTML form that contains dialog, and the dialog contains inputs
When user complete dialog inputs and click send, the values appear in the same page of form in divusing JavaScript.
Then, when user complete other fields in form and click submit, user goes to another php page than contains entered values of all fields.
I want to get the values of dialog to php page
My form code:
<form id="form" action="message.php" method="POST" >
<div class="container" id="executive-bodies-information">
<!-- details-of-partners Dialog -->
<dialog id="details-of-partners">
<h2>بيانات الشركاء ، الملاك المستفيدون النهائيون ، المالكين المستفيدين</h2>
<label for="details-of-partners-name">الاسم</label>
<input type="text" id="details-of-partners-name"
name="details-of-partners-name" placeholder="الاسم" >
<label for="details-of-partners-date-of-expiry">تاريخ الانتهاء</label>
<input type="date" id="details-of-partners-date-of-expiry"
name="details-of-partners-date-of-expiry" placeholder="تاريخ الانتهاء">
<button button type="button" id="details-of-partners-send" >إرسال</button>
<button button type="button" id="details-of-partners-cancel"
onclick="closeDialog('details-of-partners')">إلغاء</button>
</dialog>
<!-- END details-of-partners Dialog -->
<div>
<button class="btn-add" type="button" onclick="showDialog('details-of-partners')">＋ جديد</button>
<div id="details-of-partners-container"></div>
</div>
</div>
<label for="preferred-language">اللغة المفضلة</label>
<select name="preferred-language" id="preferred-language" required>
<option value="" disabled selected>اختر</option>
<option value="english">الانجليزية</option>
<option value="arabic">العربية</option>
</select>
<div class="center">
<button type="submit" id="submit"><h1>إرسـال</h1></button>
</div>
</form>
This button is clicked to show dialog:
This is the dialog:
Here is the result of dialog, while user enter new dialog with new values, a div is added with these new valaues in form page:
My JavaScript code to enable values to display in form page:
<script>
function showDialog(id) {
var dialog= document.getElementById(id);
dialog.show();
}
function closeDialog(id){
var dialog= document.getElementById(id);
dialog.close()
}
document.getElementById("details-of-partners-send").addEventListener('click', function(){
var name= document.getElementById("details-of-partners-name").value;
var date_of_expiry= document.getElementById("details-of-partners-date-of-expiry").value;
document.getElementById("details-of-partners-container").innerHTML+=
`
<div class="border" >
<div class="details-box">
<span>الاسم:  </span>
<span>${ name}</span>
</div>
<div class="details-box">
<span>تاريخ الانتهاء:  </span>
<span> ${date_of_expiry}</span>
</div>
</div>
`;
closeDialog("details-of-partners");
})
</script>
An example of another code in message.php where I collect all values of form and echo values in it:
<span for="preferred-language">اللغة المفضلة: </span>
<span><?php
if(isset($_POST['preferred-language'])){
$lang= $_POST['preferred-language'];
if($lang=="english"){
echo "الانجليزية";
}else{
echo "العربية";
}
}
?> </span>
It will look like this:
And this is What I need, collect value from dialog using Javascript, then appears these values of div in php page
Sorry for taking long time to explain it in details

i suggest adding a hidden input where you can store the values from the dialogue so they can be submitted with the form, and since there can be multiple dialogues, you need an increment variable.
Before submit button : <input type="hidden" name="increment" id="increment" />
Outside of the onclick event: var incrm = 1
document.getElementById("details-of-partners-container").innerHTML+=
...
<input type="hidden" name="name${incrm}" value="${name}" /> //close .innerHTML
document.getElementById("increment").value = incrm;
incrm++;

Save data to MySQL from within jquery loaded page

I have created an example of what I am trying to accomplish:
I have an index page with a form + input elements (example.php).
When submitted I call a php page via jQuery that processes the form data and outputs result in div on index page (proces.php)
From within this php process page loaded in the div I have a button that when clicked I want to save $_POST data + other values from that page into MySQL.
I simply just cannot figure out how to "re-use" $_POST data and new values from example.php file and process.php file so I can save it from proces page when clicking button on proces.php page.
This is the example: http://mazey.dk/example.php
When form on index page is submitted the proces.php is called and here all POST data is parsed. This data I want to save when clicking Save button in proces.php file.
I hope someone can guide me in the right direction.
Thanks
***** UPDATE *****
Let me break down the code I have:
On example.php page I have a POST form with an action and a jQuery/AJAX script that prevents form from submitting in a normal way, instead it sends POST to form action URL. Result is then shown inside the with .previews class.
<script>
$(document).ready(function(){
$('.selectform').ajaxForm( {
target: ".previews",
//success: function(res) {
//$( "#currentOrders" ).load(window.location.href + " #currentOrders" );
//}
});
});
</script>
<form action="proces.php" class="selectform" method="post">
<input name="test" type="hidden" value="123">
<div class="form-group col-md-9">
<input name="inputtest" type="text">
</div>
<div class="form-group col-md-9">
<div class="">
<button class="btn btn-primary btn-lg" type="submit"><i aria-hidden="true" class="fa fa-calculator"></i> Calculate</button> <button class="btn btn-default btn-outline btn-lg" type="reset">Reset</button>
</div>
</div>
</form>
<div class="col-md-6 col-lg-6 col-xl-6 col-xxl-6">
<div class="previews"></div>
</div>
Inside proces.php file (that displays in the .previews ) I have a button. This button I want to trigger a "save-action" so when clicked I can save POST values + other variables that will be defined in proces.php into the MySQL DB. I have no problem in handling functionality to MySQL, but I need to figure out how to call POST data + variables upon clicking the button.
Proces.php file:
<input type="submit" name="save" value="SAVE" class="btn btn-lg btn-default">
<?
print_r($_POST);
$newTest = "Check";
$data = 234;
// TEMPERATURE CONTROLLER
$controller = explode("|",$_POST[controller]);
$controllerCostEach = $controller[1];
$controllerName = $controller[2];
$controllerCost = $controller[1];
$qtyController = $controller[0];
$controllerAssemblyCost = $controller[3];
$totalControllerAssemblyCost = $controllerAssemblyCost * $qtyController;
$controllerCost = $qtyController * $controllerCost;
//SUBMIT BUTTON CLICKED
//E.g if(save).clicked{
echo "HERE I can save original $_POST data + other variables from $_POST values from index file and this proces.php file via standard mysqli_query";
//}
//SUBMIT
?>
I hope with this explanation that someone can help me :-)

Validate a form element without/before submitting the form with JavaScript

I have an HTML form that has its elements displayed in various Bootstrap modals. The first modal has a text box input that and a "Next" button to open the next modal. When the "next" button is pressed. I want to check if the text box is empty, and trigger a validation message. The form does not get submitted until the very end. Everything I've tried has not worked so far.
Javascript/jQuery code
$("#add_assistant_next").click(function () {
var textInput = document.getElementById('add_assistant_user');
var text = textInput.value;
if (text === "") {
textInput.setCustomValidity('Please fill out this field.');
textInput.checkValidity();
var form = $('#form_add_assistant');
form.find(':submit').click();
} else {
textInput.setCustomValidity('');
}
});
HTML
<form name="add_assistant" method="post" id="form_add_assistant">
<div class="modal-body">
<div class="step">
<span class="fas fa-arrow-right choose-arrow mr-1"></span>1. Choose a user to add
</div>
<div class="pl-3 pt-1">
<div>
<input type="text" id="add_assistant_user" name="add_assistant[user]" required="required" placeholder="UCInetID or UCI email address" class="mr-0 form-control" />
<button type="button" id="add_assistant_next" name="add_assistant[next]" data-toggle="modal" data-target="#add-user-modal" class="btn btn-outline-secondary btn">Look up user</button>
</div>
<input type="hidden" name="user_search_route" value="/courseSpace/20900/listAssistantEnrollment">
</div>
</div>
... form continues in other modals

Your JS code is probably fighting with Bootstrap for control of that button. To get around that, and have your validation, you could try modifying your code to have a middle step / temporary button to help with validation first before actually submitting. So something like this:
Javascript/jQuery code
$("#my_temp_button").click(function () {
var textInput = document.getElementById('add_assistant_user');
var text = textInput.value;
// Might also want to handle null and undefined cases?
if (text === "" || text === undefined || text === null) {
// I'm assuming if it's empty, it doesn't pass validation,
// so we just display this warning and wait for the user to fix it:
textInput.setCustomValidity('Please fill out this field.');
} else {
// it's not empty so validate:
if (textInput.checkValidity()) {
// it passed validation, so ok to submit.
// call the real button:
$('#add_assistant_next').click();
// do you need this?
var form = $('#form_add_assistant');
form.find(':submit').click();
} else {
// it failed validation, so display another error?
textInput.setCustomValidity('Try again.');
}
}
});
HTML:
<form name="add_assistant" method="post" id="form_add_assistant">
<div class="modal-body">
<div class="step">
<span class="fas fa-arrow-right choose-arrow mr-1"></span>1. Choose a user to add
</div>
<div class="pl-3 pt-1">
<div>
<input type="text" id="add_assistant_user" name="add_assistant[user]" required="required" placeholder="UCInetID or UCI email address" class="mr-0 form-control" />
<!-- Feel free to change the id name. This is the button the user sees. It's only purpose is to give your function above full control to it and prevent Bootstrap from touching it and jumping to the next modal without having the user fix the validation failure first: -->
<button type="button" id="my_temp_button" class="btn btn-outline-secondary btn">Look up user</button>
<!-- Hide the real button from the user: -->
<div style="display:none">
<button type="button" id="add_assistant_next" name="add_assistant[next]" data-toggle="modal" data-target="#add-user-modal" class="btn btn-outline-secondary btn">Look up user</button>
</div>
</div>
<input type="hidden" name="user_search_route" value="/courseSpace/20900/listAssistantEnrollment">
</div>
</div>
...

Have you tried adding a trap for the submit event itself?
$('#form_add_assistant').submit(function(evt){
//do your validation here
if (validation fails){
return false; // OR, alternatively, `evt.preventDefault()`
}
//form submission will continue if not returned false
});
References:
https://api.jquery.com/submit/
How to conduct manual form validation via jQuery .submit()

how to link form action with the buttons

I have 3 buttons : ADD , SEARCH , IMPORT and there are three strut forms within the jsp each form performing add,search and import functions. When the add button is clicked only add form should be shown and when search button is clicked only search form should be displayed.All 3 forms should not be shown at once
How to link the buttons to the form actions

You should have to use jquery and ajax call to sumbit the form.
Suppose you have three Form A,B,C and intially a form is shown.
then you should have to use jquery show() and hide() function to show and hide the respective forms.
and you should have to use ajax call to submit you action to server.
i can provide you a code example.
$(document).ready(function(e) {
$(".showForm").click(function(e) {
var form_toshow = $(this).attr("data-form-toshow");
$("#fomr1").hide();
$("#fomr2").hide();
$("#fomr3").hide();
$("#" + form_toshow).show();
});
$("#fomr1form").submit(function(e) {
//make ajax call to sumit data
return false;
});
$("#fomr2form").submit(function(e) {
//make ajax call to sumit data
return false;
});
$("#fomr3form").submit(function(e) {
//make ajax call to sumit data
return false;
});
});
#fomr2,
#fomr3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnshowform1" data-form-toshow="fomr1" class="showForm">
show form 1
</button>
<button id="btnshowform2" data-form-toshow="fomr2" class="showForm">
show form 2
</button>
<button id="btnshowform3" data-form-toshow="fomr3" class="showForm">
show form 3
</button>
<br>
<br>
<div id="fomr1">
<form id="form1form">
form 1
<input type="text" name="form1text" id="form1text" />
<br>
<button id="sumitForm1">submit form1</button>
</form>
</div>
<div id="fomr2">
<form id="form2form">
form 2
<input type="text" name="form2text" id="form2text" />
<br>
<button id="sumitForm2">submit form2</button>
</form>
</div>
<div id="fomr3">
<form id="form3form">
form 3
<input type="text" name="form3text" id="form3text" />
<br>
<button id="sumitForm3">submit form3</button>
</form>
</div>

AJAX and submit button on form interaction

I'm creating a simple website and a html page on it which contains a table that shows products. I load this table using AJAX and it work properly. Here is a screenshot:
Under the table I have buttons which perform CRUD operations using AJAX.
They communicate to a php script on a server outside of my domain using GET method.
When I click on Add product it opens a form with a button that whose onclick event calls a function which adds a product using AJAX. But, when I click, the whole page reloads and the product is not added. If I put the value that says wheter the call is async to false, it works as intended and the product is added to the table, however that is not the point of AJAX.
This is my code for adding a product(delete and update are almost the same).
<div id="addProductPopup">
<div id="popupContact">
<form id="form" method="post" name="form">
<img id="close" src="/servis/Resursi/Slike/close.png" onclick ="hide('addProductPopup');">
<h2>Dodavanje proizvoda</h2>
<hr>
<input id="name" name="naziv" placeholder="Naziv proizvoda" type="text" required>
<input id="kolicina" name="kolicina" placeholder="Količina proizvoda" type="text" required>
<input id="url" name="url" placeholder="URL slike" type="text" required>
<input type="submit" value="Pošalji" class="popupButtons" onclick="addProduct()">
</form>
</div>
When I click on submit this function is called:
function addProduct(){
var isValid = true;
var url = "http://zamger.etf.unsa.ba/wt/proizvodi.php?brindexa=16390";
var amount = document.form.kolicina.value;
var naziv = document.form.naziv.value;
var slikaurl = document.form.url.value;
var validity = validateFields(naziv, slikaurl, amount);
if(!validity) return false;
var product = {
naziv: naziv,
kolicina: amount,
slika: slikaurl
};
var requestObject = new XMLHttpRequest();
requestObject.onreadystatechange = function(event) {
if (requestObject.readyState == 4 && requestObject.status == 200)
{
loadProducts();
event.preventDefault();
}
}
requestObject.open("POST", url, true);
requestObject.setRequestHeader("Content-type","application/x-www-form-urlencoded");
requestObject.send("akcija=dodavanje" + "&brindexa=16390&proizvod=" + JSON.stringify(product));
}

It is because you are not preventing the default action of the submit button click.
You can return false from an event handler to prevent the default action of an event so
<input type="submit" value="Pošalji" class="popupButtons" onclick="addProduct(); return false;">
But since you have a form with a submit button, I think it will be better to use the submit event handler like
<form id="form" method="post" name="form" onsubmit="addProduct(); return false;">
....
<input type="submit" value="Pošalji" class="popupButtons">

Your problem is that your submit button still executes a real submit. You could change your addProducts method. The method have to return false to prevent the real submit.

Submit button performs default Submit action for HTML code.
Try to change Submit tag into Button tag. Or after AddProduct() in OnClick JS Action put
return false;

Simple Change put input type="button" instead of tpye="submit"
<input type="button" value="Pošalji" class="popupButtons" onclick="addProduct()">