Append to the end of an href value with jquery - javascript

I`ve got this link:
<a id="Link" href="mailto:bestellung#i-drain.net?subject=I-Drain Bestellung&body="></a>
Now i want to append data from an form element after &body="
So for example the first time it changes to &body="New text , and the next time it changes to
&body="New text , Another text.
How can i do this? Can´t get it to work.. thank you :)

You change the attribute of the link:
var link = $('#Link');
link.attr('href', link.attr('href') + 'your text');

You can use pure JS :
var el = document.getElementById('link');
el.href += 'some string';
When possibile, always try to use JS over jQuery, usually, it will provide better performance since it reduce the number of functions call.

For example, you can do it with:
var form = $('.form_element').val();
var el = $('a#Link').prop('href');
el.prop('href', el.prop('href')+form);

$('#Link').attr('href',$('#Link').attr('href')+"New Text")

Related

jQuery find and replace text

I have a text contained on a <textarea> like this:
Hi {nom},
We are glad to accept your invitation.
I need it to become
Hi Dolly Parton,
We are glad to accept your invitation.
I don't want to use any plugin, but I have tried developing this simple functionality with no possitive result:
prevContent=$('textarea').val(); //alerts correctly textarea content
content = prevContent.replace('{nom}','Dolly Parton');
In this case, no replacement is made and content has the same value as prevContent.
This is not meant to make a real time replacemet, it has to be replaced before submitting form:
$(document).on('click','.submitMessage', function(){
prevContent=$('textarea').val();
content = prevContent.replace('{nom}','Dolly Parton');
$.post('../actions/newMessage.php',{ms_content:content}).success(
function(data){
alert("yikes");}
);}
});
SOLVED: This was due to a spell mistake on variable. It was sent like {nom1}, not {nom}. Sorry for the inconvenience.
You need use RegExp with g flag, because in your example only first {nom} will be replaced:
var prevContent = $('textarea').val();
var content = prevContent.replace(/\{nom\}/g, 'Dolly Parton');
and to update textarea you can use .val, like so
$('textarea').val(content);
Example
You will just need to assign value of "content" to textarea, as :
$('textarea').val(content);

Grabbing text from a span tag

I have some code for Javascript using jQuery, and I've been wondering how to fix an element of it.
var dataGiven = +$("span.cost-in-usd:first-child").text();
However, the span tag is:
<span class="cost-in-usd" data-se="product-usd-value">42</span>
Is there a way of modifying my code in order for it to recognise data-se?
Yes, use data.
var datase = $('.cost-in-usd').data('se');
Some links;
http://api.jquery.com/jquery.data/
Here's a jsfiddle
The following will return the value of attribute
$('.cost-in-usd').attr('data-se');

How do I remove an element but not its content with javascript?

I have a string which is a simple <a> element.
var str = 'Link'
Which I want to turn into:
Link
I can remove the </a> part easily with str.replace("</a>", "")but how would I remove the opening tag <a href="somewhere.com>?
Use unwrap like
$('a').contents().unwrap();
But it work with the elements that are related to DOM.For your Better solution try like
str = ($(str).text());
See this FIDDLE
This will strip the whole tag:
str.replace(/<[^>]+>/g,'');
And this just the first part:
str.replace(/<[^/>]+>/g, '');
Since you are using jQuery, you can do it on the fly as follows
$('Link').text()
Can you try this,
var str = 'Link';
alert($(str).text());

Get an attributes value of the ALT attribute of a hyperlink

My a-tag (link) contains innerHTML which is an image like this:
.innerHTML = <img alt="hello world" src="/Content/Images/test.png">
How can I get the text of the alt attribute with JQuery?
You really don't need jQuery. If you have the a element you can do this:
// lets call the anchor tag `link`
var alt = link.getElementsByTagName('img')[0].alt; // assuming a single image tag
Remember attributes map to properties (most), and unless the property is changed, or the attribute, the two should reflect the same data (there are edge cases to this, but they can be handled case-by-case).
If you truly do need the attribute there is
var alt = link.getElementsByTagName('img')[0].getAttribute('alt');
Last scenario is if you only have the image tag as a string.
var str = '<img alt="hello world" src="/Content/Images/test.png">';
var tmp = document.createElement('div');
tmp.innerHTML = str;
var alt = tmp.getElementsByTagName('img')[0].alt;
If you must use jQuery (or just prefer it) then the other answer provided by Alexander and Ashivard will work.
Note: My answer was provided for completeness and more options. I realize the OP asked for jQuery solution and not native js.
Being $a your <a/> element.
Using jQuery you can do:
$("img", $a).first().attr("alt");
Or, using pure JavaScript:
var $img = $a.getElementsByTagName("img")[0];
console.log($img.alt);
​
See it here.
use this.
var altName=$('a img').attr('alt');

How can I add "href" attribute to a link dynamically using JavaScript?

How can I add the href attribute to a link dynamically using JavaScript?
I basically want to add a href attribute to <a></a> dynamically (i.e. when the user clicks on specific image in the website).
So from:
<a>Link</a>
I need to go to:
Link
var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"
I assume you know how to get the DOM object for the <a> element (use document.getElementById or some other method).
To add any attribute, just use the setAttribute method on the DOM object:
a = document.getElementById(...);
a.setAttribute("href", "somelink url");
document.getElementById('link-id').href = "new-href";
I know this is an old post, but here's a one-liner that might be more suitable for some folks.
First, try changing <a>Link</a> to <span id=test><a>Link</a></span>.
Then, add something like this in the javascript function that you're calling:
var abc = 'somelink';
document.getElementById('test').innerHTML = 'Link';
This way the link will look like this:
Link
More actual solution:
<a id="someId">Link</a>
const a = document.querySelector('#someId');
a.href = 'url';
I know there seems plenty good answers here, but none of them seemed simple enough for what I was "told" to do in the 2022 Udemy Web Development Bootcamp by Angela.
So I remembered how simple the use of scriplets was and figured to try it and it works just as well.
For those like me who are learning let me explain:
. - takes you to current URL
then static path
then dynamic variable generated for each post (its a blog website)
Read More
This is using JS inside an EJS page
same solution is also given in the solution lecture of the bootcamp here:
https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12385596#overview
Lecture 317
I came here because I wanted to dynamically set the link href after it's been clicked
<a id='dynamic'>link text</a>
document.getElementById("dynamic").addEventListener("click", onClick_dynamic)
function onClick_dynamic(e){
const nextPage = getNextPage()
document.getElementById("dynamic").href = _BASE_URL + "?nextPage=" + nextPage
// e.default processing sends user to href
}
Single line solution
<a id="yourId">Link</a>
document.querySelector("#yourId").href("URL")
enter code here javasicript added
var x = "www.google.com";
vay y = "550";
var z= x+y;
document.write('GONDER');

Categories

Resources