Bir formdaki giriş alanının gönderilmesini durdurma

Bazı giriş alanlarını bir web sitesindeki forma ekleyecek bir javascript (greasemonkey / userscript) yazıyorum.

Mesele şu ki, bu girdi alanlarının formu hiçbir şekilde etkilemesini istemiyorum, form gönderildiğinde gönderilmesini istemiyorum, sadece javascript'imin değerlerine erişmesini istiyorum.

Bir formun ortasına bazı giriş alanları ekleyip form gönderildiğinde bunları göndermememin bir yolu var mı?

Açıkçası ideal olan şey, giriş alanlarının form öğesinde olmamasıdır, ancak ortaya çıkan sayfamın düzeninin, eklenen giriş alanlarımın orijinal formun öğeleri arasında görünmesini istiyorum.

"Ad" özelliği olmadan giriş alanları ekleyebilirsiniz:

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

Veya form gönderildikten (içinde jQuery) sonra bunları kaldırabilirsiniz :

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

Yapılacak en kolay şey, disabledöznitelikle öğeleri eklemek olacaktır .

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

Bu şekilde onlara formun alt öğeleri olarak erişmeye devam edebilirsiniz.

Devre dışı bırakılan alanların dezavantajı, kullanıcının onlarla hiçbir şekilde etkileşim kuramamasıdır - bu nedenle, bir disabledmetin alanınız varsa, kullanıcı metni seçemez. disabledOnay kutunuz varsa , kullanıcı durumunu değiştiremez.

Ayrıca, göndermek istemediğiniz alanları kaldırmak için form gönderirken tetiklenecek bir javascript de yazabilirsiniz.

Basitçe, isim özniteliğini giriş öğesinden kaldırmayı deneyin .
Yani benzemeli

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

Sadece ek bir seçenek eklemek istedim: Girişinize form etiketini ekleyin ve sayfanızda bulunmayan bir formun adını belirtin:

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

Bunu onsubmitkaldıran bir olay işleyicisi yazabilirsiniz .nameForm gönderimine dahil edilmesini istemediğiniz tüm giriş alanlarından özniteliği .

İşte test edilmemiş hızlı bir örnek:

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;

Bu yazının eski olduğunu biliyorum ama yine de cevaplayacağım. Bulduğum en kolay / en iyi yol, sadece adı boş olarak ayarlamaktır.

Bunu göndermeden önce koyun:

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

Sonuç olarak gönderme işleviniz şöyle görünebilir:

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

Bu, formu diğer tüm alanlarınızla göndermeye devam edecek, ancak adsız olanı göndermeyecektir.

Girişte devre dışı = "devre dışı" ekleyin ve jquery sırasında .removeAttr ('devre dışı') kullanarak göndermek istediğinizde devre dışı bırakılan özniteliği kaldırın

HTML:

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

jQuery:

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

Yukarıdaki yanıtların tümü, form kontrollerini adlandırmak (değil) veya formunuzu gerçekten göndermeden önce bunları programlı olarak kaldırmakla ilgili her şeyi zaten söyledi.

Araştırmam boyunca, bu yazıda bahsetmediğim başka bir çözüm buldum:
İşlenmesini / gönderilmemesini istediğiniz form kontrollerini, özniteliği <form>olmayan başka bir etiketin içine methodkoyarsanız path(ve açıkça gönderme türü kontrolü yok) bir düğme gibi veya içine yerleştirilmiş giriş gönder), ardından ana formun gönderilmesi bu kapsüllenmiş form kontrollerini içermez.

<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>

[Name = "notSent"] kontrol değeri işlenmeyecek veya sunucu POST uç noktasına gönderilmeyecek, ancak [name = "gönderildi"] 'den gelen değer işlenecek.

Bu çözüm anekdotik olabilir ama hala gelecek nesillere bırakıyorum ...

Formun gönderimini onSubmit () aracılığıyla bir işlevde gerçekleştirin ve form öğesini kaldırmak için aşağıdaki gibi bir işlem gerçekleştirin: getElementById()DOM'un kullanılması, ardından[object].parentNode.removeChild([object])

söz konusu alanınızın "my_removable_field" koduna sahip bir id özniteliğine sahip olduğunu varsayalım:

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

Bu size tam olarak aradığınız şeyi verecektir.

İlk etapta giriş öğeleri olmalarına bile ihtiyacınız var mı? Dinamik olarak div'ler veya paragraflar oluşturmak veya öğeleri veya sunmak istediğiniz bilgileri içeren her şeyi listelemek için Javascript'i kullanabilirsiniz.

Ancak, etkileşimli öğe önemliyse ve bu öğeleri <form>bloğun dışına yerleştirmek zor bir durumsa, sayfa gönderildiğinde bu öğeleri formdan çıkarmak mümkün olmalıdır.

Formunuza onsubmit eklemeniz gerekiyor:

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

Ve senaryo şöyle olacak:

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

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

Bu benim için her zaman işe yarar :)