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);
Related
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>
There is list inside ul li like below:
<ul class="AllLayer">
<li>
<fieldset id="layer0">
<label class="checkbox" for="visible0">
<input id="visible0" class="visible" type="checkbox" /> OSM
</label>
<span class="edit fa fa-pencil-square">eidt</span>
</fieldset>
</li>
<li>
<fieldset id="layer1">
<label class="checkbox" for="visible1">
<input id="visible1" class="visible" type="checkbox" value="osm2" /> osm2
</label>
<span class="edit fa fa-pencil-square">eidt</span>
</fieldset>
</li>
</ul>
When user click on span I must get value of checkbox before this span.
I wrote below code but it return undefined.
$("span.edit").on('click', function () {
var value= (this).parent().siblings("input[type='checkbox']").attr("value");
alert(value);
});
Could you help me please?
You need to use find() method to get the checkbox inside its parent.
Additionally, you can use :checkbox selector to get checkbox element which would be better than the attribute equals selector and the value can be access using val() method.
$("span.edit").on('click', function() {
var value = $(this).parent().find(":checkbox").val();
// or $(this).sblings().find(":checkbox").val()
// or $(this).prev().find(":checkbox").val()
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="AllLayer">
<li>
<fieldset id="layer0">
<label class="checkbox" for="visible0">
<input id="visible0" class="visible" type="checkbox" /> OSM
</label>
<span class="edit fa fa-pencil-square">eidt</span>
</fieldset>
</li>
<li>
<fieldset id="layer1">
<label class="checkbox" for="visible1">
<input id="visible1" class="visible" type="checkbox" value="osm2" /> osm2
</label>
<span class="edit fa fa-pencil-square">eidt</span>
</fieldset>
</li>
</ul>
I'm trying to select the DIV of the first row in the offers table on this page that is shipped by Amazon Prime.
http://www.amazon.co.uk/gp/offer-listing/B00NMND7AW/?condition=new
So in this example the row I'm trying to select with jQuery is the one that is £25.19
I have tried the following:
div.olpOffer .a-icon-prime:first
This gets me only so far. Now I need to figure out how to select the div that contains that.
I need to be able to paste this into the Selector Gadget plugin for Chrome and it should select the div that contains the cheapest Amazon Prime item.
It sounds like you are looking for the :has() selector:
$('.olpOffer:has(.a-icon-prime):first');
This will select the first .olpOffer element that has an element with a class of .a-icon-prime.
I suggest
$(".supersaver").closest("div.olpOffer")
It selects the row:
<div class="a-row a-spacing-mini olpOffer">
<div class="a-column a-span2">
<span class="a-size-large a-color-price olpOfferPrice a-text-bold"> £25.19 </span>
<span class="a-color-price">
</span>
<span class="supersaver"><i class="a-icon a-icon-prime" aria-label="Amazon Prime TM"><span class="a-icon-alt">Amazon Prime TM</span>
</i>
</span>
<p class="olpShippingInfo">
<span class="a-color-secondary">
Eligible for FREE UK Delivery Details
</span>
</p>
</div>
<div class="a-column a-span3">
<div class="a-section a-spacing-small">
<span class="a-size-medium olpCondition a-text-bold">
New
</span>
</div>
</div>
<div class="a-column a-span2 olpSellerColumn">
<h3 class="a-spacing-none olpSellerName">
<img alt="Amazon.co.uk" src="http://ecx.images-amazon.com/images/I/01pSGAIMN3L.gif" width="90" height="19">
</h3>
</div>
<div class="a-column a-span3 olpDeliveryColumn">
<p class="a-spacing-mini olpAvailability">
</p>
<ul class="a-vertical">
<li class="olpFastTrack"><span class="a-list-item">
In stock.
<span id="ftm_us7UeOB4c9pZTmqq2Md4WubIlhxKT3k9uiwFnsOOTz6eaIxF2ReWmql9mIaXr5EWHB9hdFWHF3jDdpJB7I6iPIEhJZbrPX5z">Want delivery by Thursday, 3 December?
<span id="shippingMessage_ftinfo_olp_1">Order it in the next <span id="ftc_us7UeOB4c9pZTmqq2Md4WubIlhxKT3k9uiwFnsOOTz6eaIxF2ReWmql9mIaXr5EWHB9hdFWHF3jDdpJB7I6iPIEhJZbrPX5z" style="color: #006600;">19 hours and 10 minutes</span>, and choose <b>One-Day Delivery</b> at
checkout.
</span>
See details
</span>
</span>
</li>
<li><span class="a-list-item">
Domestic delivery rates
and return policy.
</span>
</li>
</ul>
<p></p>
</div>
<div class="a-column a-span2 olpBuyColumn a-span-last">
<div class="a-button-stack">
<form method="post" action="/gp/item-dispatch/ref=olp_atc_new_1" class="a-spacing-none">
<input type="hidden" name="session-id" value="275-2613291-9295018">
<input type="hidden" name="qid">
<input type="hidden" name="sr">
<input type="hidden" name="signInToHUC" value="0" id="signInToHUC">
<input type="hidden" name="metric-asin.B00NMND7AW" value="1">
<input type="hidden" name="registryItemID.1">
<input type="hidden" name="registryID.1">
<input type="hidden" name="itemCount" value="1">
<input type="hidden" name="offeringID.1" value="us7UeOB4c9pZTmqq2Md4WubIlhxKT3k9uiwFnsOOTz6eaIxF2ReWmql9mIaXr5EWHB9hdFWHF3jDdpJB7I6iPIEhJZbrPX5z">
<input type="hidden" name="isAddon" value="0">
<span class="a-declarative" data-action="olp-click-log" data-olp-click-log="{"subtype":"main","type":"addToCart"}">
<span class="a-button a-button-normal a-spacing-micro a-button-primary a-button-icon" id="a-autoid-6"><span class="a-button-inner"><i class="a-icon a-icon-cart"></i><input name="submit.addToCart" class="a-button-input" type="submit" value="Add to Basket" aria-labelledby="a-autoid-6-announce"><span class="a-button-text" aria-hidden="true" id="a-autoid-6-announce">
Add to Basket
</span></span>
</span>
</span>
</form>
<div class="a-section a-spacing-micro a-text-center">
or
</div>
<p class="a-spacing-none a-text-center olpSignIn">
Sign in to turn on 1-Click ordering.
</p>
</div>
</div>
</div>
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();
});
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.