How to give Submit in the data of a dynamically generated form?

Question

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

Well, I have this huge form and I figured out how to repeat it with Jquery through this code that basically replicates it.

    <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;
    });
    });

Well, currently, there is no problem in saving the data that the form passes, however, if I "replico",I can only save the data from the form I gave Ubmit. For example:I generated 5 forms and filled them out. Regardless of the order I replicated them, I will only be able to receive the data of the form I gave Ubmit.In case, if I press the form number 4, I get only his data, ignoring all the others that have already been answered on that page.

    $(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;
    });
    });

I have tried changing the name values to be passed as arrays(EX:nameHost[])and give a json_encode to save them as a string on my data processing page, but regardless, only the form data which I clicked on Ubmit,are sent. My question is: Is there any way to send all the submits on that page together? If so, I would have to change something when saving them in the database?

Answer 1

My problem was not in replicating the form, but in the form of receiving it. I did a little more digging into the problem and I found this: Join 3 forms in 1 Submit.

Either was exactly what I needed. Once you changed the code,:

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

So, he passed all the data as an array to the sendMform and there, I was able to treat them. I had to make some changes to the database,.

But well, this is a problem for another day. Still, thank you very much to everyone who has committed to answer and I hope one day to help you.

Answer 2

Suggested solution

Just after this excerpt, close the 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>

Example

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

In the JS function that adds the new fields, remove this line

'</form>'+

That should solve.

Possible cause of the problem

Illustrating what causes the problem, the way you did it is generating a form like this:

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

All that is after the first </form> is ignored. Therefore, I believe that correcting as suggested should solve.