Hide the tables until the response is sent

I have a problem, make a small script to track packets over the Internet.

It works properly, the problem is that before the client sends its guide number the tables are already displayed (empty) and once the guide is put on, the data that pulls from the API already appears.

Is there a way that as long as the send button is not pressed and there is a response the tables will not be seen?

I want them to only appear when you already have data to display.

The code of the site is this:

<body>
<div class="container">
    <div class="row">
    <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                    <div class="panel-body">
                        <div class="form-container">
                            <div id="messages"></div>
                            <form action="" method="post" enctype="multipart/form-data" accept-charset="UTF-8" id="form-app">
<fieldset class="row">

<!-- Heading -->
<div class="col-xs-12">
    <h3 class="legend">Rastreo de Paquetes</h3>
</div>


<!-- Select List -->
<div class="col-xs-12">
    <div class="form-group required-control">
        <label  class="control-label" for="carrier">Paquetería</label>
        <select id="carrier" name="carrier" data-alias=""  class="form-control" required  >
            <option value="UPS" >UPS</option>
            <option value="Redpack" >Redpack</option>
            <option value="Estafeta" >Estafeta</option>
            <option value="DHL" >DHL</option>
            <option value="99 Minutos" >99 Minutos</option>
            <option value="FedEx" >FedEx</option>
            <option value="iVoy" >iVoy</option>
        </select>
    </div>
</div>

<!-- Number -->
<div class="col-xs-12">
    <div class="form-group required-control">
        <label  class="control-label" for="number">Número de guía o ID de Envío</label>
        <input type="text" id="shipment" name="shipment" value="" data-alias="" data-integer-only="true"  class="form-control"  required>
    </div>
</div>

<!-- Button -->
<div class="col-xs-12">
     <div class="form-action">
        <button type="submit" id="button_1" name="button_1" class="btn btn-primary">Enviar</button>
    </div>
</div>
</fieldset>
<div class="" style="display:none"><label class="control-label" for="_email">Disculpe, pero deje este campo en blanco</label><input type="text" id="_email" class="form-control" name="_email"></div> </form>
<div id="respuesta"></div>

<?php

include_once "key.php";
$shipment_number=$_POST["shipment"];
$carrier=$_POST["carrier"];

$params = array(
  "api_key" => $API_KEY,
  "carrier" => $carrier,
  "shipment_number" => $shipment_number
);
$headers = array(
  "api_key=".$API_KEY
);
curl_setopt_array($ch = curl_init(), array(
  CURLOPT_URL => "https://envios.corporativomarva.mx/api/v1/trackings",
  CURLOPT_SSL_VERIFYPEER => 0,
  CURLOPT_POST => 1,
  CURLOPT_POSTFIELDS => http_build_query($params),
  CURLOPT_RETURNTRANSFER => 1
));
$response = curl_exec($ch);
curl_close($ch);

$respuesta = json_decode($response);
//Show the response on HTML format with tables
echo "<table border='1'>";
echo "<tr><td>Estado del Envío</td><td>".$respuesta->shipment_status."</td></tr>";
echo "<tr><td>Evento</td><td>".$respuesta->event_description."</td></tr>";
echo "<tr><td>Guía</td><td>".$respuesta->carrier_tracking_number."</td></tr>";
echo "<tr><td>ID de Envio</td><td>".$respuesta->enviaya_shipment_number."</td></tr>";
echo "<tr><td>Fecha de envio</td><td>".$respuesta->pickup_date."</td></tr>";

//Show checkpoints data in a table
echo "<tr><td colspan='2'><table border='1'>";
echo "<tr><td>Checkpoint</td><td>Fecha</td><td>Código</td><td>Descripción</td><td>Ciudad</td><td>Estado</td><td>País</td><td>Comentarios</td></tr>";
foreach($respuesta->checkpoints as $checkpoint){
  echo "<tr><td>".$checkpoint->description."</td><td>".$checkpoint->date."</td><td>".$checkpoint->code."</td><td>".$checkpoint->description."</td><td>".$checkpoint->city."</td><td>".$checkpoint->state."</td><td>".$checkpoint->country."</td><td>".$checkpoint->comments."</td></tr>";
}
echo "</table></td></tr>";
echo "</table>";
?>


                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

JavaScript
​x
 
