How to repeat a html snippet using php loop?

Question

How to repeat a html snippet using php loop?

Navigation

#1 by (-1 votes)

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 that when the user clicked on "Do you want to monitor any other host?", it was possible to repeat it, but I have no idea how to do that.

php html loop

asked by anonymous 04.09.2018 / 20:59

1 answer

Execute stored procedure in oracle database in PHP How do I limit the amount of characters in a textarea and an input using CSS

score -1 · Accepted Answer

Although this is not a very good approach, you can do this 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);
}

link