• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud - Virtual Private Server VPS
+1 głos
1,165 wizyt
pytanie zadane 15 marca 2021 w JavaScript przez Kubs Mądrala (5,190 p.)
edycja 15 marca 2021 przez Kubs

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();
    });
});

 

komentarz 16 marca 2021 przez VBService Ekspert (256,600 p.)

wink

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

 

2 odpowiedzi

0 głosów
odpowiedź 15 marca 2021 przez ScriptyChris Mędrzec (190,190 p.)
edycja 16 marca 2021 przez ScriptyChris

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.

komentarz 15 marca 2021 przez Kubs Mądrala (5,190 p.)
Dzięki serdeczne za info.

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

Może jeszcze ktoś napisze. Poczekam.
1
komentarz 16 marca 2021 przez Comandeer Guru (606,550 p.)

@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

komentarz 16 marca 2021 przez ScriptyChris Mędrzec (190,190 p.)
Ok, dzięki. Dodałem adnotację do swojej odpowiedzi.
komentarz 18 marca 2021 przez Kubs Mądrala (5,190 p.)

@Comandeer,

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

komentarz 18 marca 2021 przez Kubs Mądrala (5,190 p.)
Dzięki, konstruktywna wymiana zdań. Spróbuje, chociaż wiem, że polegne :)
0 głosów
odpowiedź 16 marca 2021 przez VBService Ekspert (256,600 p.)
edycja 16 marca 2021 przez VBService

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();
komentarz 16 marca 2021 przez Comandeer Guru (606,550 p.)
Nieprawda. Wysyłanie formularza w taki sposób jest jak najbardziej możliwe.
komentarz 16 marca 2021 przez VBService Ekspert (256,600 p.)
edycja 16 marca 2021 przez VBService

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

2
komentarz 16 marca 2021 przez Comandeer Guru (606,550 p.)
<!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ę.

komentarz 16 marca 2021 przez VBService Ekspert (256,600 p.)
edycja 16 marca 2021 przez VBService

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.

komentarz 16 marca 2021 przez Comandeer Guru (606,550 p.)

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

Podobne pytania

0 głosów
1 odpowiedź 630 wizyt
0 głosów
3 odpowiedzi 1,430 wizyt
0 głosów
2 odpowiedzi 206 wizyt
pytanie zadane 4 listopada 2020 w Python przez tonn204 Mądrala (7,470 p.)

93,327 zapytań

142,325 odpowiedzi

322,396 komentarzy

62,657 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...