Użyj zwykłego linku, aby przesłać formularz

130

Chcę wysłać formularz. Ale ja nie zamierzam podstawowy sposób korzystania z przycisku wejścia złożyć typ lecz do łącza.

Poniższy obraz pokazuje, dlaczego. Używam linków do zdjęć, aby zapisać / przesłać formularz. Ponieważ mam standardowe znaczniki css dla łączy do obrazów, nie chcę używać przycisków przesyłania danych wejściowych.

Próbowałem zastosować onClick = "document.formName.submit ()" do elementu a, ale wolałbym metodę html.

tekst alternatywny

Jakieś pomysły?

Głosuj za
źródło
3
użyj przycisku i css go, aby wyświetlić obraz lub użyj javascript, nie ma prawdziwego sposobu na utworzenie prostego href do przesłania formularza bez javascript.
Anton S
Po drugie, niestety nie jest to łatwy sposób bez javascript
benhowdle89
4
Twój powód, dla którego to robisz, brzmi jak fałszywa ekonomia. Lepiej jest po prostu wymyślić standardowy css dla przycisków przesyłania i używać formularzy w sposób, w jaki zostały zaprojektowane. Istnieje wiele technik css opisanych tutaj: tripwiremagazine.com/2009/06/…
dnagirl

Odpowiedzi:

169

Dwie drogi. Utwórz przycisk i nadaj mu styl tak, aby wyglądał jak łącze z css, albo utwórz łącze i użyj onclick="this.closest('form').submit();return false;".

Jan Sverre
źródło
55
Aaaaaaa i tutaj jest odniesienie do tego, jak stylizować przycisk jako link: stackoverflow.com/questions/1367409/ ...
flipchart.
3
Zauważ, że form.submit()nie będzie działać bez JavaScriptu
baptx
3
@baptx nawet stare smartfony mieć włączony JavaScript
Mahdiego Jazini
2
@MahdiJazini Wiele osób domyślnie wyłącza JavaScript, co może być uciążliwe i wpływać w niektórych przypadkach na wydajność. Jeśli JavaScript zawiedzie, może zepsuć całą witrynę (np. Używając CDN bez lokalnego rozwiązania awaryjnego, a domena strony trzeciej jest blokowana). Jeśli wystąpi błąd HTML, nadal możesz korzystać z witryny. Deweloperzy powinni zamiast tego przestrzegać zasady stopniowego ulepszania.
baptx
3
Jeśli chcesz wspierać użytkowników bez javascript, zrób pierwszą opcję opisaną w tej odpowiedzi, stylizuj przycisk jako link. Na przykład input[type=submit].link { border: none; background: none; display: inline; color: blue; text-decoration: underline; }i<input type=submit class="link" />
Jan Sverre
87

Naprawdę nie możesz tego zrobić bez jakiejś formy skryptowania, o ile wiem.

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

Przykład z tego miejsca .

JonVD
źródło
1
i drodzy goście ... nie zapomnijcie ustawić >>> id = "my_form" to id, a nie nazwa: D
Mahdi Jazini
To powinna być najlepsza i wyraźna odpowiedź, dzięki!
yehanny
28

Po prostu stylizacja input type="submit"podobna do mnie zadziałała:

.link-button { 
     background: none;
     border: none;
     color: #0066ff;
     text-decoration: underline;
     cursor: pointer; 
}
<input type="submit" class="link-button" />

Testowane w Chrome, IE 7-9, Firefox

Serj Sagan
źródło
tylko dla przypomnienia: należy wybrać odpowiedni inputelement za pomocą selektorów CSS bez dołączania klasy do elementu HTML.
Erik Kaplun,
Chociaż preferowany jest twój komentarz, nie zawsze jest to możliwe
Serj Sagan,
Dlaczego jest to preferowany sposób?
Mark
Jest to na wpół ugruntowana praktyka kodowania, generalnie pozostawia czystszy HTML ... ale to nie jest wielka sprawa
Serj Sagan
1
Ta odpowiedź nie zależy od javascript albo który jest jeden mniej rzeczy się martwić
Matthew Blokada
10

Używasz obrazów do przesyłania ... więc możesz po prostu użyć type="image"„przycisku” do wprowadzania danych:

<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" />
ThiefMaster
źródło
1
... lub <button>element zawierający <img/>element.
DanMan
Oto link do MDN do tego na wypadek, gdyby ktoś inny chciał źródła: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image
Sam,
5

posługiwać się:

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

lub:

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

plus trochę CSS

atlavis
źródło
0

Zdecydowanie nie ma rozwiązania z czystym HTML, aby przesłać formularz ze aznacznikiem link ( ). Standardowy kod HTML akceptuje tylko przyciski lub obrazy. Jak powiedzieli inni współpracownicy, można symulować wygląd linku za pomocą przycisku, ale myślę, że nie o to chodzi w tym pytaniu.

IMHO uważam, że zaproponowane i przyjęte rozwiązanie nie działa.

Przetestowałem to na formularzu, ale przeglądarka nie znalazła odniesienia do formularza.

Można więc go rozwiązać za pomocą jednej linii JavaScript, używając thisobiektu, który odwołuje się do klikanego elementu, który jest węzłem potomnym formularza, który należy przesłać. Podobnie this.parentNodejest z węzłem formularza. Po prostu wywołuje submit()metodę w tej formie. Nie jest konieczne badanie całego dokumentu, aby znaleźć odpowiednią formę.

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

Przypuśćmy, że wpisuję własnym nazwiskiem:

Napełniona forma

Użyłem getatrybutu metody formularza, ponieważ po przesłaniu można zobaczyć odpowiednie parametry w adresie URL na załadowanej stronie.

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

To rozwiązanie oczywiście dotyczy każdego tagu, który akceptuje onclickzdarzenie lub podobne zdarzenie.

thisto doskonały wybór do odzyskania kontekstu wraz ze eventzmienną (dostępną we wszystkich głównych przeglądarkach i od IE9), której można użyć bezpośrednio lub przekazać jako argument do funkcji.

W takim przypadku zamień linię ze aznacznikiem na linię poniżej, używając właściwości target, która wskazuje element, który rozpoczął zdarzenie.

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a>
Paulo Buchsbaum
źródło
@Nathan, nie mam doświadczenia w pisaniu Stackoverflow. Mam nadzieję, że Twoje poprawki pomogą mi ulepszyć mój styl. Mój angielski też nie jest dobry.
Paulo Buchsbaum
0

możesz użyć OnClick = "document.getElementById ('formID_NOT_NAME'). SUBMIT ()"

Sameh Helaly
źródło