Develop Reference

How to Bind Jquery Value to an HTML Element

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);

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>

get id value to function

I want to load some PHP page to div tags with this, but this code does not work;
<span>Dahili Branşlar</span>
<a href="#" id="cerrahi" ><span>Cerrahi Branşlar</span></a></li>
<script>
var yuklenecek = document.getElementById(id);
$("#"+yuklenecek).on("click", function(){
$("#orta_load").load(yuklenecek+".php");
});
</script>
<div id="orta_load">
when ı click to buton that which ı choose : should load dahili.php or cerrahi.php page in here
</div>

You need this:
$(".loaddiv").click(function() {
var url = $(this).attr("id") + ".php";
$("#orta_load").load(url);
console.log("loading " + url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Dahili Branşlar</span>
<span>Cerrahi Branşlar</span>
<div id="orta_load">
when ı click to buton that which ı choose : should load dahili.php or cerrahi.php page in here
</div>
Note how the jQuery function assigns the click handler to each <a>, then uses its id to determine the php document.

How to access hyperlink attributes in jquery when clicking

I'm trying to customize a confirmation dialog with a custom message embedded in the hyperlink tag, something like this:
<a class="confirmation" href="whatever.html" data-message="Are you sure?">the text</a>
and the js:
$('.confirm-delete').click(function(){
return confirm('the content of the data-message attribute');
});
So my question is how can I access the data-message attribute? Thanks!

Well you are using jQuery, so use the .data() function to get data-* attributes.
Also using simple JS this.dataset.message will work on most of the new browsers, but going back to primitive browsers, use this.getAttribute('data-message'). But in the case which you are using jQuery, .data() is preferred.
$('.confirmation').click(function(){
return confirm($(this).data('message'));
});
function message(element){
return confirm(element.dataset.message);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a class="confirmation" href="whatever.html" data-message="Are you sure?">Use jquery</a>
<br/>
Use simple JS

You can use below code:
alert($(".confirm-delete").attr("data-message"));

Here how:
$('.confirmation').click(function(){
return confirm($(this).attr('data-message'));
});

Try this code, will show the attribute "data-message" when clicking the link.
$('.confirmation').click(function(e){
e.preventDefault();
alert($(this).attr('data-message'));
return confirm('the content of the data-message attribute');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="confirmation" href="whatever.html" data-message="Are you sure?">the text</a>

HTML Code :
<a class="confirmation" id="confirmlink" href="whatever.html" data-message="Are you sure?" onclick="callConfirm()">the text</a>
Javascript Code:
<script>
function callConfirm() {
var linkval=document.getElementById("confirmlink");
var attribval=linkval.getAttribute("data-message");
alert(attribval);
}
</script>

use the attr method
$('.confirm-delete').click(function(){
return confirm( $( ".confirmation" ).attr( "data-message" ) ); //return the message fetched from the data-message attribute
});

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);"