Pass value to another page

Question

I have a kind of basic doubt, I want to pass a value from one page to another and there are several divs with plans and would have to receive one of these plans: "basic", "medium", "advanced". So is the div:

<div class="col-md-3">
 <input type="submit" name="basic" value="Choose this Plan" class="btn btn-primary"> </div>

<div class="col-md-3">
     <input type="submit" name="medio" value="Choose this Plan" class="btn btn-primary"> 
     </div>

<div class="col-md-3">
     <input type="submit" name="avancado" value="Choose this Plan" class="btn btn-primary"> 
     </div>

How can I pass the value from one page to another?

Answer 1

To send the values to a php page you can include a form and specify the page in the attribute action form.

The choice of the plan can be like this in a check box, built through the label select.

<form action="pagina.php" method="POST">

  <div class="col-md-3">
    Plano 
    <select name="plano">
      <option value="basic">Basico</option>
      <option value="medio">Médio</option>
      <option value="avancado">Avançado</option>
    </select>
  </div>
  
  <input type="submit" value="Enviar">
</form>

Answer 2

Even following what you posted, you have two ways, one would be to go through a form, the other using jQuery (but I don’t think that’s the option you want). Follow the example

    <form action="outraPage.php" method="POST">
    <div class="col-md-3">
     <input type="submit" name="basic" value="Choose this Plan" class="btn btn-primary"> </div>

    <div class="col-md-3">
         <input type="submit" name="medio" value="Choose this Plan" class="btn btn-primary"> 
         </div>

    <div class="col-md-3">
         <input type="submit" name="avancado" value="Choose this Plan" class="btn btn-primary"> 
         </div>
    </form>

    // Outra Page
<?php
  echo $_POST['avancado'];
  echo $_POST['medio'];
  echo $_POST['basic'];

Answer 3

To pick up the PHP page you can use it like this (since the name= mute):

<?php
//Verifica os valores que foram enviados
if (!empty($_POST['basic']) {
    $plano = 'basico';
} else if (!empty($_POST['medio'])) {
    $plano = 'medio';
} else if (!empty($_POST['avancado'])) {
    $plano = 'avancado';
} else {
    die('Escolha um plano'); //Finaliza o PHP e emite erro
}

echo 'Você escolheu o plano: ', $plano;

If you’re using GET instead of POST, change them all $_POST for $_GET

About HTML, no problem at all using more than one <input type=submit>, the browser will recognize which button submit that you used and when clicking, it changes the value and the "key" of the request, for example this:

<form id="meuform" method="POST" action="pagina">

    <div class="row">

        <div class="col-md-3">
            <input type="submit" name="basic" value="Choose this Plan" class="btn btn-primary">
        </div>

        <div class="col-md-3">
            <input type="submit" name="medio" value="Choose this Plan" class="btn btn-primary">
        </div>

        <div class="col-md-3">
            <input type="submit" name="avancado" value="Choose this Plan" class="btn btn-primary">
        </div>

    </div>

</form>

When clicking "basic" see how the browser sent:

By clicking on "Advanced":

Extra: Attribute form= in HTML5

A suggestion is, if you have the form in another "location" of the page, use the attribute form= (which is only available with browsers with HTML 5 support, yet for older browsers you can use a polyfill).

What you should do first is put the inputs of type submit "out of" of <form> and set an id in this form, an example id="meuform", should look something like this:

<form id="meuform">
...
</form>

<div class="col-md-3">
    <input form="meuform" type="submit" name="basic" value="Choose this Plan" class="btn btn-primary">
</div>

<div class="col-md-3">
     <input form="meuform" type="submit" name="medio" value="Choose this Plan" class="btn btn-primary"> 
</div>

<div class="col-md-3">
     <input form="meuform" type="submit" name="avancado" value="Choose this Plan" class="btn btn-primary">
</div>

Answer 4

Another solution is to use the element button:

<button type="submit" name="plano" value="">Label</button>

When defined as type submit and possess the attribute value defined, a key/value pair is generated in the information sent by the form when submitting it, as well as with the element input. In this way, it would be possible to have the elements:

<button type="submit" name="plano" value="basico">Escolha o plano básico</button>
<button type="submit" name="plano" value="medio">Escolha o plano médio</button>
<button type="submit" name="plano" value="avancado">Escolha o plano avançado</button>

In PHP, to recover this value, just use $_POST or $_GET, depending on the method used by the form:

<?php

switch ($_POST["plano"]) {
    case "basico":
        echo "Você escolhe o plano básico", PHP_EOL;
        break;
    case "medio":
        echo "Você escolhe o plano médio", PHP_EOL;
        break;
    case "avancado":
        echo "Você escolhe o plano avançado", PHP_EOL;
        break;
}

See the W3C specification of the element for more details.

The main advantage of this method in relation to the William is that using button it is possible to set the same value as the attribute name for all buttons, varying the value in value. This way, in PHP, just do the validation in one value and not in three, as is using the input.

Even doing the above is not so indicated. Ideally, if the existing plans were stored in the database, associate the value of the button with the value of the id of the plan and not with the value of the name. Something like:

<button type="submit" name="plano" value="1">Escolha o plano básico</button>
<button type="submit" name="plano" value="2">Escolha o plano médio</button>
<button type="submit" name="plano" value="3">Escolha o plano avançado</button>

And in PHP just do:

$plano = $_POST["plano"];

Can save the value in the database directly.