We Keep Coding

Insert e-mail address into input from div when link clicked

I have a wordpress web-site where guests can add posts from front-end.
In each post there are some <li> tags with certain text. One of <li> tags has an e-mail address. It looks like this <li class="E-mail">example#example.com</li>. In each post there is author's e-maill address and next to it there is a button SEND MESSAGE. When a guest clicks the SEND button a popup window appears with following fields: send to, your e-mail, your message... I want the e-mail address of author to be automatically added from <li> to the SEND TO field in popup window.
There is a list of added posts on a page. Each post is in the tag <article> and each article tag has an ID. Looks like this <article id="post-145">
Inside <article> tag there is <ul> with e-mail address.
Please, see the following code as an example. I need to paste email from li tag to the input tag in popup window.
<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 — Send Message </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>
How to do it using JS or maybe smth else?
Please, help. I am looking for the solution.

using jQuery for solution. Steps are below
extract email ids from li tags with the function
set emailid into popup window's email id field
have a look into code snippet.
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 — Send Message </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>

With the help of Jquery and CSS, you may use the following code to get the current <li>'s data-value.
And in html, set your data-value for each <li>, declare id for the textbox:
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>

Vanilla JS Version
You don't need jQuery for something this simple.
Answer details included via comments.
<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>

I need to display jquery popup only once with a function onload

