Am using bootstrap modal on my site, everything a modal is open it will add url has using the modal element id and a data i passed.
My problem is how do i remove the last added hash when a button is clicked just like when browser back button is click window will navigate back removing last hash.
How do i remove last url location has accordingly using javascript, i want every time a button is clicked the last hash from the list of url hash will be removed.
function ensureHash(newHash){
var lochash = location.hash;
if(lochash || lochash != ""){newHash = lochash + "&" + newHash;}
if (window.location.hash) {
return window.location.href.substring(0, window.location.href.lastIndexOf(window.location.hash)) + newHash;
}
return window.location.hash + newHash;
}
window.location.href = ensureHash("modalElementId=modalAction");
https://example.com/app?#mElem1=mAcct1&#mElem2=mAcct2&#mElem4=mAcct5
I tried doing this but it doesn't work well
function ensureRemoveHash(){
var gethash = location.hash;
gethash = gethash.slice(0, gethash.lastIndexOf('&'));
return gethash;
}
window.location.href = ensureRemoveHash();
Something like this?
var str = "https://example.com/app?#mElem1=mAcct1&#mElem2=mAcct2&#mElem4=mAcct5"
function dropHash(str) {
if (str.indexOf("#") ==-1) return str;
var arr = str.split("#");
arr.pop();
return arr.join("#");
}
console.log(str);
str = dropHash(str)
console.log(str);
str = dropHash(str)
console.log(str);
str = dropHash(str)
console.log(str);
Or do you just have the button replace the hash?
var url = new URL("https://example.com/app")
console.log(url);
url.hash="mElem2=mAcct2"
console.log(url);
url.hash="mElem3=mAcct3"
console.log(url);
Related
At a page like
https://www.example.com/?firstname=Steven&lastname=Smith&email=steve%40gmail.com&phone=0404555555
I have a button (anchor link) #ptsBlock_553944 .ptsCell:nth-of-type(1) .ptsEditArea.ptsInputShell that links to https://www.example.com/form
I'd like to append the URL parameters from the current URL to the button's URL, so that the button's href is now https://www.example.com/form/?firstname=Steven&lastname=Doig&email=steve%40gmail.com&phone=0404555555
How can I do this with JavaScript please?
Use window.location.search:
var url = "https://exmaple.com";
var newurl = url + window.location.search;
newurl will contain all the get (ex. ?something=something&something2=something5) data.
To change the href of a:
var button = document.getElementById('#ptsBlock_553944');
button.href = button.href + window.location.search;
If you don't care about supporting older browsers you can use the URL API and URLSearchParams.
function appendCurrentUrlSearchParams(anchorElement) {
const currUrlSearchParams = new URL(window.location.href).searchParams;
const link = new URL(anchorElement.href);
// uncomment this line if you want to clear query parameters already present in the anchor url
// link.search = '';
for (const entry of currUrlSearchParams.entries()) {
link.searchParams.append(entry[ 0 ], entry[ 1 ]);
}
anchorElement.href = link.href;
}
Usage in your case:
appendCurrentUrlSearchParams(document.querySelector('#ptsBlock_553944 .ptsCell:nth-of-type(1) .ptsEditArea.ptsInputShell'));
Read Html select using select to change the link of a button with Javascript
specifically the section on
Get the element with something like document.getElement MDN getElement Link
Change the .href of that element to what you want.
function selectFunction() {
var x = document.getElementById("selectopt").value;
document.getElementById("mylink").innerHTML = x;
document.getElementById("mylink").href = "http://www." + x + ".com";
}
document.location.pathname = '/questions/69240453/appending-
current-url-parameters-onto-anchor-link/69240510';
//get the document pathname I chose from document.location
let data = document.location.pathname;
let preUrlString = 'www.example.com/form';
let newString = preUrlString + data;
console.log(newString);
'www.example.com/form/questions/69240453/appending-
current-url-parameters-onto-anchor-link/69240510'
document.getElementById("mylink").href = newString;
I have asked something similar in the past but was able to resolve it by separating the functions by events. I need to be able to pass 2 href events in one Onchange Event because it is a dropdown, OR I need to be able to tie the second function into another Event.
This works only when an alert() is inserted. Once I take the alert() out it does not work. I've tried to supress the alert while still keeping it in the code and it works fine. I do not want the alert but I want the results.
HTML Here:
<select id="PartList" class="form-control form-control-lg ml-0" onChange="SelectMain();">
JavaScript Here
function sList() {
var pl = document.getElementById("PartList");
var value = pl.options[pl.selectedIndex].value;
var text = pl.options[pl.selectedIndex].text;
str = 'URL1 HERE='+ "'" + text + "'" ;
//alert(value);
//alert(text);
window.location.href = str;
}
function SelectValue() {
var pv = document.getElementById("PartList");
var value = pv.options[pv.selectedIndex].value;
str = 'URL2 HERE' + value ;
alert(value);
window.location.href = str;
}
function SelectMain() {
sList();
SelectValue();
}
function alert(message) {
console.info(message);
}
This is resolved, for those that come to this question. The problem wasn't with the JavaScript it was because the device I was sending the commands to couldn't handle the commands that fast. I have incorporated the resolved code with troubleshooting techniques.
function sList() {
var pl = document.getElementById("PartList");
var value = pl.options[pl.selectedIndex].value;
var text = pl.options[pl.selectedIndex].text;
str = 'URL1='+ "'" + text + "'" ;
//str1 = 'http://google.com';
//alert(value);
//alert(text);
window.location.href = str;
//window.open(str1);
}
function SelectValue() {
setTimeout(function(){
var pv = document.getElementById("PartList");
var value = pv.options[pv.selectedIndex].value;
str = 'URL2=' + value ;
//str1 = 'http://aol.com';
//alert(value);
window.location.href = str;
//window.open(str1);
},1000);
}
I have xxx.com and six input fields in a page. If user enter values in the input field I want the URL to be like xxx.com/1st value-2nd value-3rd value-etc
Now I am getting the input values in jQuery and passing those values to the URL but I could pass a single value and not all. Here's my code.
$(".search").on("click",function(e){
// var action = $(this).attr("id");
var skill = $(":input[name='searchskill']").val();
var location = $("#searchlocation").val();
action = skill + "-" + location;
location.href = action;
e.preventDefault();
});
use '/' instead of '-' and get the url parameters in php function like
function($skill='',$location=''){
}
and now script will be like
$(".search").on("click",function(e){
var skill = $(":input[name='searchskill']").val();
var location = $("#searchlocation").val();
action = skill + "/" + location;
location.href = action;
e.preventDefault();
})
Try this one
$(".search").on("click",function(e){
// var action = $(this).attr("id");
var skill = $(":input[name='searchskill']").val();
var location = $("#searchlocation").val();
action = skill + "/" + location;
window.location.href = action;
e.preventDefault();
});
EDIT
Now I have created plunker for you please edit or suggest what you not getting in it, you also edit that plunker and give me new link to it
here is DEMO
I have a small javascript issue; I want to reload page with a selected language option value as a get variable.
if I select EN language, the page reload with &lang=EN,
My problem is that I use concat so I get my_url&lang=EN&lang=FR&lang=SP ...
so when I select first EN then FR I want to get my_url&lang=FR not my_url&lang=EN&lang=FR
I want to replace the lang variable not only to add:
<select onchange="javascript:handleSelect(this)">
<option>DE</option>
<option>EN</option>
<option>FR</option>
<option>SP</option>
<option>NL</option>
<option>HR</option>
<option>PL</option>
<option>CZ</option>
</select>
<script type="text/javascript">
function handleSelect(elm)
{
window.location = window.location.href +"?lang="+elm.value;
}
</script>
Try this:
function handleSelect(elm)
{
var href = window.location.href;
if (href.indexOf("lang") > -1)
{
href = href.replace(/(lang)=\w+((?=[&])|)/, "lang="+elm.value);
}
else
{
var char = (href.indexOf("?") == -1 ? "?" : "&");
href+= char + "lang=" + elm.value;
}
window.location.href = href;
}
It should work with any kind of url keeping the params.
Fiddle. In the fiddle I'm using a div instead of the window.location.
try
window.location = window.location.pathname +"?lang="+elm.value;
You could use the replace function:
window.location = window.location.href.match(/lang=/) ? window.location.replace( /lang=(.*){2}/, 'lang=' + elm.value ) : window.location.href + '?lang=' + elm.value;
Reference: http://www.w3schools.com/jsref/jsref_replace.asp
If ?lang= exists, replace it with the new one.
If not, just add the lang parameter.
edit
I like the window.location.pathname solution from Dave Pile, this should be better than checking and replacing something.
edit2
var loc = 'http://test.de/?foo=bar'; // window.location.href;
var seperator = loc.match(/\?/) ? '&' : '?';
var elm = 'DE';
var url = loc.match(/lang/) ? loc.replace(/lang=(.*){2}/, 'lang' + elm ) : loc + seperator + 'lang=' + elm;
document.getElementById('result').innerHTML = url;
<div id="result"></div>
Look at this snippet, you have to change the loc so it should work, also change var url to window.location and elm to your language element.
It checks if parameters exists and change the seperator from ? to &, than if no lang is set, it will set it or if a lang is set, it will replace it.
function handleSelect(elm)
{
var href = window.location.href;
if (href.indexOf("lang") > -1)
window.location.href = href.replace(/(lang)=\w+((?=[&])|)/, "lang="+elm.value);
else
window.location = window.location.href +"&lang="+elm.value;
}
You could use
var currAddress = window.location.href;
var indexOfLang = currAddress.indexOf('lang=');
var tempAddress = currAddress.substring(indexOfLang, indexOfLang+7);
currAddress = currAddress.replace(tempAddress,'lang='+elm.value);
window.location = currAddress;
The number 7 is the length of substring - lang=EN.
This is a continuation from an existing question. Javascript - Goto URL based on Drop Down Selections (continued!)
I am using dropdown selects to allow my users to build a URL and then hit "Go" to goto it.
Is there any way to add an additional function that checks the URL before going to it?
My URLs sometimes include the "+" character which I need to remove if its the last character in a URL.
So it basically needs to be "if last character is +, remove it"
This is my code:
$(window).load(function(){
$('form').submit(function(e){
window.location.href =
$('#dd0').val() +
$('#dd1').val()+
$('#dd2').val()+
$('#dd3').val();
e.preventDefault();
});
});
var url = /* whatever */;
url = url.replace(/\+$/, '');
For example,
> 'foobar+'.replace(/\+$/, '');
"foobar"
function removeLastPlus (myUrl)
{
if (myUrl.substring(myUrl.length-1) == "+")
{
myUrl = myUrl.substring(0, myUrl.length-1);
}
return myUrl;
}
$(window).load(function(){
$('form').submit(function(e){
var newUrl = $('#dd0').val() +
$('#dd1').val()+
$('#dd2').val()+
$('#dd3').val();
newUrl = removeLastPlus(newUrl);
window.location.href = newUrl;
e.preventDefault();
});
});
Found another solution using str.endsWith("str")
var str = "Hello this is test+";
if(str.endsWith("+")) {
str = str.slice(0,-1);
console.log(str)
}
else {
console.log(str);
}
Also Matt Ball's Replace method looks good. I've updated it to handle the case when there are multiple + at the end.
let str = "hello+++++++++";
str = str.replace(/\++$/, '');
console.log(str);
<script type="text/javascript">
function truncate_plus(input_string) {
if(input_string.substr(input_string.length - 1, 1) == '+') {
return input_string.substr(0, input_string.length - 1);
}
else
{
return input_string;
}
}
</script>
$(window).load(function(){
$('form').submit(function(e){
var newUrl = $('#dd0').val() +
$('#dd1').val()+
$('#dd2').val()+
$('#dd3').val();
newUrl = newUrl.replace(/\+$/, '');
window.location.href = newUrl;
e.preventDefault();
});
});
Just seems easier.
function removeLastPlus(str) {
if (str.slice(-1) == '+') {
return str.slice(0, -1);
}
return str;
}