<body><div class="container">    <div class="row">    <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">                    <div class="panel-body">                        <div class="form-container">                            <div id="messages"></div>                            <form action="" method="post" enctype="multipart/form-data" accept-charset="UTF-8" id="form-app"><fieldset class="row">​<!-- Heading --><div class="col-xs-12">    <h3 class="legend">Rastreo de Paquetes</h3></div>​​<!-- Select List --><div class="col-xs-12">    <div class="form-group required-control">        <label  class="control-label" for="carrier">Paquetería</label>        <select id="carrier" name="carrier" data-alias=""  class="form-control" required  >            <option value="UPS" >UPS</option>            <option value="Redpack" >Redpack</option>            <option value="Estafeta" >Estafeta</option>            <option value="DHL" >DHL</option>            <option value="99 Minutos" >99 Minutos</option>            <option value="FedEx" >FedEx</option>            <option value="iVoy" >iVoy</option>        </select>    </div></div>​<!-- Number --><div class="col-xs-12">    <div class="form-group required-control">        <label  class="control-label" for="number">Número de guía o ID de Envío</label>        <input type="text" id="shipment" name="shipment" value="" data-alias="" data-integer-only="true"  class="form-control"  required>    </div></div>​<!-- Button --><div class="col-xs-12">     <div class="form-action">        <button type="submit" id="button_1" name="button_1" class="btn btn-primary">Enviar</button>    </div></div></fieldset><div class="" style="display:none"><label class="control-label" for="_email">Disculpe, pero deje este campo en blanco</label><input type="text" id="_email" class="form-control" name="_email"></div> </form><div id="respuesta"></div>​<?php​include_once "key.php";$shipment_number=$_POST["shipment"];$carrier=$_POST["carrier"];​$params = array(  "api_key" => $API_KEY,  "carrier" => $carrier,  "shipment_number" => $shipment_number);$headers = array(  "api_key=".$API_KEY);curl_setopt_array($ch = curl_init(), array(  CURLOPT_URL => "https://envios.corporativomarva.mx/api/v1/trackings",  CURLOPT_SSL_VERIFYPEER => 0,  CURLOPT_POST => 1,  CURLOPT_POSTFIELDS => http_build_query($params),  CURLOPT_RETURNTRANSFER => 1));$response = curl_exec($ch);curl_close($ch);​$respuesta = json_decode($response);//Show the response on HTML format with tablesecho "<table border='1'>";echo "<tr><td>Estado del Envío</td><td>".$respuesta->shipment_status."</td></tr>";echo "<tr><td>Evento</td><td>".$respuesta->event_description."</td></tr>";echo "<tr><td>Guía</td><td>".$respuesta->carrier_tracking_number."</td></tr>";echo "<tr><td>ID de Envio</td><td>".$respuesta->enviaya_shipment_number."</td></tr>";echo "<tr><td>Fecha de envio</td><td>".$respuesta->pickup_date."</td></tr>";​//Show checkpoints data in a tableecho "<tr><td colspan='2'><table border='1'>";echo "<tr><td>Checkpoint</td><td>Fecha</td><td>Código</td><td>Descripción</td><td>Ciudad</td><td>Estado</td><td>País</td><td>Comentarios</td></tr>";foreach($respuesta->checkpoints as $checkpoint){  echo "<tr><td>".$checkpoint->description."</td><td>".$checkpoint->date."</td><td>".$checkpoint->code."</td><td>".$checkpoint->description."</td><td>".$checkpoint->city."</td><td>".$checkpoint->state."</td><td>".$checkpoint->country."</td><td>".$checkpoint->comments."</td></tr>";}echo "</table></td></tr>";echo "</table>";?>​​                                                    </div>                    </div>                </div>            </div>        </div>    </div></div></body></html>​

Previously I handled it with a separate file so that the api query was made but it showed me a blank page with only the table and it looked very ugly I want it to be seen on the same page that the client puts his guide only below and this was what I came up with only that I did not think that the table would be displayed at all times.

Answer

A simple if statement to check if the POST is set — Then build your table out… :

<?php

