Two or more PHP forms on the same page

Navigation
3

I'm having a little problem, I'm creating an application and I plan to have two forms on the same page. It turns out that when I run the first one, I have no problems, but when I run the second, the first one returns, and because it has no data an error occurs. To try to work around this problem I created an input hidden: 

<input type="hidden" name="opti" value="1">
<input type="hidden" name="opti" value="2">
<input type="hidden" name="opti" value="3">

Since the first line is in the first form and the other two are in the second. I intended that although they were on the same page that did not conflict and for that I created a cycle if : 

if (isset($_POST['opti']) == '1') 
    {

        // Executa o calculo quando existir


            if ($_SERVER['REQUEST_METHOD']== "POST")
            {
                $fabric = $_POST['Fabric'];
                $spare = $_POST['Spare'];
                $xres = $_POST['Xres'];
                $yres = $_POST['Yres'];
                $mspeed = $_POST['Mspeed'];
                $lents = $_POST['Lents'];
                $sensor = 1280;

                Calculos
            }
     }elseif (isset($_POST['opti']) == '2') 
    { tabela}

Then when I load the first form , I can do all the calculations without problem, but then when I want to create the table, with the second form , the first and the fields are blank gives error.

Thank you.

Page code is here: link

    
asked by anonymous 30.11.2015 / 00:20

1 answer

2

UPDATE

I updated the code. Now the values are passed to a PHP page that I called calculo.php . You just need to create this page and put your calculations in it, then get the result of that page and place it where you want on the current page.

JSFIDDLE

This is just an example!

ORIGINAL

Well, this is your original edited code for submit on the same page.

