Jak poprawić ten kod obsługujący przycisk 'Wyślij'?

Question

Witajcie,

chcę aby po naciśnięciu przycisku 'Wyślij' w formularzu kontaktowym na stronie, wiadomość wysłała się na podany w mailto adres mailowy ORAZ by formularz zresetował się do stanu podstawowego.

Na razie mam coś takiego i nie działa. Jak to poprawnie zrobić?

Dziękuję.

 

Kod w HTML

<form action="#" method="post" id="form">

						<div class="field half first">
							<label for="name">Imię</label>
							<input name="name" id="name" type="text">
						</div>
						<div class="field half">
							<label for="email">Email</label>
							<input name="email" id="email" type="email">
						</div>
						<div class="field">
							<label for="message">Wiadomość</label>
							<textarea name="message" id="message" rows="6"></textarea>
						</div>
						<ul class="actions" href="mailto:.............">
							<li><input value="Wyślij" class="button alt" type="submit" id="send" value="click"></li>
						</ul>
					</form>

 

kod w main.js

//Send button
$(document).ready(function() {
    $('#send').click(function() {
        $('#form').attr('action',
                       'mailto:........?subject=' +
                       $('#name').val() + '&body=' + $('#email').val() + $('#message').val());
        $('#form').submit();
    });
});

 

Comments

$('#form')[0].reset();

 

Answer 1

Co prawda nie korzystałem z opcji mailto, ale wg dokumentacji ją się podpina pod href dla linka, a nie jako akcja formularza.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#specifying_details

Odnośnie resetowania formularza - jeśli wyślesz go tradycyjnie, to strona zostanie przeładowana i wyświetli się to, co zwróci backend w odpowiedzi na request POST. Jeśli po wysłaniu maila chcesz pozostać na stronie z wyczyszczonym formularzem, to użyj Ajax i metody reset na formularzu.

---

[edycja] 

wg dokumentacji ją się podpina pod href dla linka, a nie jako akcja formularza

Sprostowanie w komentarzu niżej.

Comments

Dzięki serdeczne za info.

Sam nie dam rady tego zrobić. Jeszcze nie ten poziom :)

Może jeszcze ktoś napisze. Poczekam.

---

@ScriptyChris,

Co prawda nie korzystałem z opcji mailto, ale wg dokumentacji ją się podpina pod href dla linka, a nie jako akcja formularza.

Tylko że [href] reprezentuje URL – dokładnie tak samo jak [action] formularza. A linki mailto: to URL-e z odpowiednim scheme. Bez problemu działać to będzie także w formularzu. W teorii działać będzie także w elementach link. 

---

Ok, dzięki. Dodałem adnotację do swojej odpowiedzi.

---

@Comandeer,

Dzięki, konstruktywna wymiana zdań. Spróbuje, chociaż wiem, że polegne :)

---

Dzięki, konstruktywna wymiana zdań. Spróbuje, chociaż wiem, że polegne :)

Answer 2

Po pierwsze, żeby "wysłanie" mail-a "zadziałało" z poziomu html (+ ewentualnie javascript i lub(+ jquery)) - czyli po stronie przeglądarki użytkownik musi mieć zainstalowany program "pocztowy". (link od @ScriptyChris)

E-mail links

co ogranicza funkcje wysyłania mail-i (bo znikoma ilość użytkowników korzysta z dedykowanych programów pocztowych).

[ edit ]

Ten warunek powyżej musi zostać spełniony, żeby można było wysyłać mail-e, po stronie uzytkownika, opis w komentarzach poniżej

[ /edit ]

Jeżeli mimo wszystko, chcemy w ten sposób wysłać mail-a, to możemy tylko ten "mechanizm" wykonać z poziomu linku (atrybut href="") elementu <a> lub <form> (atrybut action="mailto:" + enctype="text/plain")

Kolejna sprawa taki link musi mieć odpowiednią "składnie".

<a href="mailto:nowhere@mozilla.org
                 ?cc=name2@rapidtables.com
                 &bcc=name3@rapidtables.com
                 &subject=The%20subject%20of%20the%20email
                &body=The%20body%20of%20the%20email">
    Send mail with cc, bcc, subject and body
</a>

 

Dozwolone jest "pomijanie"

 

<a href="mailto:nowhere@mozilla.org
                  ?subject=The%20subject%20of%20the%20email
                  &body=The%20body%20of%20the%20email">
    Send mail with subject and body
</a>

Wygląd linka jest:

Also, note the use of the question mark (?) to separate the main URL from the field values, and ampersands (&) to separate each field in the mailto: URL. This is standard URL query notation. Read The GET method to understand what URL query notation is more commonly used for.

Pewnie zauważyłeś dziwne znaki w linku, np.: %20

The values of each field must be URL-encoded, that is with non-printing characters (invisible characters like tabs, carriage returns, and page breaks) and spaces percent-escaped

 

jquery służy do tego funkcja: serialize();

 

const form = $('#form').serialize();

Comments

Nieprawda. Wysyłanie formularza w taki sposób jest jak najbardziej możliwe.

---

A mógłbyś coś więcej @Comandeer, proszę, bo sprawdzałem na chrom, firefox, opera - nie działa.

zamieniłem:

• method="get"
• <input name="subject" ... >
• <textarea name="body" ... >

dodałem

• action="mailto:****@***.com"
• enctype="text/plain"

 nie posiadam żadnego klienta poczty, korzystam przez przeglądarkę.

---

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Test</title>
<form action="mailto:comandeer@comandeer.pl" method="post" id="form" enctype="text/plain">

<div class="field half first">
    <label for="name">Imię</label>
    <input name="name" id="name" type="text">
</div>
<div class="field half">
    <label for="email">Email</label>
    <input name="email" id="email" type="email">
</div>
<div class="field">
    <label for="message">Wiadomość</label>
    <textarea name="message" id="message" rows="6"></textarea>
</div>
    <p><input value="Wyślij" class="button alt" type="submit" id="send" value="click"></p>
</form>

Taki formularz bez problemu działa, jeśli user ma skonfigurowanego klienta pocztowego (w moim przypadku webowego GMaila). Atrybut [enctype=text/plain] gwarantuje, że przesłane dane będą miały czytelną formę.

---

Czyli

to co napisałem na samym początku.

Z tego co pamiętam musi być w systemie obsługa linka mailto:, inaczej mówiąc przypisana aplikacja do obsługi, tak jak masz np. pliki z rozszerzeniem mp4 to po kliknięciu w taki plik uruchamiana jest aplikacja do odtwarzania filmów w formacie mp4, która jest w systemie przypisana.

---

Tak, tylko później napisałeś:

W Twoim przypadku, dane z formularza trzeba zamienić na link dla 
<a href="mailto: ...."></a>

To jest nieprawdą. Bez klienta pocztowego to będzie tak samo nie działać.