Zatrzymaj pole wejściowe w formularzu przed przesłaniem

Question

Piszę niektóre javascript (greasemonkeykey/userscript), które wstawi niektóre pola wejściowe do formularza na stronie internetowej.

Chodzi o to, że nie chcę, aby te pola wejściowe wpływały w jakikolwiek sposób na formularz, nie chcę, aby były one przesyłane po przesłaniu formularza, chcę tylko, aby mój javascript miał dostęp do ich wartości .

Czy mogę w jakiś sposób dodać pola wprowadzania do środka formularza i nie przesłać ich w momencie przesyłania formularza?

Oczywiście idealnym rozwiązaniem byłoby, aby pola wejściowe nie znajdowały się w elemencie formularza, ale chcę, aby układ wynikowej strony zawierał moje wstawione pola wprowadzania między elementami oryginalnego formularza.

Answer 1

Można wstawić pola wprowadzania bez „nazwa” atrybutu:

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

Albo można po prostu usunąć je, gdy formularz jest składany (w jQuery):

$("form").submit(function() { 

    $(this).children('#in-between').remove(); 

}); 

Answer 2

Najprostszą rzeczą do zrobienia byłoby wstawienie elementów z atrybutem disabled.

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

W ten sposób nadal można uzyskać do nich dostęp jako dzieci formularza.

Nieprawidłowe pola mają wadę, z którą użytkownik nie może w ogóle wchodzić - więc jeśli masz pole tekstowe disabled, użytkownik nie może wybrać tekstu. Jeśli masz pole wyboru disabled, użytkownik nie może zmienić swojego stanu.

Można również napisać javascript do podpalania po przesłaniu formularza, aby usunąć pola, których nie chcesz przesyłać.

Answer 3

Uchwyt tworzą Submit w funkcji za pomocą metody onSubmit() i wykonaj coś takiego, jak poniżej, aby usunąć element formularza: Użyj getElementById() DOM, a następnie użyj [object].parentNode.removeChild([object])

przypuszczać swoje pole w pytaniu ma atrybut id „my_removable_field” Kod :

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

To będzie Ci dokładnie to, czego szukasz.

Answer 4

Czy potrzebujesz ich jako elementów wejściowych? Możesz użyć Javascript do dynamicznego tworzenia elementów div lub akapitów lub elementów listy lub cokolwiek zawierającego informacje, które chcesz przedstawić.

Ale jeśli element interaktywny jest ważny i zabieranie elementów poza blokiem <form> jest bolesne, powinno być możliwe usunięcie tych elementów z formularza po przesłaniu strony.

Answer 5

Można napisać procedurę obsługi zdarzeń dla onsubmit, która usuwa atrybut name ze wszystkich pól wejściowych, które nie mają być uwzględnione w przesyłaniu formularza.

Oto krótki niesprawdzone przykład:

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; 

Answer 6

Znam ten post jest stare, ale i tak będę odpowiadać. Najprostszy/najlepszy sposób, jaki znalazłem, to po prostu ustawić nazwę pustą.

Umieścić to przed swój złożyć:

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

w sumie swojej funkcji złożyć może wyglądać następująco:

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

ten będzie nadal przesłać formularz z wszystkich innych dziedzinach, ale będzie nie przesyłać bez nazwy.

Answer 7

Prosta próba usunięcia atrybutu nazwa z elementu wejściowego.
tak ma wyglądać

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

Answer 8

$('#serialize').click(function() { 
 
    $('#out').text(
 
    $('form').serialize() 
 
); 
 
}); 
 

 
$('#exclude').change(function() { 
 
    if ($(this).is(':checked')) { 
 
    $('[name=age]').attr('form', 'fake-form-id'); 
 
    } else { 
 
    $('[name=age]').removeAttr('form');  
 
    } 
 
    
 
    $('#serialize').click(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="/"> 
 
    <input type="text" value="John" name="name"> 
 
    <input type="number" value="100" name="age"> 
 
</form> 
 

 
<input type="button" value="serialize" id="serialize"> 
 
<label for="exclude"> 
 
    <input type="checkbox" value="exclude age" id="exclude"> 
 
    exlude age 
 
</label> 
 

 
<pre id="out"></pre>

Answer 9

Trzeba dodać onsubmit w formularzu:

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

i skrypt będzie tak:

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

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

Działa to dla mnie za każdym razem :)

Answer 10

Dodaj disabled = "disabled" w wejściu i podczas jquery usunąć atrybut wyłączony kiedy chcesz przesłać go za pomocą .removeAttr ('wyłączone')

HTML:

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

jQuery:

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

Answer 11

Chciałem tylko dodać dodatkową opcję: W wejściu dodać tag formularz i podać nazwę postaci, która nie istnieje na swojej stronie:

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