1
I’m creating something like a calendar and I know it’s possible to use an input as an array. For example, if I need to add more fields with jQuery, use name="Description[]".
In my project I already use this, because I can add several tasks during the day. However, I can also add more days to this programming and, consequently, more inputs as an array. You could use name="Description[][]" and recover these values with php?
<div id="corpo">
<fieldset>
<div class="esc-rot">
<div class="esc-rot-pad"><h5>Escreva suas tarefas:</h5></div>
</div>
<form id="add-pub" method="POST" action="insert_rot.php">
<div id="formulario">
<div class="head">
<label for="nome">Nome da lista</label>
<input type="text" name="nome" placeholder="Digite aqui..." required="">
<br/>
<label for="cidade">Local</label>
<input type="text" name="cidade" placeholder="Cidade" required="">
<input type="text" name="estado" placeholder="Estado" required="">
<input type="text" name="pais" placeholder="Pais" required="">
<div id="total_rot">
<p><br>Valor total: <span>0 Reais</span></p>
</div>
</div>
<br/>
<hr><br>
<button type="button" class="btn-toggle" data-element="#corpo1">Minimizar 1º dia</button>
<br/><br/>
<div class="corpo-form" id="corpo1">
<h4>Dia 1</h4>
<label for="data">Data</label>
<input type="date" name="data[]" required="">
<br/><br/>
<div class="descricao_rot" id="1">
<label for="descricao">Descrição</label>
<input type="text" name="descricao[][]" placeholder="Digite aqui..." required="">
<label for="valor">Valor</label>
<input type="number" name="valor[][]" placeholder="e aqui..." required="">
<label for="hora">Hora</label>
<input type="time" name="hora[][]" min="00:00" max="23:59" required="">
<button type="button" class="add-campo" id="add-campo-1-0"> + </button>
</div>
<div id="total_campo1" class="tot">
<br/><h4>Total dia 1: </h4><br>
</div>
</div>
</div>
<br/><br/>
<div class="botoes">
<button type="button" id="add-corpo"> Adicionar mais dias </button>
<input type="submit" name="PubRot" id="PubRot" value="Publicar">
</div>
</form>
</fieldset>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var cont = 1;
var btn_apagar = 1;
$( "#add-corpo" ).click(function() {
if(cont < 15){
cont++;
btn_apagar++;
$( '<hr><br/><button type="button" class="btn-toggle" data-element="#corpo'+cont+'">Minimizar '+cont+'º dia</button><br>').appendTo("#formulario");
$( '<div class="corpo-form" id="corpo'+cont+'"></div><br/>' ).appendTo( "#formulario" );
//$( '<button type="button" id="btn-'+btn_apagar+'" class="btn-apagar"> x </button><br/><br/>' ).appendTo( "#corpo"+cont+"");
$( '<br/><h4>Dia '+cont+'</h4>' ).appendTo( "#corpo"+cont+"");
$( '<label for="data">Data</label><input type="date" name="data[]" required=""><br/><br/>' ).appendTo( "#corpo"+cont+"");
$( '<div class="descricao_rot" id="'+cont+'""></div>' ).appendTo( "#corpo"+cont+"");
$( '<label for="descricao">Descrição </label><input type="text" name="descricao[][]" placeholder="Digite aqui..." required="">' ).appendTo( "#"+cont+"");
$( '<label for="valor"> Valor </label><input type="number" name="valor[][]" placeholder="e aqui..." required="">' ).appendTo( "#"+cont+"");
$( '<label for="hora"> Hora </label><input type="time" name="hora[][]" min="00:00" max="23:59" required="">' ).appendTo( "#"+cont+"");
$( '<button type="button" class="add-campo" id="add-campo-'+cont+'-0" style="margin-left:0.5%;"> + </button>' ).appendTo( "#"+cont+"");
$( '<div id="total_campo'+cont+'" class="tot"><br/><h4>Total dia '+cont+': </h4></div>' ).appendTo( "#corpo"+cont+"");
}else{
alert("Ainda não é possivel adicionar mais dias");
}
});
$("form").on("click", ".btn-toggle", function (e){
//alert("It is working");
e.preventDefault();
el = $(this).data('element');
$(el).toggle();
});
$( "form" ).on( "click", ".btn-apagar-desc", function() {
var button_id = $( this ).attr("id");
var result_button_id = button_id.split("-");
$( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
$( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
$( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
$( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
$( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
$( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
$( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
$( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
});
$("form").on("click", ".add-campo", function () {
var btn_id_desc = $( this ).attr("id");
var result_button_id = btn_id_desc.split("-");
btn_id_desc = result_button_id[2];
var qtd_input = $("#"+btn_id_desc+" input").length;
if(qtd_input < 30){ //pode haver duplicação
$( '<br id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'"/><label for="descricao" id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'">Descrição </label><input type="text" name="descricao[][]" placeholder="Digite aqui..." required="" id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'">' ).appendTo( "#"+btn_id_desc+"" );
$( '<label for="valor" id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'"> Valor </label><input type="number" name="valor[][]" placeholder="e aqui..." required="" id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'">' ).appendTo( "#"+btn_id_desc+"" );
$( '<label for="hora" id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'"> Hora </label><input type="time" name="hora[][]" min="00:00" max="23:59" required="" id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'">' ).appendTo( "#"+btn_id_desc+"" );
$( '<button type="button" id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'" class="btn-apagar-desc" style="margin-left:0.5%; width: 1%;"> - </button> </div>' ).appendTo( "#"+btn_id_desc+"" );
}else{
alert("Ainda não é possivel adicionar mais descrições");
}
});
});
</script>
When I use var_dump in php, something like a column array always appears, for example: [0] [0], [0] [1], ... [0] [7]
What I expected was something like this, day 1: [0] [0], ... [0] [3]; day 2: [1] [0], ... [1] [3];
Is it possible to use an input as matrix or some other solution? I accept both haha
Thank you! :)