Voici mon code. Cliquez sur le bouton J'ai besoin de soumettre le formulaire et de transmettre la valeur par la poste. Ensuite, le div #con1 devrait être masqué et il devrait montrer le div #con2. Dans le div #con2, je dois afficher la valeur que je reçois par la poste, mais le problème est que lorsque vous cliquez, la page continue de se recharger. les downvoters mentionnent gentiment vos commentaires

<?php include("../view/common/head.php"); ?>
<script>
    $(document).ready(function() {
        $("#myform").submit(function() {
            $("#con1").hide();
            $("#con2").show();
        });
    });
</script>

<div class="container" id="con1">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <form name="myform" class="form-horizontal" id="myform" method="post">
                <ul class="devices">
                    <li>
                        <div class="dev-inner">
                            <div class="dei-mid"><p>Computer Tower</p></div>
                            <div class="dei-rgt"> 
                                <input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">
                            </div>                  
                        </div>
                    </li>
                </ul>
                <button type="submit" id="grad-btn">Calculate</button>
            </div>
        </form>
    </div>
</div>

<div class="container" id="con2" style="display:none">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <p><?php echo $_POST['computername'];?></p>
        </div>
    </div>
</div>
0
Arun Kumaresh 8 mars 2016 à 12:08

4 réponses

Meilleure réponse

Dans votre code, div est masqué et affiché, mais la page est rechargée, c'est pourquoi cela pose problème
Je vous suggère d'utiliser du code php au lieu de jquery
Ajoutez simplement une condition pour afficher div.
Afficher con1 si le formulaire n'est pas soumis sinon afficher con2

<?php include("../view/common/head.php"); ?>
 <?php if(!isset($_POST['computername'])){ ?> <!-Add condition Here-> 
 <div class="container" id="con1">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
           <form name="myform" class="form-horizontal" id="myform" method="post">
              <ul class="devices">
                <li>
                    <div class="dev-inner">
                        <div class="dei-mid"><p>Computer Tower</p></div>
                        <div class="dei-rgt"> 
                            <input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">
                        </div>                  
                    </div>
                </li>
            </ul>
            <button type="submit" id="grad-btn">Calculate</button>
        </div>
    </form>
  </div>
</div>
 <?php }else{ ?>
<div class="container" id="con2" style="display:none">
  <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <p><?php echo $_POST['computername'];?></p>
     </div>
  </div>
 </div>
 <?php } ?>
1
Divyesh Savaliya 8 mars 2016 à 09:20
  $("#myform").submit(function(e){
     e.preventDefault();  // It will prevent the default action.
     $("#con1").hide();
     $.ajax({
       url: "your url",
       type: "GET",
       success: function(data){
          $("#con2").html(data).show();
       }
     })
  });

Ou vous pouvez suivre comme suggéré par @guradio

0
rmondesilva 8 mars 2016 à 10:16

Eh bien, essayez ceci dans ce que j'ai mis le bouton hors de forme parce que chaque fois que je clique sur le bouton, jquery fonctionne bien, mais au chargement de la page, il passe à la toute première étape, comme le premier est display:block et le second est hide. J'ai donc mis le bouton hors du formulaire. Après cela, je reçois des données via jQuery

    <script>

    $(document).ready(function() {
        $("#con2").hide();

        $("#grad-btn").click(function() {
            $("#con1").hide();
            $("#con2").show();
            $("#content").html($("#computerid").val());
        });
    });
</script>

<div class="container" id="con1">
    <div class="row" style="margin-top:150px">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <form name="myform" class="form-horizontal" id="myform" method="post">
                <ul class="devices">
                    <li>
                        <div class="dev-inner">
                            <div class="dei-mid"><p>Computer Tower</p></div>
                            <div class="dei-rgt"> 
                                <input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">
                            </div>                  
                        </div>
                    </li>
                </ul>

            </div>
        </form>
        <button id="grad-btn">Calculate</button>
    </div>
</div>

<div class="container" id="con2" style="margin-top:150px">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <p id="content"></p>
        </div>
    </div>
</div>
0
Jayant Rawat 8 mars 2016 à 09:31

Essaye ça;

<script>
    $(document).ready(function() {
        $("#myform").submit(function(evt) {
            evt.preventDefault();
            $("#con1").hide();
            $("#con2").show();
        });
    });
</script>

Mais il ne publiera pas le formulaire de cette façon, vous devez envoyer des données via ajax ou vous devez soumettre le formulaire manuellement.

0
htunc 8 mars 2016 à 09:15