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

Question

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

Navigation

#1 by (0 votes)
#2 by (0 votes)

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>

Well, I've got this huge form and 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 "replicate" it, I can only save the data of the form that I submitted. For example: I generated 5 forms and filled them in. Regardless of the order I've replicated them, I'll only be able to receive data from the form that I submitted. In case, if I press the form 4, I get only his data, ignoring all the others that have already been answered on that same 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 to change the values of the name to be passed as arrays (EX: hostname []) and give a json_encode to save them as a string in my data handling page, but regardless of that, only the data of the form I clicked on the submit, they are sent. My doubt is: Is there a way to send all submits of this page together? If so, would I have to change anything at the time of saving them in the database?

php javascript jquery ajax

asked by anonymous 10.09.2018 / 23:25

2 answers

Deadlock with SQL SERVER PROCEDURE How to create an index for the fields of a viewmodel to be added dynamically

score 0 · Answer 1

My problem was not in replicating the form, but in how to receive it. I have researched the problem more deeply and found this: Add 3 forms in 1 submit .

It was exactly what I needed. Giving a change in the code, it looks like this:

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

So, he passed all the data as an array to the SendMap and there I was able to handle them. I had to make some changes to the database, changing the varchar to longtext if they were to receive large strings and I still have to deal with the problem of splitting arrays to save them.

Well, this is a problem for another day. Nevertheless, thank you very much to all who have made a commitment and I hope to one day be able to help them.

score 0 · Answer 2

Solution suggestion

Soon after this excerpt, close the </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>'+

This should resolve.

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>

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