if (isset($_POST["carrier"])) {


    include_once "key.php";
    $shipment_number = $_POST["shipment"];
    $carrier = $_POST["carrier"];

    $params = array(
        "api_key" => $API_KEY,
        "carrier" => $carrier,
        "shipment_number" => $shipment_number
    );
    $headers = array(
        "api_key=" . $API_KEY
    );
    curl_setopt_array($ch = curl_init(), array(
        CURLOPT_URL => "https://envios.corporativomarva.mx/api/v1/trackings",
        CURLOPT_SSL_VERIFYPEER => 0,
        CURLOPT_POST => 1,
        CURLOPT_POSTFIELDS => http_build_query($params),
        CURLOPT_RETURNTRANSFER => 1
    ));
    $response = curl_exec($ch);
    curl_close($ch);

    $respuesta = json_decode($response);
    //Show the response on HTML format with tables
    echo "<table border='1'>";
    echo "<tr><td>Estado del Envío</td><td>" . $respuesta->shipment_status . "</td></tr>";
    echo "<tr><td>Evento</td><td>" . $respuesta->event_description . "</td></tr>";
    echo "<tr><td>Guía</td><td>" . $respuesta->carrier_tracking_number . "</td></tr>";
    echo "<tr><td>ID de Envio</td><td>" . $respuesta->enviaya_shipment_number . "</td></tr>";
    echo "<tr><td>Fecha de envio</td><td>" . $respuesta->pickup_date . "</td></tr>";

    //Show checkpoints data in a table
    echo "<tr><td colspan='2'><table border='1'>";
    echo "<tr><td>Checkpoint</td><td>Fecha</td><td>Código</td><td>Descripción</td><td>Ciudad</td><td>Estado</td><td>País</td><td>Comentarios</td></tr>";
    foreach ($respuesta->checkpoints as $checkpoint) {
        echo "<tr><td>" . $checkpoint->description . "</td><td>" . $checkpoint->date . "</td><td>" . $checkpoint->code . "</td><td>" . $checkpoint->description . "</td><td>" . $checkpoint->city . "</td><td>" . $checkpoint->state . "</td><td>" . $checkpoint->country . "</td><td>" . $checkpoint->comments . "</td></tr>";
    }
    echo "</table></td></tr>";

    echo "</table>";

}
?>

JavaScript
 
<?php​if (isset($_POST["carrier"])) {​​    include_once "key.php";    $shipment_number = $_POST["shipment"];    $carrier = $_POST["carrier"];​    $params = array(        "api_key" => $API_KEY,        "carrier" => $carrier,        "shipment_number" => $shipment_number    );    $headers = array(        "api_key=" . $API_KEY    );    curl_setopt_array($ch = curl_init(), array(        CURLOPT_URL => "https://envios.corporativomarva.mx/api/v1/trackings",        CURLOPT_SSL_VERIFYPEER => 0,        CURLOPT_POST => 1,        CURLOPT_POSTFIELDS => http_build_query($params),        CURLOPT_RETURNTRANSFER => 1    ));    $response = curl_exec($ch);    curl_close($ch);​    $respuesta = json_decode($response);    //Show the response on HTML format with tables    echo "<table border='1'>";    echo "<tr><td>Estado del Envío</td><td>" . $respuesta->shipment_status . "</td></tr>";    echo "<tr><td>Evento</td><td>" . $respuesta->event_description . "</td></tr>";    echo "<tr><td>Guía</td><td>" . $respuesta->carrier_tracking_number . "</td></tr>";    echo "<tr><td>ID de Envio</td><td>" . $respuesta->enviaya_shipment_number . "</td></tr>";    echo "<tr><td>Fecha de envio</td><td>" . $respuesta->pickup_date . "</td></tr>";​    //Show checkpoints data in a table    echo "<tr><td colspan='2'><table border='1'>";    echo "<tr><td>Checkpoint</td><td>Fecha</td><td>Código</td><td>Descripción</td><td>Ciudad</td><td>Estado</td><td>País</td><td>Comentarios</td></tr>";    foreach ($respuesta->checkpoints as $checkpoint) {        echo "<tr><td>" . $checkpoint->description . "</td><td>" . $checkpoint->date . "</td><td>" . $checkpoint->code . "</td><td>" . $checkpoint->description . "</td><td>" . $checkpoint->city . "</td><td>" . $checkpoint->state . "</td><td>" . $checkpoint->country . "</td><td>" . $checkpoint->comments . "</td></tr>";    }    echo "</table></td></tr>";​    echo "</table>";​}?>​

Advertisement

Answer