I need to display jquery popup only once with a function onload. This is my popup with a window.onload function delay and to addclass is-visible, however I'm looking to add a cookie function so the popup will only load once per browser or cache.
Any suggestions would be fantastic! - J query & html in code
jQuery(document).ready(function($){
window.onload = function (){
jQuery(".bts-popup").delay(1000).addClass('is-visible');
}
//open popup
jQuery('.bts-popup-trigger').on('click', function(event){
event.preventDefault();
jQuery('.bts-popup').addClass('is-visible');
});
//close popup
jQuery('.bts-popup').on('click', function(event){
if( jQuery(event.target).is('.bts-popup-close') || jQuery(event.target).is('.bts-popup') ) {
event.preventDefault();
jQuery(this).removeClass('is-visible');
}
});
//close popup when clicking the esc keyboard button
jQuery(document).keyup(function(event){
if(event.which=='27'){
jQuery('.bts-popup').removeClass('is-visible');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bts-popup" role="alert">
<div class="bts-popup-container">
<div id="contact-form">
<form method="post" action="">
<input type="hidden" name="form_uid" value="e880e632-8e7c-4b51-8928-b63cd1b6cdb5">
<ul>
<li class="namefield">
<input name="name" type="text" class="name" placeholder="Your Name">
</li>
<li class="emailfield">
<input name="submit_by" type="text" class="email-contact" placeholder="Your Email">
</li>
<li class="telfield">
<input name="telephone" type="text" class="phone" placeholder="Contact Number">
</li>
<li class="commentsfield">
<textarea name="comments" class="query" placeholder="How Can We Help?"></textarea>
</li>
<li>
</li>
<li>
<input name="submit-button" type="submit" value="Submit" class="submit">
<p class="gdpr-small">*By clicking ‘submit’ you are consenting to us replying, and storing your details. (see our privacy policy).</p>
</li>
</ul>
<input type="hidden" name="required" value="name,submit_by,telephone,comments">
<input type="hidden" name="data_order" value="name,submit_by,telephone,comments,marketing-opt-in">
<input type="HIDDEN" name="automessage" value="mymessage">
<input name="ok_url" type="hidden" value="">
<input name="not_ok_url" type="hidden" value="">
</form>
</div>
<i class="fa fa-times-circle"></i>
</div>
</div>

How to simple manage cookies, i think you can watch here: link
I think it's pretty simple (pseudo-code):
if (getCookie("popup") doesnt exist OR is set to 0)
showPopup();
setCookie("popup",1);
else
destroyPopup();
endif
You can use this simple way to handle multiple popoups too.
If you use PHP, you can use $_COOKIE instead of a javascript function.
Hope it helps.

Conditional Logic on my form, One option will take you to next

So the actual scenario is...
I have a form on a page that needs some conditional logic.
form fields...
Then, I have a bunch of questions for my customer which would determine what (form) would be displayed or not.
(i.e) What type of Marketing list are you looking for?
(options) Saturated or Targeted
If they choose Saturated, Then Saturated displays
If they choose Targeted, Then Targeted displays
either one or the other, both forms cannot be displayed at the same time.
and so on...
one prompt leads you to the next.
I would greatly appreciate any help I could get on this
This is the code I have so far:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var url = window.location.href;
var option = url.match(/option=(.*)/);
if (option !== null) {
$(".link ." . option[1]).trigger('click');
}
$(".link").bind('click', function () {
$('#intro-tekst').hide();
$('.boxes').hide();
$('.link').removeClass('selected');
$(this).removeClass('link');
$('#' + $(this).prop('class')).show();
$(this).addClass('link selected');
});
});
</script>
<body>
<p>
Who Do You Want to Mail to?
<ul>
<li>Business</li>
<li>Residents</li>
<li>Have a list?</li>
</ul>
</p>
<div class="boxes hidden" id="business">
What Type of Business List Do You Want?
<ul>
<li>Saturation</li>
<li>Targeted</li>
</ul>
</div>
<div class="boxes hidden" id="saturation">
Do You Want To: Mail to an Entire Zip Code or Mail to a Radius from an Address?
<ul>
<li>Zipcode</li>
<li>Radius</li>
</ul>
</div>
<div class="boxes hidden" id="zipcode">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="radius">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="targeted">
<div id="intro-tekst">Do You Want To: Mail to an Entire Zip Code or Mail to a Radius from an Address?
<ul>
<li>Zipcode</li>
<li>Radius</li>
</ul></div>
</div>
<div class="boxes hidden" id="zipcode">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="radius">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="residents">
<div id="intro-tekst">What Type of Consumer List Do You Want?
<ul>
<li>Saturation</li>
<li>Targeted</li>
</ul></div>
</div>
</div>
<div class="boxes hidden" id="have-list">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
</body>

This gets you most of the way there: http://jsfiddle.net/rym2g/
The only thing it doesn't do at the moment is close all the other panes when you choose something further up the list. That I leave to you. :)
<form>
<ul class="form-nav">
<li>AAA</li>
<li>BBB</li>
</ul>
</form>
<form class="hidden" id="a-1">
<ul class="form-nav">
<li>aaa</li>
<li>bbb</li>
</ul>
</form>
<form class="hidden" id="a-1-1">
<p>A-1-1</p>
</form>
<form class="hidden" id="a-1-2">
<p>A-1-2</p>
</form>
<form class="hidden" id="a-2">
<ul class="form-nav">
<li>111</li>
<li>222</li>
</ul>
</form>
<form class="hidden" id="a-2-1">
<p>A-2-1</p>
</form>
<form class="hidden" id="a-2-2">
<p>A-2-2</p>
</form>
And JavaScript:
$(document).on("click", "ul.form-nav a", function(event) {
event.preventDefault();
var id = event.target.href.replace(/^[^#]+/, "");
console.log("Going to: " + id);
$(id).show().focus();
});

jQUERY drop down wont, close when i click it, unless i have a # in my anchor tag.it stays dropped down,nothing happens when i click

sorry i do want tag to link to login.
only the register and login page is suppose to drop down. the register code is the same. this is the html code for the page
<header id ="logo_nav">
<img class="logo" src="logo.png" width=" 382" height="122 " alt="voucher">
<ul id= "main_nav">
<li> Home </li>
<li id ="login">
<a id="login-trigger" href="login.php">
Login here <span> ▼ </span>
</a>
<div id="login-content">
<form action = "log.php" method="post">
<label id="user"> Username </label>
<br/>
<input id="inputbox"type="text" name="username">
<br/>
<label id="pass"> Password </label>
<br/>
<input id="pinput" type="password" name="password"> <br/>
<input id="submit" type="submit" value ="log in">
</form>
Below is the jquery code thats not allowing me to drop down and
close.
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});

You have to add href="#", since you don't want tag to link anywhere.

One form two actions depending on which button?

I have two files, preview.php & save.php
<form id="create-template" class="form" action="" method="post">
<p class="_50">
<label for="t-name">Template name</label>
<input type="text" name="t-name" class="required"/>
</p>
<p class="_100">
<label for="t-html">Template HTML</label>
<textarea id="t-html" name="t-html" class="required" rows="10" cols="40"></textarea>
</p>
<div class="clear"></div>
<div class="block-actions">
<ul class="actions-left">
<li><a class="button red" id="reset-template" href="javascript:void(0);">Clear</a></li>
</ul>
<ul class="actions-right">
<li><div id="preview"><input type="submit" class="button" value="Preview template" onclick="return false;"></div></li>
<li><input type="submit" class="button" value="Create template"></li>
</ul>
</div>
</form>
Current JS:
$("#preview").click(function() {
$.post('preview.php', {body:$('#t-html').val().replace(/\n/g,'<br />'), function (result) {
//maybe use .ajax instead?
//open preview.php in new window
});
});
How can I use the same form but have two different actions depending on what button one presses?
Preview template => preview.php => opens to a new tab
Create template => save.php => posts on same page

You can have a click event handler for both the button and attach simultaneous ajax call with each other.
and you can use javascript to open window in new tab.
window.open(<url>)

Try setting "target" attribute of the form based on what button was clicked.
Change your form to the following:
<form id="create-template" class="form" action="" method="post" target="_blank">
<p class="_50">
<label for="t-name">Template name</label>
<input type="text" name="t-name" class="required"/>
</p>
<p class="_100">
<label for="t-html">Template HTML</label>
<textarea id="t-html" name="t-html" class="required" rows="10" cols="40"></textarea>
</p>
<div class="clear"></div>
<div class="block-actions">
<ul class="actions-left">
<li><a class="button red" id="reset-template" href="javascript:void(0);">Clear</a></li>
</ul>
<ul class="actions-right">
<li><input id="preview-form" type="submit" class="button" value="Preview template" /></li>
<li><input type="submit" id="submit-form" class="button" value="Create template" /></li>
</ul>
</div>
</form>​
And add this JavaScript:
$('#preview-form').click(function(ev) {
$('#create-template').attr('action', 'preview.php');
$('#create-template').attr('target', '_blank');
});
$('#submit-form').click(function(ev) {
$('#create-template').attr('action', 'submit.php');
$('#create-template').attr('target', '');
});
​
I haven't tested this across all browsers, so you might want to do that.