0

alguien me podría ayudar con esto, al darle al botón enviar desaparecen todos los elementos pertenecientes al código por breves segundos y quisiera mostrar la respuesta del calculo fuera del div que esta ocultado pero al sacarlo directamente no me aparecen los formularios del select, soy nuevo asi que perdon el desorden y la falta de conocimiento,( al poner el código aquí en stack directamente no aparece, no creo que sea relevante eso pero si deseo saber el porque desaparece todo lo del código).

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<h1>Estado gaseoso que nesesita encontrar:</h1>
    <form id="formfirst" action="#" method="post">         
    <select id="status" name="status" onChange="mostrar(this.value);">
        <option>Escoja una opcion</option>
        <option value="v1">Volumen1</option>
        <option value="v2">Volumen2</option>
        <option value="p1">Presion1</option>
        <option value="p2">Presion2</option>
    </select>
</form>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
function mostrar(id) {
    if (id == "v1") {
        $("#v1").show();
        $("#v2").hide();
        $("#p1").hide();
        $("#p2").hide();
    }

    if (id == "v2") {
        $("#v1").hide();
        $("#v2").show();
        $("#p1").hide();
        $("#p2").hide();
    }

    if (id == "p1") {
        $("#v1").hide();
        $("#v2").hide();
        $("#p1").show();
        $("#p2").hide();
    }

    if (id == "p2") {
        $("#v1").hide();
        $("#v2").hide();
        $("#p1").hide();
        $("#p2").show();
    }
}
</script>
<div id="v1" style="display: none;">
    <h2 id="title1">Si falta volumen uno.</h2>
    
        <form action="#" method="post">
        <p>volumen#2:<br/>
        <input type="number" name="Vol2"  /> Litros</p>
        <p>Presion#1:<br/>
        <input type="number" name="Pre1"  /> Atm</p>
        <p>Presion#2:<br/>
        <input type="number" name="Pre2"  /> Atm</p>
        <input type="submit" value="Enviar" name="send1">
        </form>
        <form action="Ejercisiophp.php">
        <input type="submit" value="Resetear" />
    </form>
        <?php
            $vol2=" ";
            $pre1=" ";
            $pre2=" ";
            

            if($_POST)
            {
                error_reporting(E_ERROR | E_WARNING | E_PARSE);
                $vol2 =$_POST["Vol2"];
                $pre1 =$_POST["Pre1"];
                $pre2 =$_POST["Pre2"];
            }
            ?>
            <?php
           if (isset($_POST["send1"])) {
            $vol=($vol2*$pre2)/$pre1;
            echo "El volumen uno es: ".$vol;
                  
            }
         ?>
            
</div>

<div id="v2" style="display: none;">
    <h2 id="title2">Si falta volumen dos.</h2>
    <form action="#" method="post">
        <p>volumen#1<br/>
        <input type="text" name="Vol12" /></p>
        <p>Presion#1:<br/>
        <input type="text" name="Pre12" /></p>
        <p>Presion#2:<br/>
        <input type="text" name="Pre22" /></p>
        <input type="submit" name="send2" value="Enviar" />
    </form>
    <form action="Ejercisiophp.php">
        <input type="submit" value="Resetear" />
    </form>
    <?php
    
            $vol12="";
            $pre12="";
            $pre22="";

            if($_POST)
            {
                $vol12 =$_POST["Vol12"];
                $pre12 =$_POST["Pre12"];
                $pre22 =$_POST["Pre22"];
            }
            ?>
            <?php
           if (isset($_POST["send2"])) {
            error_reporting(E_ERROR | E_WARNING | E_PARSE);
            $vo=($vol12*$pre22)/$pre12; 
            echo"El volumen dos es: ".$vo;                  
            }
         ?>
</div>

<div id="p1" style="display: none;">
    <h2 id="title3">Si falta presion uno.</h2>
    <form action="#" method="post">
        <p>Volumen#1<br/>
        <input type="text" name="Vol13" /></p>
        <p>Volumen#2:<br/>
        <input type="text" name="Vol23" /></p>
        <p>Presion#2:<br/>
        <input type="text" name="Pre23" /></p>
        <input type="submit" name="send3" value="Enviar" />
    </form>
    <form action="Ejercisiophp.php">
        <input type="submit" value="Resetear" />
    </form>
    <?php
            $vol13="";
            $vol23="";
            $pre23="";

            if($_POST)
            {
               $vol13 =$_POST["Vol13"];
               $vol23 =$_POST["Vol23"];
               $pre23 =$_POST["Pre23"];
            }
            ?>
            <?php
           if (isset($_POST["send3"])) {
            error_reporting(E_ERROR | E_WARNING | E_PARSE);
            $pe=($vol23*$pre23)/$vol13; 
            echo "La presion uno es: ".$pe;                 
            }
         ?>
</div>
<div id="p2" style="display: none;">
    <h2 id="title4">Si falta la presion dos.</h2>
    <form action="#" method="post">
        <p>Volumen#1<br/>
        <input type="text" name="Vol14" /></p>
        <p>Volumen#2:<br/>
        <input type="text" name="Vol24" /></p>
        <p>Presion#1:<br/>
        <input type="text" name="Pre14" /></p>
        <input type="submit" name="send4" value="Enviar" />
    </form>
    <form action="Ejercisiophp.php">
        <input type="submit" value="Resetear" />
    </form>
    <?php
            $vol14="";
            $vol24="";
            $pre14="";

            if($_POST)
            {
               $vol14 =$_POST["Vol14"];
               $vol24 =$_POST["Vol24"];
               $pre14 =$_POST["Pre14"];
            }
            ?>
            <?php
           if (isset($_POST["send4"])) {
            error_reporting(E_ERROR | E_WARNING | E_PARSE);
            $pre=($vol14*$pre14)/$vol24; 
            echo "La presion dos es: ".$pre;
            
            }
         ?>
