Redirect url if checkboxes are selected - javascript

I have some problem with redirecting urls after checkboxes are selected. I am using document.location for this, but this doesn´t work in my code. I'm trying to fix it, but without success.
This is the part of my code which doesn't work:
function objednat() {
var adress = "";
if (document.getelementbyid('BoxtarifVolani1').checked == true) {
adress += "#tarifVolani1";
}
window.location = 'http://www.investcon.webinpage.cz/cz/objednat-tarif-dobijeci-cislo/' + adresa;
}
I want to redirect this to a form, which will be filled with the selected values. I don't know why, but this document.location doesn't work in the code.
This is the part of the code I use in the formula for grabbing the hash from the url.
<script type="text/javascript">
if(window.location.hash) {
//set the value as a variable, and remove the #
var hash_value = window.location.hash.replace('#', '');
if (tarifVolani1 == true) {
document.getelementbyid('BoxtarifVolani1").checked = true;}
....
</script>
What am I doing wrong?

Whatever you have done is right, except, the function name is wrong case:
Change getelementbyid to getElementById.
Change adresa to adress.
Code:
function objednat() {
var adress = "";
if (document.getElementById('BoxtarifVolani1').checked == true) {
adress += "#tarifVolani1";
}
window.location = 'http://www.investcon.webinpage.cz/cz/objednat-tarif-dobijeci-cislo/' + adress;
}

jQuery way of doing it
function objednat() {
var adress = "";
if ($('#BoxtarifVolani1').is(':checked')) {
adress += "#tarifVolani1";
}
window.location = 'http://www.investcon.webinpage.cz/cz/objednat-tarif-dobijeci-cislo/'+adress;
}
For your ref: jQuery :checked Selector

Related

Sending java script variable value as part of PostBackUrl query string

I need to send a parameter value into a query string of a PostBackUrl method
within asp button.
The value I need is already being captured within a java script function shown below.
How do I send the value in hiddId as part of URL ? The below method isn't working. Can someone please help ?
<script language="javascript" type = "text/javascript">
function btn_Selected() {
var hiddId = null;
$('#<%=GridView1.ClientID %>').find('input[type=radio]:checked').each(function () {
hiddId = $(this).closest('tr').find('input[type = "hidden"]').val();
});
}
<asp:Button ID="Btn_Update" runat="server" Text="Update" PostBackUrl="Screen_Edit.aspx?CustID='<%=hiddId%>'"
Instead of a post-back, just redirect using JavaScript.
function btn_Selected() {
var hiddId = null;
$('#<%=GridView1.ClientID %>').find('input[type=radio]:checked').each(function () {
hiddId = $(this).closest('tr').find('input[type = "hidden"]').val();
});
window.location.href = "Screen_Edit.aspx?CustID='" + hiddId + "'"
}
If you look at the HTML source of the page, the button will have an javascript onclick event that looks something like this javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$mainContentPane$Btn_Update", "", false, "", "Screen_Edit.aspx?CustID=", false, false))
All we have to do is find a way to insert your variable after ?CustID=.
You can replace the onclick value of the button with the .attr() function of jQuery and do a search and replace to insert your variable.
<script type="text/javascript">
$(document).ready(function () {
var hiddId = $(this).closest('tr').find('input[type = "hidden"]').val();
$("#<%=Btn_Update.ClientID %>").attr("onclick", $("#<%=Btn_Update.ClientID %>").attr("onclick").replace("?CustID=", "?CustID=" + hiddId));
});
</script>

javascript window.location update a get data

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.

using the method onclick () to trigger a function that opens a window it grabs from the clicked button

<script language="JavaScript">
function goThere()
{
var the_url = window.document.form.button.value;
var good_url = fixURL(the_url);
var new_window = window.open(good_url,"new_window","menubar,resizeable");
}
function fixURL(the_url)
{
var the_first_seven = the_url.substring(0,7);
the_first_seven = the_first_seven.toLowerCase();
if (the_first_seven != 'http://')
{
the_url = "http://" + the_url;
}
return the_url;
}
</script>
</head>
<body>
<form name="the_form" onclick="goThere()"; return false;">
<input type="button" name="the_url" class="broadGroups" onClick="goThere()" value="http://en.wikipedia.org/wiki/Category:Sports"></input>
<input type="button" name="the_url" class="broadGroups" onclick="goThere()" value="http://en.wikipedia.org/wiki/Category:Film"></input>
</form>
</body>
</html>
So this code may be totally messed up, but here is what I am trying to do.
There are two buttons inside the tag. I want each to use the method onsubmit to trigger the function goThere(). How do I set it up so that the_url is set to a value that I pull from the button tag. I also want to be able to put non-url text on the button itself while allowing it to call goThere () through the method call onsubmit.
In the end it should just take the url, make sure it starts with http:// (in this case it doesnt matter because the user isn't inputting the url, but I'd like to keep it in for other purposes later on) and open it in a new window with a menubar and the resizable property.
Sorry for the long post. Any help would be greatly appreciated.
Pass in this in your goThere call. This will bring in the clicked element to your goThere function. Then you access the attributes for the clicked button.
http://jsfiddle.net/wJMgb/
onClick="goThere(this)"
function goThere(elem) {
var the_url = elem.value;
var good_url = fixURL(the_url);
var new_window = window.open(good_url, "new_window", "menubar,resizeable");
}
function fixURL(the_url) {
var the_first_seven = the_url.substring(0, 7);
the_first_seven = the_first_seven.toLowerCase();
if (the_first_seven != 'http://') {
the_url = "http://" + the_url;
}
return the_url;
}

change the value of parameter in URL

I'm trying to make a javascript function to change the value of a parameter in the URL with the value inputed in a text box, with no luck. That's because I'm note a code designer but a graph one.
this is the URL where I need to change the "City" parameter:
http://server/ad_new_customer.php?&city=&uri=http://server/adauga_exp.php
I am generating data in the input text box through a MySQL query with jQuery like this:
<input type='text' id='city' name='city' style="width:190px; align:left;" value="<?php echo $city; ?>" /> </td>
<script type="text/javascript">
//change the value of parameter in the URL function
function changeURI(key, value) {
var query = document.location.search.substring(1);
var query_q = query.split("?");
var vars = query_q[1].split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == key) {
vars[i] = pair[0] + "=" + value;
}
}
return vars.join("&");
}
//jQuery making the auto-suggestion query for the input ID
$().ready(function() {
$("#city").autocomplete("core/exp_city.php", {
width: 340,
matchContains: true,
selectFirst: false
}).return(changeURI("city", this.value}));
});
</script>
How can I make it change the value the parameter on selected value?
Please advise, again, a humble designer.
Thank you!
L.E.
I have made an workaround, changed the changeURI() function with this one:
function changeURI(key, value)
{
key = escape(key); value = escape(value);
var kvp = document.location.search.substr(1).split('&');
var i=kvp.length; var x; while(i--)
{
x = kvp[i].split('=');
if (x[0]==key)
{
x[1] = value;
kvp[i] = x.join('=');
break;
}
}
if(i<0) {
kvp[kvp.length] = [key,value].join('=');
}else{
//this will reload the page, it's likely better to store this until finished
document.location.search = kvp.join('&');
}
}
Found on StackOverflow and call it from the jQuery query with the $.result() function:
<script type="text/javascript">
$().ready(function() {
$("#city").autocomplete("core/exp_city.php", {
width: 340,
matchContains: true,
selectFirst: false
}).result(function() {changeURI("city",this.value)});
});
</script>
What error are you getting? are you getting any javascript error? Also, try changing your code to some thing like
url = url.replace(new RegExp("city=", 'g'), "city="+value).
Also, The URL written in the question should not have & before city parameter as the first parameter starts with a ?, so the URL should be :
http://server/ad_new_customer.php?city=&uri=http://server/adauga_exp.php
Check if that was the issue.
In your example, document.location.search.substring(1) is already getting rid of the question mark: it should return &city=&uri=http://server/adauga_exp.php. Then doing a split on "?" and trying to take the second array element should return undefined, because there are no longer any "?" characters. Skip straight to var vars = query.split("&") at that point, and the rest looks okay to me.

Javascript - If Last Character of a URL string is "+" then remove it...How?

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

Categories