How to submit a product registration form from another page?

Question

I have the following modal window on my page:

<div class="modal fade" id="InsertProduct" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content ">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Register New Product</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <?php 
        
        include 'RegisterProduct.php';
        
        ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <a href="../MVC/Controller/RegisterNewProduct.php" title="New Register" class="btn btn-success" onclick="submitForm();"> <i class="fa fa-plus">  </i>Save Changes </a>
      </div>
    </div>
  </div>
</div>

This modal window has a page include that inserts a product registration page in the modal window (as shown in figure 02).

Figure 02

.I need that, when the user clicks on the “Save Changes” button of the modal window, he sends the product registration form to my database. How can I do this since the modal window and the product registration page are two separate pages? How can I get the information from the product registration form (page that was inserted in the modal through the include), and when the user clicks the "Save Changes" button of the modal window, the information will be sent to my database dice? How can I do this?

score 1 · Answer 1 · edited Aug 17 '21 at 18:58

Well, from the code you are presenting, it's not really clear how your code works or is supposed to work.

But I guess what you are saying is that the data is not correctly being transmitted to "../MVC/Controller/CadastrarProduto.php".

As you are including the PHP file and not embeding it in an iFrame you can access it's code as if it where localy, but your save button is not a button, it's a link, so you are just changing sites instead of submitting your form.

The url to your save product function should be in the action attribute of your form element, and your save button should be a button, not a link.

Then you can embed some JS code on your RegisterProduct.php to put everything together.

Here is an example:

RegisterProduct.php:

<form action="../MVC/Controller/CadastrarProduto.php" method="post" id="add-article-form">
  <label for="name">Name:</label>
  <input id="name" name="name">
</form>


<script>
function submete() {
  document.getElementById("add-article-form").submit();
}

document.getElementById("submit-add-article-form").addEventListener("click", function(e) {
  submete();
  e.preventDefault();
});
</script>

modal window:

<div class="modal fade" id="InsertProduct" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content ">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Register New Product</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <?php 
        
        include 'RegisterProduct.php';
        
        ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button id="submit-add-article-form" title="Novo Cadastro" class="btn btn-success"><i class="fa fa-plus">  </i>Save Changes</button>
      </div>
    </div>
  </div>
</div>

So what is happening here is that you are actually submiting the form instead of just going to the form handler.

How to submit a product registration form from another page?

1 Answers1