Вставить текст в поле всплывающего окна (ввод текста) - PullRequest
Новая
       8

Вставить текст в поле всплывающего окна (ввод текста)

0 голосов
/ 01 апреля 2020

Я использую Wordpress.

Есть много постов, каждый пост имеет адрес электронной почты пользователя.

Я установил всплывающую форму. Поэтому рядом с каждым электронным письмом есть кнопка «Автор электронной почты».

Всплывающая форма имеет поля ввода, такие как:

  1. Отправить: здесь должен быть адрес электронной почты, взятый из сообщения
  2. Ваш E-mail:
  3. Сообщение
  4. Кнопка отправки

Мне нужно взять адрес электронной почты и вставить его (например, реальное значение) в поле ввода «Отправить:» во всплывающем окне, когда пользователь нажимает кнопку в сообщении «Автор сообщения».

Как это сделать, используя jQuery и JavaScript?

Здесь код поста: 

<article id="post-3889"
    class="post-3889 post type-post status-publish format-aside hentry category-sex post_format-post-format-aside">
    <div class="aside">
        <h1 class="entry-title">
            <a href="http://example.com/2020/04/01/%d1%82%d0%be%d1%80/" rel="bookmark">
                Looking for a girl!
            </a>
        </h1>
        <div class="entry-content">
            <p>I am alone and looking for girls in CA.</p>
            <ul class="wpuf_customs">
                <li class="Age">
                    <label>Age</label>: <span>24</span>
                    <a href="" class="dop sendMessage popmake-se pum-trigger" style="cursor: pointer;">write</a>
                </li>
                <li class="Parameters">
                    <label>Your parameters</label>: <span>190.70.19</span>
                    <a href="" class="dop sendMessage popmake-se pum-trigger" style="cursor: pointer;">text</a>
                </li>
                <li class="Goal">
                    <label>Goal</label>: <span>Chat</span>
                </li>
                <li class="E-mail">
                    <label>E-mail</label>: <span>
                        <a href="mailto:samplemail@gmail.com">samplemail@gmail@gmail.com</a>
                    </span>
                    <a href="" class="dop sendMessage popmake-se pum-trigger" style="cursor: pointer;">
                        Email Author of the Post!
                    </a>
                </li>
            </ul>
        </div>
        <!-- .entry-content -->
    </div>
    <!-- .aside -->

    <footer class="entry-meta">
        <div class="cols">
            <a href="http://example.com/2020/04/01/%d1%82%d0%be%d1%80/" title="Permanent link: Looking for a girl!"
                rel="bookmark">5 hours ago</a>
        </div>
        <div class="cols comentz"></div>
        <div class="cols"></div>
    </footer>
    <!-- .entry-meta -->
</article>

А вот как выглядит всплывающая форма: 

<p>
    <label>Send to:<br>
        <span class="wpcf7-form-control-wrap to-email">
            <input type="email" name="to-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false">
        </span>
    </label>
</p>

1 Ответ

0 голосов
/ 02 апреля 2020

Этот код будет работать, если форма всегда присутствует в каком-либо месте страницы. 

$(".sendMessage").click(function(e){

   console.log($(this));

  e.preventDefault();
    var insertTo = $("input[name='to-email']");

  var email = $(this).parent().find('a[href*="mailto"]').text();
  console.log(email);

  insertTo.val(email);

});

Объяснение:

  1. Добавить прослушиватель кликов для всех ссылок с классом sendMessage
  2. Получить некоторые данные на странице с атрибутом name = 'to-email'
  3. Получить письмо от ближайшего ссылка, что атрибут href содержит "mailto" ... этот шаг важен, потому что у вас будет много постов на странице, и вам нужно выбрать правильное для заполнения из ввода.
  4. Просто вставьте электронное письмо во вход.

Надеюсь, что вы направитесь в правильном направлении.

Проверьте этот jsfiffle, чтобы проверить его: https://jsfiddle.net/du03hek7/

...