Salvar campo dinâmico no banco de dados

[GabrielB3r 0]

Bom dia pessoal, tenho um formulário que contém 5 exames a serem cadastrados em bancos de dados diferentes. Porém na aba "outros" fiz um campo dinâmico caso a pessoa realize outros exames que não são mostrados no formulário. Segue a parte do código:

exames.php

 A parte à baixo está dentro do formulário <form id="FormExamesAnimal" method="POST">

<div id="form_outros">
				<script type="text/javascript">
					var qtdeCampos = 0;

					function addCampos() {
						var objPai = document.getElementById("campoPai");
						//Criando o elemento DIV;
						var objFilho = document.createElement("div");
						//Definindo atributos ao objFilho:
						objFilho.setAttribute("id","filho"+qtdeCampos);

						//Inserindo o elemento no pai:
						objPai.appendChild(objFilho);
						//Escrevendo algo no filho recém-criado:
						document.getElementById("filho"+qtdeCampos).innerHTML = "<div id='form_outro'><fieldset class='scheduler-border'><legend class='scheduler-border'>Exame outro:</legend><div class='col-md-6'><label>Data de Envio do Material:</label><input type='text' class='form-control campos' id='data_mat_outro"+qtdeCampos+"' name='data_mat_outro[]'></div><div class='col-md-6'><label>Data do Resultado:</label><input type='text' class='form-control campos' id='data_result_outro"+qtdeCampos+"' name='data_result_outro[]'></div><div class='col-md-6'><label>Resultado:</label><input type='text' class='form-control campos' id='result_outro"+qtdeCampos+"' name='result_outro[]'></div><div class='col-md-6'> <label>Destino Animal:</label><input type='text' class='form-control campos' id='dest_outro"+qtdeCampos+"' name='dest_outro[]'></div><div class='col-md-12'><label>Observação:</label><textarea class='form-control' rows='4' id='obs_outro"+qtdeCampos+"' name='obs_outro[]' placeholder='Insira um Comentário se necessário'></textarea></div></fieldset></div><input type='button' onClick='removerCampo("+qtdeCampos+")' value='Apagar campo'>";
						qtdeCampos++;	
					}

					function removerCampo(id) {
						var objPai = document.getElementById("campoPai");
						var objFilho = document.getElementById("filho"+id);

						//Removendo o DIV com id específico do nó-pai:
						var removido = objPai.removeChild(objFilho);
					}
				</script>

				<fieldset class="scheduler-border">

					<legend class="scheduler-border">Exame outro:</legend>

					<div class="col-md-6">
						<label>Data de Envio do Material:</label>
						<input type="text" class="form-control campos" id="data_mat_outro" name="data_mat_outro">
					</div>

					<div class="col-md-6">
						<label>Data do Resultado:</label>
						<input type="text" class="form-control campos" id="data_result_outro" name="data_result_outro">
					</div>

					<div class="col-md-6">        
						<label>Resultado:</label>
						<input type="text" class="form-control campos" id="result_outro" name="result_outro">
					</div>

					<div class="col-md-6">        
						<label>Destino Animal:</label>
						<input type="text" class="form-control campos" id="dest_outro" name="dest_outro">
					</div>

					<div class="col-md-12">        
						<label>Observação:</label>
						<textarea class="form-control" rows="4" id="obs_outro" name="obs_outro" placeholder="Insira um Comentário se necessário"></textarea>
					</div>

				</fieldset>
				
				<div id="campoPai"></div>
				<input type="button" value="Adicionar campos" onclick="addCampos()">

				</div>

			<!--FIM OUTROS EXAMES-->
		
		</div>

<script>
  /*Filtro com o formato de data*/
  $('#data_mat_outro, #data_result_outro').datepicker({
			format: "dd/mm/yyyy",
			language: "pt-BR",
			autoclose: true

		});
  /*Valida e cadastra os exames*/
  $("#FormExamesAnimal").validate({


			rules: 
			{
				data_mat_outro: {
					required: true
				},
              data_mat_outro: {
					required: true
				},
              result_outro: {
					required: true
				}
				
			},

			messages: 
			{
				data_mat_outro: "Informe a data de envio do material",
                data_result_outro: "Informe a data do resultado",
                result_outro: "Informe o resultado"
			},

			tooltip_options: 
			{
				data_mat_outro: {
					placement:'bottom',
					trigger:'focus'
				},
              data_result_outro: {
					placement:'bottom',
					trigger:'focus'
				},
              result_outro: {
					placement:'bottom',
					trigger:'focus'
				}
			},

			/*Grava os itens no banco*/
			submitHandler: function () {
				
				$.ajax({

					url:"exames/cadastrar_exames.php",
					type:"POST",
					data:$("#FormExamesAnimal").serialize(),
					dataType:'json',

					beforeSend: function() {
						$('#gravar').prop("disabled" , true);

					},
					complete: function() {
						$(':input','#FormExamesAnimal')
						.not(':button, :submit, :reset, :hidden')
						.val('')
						.removeAttr('checked')
						.removeAttr('selected');
						mudar_pagina('animais/relatorio.php','#relatorio_paginacao');
						CriarToast('Exames cadastrados com sucesso.');
						$('#gravar').prop("disabled" , false);

					},

					success:function(resposta) {                  

					}

				});/*ajax*/

				return false;

			}/*submitHandler*/


		}); /*validate*/               

	});/*document redy function*/

