Let's say I have a form located at:
http://www.mysite.com/some/place/some/where/index.php
And I have this form:
<form action="submit.php"> ... </form>
If I do this:
$("form").attr("action");
I will get:
submit.php
What is a foolproof way to get the action from the form, so that it includes the entire URL:
http://www.mysite.com/some/place/some/where/submit.php
?
Try
$("form").prop("action");
or (assuming your form is in the same folder as the page and the page URL ends with /something)
var loc = location.href;
var page = loc.substring(0,loc.lastIndexOf("/")+1)+
$("form").attr("action");
Handle query strings and hashes especially for Quentin:
Live Demo
var loc = location.origin + location.pathname;
var action = $("form").attr("action").split("/").pop();
var page = loc.substring(0,loc.lastIndexOf("/"))+"/"+action;
var el = document.createElement('a');
el.href = $("form").prop("action");
alert(el.href);
Chrome adjusts the href to give the absolute url, not sure with other browsers
Related
I am new and just doing practices i just did:
var i= [["j.php?i=1"]]; and it sent value to php and prints but when i want some input from user it does nothing. For example:
file j.js
var input = "hello";
var send= [["j.php?i="+input]];
and in j.php
<?php
$e=$_GET['i'];
echo $e;
?>
Any idea or i am totally wrong? I am trying to have some variation. And i really did with window.location.href. But I just want to know how to do in this way var send= [[]]. Thanks
Edit:
your question is not very clear, maybe try this:
var input = "hello";
var url = "/j.php?i=" + input;
var send = [[url]];
But, it's not clear to me what you want to do with your send variable...
Original
You have to send the data to the server either using a a tag (GET method), a form (POST method) or an Ajax request (any Http verb):
<!-- Here you give a unique id to your link -->
<a id="link" href="">your link</a>
<script>
var i = "Hello";
// wait for page to be loaded
document.addEventListener("DOMContentLoaded", function(event) {
// change the href attribute of the link with the id equal to 'link'
// with whatever data contained in the i variable
// this is done after the page is loaded
document.getElementById("link").href = "/j.php?i=" + i;
});
</script>
Then, when you just click the link, it will send the variable named i containgin the value Hello to your php page.
You could also do it in this way:
<a id="link2">your link</a>
<script>
var i = "HELLO";
// wait for page to be loaded
document.addEventListener("DOMContentLoaded", function(event) {
// here we are telling javascript to change the url
// in the browser when the user clicks the link
document.getElementById('link2').onclick = function() {
window.location = '/j.php?i=' + i
}
});
</script>
I have endlessly googled for about an hour, so please forgive me if this has been asked before.
I am using pure Javascript and do not wish to use jQuery.
PREAMBLE
I have an HTML form with 3 select boxes that control a search of items. When one is updated, a simple function reads each of the values in the select boxes and produces a URL that matches our URL rewriting standard.
http://www.example.com/search/select1/data1/select2/data2/select3/data3/
This is then used in a
history.pushState
to update the browser's url address so a user can bookmark the page right away. This works fine.
PROBLEM
When the user presses the button of the form, what I want is the function to read all the select box values, generate the URL as before but also load this specific URL so that the underlying database code can return the results for that search on the page.
However, when I use
window.location.href
it loads the page, but also sends the querystring from the form submission. This mucks up the database code because, essentially, it's getting all the data twice.
EXAMPLE
I choose 'A' from select1, 'D' from select2 and 'E' from select3.
This results:
http://www.example.com/search/select1/A/select2/D/select3/E/?select1=A&select2=D&select3=E
SO...
Is it possible to generate the URL in the correct rewritten format, then load the page without the querystring?
JAVASCRIPT
function changepage(loadpage)
{
var theform
theform = document.getElementById("searchform");
var pageurl
pageurl = 'http://www.example.com/search/'
var select1 = theform.select1.value;
var select2 = theform.select2.value;
var select3 = theform.select3.value;
if(select1 != '')
{
pageurl = pageurl + 'select1/' + select1 + '/';
}
if(select2 != '')
{
pageurl = pageurl + 'select2/' + select2 + '/';
}
if(select3 != '')
{
pageurl = pageurl + 'select3/' + select3 + '/';
}
history.pushState('data', '', pageurl);
if(loadpage=='yes')
{
window.location.href = pageurl;
}
}
HTML
<form method="post" action="form.asp">
<select id="select1"><option>A</option><option>B</option></select>
<select id="select2"><option>C</option><option>D</option></select>
<select id="select3"><option>E</option><option>F</option></select>
<button onClick="changepage('yes');">
</form>
I have 2 URL like this:
http://localhost/gtwhero/public/users/3/subscribers-lists/1/subscribers
http://localhost/gtwhero/public/users/3/subscribers-lists/
So, URL format is like it:
{baseURL} +"users/{user_id}/subscribers-lists/"+{id}+"/subscribers"
Or-
{baseURL} +"users/{user_id}/subscribers-lists/"
and when I run this JS in this 2 pages, because 1page code is included in other page:
var baseURL = "http://localhost/gtwhero/public/";
$('#subscribers_list tbody').on( 'click', 'button.details', function () //Handeling Edit Button Click
{
var data = dataTable.row( $(this).parents('tr') ).data();
//alert(data['id']); //id = index of ID sent from server
window.location = window.location.href +'/'+data['id']+'/subscribers';
});
So, it is working for the second URL, but bot working for the first URL.
So, I am getting:
{baseURL} +"users/{user_id}/subscribers-lists/"+{id}+"/subscribers"
for the second URL, but getting error like this:
{baseURL} +"users/{user_id}/subscribers-lists/"+{id}+"/subscribers"+{id}+"/subscribers"
for the first URL.
Is there any solution?
I have done it-
var url = window.location.href;
var userId = (url.match(/\/users\/(\d+)\//) || [])[1];
var subscribers_lists_Id = (url.match(/\/subscribers-lists\/(\d+)\//) || [])[1];
Is there a way to make an a tag link that includes part of the current url?
I would use it to change language but stay on the current page!
If I am on:
www.mysite.com/contact
and I press on:
<a>FR</a>
the generated link would be:
www.mystie.com/fr/contact
Kind regards
Try this:
HTML:
FR
Now get the url from javascript
$("#myLink").click(function(e){
e.preventDefault();
var url = document.url; // get current page url
url = url.substr(0, url.indexOf('/')); // get substring from url
url += "/" + $(this).attr("href"); // add href of a tag to url
window.location.href = url; // locate the page to url
});
you can try with some like
function changeLng(lang) {
// remove language '/fr/' or '/es/' if exists
var path = window.location.pathname.replace(/\/[a-z]{2}/, '');
// reload the page same url with the lang prefix
window.location.href = '/' + lang + path;
}
the link can be
FR
ES
EN
this converts any url to lang specific, sample
/contact to /fr/contact
/about to /fr/about
update
for remove the lang part is simple
function removeLng() {
// remove language
var path = window.location.pathname.replace(/\/[a-z]{2}/, '');
window.location.href = path;
}
I am using following code to append param to url. This is working fine but when parameter is appended in url, page is getting reloaded. I want to use this functionality without reloading the page .
function insertParam(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('=');
alert('sdfadsf');
break;
}
}
if(i<0) {kvp[kvp.length] = [key,value].join('=');}
//this will reload the page, it's likely better to store this until finished
document.location.search = kvp.join('&');
//alert(document.location.href);
}
I want to add multiple params to url without reloading the page like:
txt1
txt2
txt3
link1
link2
link3
i want url : "..../search.php"
after click on txt2
i want url : "..../search.php#t_2"
after click on link2
i want url : "..../search.php#t_1&l_2"
You can only do this using history.pushState(state, title, url) which is an HTML5 feature.
There is a new feature that aims to replace the use of location.hash with a better solution: pushState.
window.history.pushState(data, "Title", "/new-url");
More information: http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate