I have a main.html HTML page with some buttons that opens a modal. Depending on which button is clicked, the modal will dynamic load content from an external PHP script - each button calls a different PHP script. Each rendered modal page has a traditional HTML form in it and when the user submits the modal form it sends all the POST data to the backend script...and then the backend script (at the moment) redirects to the user back to the main page.
But I am looking for a method that allows the backend process scripting to somehow send a message back to the modal reporting success/fail of the form submission and if success, for the modal page content to refresh.
Can this be done?
<body id='mainPage'>
... more html ...
<div id="serviceModalOverlay" class="serviceModalOverlay"></div>
<div id="serviceModal" class="modal serviceModal" style="" tabindex="-1" role="document" aria-labelledby="serviceModalLabel" aria-hidden="true">
<div class="" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="serviceModalTitle" style="width:100%;text-align:center;font-weight:bolder;">
Event <span id="modalSubTitle"> </span>
<button type="button" class="btn btn-secondary" style="float:right;" onclick="closeServiceModal();" data-dismiss="modal">CLOSE</button>
</h5>
</div>
<div class="service-modal-body" style="font-weight:bolder;font-size:16px;">
<!-- DYNAMIC CONTENT LOADS inside "service-modal-body" tag
The dynamic content are loaded from php scripts
after the user clicks a button to open the modal
different scripts depending on which button is clicked
-->
<form method="POST" action="processData.php" enctype="multipart/form-data">
<input type="text" name="foo" id="foo" value="bar" />
...
<input type="submit" value="submit" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeServiceModal();" data-dismiss="modal">CLOSE</button>
</div>
</div>
</div>
</div>
JS to open the script:
function openServiceModal(pageID,eventID) {
ge("modalSubTitle").innerHTML = pageID ;
$('.service-modal-body').load("adminEvent"+pageID+".html?eventID="+eventID,function(){
$('#serviceModal').modal({show:true});
});
}
function closeServiceModal() {
$('#serviceModal').modal({show:false});
}
In my backend PHP processing scripts, after the script is done, it does a simple redirect back to the main.html page. I suspect this, plus some JS event.preventDefault() needs to be changed to tell the MODAL form the submission is complete and for the MODAL body to refresh itself.
PHP: Redirect('main.html) ; // but this causes the entire main.html page to reload.
Again, the forms in the dynamically loaded content are traditional HTML forms....no ajax or XMLHttpRequest. The reason I am looking for a solution is I need to redesign an OLD and very complicated page layout (and supporting JS/PHP) but I don't want to have to rewrite all the forms/JS and backend PHP to manage ajax/XMLHttpRequest - solving the above issue allows me to move existing code into different load files, process the existing backend script(s) and simply force a MODAL reload on the dynamic content AFTER the backend notified the browser the form submit was complete.
To put it into perspective, there are now 10 buttons for the user to click to open that specific content - where as all 10 buttons worth of content used to all existing in one long complicated page....thus its a lot of JS and backend script to have to rewrite. I will eventually rewrite them, but I need a short term solution that dramatically allows me to clean up the main.html page UI - its ugly for the users.
buttonModal page using better asynchronous JS calls.