Problem with editing database data

Question

I had already asked a question before why the modal did not multiply with the while (It’s already solved). That was the result:

$editar = 0;
$sql = mysql_query("SELECT a.n_processo,a.nome,a.data_nasc,a.cc,g.designacao,
a.ciclo_formacao,t.texto
FROM alunos a, cursos g, tipo_curso t
WHERE a.n_curso = g.n_curso
AND g.id_tipo_curso = t.id_tipo_curso");
?>
<!-- ----------------CABEÇALHO---------------------------- -->

<table class="tabela1">
    <tr>
        <td id="tb1">Nº Processo</font>
        <td id="tb2">Nome</font>
</table>

<?
//---------------DADOS------------------------
while($row = mysql_fetch_array($sql))
{

    echo "<TABLE class='tabela2'>";
    echo "<TR class='tabela2'>";
    echo "<TD  style='padding-left:5px;width:20%;'>".$row['n_processo']."</TD>";
    echo "<TD style='padding-left:15px;width:55%;'>".$row['nome']."</TD>";
    echo "<TD style='text-align: right; letter-spacing: 5px; padding-right:10px;'>";


//  ----------------------------BOTAO EDITAR ------------------------------------ -->

echo "<button class='menubotao' id='editar' data-toggle='modal' data-target='#myModal3".$editar."'>
    <i class='fa fa-pencil'></i>
</button>";

echo "</TR>";

echo "</TABLE>";
echo "<button class='menubotao' id='editar' data-toggle='modal' data-target='#myModal3".$editar."'>
  <i class='fa fa-pencil'></i>
</button>";

echo"<div id='myModal3".$editar."' class='modal fade' role='dialog'>
<div class='modal-dialog'>

<div class='modal-content' style='letter-spacing:0px; text-align:left;'>
<div class='modal-header' style=' background-color:#ff6600;'>
<button type='button' class='close' data-dismiss='modal'>&times;</button>
<h4 class='modal-title' style='font-size:25px; color:#FFF;'>Atualizar Dados</h4>
</div>

<div class='modal-body' style='font-size:20px;'>

   <p><b>Nº de processo:</b>
        <input type='text' name='procedit' id='procedit' style='border:0px solid #b3b3b3; width:100px; text-align:center; border-radius:5px; background-color:#bfbfbf;' maxlength'5' id='n_processo' value='".$row['n_processo']."' >
   </p>

<br>

<p><b>Nome:</b> <input type='text' name='nomeedit' id='nomeedit' onkeypress='return letras()' id='nome' required maxlength='150' style='border:0px solid #b3b3b3;background-color:#bfbfbf; width:400px; padding-left:10px; border-radius:5px;' value='".$row['nome']."' ></p>

 <br>

 <p><b>Data Nascimento:</b> <input type='text' id='data_nascedit' maxlength='10' name='data_nasc' style='border:0px solid #b3b3b3; width:130px; background-color:#bfbfbf;text-align:center; border-radius:5px;' value='".$row['data_nasc']."'></p>

 <br>

 <p><b>C.C. <small>(Cãrtao de Cidadão)</small></b>: <input type='text' name='ccedit' style='border:0px solid #b3b3b3; width:160px; text-align:center; border-radius:5px; text-transform:uppercase;background-color:#bfbfbf;' value='".$row['cc']."' id='ccedit'></p>

 <br>

</div>

<div class='modal-footer'>
     <button type='button' id='btnedit' class='btn btn-primary' style='background-color:#ff6600;border:1px solid #ff6600;'><i class='fa fa-pencil fa-2x'></i></button>
    <button type='button' class='btn btn-default' data-dismiss='modal'><i class='fa fa-times fa-2x'></i></button>

 </div>

";.....

I also have the masks for the fields:

$("#procedit").mask("99999",{placeholder:""})
$("#ccedit").mask("99999999?9-9aa9", {placeholder: ""});
$("#data_nascedit").mask("99-99-9999",{placeholder:""});

My problem is that after the query done, shows in a table the data in which each row of records has an icon, this icon serves to show the modal shown above, with the information in inputs editable. And my problem is that only in the first row of the table when I click on the icon, the inputs obey the respective masks, whereas in the others, the same does not happen. I thought I might need a counter for the input id for the mask, but I don’t know how to apply it in javascript, like:

contador =0;
contador++;

then us input:

id='.... '". $counter"'';

and in the mask:

$("#proc"+$contador)....

And on the refresh page I have:

$sql = mysql_query("UPDATE alunos SET n_processo = $n_proc, nome = '$nome', data_nasc = '$data_nasc', cc = '$cc' WHERE n_processo = $n_proc"); 

if(!$sql)
{
    echo mysql_error();
    //echo "<script> sweetAlert('Oops...', 'Não foi conseguido atualizar os dados!', 'error'); </script>";
    }else{
        echo"<script> sweetAlert('Sucesso!', 'Dados atualizados com sucesso!', 'success');</script>"; 

}

Another problem I have is when it sends to another page with the information via AJAX to edit in the database, I can only edit only the name, and even then sometimes it doesn’t work.

    $sql = mysql_query("UPDATE alunos SET n_processo = $n_proc, nome = '$nome', data_nasc = '$data_nasc', cc = '$cc' WHERE n_processo = $n_proc"); 

    if(!$sql)
    {
        echo mysql_error();
        //echo "<script> sweetAlert('Oops...', 'Não foi conseguido atualizar os dados!', 'error'); </script>";
        }else{
        include('menu.php');
        echo"<script> sweetAlert('Sucesso!', 'Dados atualizados com sucesso!', 'success');</script>"; 

    }

This is a bit confusing, but basically the modals don’t share the same mask, and the problem of editing is probably due to this? If anyone knows of any method to get the desired thanks. Any doubt available. Thank you already.

AJAX

    function darupdate(editas){

var proc=$(".procedit"+editas).val();
var nome=$(".nomeedit"+editas).val();   
var cc=$(".ccedit"+editas).val();
var data_nasc=$(".data_nascedit"+editas).val();


    $.post('actualiza.php',{ proc: proc, nome: nome, data_nasc: data_nasc, cc: cc },
        function(data)
        {
                $("body").html(data);
        })       

};

Answer 1

And my problem is that only on the first row of the table when I click on icon, the inputs obey the respective masks, whereas in others, no the same happens.

        $("#procedit").mask("99999",{placeholder:""})
        $("#ccedit").mask("99999999?9-9aa9", {placeholder: ""});
        $("#data_nascedit").mask("99-99-9999",{placeholder:""});

The ID is unique, if you define multiple fields with the same ID, the $(#...) query will fetch the first element set with that ID.

Solution: Swap the input ID for a class (For example in an input, you must replicate the solution to others).

    <p><b>Nº de processo:</b>
    <input type='text' name='procedit' class='procedit' style='border:0px solid #b3b3b3; width:100px; text-align:center; border-radius:5px; background-color:#bfbfbf;' maxlength'5' id='n_processo' value='".$row['n_processo']."' >
    </p>

And when setting the mask, use the ". procedit" selector. So.

    $(".procedit").mask("99999",{placeholder:""})

This should solve part of your problem (or whole);