</script>

Minha dúvida é como eu faço para inserir essa parte no banco de dados, tentei colocar um "for" mas estava salvando somente a última opção cadastrada e as outras maneiras que encontrei pela internet nem funcionaram :/

cadastrar_exames.php

include "../../banco_animais/conecta.php";
/*Outros*/

$data_mat_outro = strip_tags($_POST['data_mat_outro']);
$data_result_outro = strip_tags($_POST['data_result_outro']);
$result_outro = strip_tags($_POST['result_outro']);
$dest_outro = strip_tags($_POST['dest_outro']);
$obs_outro = strip_tags($_POST['obs_outro']);

//caso não tenha sido inserido nenhum valor, salva como não cadastrado.
if($data_mat_outro==null && $data_result_outro==null &&  $result_outro==null && $dest_outro==null && $obs_outro==null){

$data_mat_outro = 'nao cadastrado';
$data_result_outro = 'nao cadastrado';
$result_outro = 'nao cadastrado';
$dest_outro = 'nao cadastrado';
$obs_outro = 'nao cadastrado';
$realiza_outro = 'nao';
} 

/*Salva no banco*/
$sql_outros="INSERT INTO exame_outros (realiza_outro, data_mat_outro, data_result_outro, result_outro, dest_outro, obs_outro, outro_cod,  data_proc) VALUES ('$realiza_outro', '$data_mat_outro', '$data_result_outro', '$result_outro', '$dest_outro', '$obs_outro', '$outro_cod', CURDATE())";

/*realiza_outro salva se o exame foi realizado ou não e é exibido em uma tabela depois, outro_cod serve para fazer referência ao animal escolhido para realizar os exames e data_proc salva a data atual que foi feito o cadastro do exame*/

 

[washalbano 54]

Olá!
Segue sugestão:

 

<?php
  // se algo foi postado
  if (sizeof($_POST)) {
    // percorre os dados postados
    foreach ($_POST as $field => $values) {
      // para cada valor
      foreach ($values as $index => $val) {
        // começa a montar os dados para queries de inserção/update
        // se não tiver valor em $val, será considerado: Não cadastrado
        $dataQueries[$index][] = '`' . $field . '`' . '="' . ($val ? $val : 'Não cadastrado') . '"';
      }
    }

    // para cada dado pré-montado($dataQuery)
    $queries = array_map(function ($dataQuery) {
      // monta uma query
      // implode cada field=value, usando vírgula como glue
      return 'insert into sua-tabela-sql set ' . implode(', ', $dataQuery);
    }, $dataQueries);

    // mostra as queries montadas na tela:
    echo '<pre>';
    print_r($queries);
    echo '</pre>';
  }
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FORMS</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>


<form id='FormExamesAnimal' method="post">
  <div id="form_outros">

    <fieldset class="scheduler-border fieldset-template">

      <legend class="scheduler-border">Exame outro:</legend>

      <div class="col-md-6">
        <label>Data de Envio do Material:</label>
        <input type="text" class="form-control campos" id="data_mat_outro" name="data_mat_outro[]">
      </div>

      <div class="col-md-6">
        <label>Data do Resultado:</label>
        <input type="text" class="form-control campos" id="data_result_outro" name="data_result_outro[]">
      </div>

      <div class="col-md-6">
        <label>Resultado:</label>
        <input type="text" class="form-control campos" id="result_outro" name="result_outro[]">
      </div>

      <div class="col-md-6">
        <label>Destino Animal:</label>
        <input type="text" class="form-control campos" id="dest_outro" name="dest_outro[]">
      </div>

      <div class="col-md-12">
        <label>Observação:</label>
        <textarea class="form-control" rows="4" id="obs_outro" name="obs_outro[]" placeholder="Insira um Comentário se necessário"></textarea>
      </div>

    </fieldset>

    <div id="campoPai"></div>
    <input type="button" value="Adicionar campos" id="addFieldset" class="btn btn-light">

  </div>
  <div class="col-12">
    <input type="submit" value="salvar" class="btn btn-primary">
  </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript">

    // assim que o documento estiver carregado
    $(document).ready(function () {

        // define o fieldset.fieldset-template como template
        var template = $('fieldset.fieldset-template');

        //
        // quando clicar no botão para adicionar campos
        //
        $('input#addFieldset').on('click', function () {
            // clona o template
            var cloned = template.clone();

            // adiciona o botão para remover o template clonado
            cloned.append($("<div class='col-12 text-right'><input type='button' value='Apagar campo' class='btn btn-danger remove-fieldset'></div>"))

            // adiciona o template clonado dentro da div#campoPai
            $('div#campoPai').append(cloned);
        });

        //
        // quando clicar no botão de remover template
        //
        $('form#FormExamesAnimal').on('click', 'input.remove-fieldset', function () {
            // remove o fieldset mais próximo
            $(this).closest('fieldset').remove();
        })


    });
</script>
</body>
</html>