javascript更新功能不起作用

Question

I have the following javascript code which is supposed to open up a modal window with three fields to be modified and then send them over to be stored in the database, the thing is it doesn't work as it's supposed to, for some unknown reason to me when i modify any of the fields such as area or nivel and hit the "send" button it doesn't sends over the new data but the previous one its like the data gets fixed when the page is loaded and not when i hit the send button, here is the code:

function mostrar(enlace, id, nivel, area, trabajo) {
  document.getElementById("btnEditar").onclick = function() {
    var area = document.getElementById("area").value;
    var nivel = document.getElementById("nivel").value;
    var trabajo = document.getElementById("area_de_trab").value;
    editarRegistro(id, area, nivel, trabajo);
  }
}

i also have to say that function "mostrar" is an onclick event handler, any suggestions on how can i fix this? Thanks in advance.

Here is the button to show up the modal window which at the same time attach the event handler to the send button which is placed into the modal window:

while($row = mysql_fetch_array($resultado)) 
    {

        echo "<tr>";
        echo "<th>".$row["idusuario"]."</th>";
        echo "<th>".$row["nombre"]."</th>";
        echo "<th>".$row["username"]."</th>";
        echo "<th>".$row["area"]."</th>";
        echo "<th>".$row["area_de_trab"]."</th>";
        echo "<th>".$row["nivel"]."</th>";                              
        echo "<th><a type='submit' value='Eliminar' name='id' onclick='eliminar($row[idusuario])' class='btn btn-success'><span class='glyphicon glyphicon-trash'></span></a>
                            <a type='submit' href = '#miventana' value='editar' onclick='mostrar(this,$row[idusuario],\"".$row['nivel']."\",\"".$row['area']."\",\"".$row['area_de_trab']."\")' data-toggle='modal' class='btn btn-success'><span class='glyphicon glyphicon-pencil'>
                            </span></a></th>";
                            echo "</tr>";
                    }

and the button to send the data:

<button type="submit" class="btn btn-primary" name="editar" value="editar" id="btnEditar">guardar</button>

Answer 1

you need to separate the named function from the onclick handler:

 document.getElementById("btnEditar").onclick = mostrar;


function mostrar()
 {var area = document.getElementById("area").value;...

and then because you are getting the values in that function you don't need to pass them as arguments in the function call.

Answer 2

You just pass 'id' to onclick function

You can rewrite this code like this

function mostrar(enlace, id, nivel, area, trabajo) {
  document.getElementById("btnEditar").onclick = function(idt) {
    var area = document.getElementById("area").value;
    var nivel = document.getElementById("nivel").value;
    var trabajo = document.getElementById("area_de_trab").value;
    editarRegistro(idt, area, nivel, trabajo);
  }(id);
}