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