2
    <div class="form" id="dynamicDiv">
    <p>
    <div id="principal">
    <form method="POST" action='enviaMform.php' id="enviaMform">

    <div class="container">  
    <label for="ipHost">Nome do host:</label>
    <input type="text" id="inputeste" size="20" value="" placeholder="" 
     name="nomeHost" class="form-control"/>

    <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="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> 

    <div class="form-group">
    <div id="dynamicDiv" class="form-group">
    <p>

    <a class="btn btn-primary" href="javascript:void(0)" id="addInput">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    Deseja monitorar mais um host?
    </a>

Bem,tenho esse formulário enorme e descobri como repeti-lo com o Jquery por meio desse código que basicamente o replica.

    <script>
    $(function () {
    var scntDiv = $('#dynamicDiv');
    $(document).on('click', '#addInput', function () {
    $('<p class="remInput">'+
    '<div class="container">'+  

    '<form method="POST" action="enviaMform.php" id="enviaMform">'+ 

    '<div class="form-group">'+
    '<label for="nomeHost">Nome do host:</label>'+
    '<input type="text"  size="20" value="" placeholder="" name="nomeHost" class="form-control"/> '+
    '</div>'+

    '<div class="form-group">'+
    '<label for="ipHost">Ip do host:</label>'+                           
    '<input type="text"  size="20" value="" placeholder="" name="ipHost" class="form-control" /> '+
    '</div>'+

    '<div class="form-group">'+
    '<label for="nomeHost">Sistema operacional:</label>'+                         
    '<input type="text"  size="20" value="" placeholder="" class="form-control" name="sistemaOperacional" /> '+
    '<div>'+

    '<div class="form-group">'+
    '<label for="servicoHospedado">Servico hospedado no host:</label>'+
    '<br>'+                            
    '<input type="text"  size="20" value="" placeholder="" class="form-control" name="servicoHospedado" /> '+
    '</div>'+

    '<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>' +
    '</div>'+


    '<div align="center">'+
    '<input type="submit" value="Enviar" class="btn btn-info btn-block" onclick="myFunction()" style="color: #2196F3;"/>'+
    '</div>'+

    '<div class="form-group">'+
    '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
    '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
    'Remover Campo'+
    '</a>'+
    '</form>'+
    '</div>'+
    '</p>').appendTo(scntDiv);
    return false;
    });
    $(document).on('click', '#remInput', function () {
    $(this).parents('p').remove();
    return false;
    });
    });

Bem,atualmente,não há problema em salvar os dados que o formulário passa,porém,se eu o "replico",só consigo salvar os dados do formulário que dei submit. Por exemplo:Gerei 5 formulários e os preenchi.Independente da ordem que eu os repliquei,só conseguirei receber os dados do formulário que dei submit.No caso,se eu apertar o do formulário número 4,me chega somente os dados dele,ignorando todos os outros que já foram respondidos nessa mesma página.

    $(function(){
    $('#enviaMform').submit(function(event){
    event.preventDefault();
    var formDados = new FormData($(this)[0]);
    $.ajax({
    url:'enviaMform.php',
    type:'POST',
    data:formDados,
    cache:false,
    contentType:false,
    processData:false,
    success:function (data)
    {
    $('#enviaMform').each (function(){
    this.reset();
    });
    },
    dataType:'html'
    });
    return false;
    });
    });

Já tentei mudar os valores do name para serem passados como arrays(EX:nomeHost[])e dar um json_encode para salvá-los como string na minha página de tratamento de dados,mas independente disso,somente os dados do formulário qual cliquei no submit,são enviados. Minha dúvida é: Há algum modo de enviar todos os submits dessa página juntos? Se sim,eu teria de mudar algo na hora de salvá-los no banco de dados?

4
  • Pq vc não replica apenas o conteúdo do form dentro do mesmo form? Assim vc envia tudo em um único form. Agora, os name terão que ser todos em forma de array.
    – Sam
    Commented 10/09/2018 às 21:48
  • Como exatamente eu faria isso?
    – Caio Frias
    Commented 10/09/2018 às 22:05
  • Tipo,dei um var_dump nos $_POSTs que tô recebendo e msm assim os dados que chegam são só os do formulário respondido
    – Caio Frias
    Commented 10/09/2018 às 22:06
  • Vc guarda o HTML do form numa variável: var formHtml = $("#enviaMform").html() e depois faz um append: $("#enviaMform").append(formHtml)
    – Sam
    Commented 10/09/2018 às 22:08

2 Respostas 2

0

O meu problema não estava em replicar o formulário,mas sim na forma de recebê-lo. Dei uma pesquisada mais a fundo na problemática e achei isso: Juntar 3 formulários em 1 submit.

Quer era exatamente o que eu necessitava. Dando uma alterada no código,ficou assim:

$(function(){
$('#submit-forms').click(function(){
    window.location.href = "enviaMform" + $('#form').serialize();
  });
}); 

Sendo assim,ele passou todos os dados como array para a enviaMform e lá,consegui tratá-los. Tive de fazer algumas alterações no banco de dados,mudando os varchar pra longtext,caso fossem receber grandes strings e ainda terei de lidar com o problema de dividir arrays para salvá-los.

Mas bem,esse é um problema pra outro dia.Ainda assim,muito obrigado a todos que empenharam em responder e espero ainda um dia poder ajudá-los.

1
  • Isso não resolveria pois é para método GET. Não funciona para o método POST. Commented 11/09/2018 às 7:53
0

Sugestão de solução

Logo após esse trecho, feche a tag </form>

   <a class="btn btn-primary" href="javascript:void(0)" id="addInput">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    Deseja monitorar mais um host?
    </a>

Exemplo

   <a class="btn btn-primary" href="javascript:void(0)" id="addInput">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    Deseja monitorar mais um host?
    </a>
    </form>

Na função JS que adiciona os novos campos, remova essa linha

'</form>'+

Isso deve resolver.

Possível causa do problema

Ilustrando o que provoca o problema, a forma como fez está gerando um formulário assim:

<form action..>
   <input >
</form>
   <input >
</form>
   <input >
</form>

Tudo que está após o primeiro </form> é ignorado. Por isso, acredito que corrigindo conforme sugerido deve resolver.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .