How to Bind Jquery Value to an HTML Element - javascript

How can i bind the url result from the jquery to the href ? as you can see on the html below. Thank you.
JQUERY CODE
<script>
$(document).ready(function(){
$("#btnSearch").click(function(){
var yearArray = [];
$("input:checkbox[name=Year]:checked").each(function(){
yearArray.push($(this).val());
});
var makeArray = [];
$("input:checkbox[name=Make]:checked").each(function(){
makeArray.push($(this).val());
});
var url="http://example.com/results?Year="+yearArray.join()+"&Model="+makeArray.join();
alert(url);
});
});
</script>
HTML
<a href="/searchnew/{{ url }}"><button id="btnSearch" class="btn btn-cta margin-bottom-1x search-button cssBase"
type="button""
style="width: 262.5px;">Search</button></a>

You can simpy add href attribute after creating link. What i mean by this is
if your href tag is look like this
<a href="#" id="myurl">
$("#myurl").prop("href",url);
This will simply render your html like this
<a href="http://example.com/results?Year="......(your dynamic values here)">

You don't have to add tag on to button click. Instead, on click of button, within the function after you have prepared url, call
location.href = "searchnew/" + url;
In case you have the base url for the app, you can prepend as well to have the complete url with you.

Use id attribute for your a tag like this-
<a href="....." id="myLink" > ... </a>
And at the end of your jQuery code add the following:
var a = $('#myLink');
var href = a.attr('href');
a.attr('href', href + url);

Related

Using a variable as the href

I want to have the href consist of a variable set in javascript, I also need the text that is displayed on the page to be a variable. In the example below I would like to have the string "http://google.com" be assigned to a variable, I also need to have "My Link Name" as a variable. I have looked at similar questions here but I don't see what addresses this particular situation.
Go Here Now<br>
In the example below I can create a variable called myLinkName and set it to the string "Go here now" however I don't know how to create a variable and set it to the value of the href e.g. "http://google.com"
<script type="text/javascript">
var myLinkName = "Go Here Now";
</script>
<a href="http://google.com">
<script type="text/javascript">
document.write(myLinkName)
</script></a>
You have to use the DOM API
HTML
<a id="aLink"></a>
Javascript
let link = document.getElementById('aLink');
link.href = "https://google.com";
link.innerText = 'This is my Link'
The complete code:
<html>
<body>
<a id="aLink"></a>
<script>
let link = document.getElementById('aLink');
link.href = "https://google.com";
link.innerText = 'This is Link';
</script>
</body>
</html>
I fear you are using some very old JavaScript material.
The usage of document.write() is depricated.
The approach you are following is antiqated. Today JS is not evaluated and just written to the document. Instead the document is explicitly manipulated.
First of all: <script> is sufficient to declare some JavaScript. The type attribute is not needed anymore.
<a id=myLink></a>
<script>
//get a reference to the a element
const myLink = document.getElementById("myLink");
//set the text
myLink.innerText = "Click me!";
//set href
myLink.href = "http://google.com";
</script>
You can set href attribute like this
var text = 'Go Here Now';
var href = 'http://google.com'
var atag = document.getElementsByTagName('a')[0];
atag.innerText = text;
atag.href = href;
var text = 'Go Here Now';
var href = 'http://google.com'
var atag = document.getElementsByTagName('a')[0];
atag.innerText = text;
atag.href = href;
<br>
I would create an object that contains your link name and href and on page load, assign accordingly. Something like:
window.addEventListener('load', function(){
var link = {
name : 'My Link Name',
href : 'http://google.com' //should use : instead of =
};
var myLink = document.getElementByTagName('a')[0]; //You would change this to whatever selector you want.
myLink.innerText(link.name);
myLink.setAttribute('href', link.href);
}, true);
Syntax may not be perfect. And, depending on your situation, it may be better to accomplish this with your server side code. Hope this helps!
You can change the href attribute by doing this:
<a href="http://google.com" id="link">
<script type="text/javascript">
var yourtext = 'Go Here Now';
var href = 'http://google.com';
document.getElementById('link').href = myLinkName;
document.getElementById('link').innerText = yourtext;
</script></a>
By using JQuery we can update/add href to the element like below.
HTML code:
Click Here
JQuery code:
$("#linkId").attr("href", "http://www.google.com/'");

how to find string in html tag and replace using javascript/jquery

I do not know how to find a string in the html tag and replace it with another one.
I will show it on an example.
I have something like that
<a class="test" data-value="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>
And I would like to get such an effect
<a class="test"> <img-src="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>
Does anyone have any idea? I'm sorry for my level of English.
You can first append the img and then remove the attribute data-value.
See the code below:
$("a").append(function(){
return '<img src="'+$(this).attr("data-value")+'">';
}).removeAttr("data-value")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="test" data-value="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>
Assuming that you are new in JavaScript and/or jQuery, I've made a step-by-step example of a solution:
// create a pointer to your anchor
var $yourAnchor = $('.test')
// copy data attribute
var $hdata = $yourAnchor.data('value');
// remove attribute
$yourAnchor.removeAttr('data-value');
// insert html
$yourAnchor.html('<img src="' + $hdata + '">');
// If It has multiple hyperlink tag then
$('a').each(function(){
if($(this).data('value')!=undefined){
$(this).append(function(){
return '<img src="'+$(this).attr("data-value")+'">';
}).removeAttr("data-value");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="test" data-value="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>

Paste id into href

I have a lot of streams.
<a id="stream1" href="http://server/stream1/parameters">name_1</a>
<a id="stream2" href="http://server/stream2/parameters">name_2</a>
...
<a id="stream99" href="http://server/stream99/parameters">name_99</a>
I want to hide "http://server/stream99/parameters"
How to do a function to paste "id" into href
eg:
<a id="stream1" href="#">name_1</a>
using something like
function somefunction(a) {
document.getElementById('a').innerHTML = '<a href="http://server/'+id+'/parameters">';
}
Javascript or jquery will make the link and paste the "id".
Or perhaps I can somehow use a different method to hide links?
Like this - do note that this is easy to decipher by inspecting the code.
Alternatively use a server redirect and just send some encrypted ID
$(function() {
$(".stream").on("click", function(e) {
e.preventDefault();
location = "http://server/" + this.id + "/parameters";
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a id="stream1" class="stream" href="#">name_1</a><br>
<a id="stream2" class="stream" href="#">name_2</a><br>
<a id="stream3" class="stream" href="#">name_3</a><br>
<a id="stream4" class="stream" href="#">name_4</a><br>

How to access JavaScript variable in HTML tags?

I am trying to access JavaScript variable in the href attribute of anchor tag.
JavaScript Function:
<script type="text/javascript">
function fun(ReqTextbox)
{
var queueData =document.getElementById(ResTextbox).value;
//some more code
}
</script>
HTML code:
<body>
<input type="text" value="<%=dynamicValue%>" id="<%=dynamicId%>"/>
<a href="servlet?variablename="<%Eval(queueData)%>" onclick=fun('<%=dynamicvalue%>');>LINK</a>
</body>
I know that I am going to wrong at variablename="<%Eval(queueData)%>".
Can someone please help me how to access and pass JavaScript variable as a query string parameter?
First, I think you made a typo :
function fun(ReqTextbox) {
var queueData = document.getElementById(ResTextbox).value;
//some more code
}
You get ReqTextbox parameter but you use ResTextbox. Then, since Javascript is client-sided, you have to manually update the href tag using href attribute. So your function would be like :
function fun(ReqTextbox) {
var queueData = document.getElementById(ReqTextbox).value;
document.getElementById('myAnchor').href = "servlet?variablename=" + queueData;
//some more code
}
And give your anchor tag an id, myAnchor in my example.
Modify HTML code as given below -
<body>
<input type="text" value="<%=dynamicValue%>" id="<%=dynamicId%>"/>
<div id="example2">
<a href="servlet?variablename="<%Eval(queueData)%>" onclick=fun('<%=dynamicvalue%>');>LINK</a> </div>
</body>
Use this to pass query string -
$("#example2 a").attr("href", url + "?variablename=" + queueData);
If I understand you correctly inside fun() function try to use:
var queueData = this.getAttribute('id');
That way you will get id value when runnning onclick() function.

JavaScript link not sending to correct href

I'm having problems with a JS link.
I have the following code:
window.addEvent('domready', function() {
$('province_aw').addEvent('change', function() {
var index = this.options[this.selectedIndex].value;
var b = document.getElementById("choice_2").value;
var link = "index.php?option=com_chronoforms&chronoform=listSpecific-3&id_province="+index+"&id_ch="+b;
document.getElementById('link1').href = "index.php?option=com_chronoforms&chronoform=listSpecific-3&id_province="+index+"&id_ch="+b;
});
});
with this link:
<a class="jcepopup" id="link1" href="" rel="{handler:'iframe'}"> <input type='button' name='prueba' id='prueba' value='...' /> </a>
The code is actually changing the link of the < a > tag, however, when I click on the button, nothing happens, it keeps sending me to the original href (which is the homepage).
You should use href="javascript:void(0);"

Categories

Resources