How to repeat a snippet of html using a repetition loop in php?

Asked

Viewed 656 times

0

 <div class="container">
        <form method="POST" action='enviaMform.php'>
        <div class="form-group">
        <label for="nomeHost">Host que pretende monitorar:</label>
        <input type="text" class="form-control" name="nomeHost">
        </div>
        <div class="form-group">
            <label for="ipHost">Ip do host:</label>
            <input type="text" max="12" name="ipHost" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="sistemaOperacional">Sistema operacional:</label>
            <input type="text" class="form-control" name="sistemaOperacional">    
        </div>
         <div class="form-group">
            <label for="marcaModelo">Serviço hospedado no host:</label>
            <input type="text" class="form-control" name="servicoHospedado">    
        </div> 
        <div class="form-group">
            <label for="marcaModelo">Marca e modelo:</label>
            <input type="text" class="form-control" name="marcaModelo">    
        </div> 

        <div class="form-group">
         <label for="tpMonitoramento">Tipo de monitoramento:</label>   
         <div class="form-control">
             <input type="checkbox" value="Simples" name="tpMonitoramento[]" /> <label for="simples">Simples</label>
         </div><br>
         <div class="form-control">
             <input type="checkbox" value="ZabbixAgent" name="tpMonitoramento[]" /> <label for="Zabbix Agent">Zabbix Agent</label>
         </div> <br>
         <div class="form-control">
             <input type="checkbox" value="MonitoramentoWeb" name="tpMonitoramento[]" /> <label for="simples">Monitoramento Web</label>
         </div><br>
         <div class="form-control">
             <input type="checkbox" value="MonitoramentoODBC" name="tpMonitoramento[]" /> <label for="simples">Monitoramento ODBC</label>
         </div> <br> 
         <button class="btn-block">Deseja monitorar mais algum host?</button>
         <br>
        <div align="center">
            <input type="submit" value="Enviar" class="btn btn-info btn-block" style="color: #2196F3;"/>
        </div>
    </form>
    </div>

I have this huge div and would like when the user clicks on "Do you want to monitor any more hosts?" It was possible to repeat it, but I have no idea how to do that.

php html loop

  • you want to repeat this same code block?

  • your form Submit is handled before it runs? because if it happens refresh the page the content will get lost

  • Yes, I wish to repeat it

  • In this case, I have a registration function on the action page that saves this data in the database

  • I’m considering sending the user back to this page through a redirect link after saving the data in the database,without forcing you to every time you want to make a new record repeat the save and return process

  • via javascript, you can use ajax to save data, and manipulate the DOM via javascript.

  • something like this? https://codepen.io/alvaro-alves/pen/zJzpMG?editors=1011

  • Exactly that.

  • 1

    The rest of the data manipulation I can do later,

Show 4 more comments

1 answer

-1


Although not a very good approach, you can do so and send the data to save via ajax:

HTML:

<html>
  <head>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
<div class="container" id="Corpo">
  <div id="principal">
        <form method="POST" action='enviaMform.php'>
        <div class="form-group">
        <label for="nomeHost">Host que pretende monitorar:</label>
        <input type="text" class="form-control" name="nomeHost">
        </div>
        <div class="form-group">
            <label for="ipHost">Ip do host:</label>
            <input type="text" max="12" name="ipHost" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="sistemaOperacional">Sistema operacional:</label>
            <input type="text" class="form-control" name="sistemaOperacional">    
        </div>
         <div class="form-group">
            <label for="marcaModelo">Serviço hospedado no host:</label>
            <input type="text" class="form-control" name="servicoHospedado">    
        </div> 
        <div class="form-group">
            <label for="marcaModelo">Marca e modelo:</label>
            <input type="text" class="form-control" name="marcaModelo">    
        </div> 

        <div class="form-group">
         <label for="tpMonitoramento">Tipo de monitoramento:</label>   
         <div class="form-control">
             <input type="checkbox" value="Simples" name="tpMonitoramento[]" /> <label for="simples">Simples</label>
         </div><br>
         <div class="form-control">
             <input type="checkbox" value="ZabbixAgent" name="tpMonitoramento[]" /> <label for="Zabbix Agent">Zabbix Agent</label>
         </div> <br>
         <div class="form-control">
             <input type="checkbox" value="MonitoramentoWeb" name="tpMonitoramento[]" /> <label for="simples">Monitoramento Web</label>
         </div><br>
         <div class="form-control">
             <input type="checkbox" value="MonitoramentoODBC" name="tpMonitoramento[]" /> <label for="simples">Monitoramento ODBC</label>
         </div> <br> 
         <a class="btn btn-success" onclick="copyBlock()">Deseja monitorar mais algum host?</a>
         <br>
        <div align="center">
            <input type="submit" value="Enviar" class="btn btn-info btn-block" style="color: #2196F3;"/>
        </div>
    </form>
          </div>
    </div>
  </body>
    </html>

JS:

function copyBlock(){
var secao = document.createElement("div");
            secao.setAttribute("class", "col-xs-12 col-sm-12");
            var formGroup = document.createElement("div");
            formGroup.setAttribute("class", "form-group");
            formGroup.innerHTML = document.getElementById("principal").innerHTML;
            secao.appendChild(formGroup);
            document.getElementById("Corpo").appendChild(secao);
}

https://codepen.io/alvaro-alves/pen/zJzpMG?editors=1011

  • 1

    It worked out! Thank you very much.

  • @Caiofrias Glad you helped, please mark as answer :D

Browser other questions tagged php html loop

You are not signed in. Login or sign up in order to post.