Вставьте адрес электронной почты во входные данные от div, когда ссылка нажата

Question

У меня есть WordPress веб-сайт, где гости могут добавлять сообщения из внешнего интерфейса.

В каждом сообщении есть несколько <li> тегов с определенным текстом.Один из тегов <li> имеет адрес электронной почты.Похоже, это <li class="E-mail">example@example.com</li>.В каждом сообщении есть адрес электронной почты автора, а рядом с ним есть кнопка ОТПРАВИТЬ СООБЩЕНИЕ.Когда гость нажимает кнопку ОТПРАВИТЬ, появляется всплывающее окно со следующими полями: отправить, ваш адрес электронной почты, ваше сообщение ... Я хочу, чтобы адрес электронной почты автора автоматически добавлялся с <li> в поле ОТПРАВИТЬ.во всплывающем окне.

На странице есть список добавленных сообщений.Каждый пост находится в теге <article>, и каждый тег статьи имеет идентификатор.Выглядит так: <article id="post-145">

Внутри тега <article> есть <ul> с адресом электронной почты.

Пожалуйста, посмотрите следующий код в качестве примера.Мне нужно вставить сообщение электронной почты из тега li во входной тег во всплывающем окне.

   

<article id="post-145">
  <div class="aside">
    <ul>
      <li class="name"> Mark </li>
      <li class="phone-no"> 911 </li>
      <li class="E-mail"> example@example.com — <a href="" class="popup-open-link">Send Message</a> </li>
    </ul>
  </div>
</article>

<div class="popup-window">
  <form>
    Send to: <input type="text" value="example@example.com" /> Your e-mail: <input type="text" value="" /> Your message: <input type="text" value="" />
    <input type="submit" value="SEND MESSAGE" />
  </form>
</div>

Как это сделать, используя JS или что-то еще?

Пожалуйста, помогите.Я ищу решение.

Answer 1

С помощью Jquery и CSS вы можете использовать следующий код, чтобы получить текущее значение <li>.А в html установите значение данных для каждого <li>, объявите идентификатор для текстового поля:

window.onload = function() {
    $(".popup-open-link").click(function() {
      txtSender.value = $(this).closest("li").attr('data-value');
    });
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<article id="post-145">
  <div class="aside">
    <ul>
      <li class="name">M1ark </li>
      <li class="phone-no">1911 </li>
      <li class="E-mail" data-value="1example@example.com">1example@example.com — <a class="popup-open-link">Send Message</a> </li>
    </ul>
    <ul>
      <li class="name">Mark </li>
      <li class="phone-no">911 </li>
      <li class="E-mail" data-value="example@example.com">example@example.com — <a class="popup-open-link">Send Message</a> </li>
    </ul>
  </div>
</article>

<div class="popup-window">
  <form>
    Send to:
    <input type="text" id="txtSender" value="" /> Your e-mail:
    <input type="text" value="" /> Your message:
    <input type="text" value="" />
    <input type="submit" value="SEND MESSAGE" />
  </form>
</div>

Answer 2

Vanilla JS Version

Вам не нужен jQuery для чего-то такого простого.

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

<article id="post-145">
  <div class="aside">

    <ul>
      <!-- BE SURE TO FIX YOUR `calss` TYPOS! -->
      <li class="name"> Mark </li>
      <li class="phone-no"> 911 </li>
      <!-- 
        Using `href="javascript:void(0)"` avoids unneccessary
        uncertainties when using an anchor tag for this purpose.
      -->
      <li class="E-mail"> example@example.com — 
        <a href="javascript:void(0)" class="popup-open-link">
          Send Message
        </a>
      </li>
    </ul>

  </div>
</article>

...

    <!--
    NOTE: 
      Corrected from `type="text"` to `type="email"`. 
      This will provide additional validation.

      Also added the correct `<label>` elements accordingly,
      and `name` properties. 

      It is best practice to manipulate and access DOM
      form inputs via the `name` property, not `id`.
    -->

    <label for="send-to">Send to:</label> 
    <input name="send-to" type="email" value=""/> 

    <label>Your e-mail:</label>
    <input type="email" value="" /> 

    <label>Your message:</label> 
    <input type="text" value="" />

    <input type="submit" value="SEND MESSAGE"/>

  </form>
</div>

...

<!-- 
  Other answers included waiting for a "onload" event. 
  This is unneccessary as long as you insert the script
  *after* the `<article>`.
-->
<script type="text/javascript">
/* 
  encapsulates the JavaScript to avoid bugs 
  via conflicting code.
*/
;(function () {

  function extractEmail (text) {
    var emailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi;
    return text.match(emailRegex)[0];
  }

  function populateMessageSendToFieldWithAuthorEmail () {
    var authorEmailListItem = document.querySelector('.E-mail');
    var messageForm = document.querySelector('.popup-window form');
    messageForm['send-to'].value = extractEmail(
      authorEmailListItem.innerText
    );
  }

  function addListenerToTriggerElement () {
    var triggerElement = document.querySelector('.popup-open-link');
    triggerElement.addEventListener(
      'click', 
      populateMessageSendToFieldWithAuthorEmail
    );
  }

  addListenerToTriggerElement();

})();
</script>

Answer 3

с использованием jQuery для решения.Шаги ниже

1. извлечение идентификаторов электронной почты из тегов li с функцией
2. установка адреса электронной почты в поле идентификатора электронной почты во всплывающем окне

.фрагмент кода.

function extractEmailId (text){
    return text.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
}


$('.popup-open-link').on("click", function(){
   var emailid = extractEmailId( $('.E-mail').text()).join('\n');
  $('#mailid').val( emailid );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<article id="post-145">
  <div class="aside">
    <ul>
      <li class="name"> Mark </li>
      <li class="phone-no"> 911 </li>
      <li class="E-mail"> example@example.com — <a href="#" class="popup-open-link">Send Message</a> </li>
    </ul>
  </div>
</article>

<div class="popup-window">
  <form>
    Send to: <input type="text" value="example@example.com" id="mailid" /> Your e-mail: <input type="text" value="" /> Your message: <input type="text" value="" />
    <input type="submit" value="SEND MESSAGE" />
  </form>
</div>