Di cui & # 8220; successo & # 8221; pulsanti quando si chiama form.submit ()

Question

Sto lavorando sulla GUI Web di un prodotto simile ad un'appliance.

Ho un modulo HTML che funziona bene: mostra un elenco di cose con caselle di controllo, l'utente ne controlla alcune e fa clic su " remove " pulsante che invia il modulo. Il server ottiene il POST, rimuove gli elementi e aggiorna la pagina. Tutto bene.

È necessario aggiungere un " sei sicuro? " conferma al modulo. Se aggiungo una chiamata a

 confirm("are you sure?");

come metodo onsubmit nel tag FORM o onclick nel tag del pulsante di invio, funziona bene ma utilizza la brutta finestra di dialogo di conferma nativa del browser.

Altrove nel prodotto abbiamo una bella finestra di dialogo di conferma personalizzata in stile CSS che vorrei usare, ma funziona in questo modo: nel posto appropriato, fai una chiamata a

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

Ciò attiva una maschera di clic, personalizza una finestra di dialogo, la centra e la visualizza, quindi restituisce FALSO e il modulo non viene inviato.

Successivamente, quando l'utente decide, se preme " Sì " ;, chiama la funzione confirmCallback. Nell'altra pagina del prodotto basata su Ajax questo raccoglie informazioni, crea un postBody e usa l'oggetto Ajax di Prototype per pubblicarlo, e tutto va bene. (Se " No " ;, quindi la finestra di dialogo e la maschera di clic vengono rimosse e le cose continuano.)

In questa pagina più semplice, con il puro modulo HTML, ho una funzione confirmCallback che assomiglia a questa:

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

e si accende OK, ma quando il modulo viene inviato, il pulsante Rimuovi è GIÀ stato fatto clic e il falso restituito dall'invio confermato conferma personalizzata. Invece, questo è considerato un nuovo invio e il pulsante Rimuovi non è stato effettivamente cliccato, quindi non è considerato " riuscito " in termini della sezione standard HTML 4 di W3.org 17.13.3. Il server ottiene i dati, nessun pulsante di rimozione, dice " L'ho preso ma non so che cosa vuoi che ci faccia " e non fa altro che servire la pagina successiva.

Se sei letto fin qui, GRAZIE, ed ecco la mia vera domanda. Come posso, nella mia funzione javascript confirmCallback, in modo crossbrowser, far scattare il pulsante di rimozione, diventare " riuscito " e inviare insieme al resto dei dati?

Answer 1

Sembra che avrai bisogno di un campo nascosto per fingere di essere il pulsante premuto, e ogni pulsante non richiederà alcun nome, ma invece un evento onclick per manipolare il valore del campo nascosto.

Se il nome dei pulsanti è diverso, potrebbe essere necessario utilizzare i metodi DOM per aggiungere il campo nascosto perché non credo che sia possibile modificare il nome di un campo dopo che è stato aggiunto al DOM in tutti i browser .

Se si richiede che questa soluzione funzioni ancora senza JS, potrebbe essere necessario giocare un po 'di più con la logica JS (per apportare ulteriori modifiche all'albero DOM iniziale) o modificare il codice del server. Potresti persino inserire il "Sei sicuro" comportamento nella risposta quindi ...

Answer 2

Supponendo che il pulsante Rimuovi sia il pulsante di invio per quel modulo, probabilmente la soluzione più semplice è quella di dare un ID al modulo

<form id="submitForm"...

Quindi, nella tua chiamata di conferma, invia il modulo

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

Penso che farà quello che stai chiedendo, ma sembra che tu fossi praticamente già a quella soluzione, quindi se stai chiedendo qualcos'altro fammi sapere.

Answer 3

Nel callback, rimuovere il gestore onclick per il pulsante (causando la conferma), quindi attivare un clic sul pulsante. Questo farà sì che il pulsante faccia clic per inviare il modulo e comporterà il pulsante facendo sì che l'invio venga nuovamente registrato insieme ai dati del modulo.

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