Как я могу отправить параметры формы на ссылку mailto? - PullRequest
Новая
       10

Как я могу отправить параметры формы на ссылку mailto?

0 голосов
/ 29 октября 2019

Я попробовал решение в Как добавить данные формы HTML в ссылку mailto , которая не работала в моем фрагменте HTML5 на мобильном телефоне. 

<!-- contact -->
<section id="section-contact" class="section appear clearfix">
    <div class="container">

        <div class="row mar-bot40">
            <div class="col-md-offset-3 col-md-6">
                <div class="section-header">
                    <h2 class="section-heading animated" data-animation="bounceInUp">Contact us</h2>
                    <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet consectetur, adipisci velit, sed quia non numquam.</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div id="sendmessage">Your message has been sent. Thank you!</div>
                <div id="errormessage"></div>
                <form role="form" class="contactForm">
                    <div class="form-group">
                        <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                        <div class="validation"></div>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                        <div class="validation"></div>
                    </div>
                    <div class="form-group">
                        <input type="tel" class="form-control" name="telephone" id="telephone" placeholder="111-111-1111" data-rule="email" data-msg="Please enter a valid telephone number" pattern="[0-9]{3}[0-9]{3}[0-9]{4}" required />
                        <div class="validation"></div>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                        <div class="validation"></div>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
                        <div class="validation"></div>
                    </div>

                   <div class="text-center">
                            <button type="submit" class="line-btn green" onclick="submitForm();return false;">Submit</button>
                   </div>
                </form>
                <script>
function submitForm(){
    var name = document.getElementsByName("name")[0].value;
    var email = document.getElementsByName("email")[0].value;
    var phone = document.getElementsByName("telephone")[0].value;
    var subject = document.getElementsByName("subject")[0].value;
    var message = document.getElementsByName("message")[0].value;
    window.open("mailto:denver.prophit@gmail.com?subject=" + encodeURIComponent(subject) +
  "&body=Name:%20" + encodeURIComponent(name) +
  "%0a%0aTelephone:%20" + encodeURIComponent(phone) +
  "%0a%0a" + encodeURIComponent(message));
}
</script>
            </div>
        </div>
    </div>
</section>

Я ожидал, чтоПриложение Gmail, чтобы открыть. То, что я получил, было прокруткой назад к началу страницы. Не уверены, что я пропустил после прочтения вопросов из предыдущего опубликованного вопроса?

1 Ответ

2 голосов
/ 29 октября 2019

Как отметили двое из нас в комментариях, ваш javascript недействителен, в этой строке ... 

window.open("mailto:example@gmail.com?subject=subject&body=Name:%20:name\n\n+Telephone:%20" + phone\ n\ n + message);

В частности, " + phone\ n\ n + message); part

Фиксированная версия будет... 

window.open("mailto:example@gmail.com?subject=subject&body=Name:%20:name\n\n+Telephone:%20" + phone + "\n\n" + message);

Это было бы легко заметить, если взглянуть на Консоль в Инструментах разработчика (нажмите F12 в браузере), где она показала бы, что в JavaScript есть ошибка.

Кроме того, \n не будет создавать новые строки в вашем почтовом клиенте, поэтому вы должны использовать %0a (который закодирован \n) вместо ... 

window.open("mailto:example@gmail.com?subject=subject&body=Name:%20:name%0a%0a+Telephone:%20" + phone + "%0a%0a" + message);

Первоначально я сказал использовать %0d, который закодирован \r ... так что если вы хотите \r\n использовать %0d%0a

Наконец, я считаю, что есть несколько других мелких проблем вта строка, которая приведет к тому, что неверные значения будут переданы клиенту электронной почты.

В частности, использование name и + ... и тот факт, что вы не кодируете URIзначения, что означает, что если у любого из них есть такие вещи, как ? оr & например, он испортит ссылку

Это то, что я считаю, вам нужно ... 

window.open("mailto:example@gmail.com?subject=" + encodeURIComponent(subject) +
  "&body=Name:%20" + encodeURIComponent(name) +
  "%0a%0aTelephone:%20" + encodeURIComponent(phone) +
  "%0a%0a" + encodeURIComponent(message));

Я полностью пропустил это, но я думаю, чтопричина возврата к началу страницы заключается в том, что нажатие кнопки не отменяется.

Обновите onclick, вызывающий функцию, до return false ... 

<button type="submit" class="line-btn green" onclick="submitForm();return false;">Submitx</button>
...