</div>

1 respuesta 1

0

Puedes utilizar preventDefault() para evitar que la página se refresque. Acá te dejo la documentación.

$("form").submit(function(e) {
  e.preventDefault();
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<h1>Estado gaseoso que nesesita encontrar:</h1>
<form id="formfirst" action="#" method="post">
  <select id="status" name="status" onChange="mostrar(this.value);">
    <option>Escoja una opcion</option>
    <option value="v1">Volumen1</option>
    <option value="v2">Volumen2</option>
    <option value="p1">Presion1</option>
    <option value="p2">Presion2</option>
  </select>
</form>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
  function mostrar(id) {
    if (id == "v1") {
      $("#v1").show();
      $("#v2").hide();
      $("#p1").hide();
      $("#p2").hide();
    }

    if (id == "v2") {
      $("#v1").hide();
      $("#v2").show();
      $("#p1").hide();
      $("#p2").hide();
    }

    if (id == "p1") {
      $("#v1").hide();
      $("#v2").hide();
      $("#p1").show();
      $("#p2").hide();
    }

    if (id == "p2") {
      $("#v1").hide();
      $("#v2").hide();
      $("#p1").hide();
      $("#p2").show();
    }
  }
</script>
<div id="v1" style="display: none;">
  <h2 id="title1">Si falta volumen uno.</h2>

  <form action="#" method="post">
    <p>volumen#2:<br/>
      <input type="number" name="Vol2" /> Litros</p>
    <p>Presion#1:<br/>
      <input type="number" name="Pre1" /> Atm</p>
    <p>Presion#2:<br/>
      <input type="number" name="Pre2" /> Atm</p>
    <input type="submit" value="Enviar" name="send1">
  </form>
  <form action="Ejercisiophp.php">
    <input type="submit" value="Resetear" />
  </form>
  <?php
            $vol2=" ";
            $pre1=" ";
            $pre2=" ";
            

            if($_POST)
            {
                error_reporting(E_ERROR | E_WARNING | E_PARSE);
                $vol2 =$_POST["Vol2"];
                $pre1 =$_POST["Pre1"];
                $pre2 =$_POST["Pre2"];
            }
            ?>
    <?php
           if (isset($_POST["send1"])) {
            $vol=($vol2*$pre2)/$pre1;
            echo "El volumen uno es: ".$vol;
                  
            }
         ?>

</div>

<div id="v2" style="display: none;">
  <h2 id="title2">Si falta volumen dos.</h2>
  <form action="#" method="post">
    <p>volumen#1<br/>
      <input type="text" name="Vol12" /></p>
    <p>Presion#1:<br/>
      <input type="text" name="Pre12" /></p>
    <p>Presion#2:<br/>
      <input type="text" name="Pre22" /></p>
    <input type="submit" name="send2" value="Enviar" />
  </form>
  <form action="Ejercisiophp.php">
    <input type="submit" value="Resetear" />
  </form>
  <?php
    
            $vol12="";
            $pre12="";
            $pre22="";

            if($_POST)
            {
                $vol12 =$_POST["Vol12"];
                $pre12 =$_POST["Pre12"];
                $pre22 =$_POST["Pre22"];
            }
            ?>
    <?php
           if (isset($_POST["send2"])) {
            error_reporting(E_ERROR | E_WARNING | E_PARSE);
            $vo=($vol12*$pre22)/$pre12; 
            echo"El volumen dos es: ".$vo;                  
            }
         ?>
</div>

<div id="p1" style="display: none;">
  <h2 id="title3">Si falta presion uno.</h2>
  <form action="#" method="post">
    <p>Volumen#1<br/>
      <input type="text" name="Vol13" /></p>
    <p>Volumen#2:<br/>
      <input type="text" name="Vol23" /></p>
    <p>Presion#2:<br/>
      <input type="text" name="Pre23" /></p>
    <input type="submit" name="send3" value="Enviar" />
  </form>
  <form action="Ejercisiophp.php">
    <input type="submit" value="Resetear" />
  </form>
  <?php
            $vol13="";
            $vol23="";
            $pre23="";

            if($_POST)
            {
               $vol13 =$_POST["Vol13"];
               $vol23 =$_POST["Vol23"];
               $pre23 =$_POST["Pre23"];
            }
            ?>
    <?php
           if (isset($_POST["send3"])) {
            error_reporting(E_ERROR | E_WARNING | E_PARSE);
            $pe=($vol23*$pre23)/$vol13; 
            echo "La presion uno es: ".$pe;                 
            }
         ?>
</div>
<div id="p2" style="display: none;">
  <h2 id="title4">Si falta la presion dos.</h2>
  <form action="#" method="post">
    <p>Volumen#1<br/>
      <input type="text" name="Vol14" /></p>
    <p>Volumen#2:<br/>
      <input type="text" name="Vol24" /></p>
    <p>Presion#1:<br/>
      <input type="text" name="Pre14" /></p>
    <input type="submit" name="send4" value="Enviar" />
  </form>
  <form action="Ejercisiophp.php">
    <input type="submit" value="Resetear" />
  </form>
  <?php
            $vol14="";
            $vol24="";
            $pre14="";

            if($_POST)
            {
               $vol14 =$_POST["Vol14"];
               $vol24 =$_POST["Vol24"];
               $pre14 =$_POST["Pre14"];
            }
            ?>
    <?php
           if (isset($_POST["send4"])) {
            error_reporting(E_ERROR | E_WARNING | E_PARSE);
            $pre=($vol14*$pre14)/$vol24; 
            echo "La presion dos es: ".$pre;
            
            }
         ?>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.