在提交表单按钮中添加JavaScript

Question

I'm trying to put a javascript code in my form submit button.

   $('#BtExcluir').click(function(event){
      var urlParams = event.target.href.split("/");
      if (! confirm("Tem certeza que deseja excluir o usuário?")) 
         return false;
   });

The code above works properly with <a> element, but It's not working with input submit button. Please, help-me!

http://jsfiddle.net/f5Xfw/3/

My full code: @{ Page.Title = "Editar Usuário";

// Inicializar variáveis.
int selectedUserId = -1;
var email = "";
var nome = "";

List<string> statusMessages = new List<string>();

// Get the values from the REST-style URL parameters
selectedUserId = UrlData[0].AsInt(-1);
if (selectedUserId < 0){
    ModelState.AddFormError("Erro: Especificado ID de usuário inválido");
}

if(Request["action"] == "Alterar"){
    nome = Request.Form["nome"];
    email = Request.Form["email"];
    // Valida o nome do usuário
    if (nome.IsEmpty())
    {
        ModelState.AddError("nome","Um nome deve ser informado.");
    }
    // Valida o endereço de email
    if (email.IsEmpty())
    {
        ModelState.AddError("email","Um endereço de email deve ser informado.");
    }

    if (!email.IsEmpty() && !Functions.IsValidEmail(email)) {
        ModelState.AddError("email","O endereço de email informado não é válido.");
    }        

    if (ModelState.IsValid)
    {
        // Verifica se o email está cadastrado
        var user = Usuario.PesquisarEmail(email,selectedUserId);
        if (user == null) {
            if (Usuario.AlterarUsuario(nome, email, selectedUserId) > 0)
            {
                statusMessages.Add(String.Format("Alterado usuário de {0}",nome));
            }
            else
            {
                ModelState.AddFormError(String.Format("Erro: Não foi possível alterar o usuário de  "
                            + "{0}", nome));
            }
        }else{
            ModelState.AddFormError("O endereço de email informado já está em uso.");
        }
    }  
}

else if(Request["action"] == "Excluir"){
    if (Usuario.ExcluirUsuario(selectedUserId) > 0){
        statusMessages.Add("Excluído usuário de ID = " + selectedUserId.ToString());
        selectedUserId = -1;
    }
    else{
        ModelState.AddFormError("Erro: Não foi possível excluir o usuário de ID = "
            + selectedUserId.ToString());
    }
}

else if(Request["action"] == "Voltar para Lista"){
    Response.Redirect("~/Admin/Usuarios/Listar.cshtml",false);
}

else if(Request["action"] == "Novo"){
    Response.Redirect("~/Admin/Usuarios/Cadastrar",false);
}

} ​

Answer 1

You are saying event.target.href but input buttons do not have an href property - that's an anchor element thing (which is, obviously, why it worked for your <a> ). So event.target.href is undefined and thus doesn't have a .split() method. This is an error and execution will stop at that line and never get to the if (!confirm(... .

Given that you never actually use the urlParams variable you could just delete that line.

Otherwise, the form equivalent of the href is the action , so maybe something like this:

$('#BtExcluir').click(function(event){
  var urlParams = $(this).closest("form")[0].action.split("/");
  if (! confirm("Tem certeza que deseja excluir o usuário?")) 
     return false;
});

Note also that within the event handler this will be a reference to the element the event belongs to - it's simpler than saying event.target .

Answer 2

1st. I see you have submit buttons for edit , delete , new and back to the list options. You won't be submitting all those 4 with the same default form action .

Therefore, you'll have to either add event.preventDefault(); to your submit buttons' function, or replace them by common buttons where you can handle the redirects manually.

2nd. If you had a fully-working function with links, rollback it to the links version to save a lot of work. =]

3rd. Don't forget to commit to the Portuguese Stack Overflow proposal in Area 51 .
(shameless promoting)

I can also make a chat room if you ever have issues which you can't resolve here. =]