Submit form with buttons outside it

Question

I have the following form

<form method='post' name='checkbox_form' id='checkbox_form' onsubmit='return validate()' action=''>
..............
..............
<input name='salvar' type='submit' value='Salvar'>
<input name='gravar' type='submit' value='Gravar'>
</form>

and in PHP, depending on the button clicked, the variable $pasta takes proper value correctly.

    if (isset($_POST["gravar"])||isset($_POST["gravar2"])){
        $pasta="favoritas/";
    }else{
        $pasta="usuario/";
    }

In addition it has two buttons that will, in a given situation, appear within a modal

<div style=\"display:none\">
    <div id=\"ajax2\" class=\"ajax2\">
    <input name='salvar2' type='button' id='salvar' value='Salvar'>
    <input name='gravar2' type='button' id='gravar' value='Gravar'>
    </div>
</div>

To submit the form with the modal buttons I used the following script:

$("#salvar").click(function() {
    $("#checkbox_form").submit();
});
$("#gravar").click(function() {
    $("#checkbox_form").submit();
});

The problem: whatever the button clicked on the modal the variable $pasta takes on the value usuario/ of condition else PHP, that is, no isset

The question: How can I execute the conditional in PHP correctly by clicking on the modal buttons?

Answer 1

Tip: both demos use the excellent debug tool "httpbin" to show the results

With JS:

A simple solution is to link the action to click() and not to Submit:

$("#tres").click(function() {
  $("#um").click();
  return false;
});

$("#quatro").click(function() {
  $("#dois").click();
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="https://httpbin.org/post">
  <input id="um"   name='acao' type='submit' value='submit um'>
  <input id="dois" name='acao' type='submit' value='submit dois'>
</form>

<button id='tres'  >Remoto do Um</button>
<button id='quatro'>Remoto do Dois</button>

Label:

This one doesn’t even need JS (but a CSS goes well to make it look like a button):

.button {
display:block;
background:#ccc;
margin:4px;
width:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="https://httpbin.org/post">
  <input id="um"   name='acao' type='submit' value='submit um'>
  <input id="dois" name='acao' type='submit' value='submit dois'>
</form>

<label class="button" for='um'  >Remoto do Um  </label>
<label class="button" for='dois'>Remoto do Dois</label>

Answer 2

Values of Submit buttons are not being sent $jQuery.(). Then you can pass these values by post with Hidden input, and not by name button.

Ex:

<div style=\"display:none\">
    <div id=\"ajax2\" class=\"ajax2\">
    <input name='salvar2' type='button' id='salvar' value='Salvar'>
    <input name='gravar2' type='button' id='gravar' value='Gravar'>

    <input name='acao' type='hidden' id='acao' value=''>
    </div>
</div>

And in Javascript:

$("#salvar").click(function() {
    $('#acao').val('salvar');
    $("#checkbox_form").submit();
});
$("#gravar").click(function() {
    $('#acao').val('gravar');
    $("#checkbox_form").submit();
});

In validating:

if (isset($_POST["acao"]) {
    if ($_POST["acao"] == 'gravar'){
        $pasta="favoritas/";
    }else{
        $pasta="usuario/";
    }
}

Answer 3

Instead of making a submit, you can make a click on the form button. You will have the same effect of directly clicking on the respective button.

You can simplify by placing the two selectors in the same function by taking the value button clicked, which is the same as the value button:

$("#salvar, #gravar").click(function() {
    $("#checkbox_form").find("input[value='"+ $(this).val() +"']").click();
});

---

Botões da modal:
                                                         ________
                                                         ↓      |
<input name='salvar2' type='button' id='salvar' value='Salvar'> |
<input name='gravar2' type='button' id='gravar' value='Gravar'> |
                                                         ↑      |
Botões do form:                              ____________|______|
                                             ↓           |
<input name='salvar' type='submit' value='Salvar'>       |
<input name='gravar' type='submit' value='Gravar'>       |
                                             ↑___________|