Some Remarks:

  • Do not use isset($_POST) to check if a form has been submitted. It's best to use $_SERVER['REQUEST_METHOD'];
  • In PHP it is not necessary to declare variables, since it is a dynamic type language ( dynamic type ), this is a bit annoying, but it can develop faster, since PHP was created for RAD (Rapid Application Development).
  • Caesar what Caesar is: let JavaScript and CSS do the whole client side without fear. The server should only be concerned with requests that are intrinsic to it, such as requests for files and databases. While the client machine is making a request on the server, its server may be receiving hundreds. This is Web 2.0!
  • Whenever possible, include the JavaScript code at the end of the file, but always between the <body></body> tags. Thus, it will be possible for the DOM (Document Object Model) to be loaded and then the JavaScript code. 

    • <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Calculations</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <style>
            table thead tr th, table tbody tr td{
                text-align: center;
            }
            .container{
                width: 75%
            }
        </style>
        <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
        <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <nav class="navbar navbar-static-top">

        </nav>
        <div class="container">
            <div class="line">
                <header class="header no-print" style="border-bottom: 2px solid gray; margin-bottom: 35px;">
                    <div class="row">
                        <form class="form-horizontal" name="formulario" method="POST">
                            <div class="container" id="decrease-input">
                                <div class="col-sm-6">
                                    <div class="form-group col-lg-12">
                                        <label for="Fabric">Fabric Wide</label>
                                        <input id="Fabric" name="Fabric" type="text" placeholder="mm" class="form-control input-md">
                                    </div>
                                    <div class="form-group col-lg-12">
                                        <label for="Spare">Spare width</label>  
                                        <input id="Spare" name="Spare" type="text" placeholder="mm" class="form-control input-md">
                                    </div>
                                    <div class="form-group col-lg-12">
                                        <label for="Xres">Resolution X</label>  
                                        <input id="Xres" name="Xres" type="text" placeholder="mm/pixel" class="form-control input-md">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group col-lg-12">
                                        <label for="Yres">Resolution Y</label>  
                                        <input id="Yres" name="Yres" type="text" placeholder="mm/pixel" class="form-control input-md">
                                    </div>
                                    <div class="form-group col-lg-12">
                                        <label for="mSpeed">Fabric Max speed</label>  
                                        <input id="mSpeed" name="Mspeed" type="text" placeholder="m/min" class="form-control input-md">
                                    </div>
                                    <div class="form-group col-lg-12">
                                        <label for="Fabric">Lenses</label>  
                                        <input id="lent" name="Lents" type="text" placeholder="mm" class="form-control input-md">
                                    </div>
                                </div>
                                <div class="col-sm-12" style="text-align: center">
                                    <div class="form-group">
                                        <button type="reset" id="Bt5" name="Bt5" class="btn btn-inverse">Reset</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="resposta"></div>
                    </div>
                </header >
                <div class="container frame print html2pdf">
                    <header class="header no-print" style="margin-bottom: 40px;">
                        <img class="right2" src="http://placehold.it/100x65"onclick="javascript:window.print();">
                    </header>
                    <header class="header print">
                        <!-- Text input-->
                        <div class="row">
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="Company">Company</label>  
                                <div class="col-md-4">
                                    <input id="Company" name="Company" type="text" placeholder="Name" class="form-control input-md size">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <!-- Text input-->
                            <div class="form-group">
                                <label class="col-md-3 control-label size" for="Date">Date</label>  
                                <div class="col-md-4">
                                    <input id="Date" name="Date" type="text" placeholder="DD / MM / AAAA" class="form-control input-md size">
                                </div>
                            </div>
                        </div>
                        <table class="table table-bordered">
                            <caption> Input </caption>
                            <thead>
                                <tr>
                                    <th>Fabric Wide</th>
                                    <th>Spare width</th>
                                    <th>Resolution X</th>
                                    <th>Resolution Y</th>
                                    <th>Max speed</th>
                                    <th>Lenses</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <!-- as celulas abaixo recebem os valores dos formularios acima -->
                                    <td><?php echo $fabric . "mm"; ?></td>
                                    <td><?php echo $spare . "mm"; ?></td>
                                    <td><?php echo $xres . "mm/px"; ?></td>
                                    <td><?php echo $yres . "mm/px"; ?></td>
                                    <td><?php echo $mspeed . "m/min"; ?></td>
                                    <td><?php echo $lents . "mm"; ?></td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table table-bordered">
                            <caption> Calculation </caption>
                            <thead>
                                <tr>
                                    <th>Cam number</th>
                                    <th>Space between cam</th>
                                    <th>FOV</th>
                                    <th>Overlap</th>
                                    <th>Height</th>
                                    <th>Pixels</th>
                                    <th>Selected</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><?php echo $ncam; ?></td>
                                    <td><?php echo $dist . "mm"; ?></td>
                                    <td><?php echo $fov . "mm"; ?></td>
                                    <td><?php echo $ov . "mm"; ?></td>
                                    <td><?php echo $alt . "mm"; ?></td>
                                    <td><?php echo $sensor; ?></td>
                                    <td><input type="radio" name="radio" class="rdo" value="1" id="l1" data-col="1"></td>
                                </tr>
                                <tr>
                                    <td><?php echo $ncam1; ?></td>
                                    <td><?php echo $dist1 . "mm"; ?></td>
                                    <td><?php echo $fov1 . "mm"; ?></td>
                                    <td><?php echo $ov1 . "mm"; ?></td>
                                    <td><?php echo $alt1 . "mm"; ?></td>
                                    <td><?php echo $sensor; ?></td>
                                    <td><input type="radio" name="radio" class="rdo" value="2" id="l2" ></td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- abaixo temos a tabela resultante dos calculos -->
                            <table border="0" class="table table-bordered text-center">
                                <thead>
                                    <tr>
                                        <th>Camera</th>
                                        <th>Left</th>
                                        <th>Right</th>
                                    </tr>
                                </thead>
                                <tbody>
                            </tbody>
                        </table>
                    </header>
                </div>
                <button class="btn btn-primary" type="submit" name="gerar_relatorio" id="gerar_relatorio">Relatorio</button>
            </div>
            <hr>
            <footer>
                <p>&copy; Company - Elbit Vision Systems ltd (2015)</p>
            </footer>
        </div>

        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"type="text/javascript"></script>
        <!-- depois se quiser gerar PDF a partir do canvas, usa isso aqui-->
        <script type="text/javascript" src="//cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('form[name="formulario"] input').keydown(function(){
                    //capturando os valores dos formularios
                    var dados_do_formulario = $('form[name="formulario"]').serialize();
                    //enviando os valores por meio do metodo POST para a pagina de calculo[.php]    
                    $.post("calculo.php", {dados: dados_do_formulario}, function(resposta){
                        $(".resposta").html(resposta);
                    });
                });
                
                //gerar PDF
                $('#gerar_relatorio').click(function(){
                    var pdf = new jsPDF('p', 'pt', 'letter'),
                        id_da_parte_html = $('.html2pdf')[0]; //pode ser qualuer seletor na verdade
                    
                    
                    margem = {
                        top: 80,
                        bottom: 60,
                        left: 40,
                        width: 522
                    };
                    pdf.fromHTML(
                    id_da_parte_html,
                    margem.left,
                    margem.top, {
                        'width': margem.width
                    },

                    function (resultado) {
                        pdf.save('teste_html2pdf.pdf');
                    }, margem);

                });
            });
        </script>
    </body>
</html>

    Tips:

    Visit the PHP code good practice site ;)

    View this example with JavaScript generating dynamic forms

        
    30.11.2015 / 03:53
    Read RTF files and generate a TXT file Doubt when setting entity relationship