Form göndermek için normal bir bağlantı kullanın

Bir form göndermek istiyorum. Ancak, gönderme türünde bir giriş düğmesi kullanmanın temel yoluna değil, bir bağlantıya gitmiyorum .

Aşağıdaki resim nedenini göstermektedir. Formu kaydetmek / göndermek için resim bağlantılarını kullanıyorum. Resim bağlantıları için standart css biçimlendirmem olduğundan, girdi gönderme düğmelerini kullanmak istemiyorum.

Bir öğeye onClick = "document.formName.submit ()" uygulamayı denedim ama html yöntemini tercih ederim.

Herhangi bir fikir?

İki yol. Ya bir düğme oluşturun ve css ile bir bağlantı gibi görünecek şekilde biçimlendirin ya da bir bağlantı oluşturup kullanın onclick="this.closest('form').submit();return false;".

Bildiğim kadarıyla bunu bir tür komut dosyası olmadan gerçekten yapamazsınız.

<form id="my_form">
<!-- Your Form -->    
<a href="javascript:{}" onclick="document.getElementById('my_form').submit(); return false;">submit</a>
</form>

Buradan Örnek .

Sadece input type="submit"böyle bir stil benim için çalıştı:

.link-button { 
     background: none;
     border: none;
     color: #0066ff;
     text-decoration: underline;
     cursor: pointer; 
}

<input type="submit" class="link-button" />

Chrome, IE 7-9, Firefox'ta test edilmiştir

Göndermek için resimleri kullanıyorsunuz .. böylece yalnızca bir type="image"giriş "düğmesi" kullanabilirsiniz:

<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" />

kullanın:

<input type="image" src=".."/>

veya:

<button type="send"><img src=".."/> + any html code</button>

artı biraz CSS

Kesinlikle, link ( a) etiketli bir form göndermenin saf HTML ile bir çözümü yoktur . Standart HTML yalnızca düğmeleri veya resimleri kabul eder. Diğer bazı ortakların söylediği gibi, bir düğme kullanarak bir bağlantının görünümünü simüle edebilirsiniz, ancak sanırım sorunun amacı bu değil.

IMHO, önerilen ve kabul edilen çözümün işe yaramadığına inanıyorum.

Bir form üzerinde test ettim ve tarayıcı forma referansı bulamadı.

Bu nedenle, tek bir JavaScript satırı kullanarak this, tıklanmakta olan öğeye başvuran, formun alt düğümü olan ve gönderilmesi gereken nesneyi kullanarak çözmek mümkündür . Yani this.parentNodeformu düğümdür. submit()O formda sadece metodu çağırdıktan sonra . Doğru formu bulmak için tüm belgeden gerekli araştırma gerekmez.

<form action="http://www.greatsolutions.com.br/indexint.htm"                   
   method="get">
    <h3> Enter your name</h3>
    First Name <input type="text"  name="fname"  size="30"><br>
    Last Name <input type="text" name="lname" size="30"><br>
    <a href="#" onclick="this.parentNode.submit();"> Submit here</a>
</form>

Kendi adımla girdiğimi varsayalım:

Ben kullandım geto sonra teslim yüklü sayfada URL'de doğru parametreleri görmek mümkündür çünkü form yöntemi özelliğinde.

http://www.greatsolutions.com.br/indexint.htm?fname=Paulo&lname=Buchsbaum

Bu çözüm, açık bir şekilde onclickolayı veya benzer bir olayı kabul eden herhangi bir etiket için geçerlidir .

thisdoğrudan kullanılabilen veya bir işleve argüman olarak aktarılabilen eventdeğişkenle birlikte (tüm büyük tarayıcılarda ve IE9'dan itibaren mevcuttur) bağlamı kurtarmak için mükemmel bir seçimdir .

Bu durumda, etkinliği başlatan öğeyi belirten aözelliği kullanarak satırı aşağıdaki satırla değiştirin target.

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a>

OnClick = "document.getElementById ('formID_NOT_NAME') kullanabilirsiniz. SUBMIT ()"