Incluindo os botões "bem -sucedidos" ao chamar form.submit ()

Question

Estou trabalhando na GUI da web de um produto semelhante a um aparelho.

Eu tenho um formulário HTML que funciona bem: ele mostra uma lista de coisas com caixas de seleção, o usuário verifica algumas delas e clica no botão "Remover" que envia o formulário. O servidor recebe a postagem, remove os itens e atualiza a página. Tudo bem.

Há um requisito para adicionar um "Você tem certeza?" confirmação para o formulário. Se eu adicionar uma chamada para

 confirm("are you sure?");

Como o método onSubmit na tag de formulário, ou o OnClick na tag de botão de envio, ele funciona bem, mas usa a diálogo Feio de Confirmar Native para navegador.

Em outros lugares do produto, temos uma boa caixa de diálogo de confirmação de estilo CSS personalizada que eu gostaria de usar, mas funciona assim: no local apropriado, você liga para

myConfirm("Confirm", "Are you sure", "Yes", "No", confirmCallback);

Isso coloca uma máscara de click, personaliza uma caixa de diálogo, centra e exibe e, em seguida, retorna false e o formulário não envia.

Mais tarde, quando o usuário decide, se eles pressionarem "sim", ele chama a função ConfirmCallback. No outro, as páginas baseadas no AJAX do produto que reúne informações cria um postbody e usa o objeto Ajax do Prototype para publicá -lo, e tudo está bem. (Se "não", a caixa de diálogo e o clickmask são removidos e as coisas continuarem.)

Nesta página mais simples, com o formulário HTML puro, tenho uma função de confirmação que se parece com o seguinte:

var confirmCallback = function() {
    document.myForm.submit();
}

E dispara ok, mas quando o formulário é enviado, o botão Remover já foi clicado e o false retornado pelo envio de confirmação personalizado. Em vez disso, isso é considerado um novo envio, e o botão Remover não foi realmente clicado, portanto, não é considerado "bem -sucedido" em termos da seção padrão HTML 4 da W3.13.3. O servidor obtém os dados, sem o botão Remover, diz "Eu o comprei, mas não sei o que você quer que eu faça com ele" e apenas faz nada além de servir a próxima página.

Se você está lendo até aqui, obrigado, e aqui está minha pergunta real. Como posso, na minha função ConfirmCallback JavaScript, de maneira transversal, fazer com que o botão Remover atire, se torne "bem -sucedido" e envie junto com o restante dos dados?

Answer 1

Parece que você precisará de um campo oculto para fingir ser o botão pressionado, e cada botão não exigirá nome, mas um evento onclick para manipular o valor do campo oculto.

Se o nome dos botões forem todos diferentes, talvez seja necessário usar os métodos DOM para adicionar o campo oculto, porque não acho que você possa alterar o nome de um campo depois de adicionado ao DOM em todos os navegadores.

Se você precisar dessa solução para ainda funcionar sem JS, poderá brincar com a lógica JS um pouco mais (para fazer mais modificações na sua árvore Dom inicial) ou modificar o código do servidor. Você pode até colocar o comportamento "Você tem certeza" na resposta então ...

Answer 2

Supondo que o botão Remover seja o botão Enviar para esse formulário, provavelmente a solução mais fácil é dar ao formulário um id

<form id="submitForm"...

Então, em sua confirmação, ligue para o formulário Enviar

document.getElementById("submitForm").submit()

Eu acho que isso fará o que você está perguntando, mas parece que você já estava nessa solução, por isso, se você está pedindo outra coisa, me avise.

Answer 3

No seu retorno de chamada, remova o manipulador OnClick para o botão (causando a confirmação) e acione um clique no botão. Isso fará com que o botão clique para enviar o formulário e resultar no botão, fazendo com que o envio seja publicado junto com os dados do formulário.

var confirmCallback = function() {
    $('submitButton').stopObserving('click');
    $('submitButton').click();
}