Interrompere l'invio di un campo di input in un modulo

Sto scrivendo un po 'di javascript (un greasemonkey / userscript) che inserirà alcuni campi di input in un form su un sito web.

Il fatto è che non voglio che quei campi di input influenzino in alcun modo il modulo, non voglio che vengano inviati quando il modulo viene inviato, voglio solo che il mio javascript abbia accesso ai loro valori.

C'è un modo per aggiungere alcuni campi di input nel mezzo di un modulo e non averli inviati quando viene inviato il modulo?

Ovviamente l'ideale sarebbe che i campi di input non siano nell'elemento del modulo, ma voglio che il layout della mia pagina risultante abbia i miei campi di input inseriti tra gli elementi del modulo originale.

Puoi inserire campi di input senza l'attributo "nome":

<input type="text" id="in-between" />

Oppure puoi semplicemente rimuoverli una volta inviato il modulo (in jQuery):

$("form").submit(function() {
   $(this).children('#in-between').remove();
});

La cosa più semplice da fare sarebbe inserire gli elementi con l' disabledattributo.

<input type="hidden" name="not_gonna_submit" disabled="disabled" value="invisible" />

In questo modo puoi ancora accedervi come figli del modulo.

I campi disabilitati hanno lo svantaggio che l'utente non può interagire con loro, quindi se hai un disabledcampo di testo, l'utente non può selezionare il testo. Se hai una disabledcasella di controllo, l'utente non può modificarne lo stato.

Puoi anche scrivere un po 'di javascript per attivare l'invio del modulo per rimuovere i campi che non desideri inviare.

Semplice tentativo di rimuovere l' attributo name dall'elemento di input.
Quindi deve assomigliare

<input type="checkbox" checked="" id="class_box_2" value="2">

Volevo solo aggiungere un'opzione aggiuntiva: nel tuo input aggiungi il tag del modulo e specifica il nome di un modulo che non esiste sulla tua pagina:

<input form="fakeForm" type="text" readonly value="random value" />

È possibile scrivere un gestore di eventi per onsubmitrimuovere l' nameattributo da tutti i campi di input che si desidera non includere nell'invio del modulo.

Ecco un rapido esempio non testato:

var noSubmitElements = [ 'someFormElementID1', 'someFormElementID2' ]; //...
function submitForm() {
    for( var i = 0, j = noSubmitElements.length; i < j; i++ ) {
        document.getElementById(noSubmitElements[i]).removeAttribute('name');
    }
}
form.onsubmit = submitForm;

So che questo post è antico, ma risponderò comunque. Il modo più semplice / migliore che ho trovato è semplicemente impostare il nome su vuoto.

Metti questo prima del tuo invio:

document.getElementById("TheInputsIdHere").name = "";

Tutto sommato la tua funzione di invio potrebbe essere simile a questa:

document.getElementById("TheInputsIdHere").name = "";
document.getElementById("TheFormsIdHere").submit();

Questo invierà comunque il modulo con tutti gli altri campi, ma non invierà quello senza nome.

Aggiungi disabled = "disabled" in input e mentre jquery rimuovi l'attributo disabled quando vuoi inviarlo utilizzando .removeAttr ('disabled')

HTML:

<input type="hidden" name="test" value="test" disabled='disabled'/>

jQuery:

$("input[name='test']").removeAttr('disabled');

Tutte le risposte precedenti dicevano già tutto sulla (non) denominazione dei controlli del modulo o sulla loro rimozione a livello di codice prima di inviare effettivamente il modulo.

Anche se, attraverso la mia ricerca, ho trovato un'altra soluzione che non ho visto menzionata in questo post:
se incapsuli i controlli del modulo che vuoi essere non elaborati / non inviati, all'interno di un altro <form>tag senza methodattributo né path(e ovviamente nessun controllo del tipo di invio come un pulsante o inviare un input annidato in esso), quindi l'invio del modulo padre non includerà quei controlli del modulo incapsulato.

<form method="POST" path="/path">
  <input type="text" name="sent" value="..." />
  <form>
    <input type="text" name="notSent" value="..." />
  </form>
  <input type="submit" name="submit" value="Submit" />
</form>

Il valore di controllo [name = "notSent"] non verrà elaborato né inviato all'endpoint POST del server, ma quello da [name = "sent"] lo sarà.

Questa soluzione potrebbe essere aneddotica ma la lascio ancora ai posteri ...

Gestisci l'invio del modulo in una funzione tramite onSubmit () ed esegui qualcosa come di seguito per rimuovere l'elemento del modulo: Usa getElementById()il DOM, quindi utilizza[object].parentNode.removeChild([object])

supponi che il tuo campo in questione abbia un attributo id "my_remoucted_field" codice:

var remEl = document.getElementById("my_removable_field");
if ( remEl.parentNode && remEl.parentNode.removeChild ) {
remEl.parentNode.removeChild(remEl);
}

Questo ti darà esattamente quello che stai cercando.

Hai anche bisogno che siano elementi di input in primo luogo? Puoi utilizzare Javascript per creare dinamicamente div o paragrafi o voci di elenco o qualsiasi altra cosa che contenga le informazioni che desideri presentare.

Ma se l'elemento interattivo è importante ed è una seccatura collocare quegli elementi fuori dal <form>blocco, dovrebbe essere possibile rimuovere quegli elementi dal modulo quando la pagina viene inviata.

È necessario aggiungere onsubmit al modulo:

<form action="YOUR_URL" method="post" accept-charset="utf-8" onsubmit="return validateRegisterForm();">

E lo script sarà così:

        function validateRegisterForm(){
        if(SOMETHING IS WRONG)
        { 
            alert("validation failed");
            event.preventDefault();
            return false;

        }else{
            alert("validations passed");
            return true;
        }
    }

Questo funziona per me ogni volta :)