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>
Related
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.
I already checked out this post:
Perform an action after trigger('click') finishes firing?
But nothing I tried so far worked.
Suppose I have this menu in my page:
<ul class="nav nav-tabs">
<li role="presentation" id="home">
<span>
Home
</span>
</li>
<li role="presentation" id="user">
<span>
User
</span>
</li>
</ul>
When I click "user" tab, I get this content:
<button id="save-changes" role="button">Save it</button>
<form>
<input type="text" id="nom" name="nom" placeholder="Your Name">
<input type="text" id="prenom" name="prenom" placeholder="Your Surname">
<input type="text" id="login" name="login" placeholder="Your Login">
</form>
After submitting data, I'm redirected to "Home":
<div>
<div class="breadcrumb">
<div id="saved-success" style="display:none">
Data Saved successfully
</div>
</div>
<div class="content-body">
some stuff here...
</div>
I want the message inside the div "saved-success" to appear.
To manage the submit I have this jquery function:
$(document).on("click","#save-changes",function(){
dataarray = array(
login: $("#login").val();
nom: $("#nom").val();
prenom: $("#prenom").val();
);
$.post(getBaseUrl(true)+"/UserParam/saveUser",dataarray,function(){
$("#home").trigger("click");
$("#saved-success").css("display", "block");
});
I am successfully redirected to "home" but the div "saved-success" remain hidden. Need help from experts. How do I make the message to show after redirection?
Try this
$(document).on("click","#save-change",function(){
dataarray = array(
login: $("#login").val();
nom: $("#nom").val();
prenom: $("#prenom").val();
);
$.post(getBaseUrl(true)+"/UserParam/saveUser",dataarray,function(){
$("#home").trigger("click");
setTimeout(function(){
document.getElementById("updated-success").style.display = "block";
}},2000);
});
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();
});
Following is my HTML code:
<form name="package_type_documents" action="" method="post" enctype="multipart/form-data">
<div class="hor-form">
<ul>
<li>
<div class="answer-block" id="doc_title">
<span>Add More Documents</span>
<ol>
<li id="ttl1" class="ptdoc">
<li class="ans_li">
<span class="num-block">1 </span><span class="num-block reqd">*</span>
<label>Document Title</label>
<input type="text" name="pt_doc_title[1]" id="pt_doc_title_1" value="Prabhakar Bhosale" />
</li>
<li class="ans_li">
<span class="num-block"> </span><span class="num-block reqd"> </span>
<label>Document File</label>
<p class="uploadBtn"><input type="file" name="document_file_name_1" id="document_file_name_1"/>
</p>
</li>
<li class="ans_li">
prabhakar_bhosale.docx
</li>
<li class="ans_li">
<input type="checkbox" name="delete_file_1" id="delete_file_1" class="custom-check" />
<label for="show">Delete document</label>
</li>
<input type="hidden" name="pt_doc_id[0]" value="19" />
<input type="hidden" name="pt_doc_old_file_iname[0]" value="prabhakar_bhosale.docx" />
</li>
</ol>
<span>Add More Documents</span>
<p class="fade">Note * (Image size should be less then 1 mb and allowed image types are jpg, jpeg, gif, png .)</p>
</div>
</li>
<li>
<p class="last">
<input id="saveForm" class="c-btn" type="submit" name="submit" value="Update"/>
<input type="button" class="c-gray-btn" name="back" value="Back" onclick="javascript:window.location.href='http://localhost/eprime/entprm/web/control/modules/package_type/view_package_type.php?page=1'" />
</p>
</li>
</ul>
</div>
</form>
Following is my jQuery code:
<script type="text/javascript">
function delete_title(field) {
$('li'+'#'+field).remove();
}
</script>
The following code is not deleting the concerned . I tried many tricks but still it's not removing. Can anyone please help me in this regard?
check demo and check how call function
function delete_title(field) {
$("#"+field).remove();
}
delete_title('ttl1');
demo
I am sure you must be having ids unique for li element. And For deleting element using id. You can use:
$('#'+field).remove();
$('li').remove();
this Will remove all the li elements
and below code will remove specific Li element from UL.
`$('#li_yourId').remove();`
If you want to delete <li> element with given id then you can write:
$('#'+field).remove();
No need to write li.
Try this one is Javascript:
var elem = document.getElementById('id');
elem.parentNode.removeChild(elem);
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.