How to access an URL from a function in HTML/Javascript?

javascript get url path
javascript get url parameter
javascript get current url
javascript redirect to url
javascript get base url
javascript get domain from url
window.location javascript
javascript url

So I started to learn HTML and JavaScript not long ago and I wonder how I could access an URL/download a file from a function I made with JavaScript in another file and imported it with

<script src="jscriptSheet.js"></script>

Maybe I am wording the search badly but I didn't found anything that helps me. The only thing I saw, was doing a form and sending it to a server, but that's not what I need (I think).

What I'm doing is creating 2 dates that need to be passed to the URL so it can access the file and download it:

<div class="dateWrapper">
    <p id="date1">Date1:</p>
    <input id="date1INPUT" type="date">
    <p id="date2">Date2:</p>
    <input id="date2INPUT" type="date">
    <br><br>
    <button id="datesubmit" type="submit" onclick="downloadF()">Download file.</button>
</div>

And the function made with JavaScript:

function downloadF{
    href="100.100.100.100/something/something.php?date1="+ date1 from the input above +"&date2="+ date2 from the input above +"&something=10.php"
}

When I execute this, it downloads nothing, it's just a normal button with no action.

How can I do it?


You do not want type=submit if you want to do something else than submitting. INSTEAD use a button as below or attach to the submit handler of the form and use preventDefault if you do not want to submit

I use location= you can use window.open(url) too but that may be blocked

Also your function should be

function functionname() { ... }

Anyway here is an example

document.getElementById("datesubmit").addEventListener("click",function {
    location="100.100.100.100/something/something.php"+
    "?date1="+document.getElementById("date1INPUT").value+
    "&date2="+document.getElementById("date2INPUT").value
})    
<div class="dateWrapper">
    <p id="date1">Date1:</p>
    <input id="date1INPUT" type="date">
    <p id="date2">Date2:</p>
    <input id="date2INPUT" type="date">
    <br><br>
    <button id="datesubmit" type="button">Download file.</button>
</div>

If you set the header in the PHP you will see a download dialog

header("Content-type: application/octet-stream");

JavaScript Window Location, Some examples: window.location.href returns the href (URL) of the current page Example. Load a new document: <html> <head> <script> function newDoc() { JavaScript provides you with many methods to retrieve and change the current URL, which is displayed in the browser's address bar. All these methods use the Location object, which is a property of the Window object. You can create a new Location object that has the current URL as follows: var currentLocation = window.location;


Welcome to stackoverflow!

As already mentioned in a comment, you don't want to have the type set to "submit" when the button should not really submit the inputs but call a custom javascript function. Instead you just want to have the type set to "button".

Moreover you should define your javascript function like this (watch out for the parentheses):

function downloadF(){
  // Access your input fields here
}

For accessing DOM elements you might want to have a look here at w3schools

How to Get the Current URL with JavaScript, <html lang="en">; <head>; <meta charset="utf-8">; <title>Get Current URL in JavaScript</title>; </head>; <body>; <script>; function getURL() {; alert("The URL of  Definition and Usage The URL property returns the full URL of the current HTML document. Note: This property is similar to the location.href property.


function downloadF{
    href="100.100.100.100/something/something.php?date1="+ date1 from the input above +"&date2="+ date2 from the input above +"&something=10.php"
}

this is having invalid syntax. The JavaScript function should be defined like ( Very basically),

var f1 = function(){

}

function f2(){


}

And,

href="100.100.100.100/something/something.php?date1="+ date1 from the input above +"&date2="+ date2 from the input above +"&something=10.php"

Here you are inserting something like date1 & data2 But it's not exist in your function. You can't use undefined variables.

And if you skip all syntax errors and look at the command

href="100.100.100.100/something/something.php?date1="+ date1 from the input above +"&date2="+ date2 from the input above +"&something=10.php"

you are just setting a variable href and you didn't do any actions.

First learn basic javascript https://developer.mozilla.org/en-US/docs/Web/JavaScript

And the answer of your question is, If the target file is directly downloadable, you can use window.open('the_target_url') inside function.

If not,

You should do something in PHP. Please refer this link Download file from PHP

Get URL and URL Parts in JavaScript, JavaScript can access the current URL in parts. For this URL: https://css-tricks.​com/example/index.html?s=flexbox window.location.protocol = A bit of a more modern way of working with URLs is the URL() global method. The http: at the start of the URI tells the browser "I want you to make an HTTP request", so HTTP request it does. There is no way around it, I think. – Constantin Nov 12 '10 at 11:29


Open a link without clicking on it using JavaScript, Parameters: This function accepts three parameters as mentioned above and html >. < head >. < title >Javascript open link without click</ title >. < style > .gfg {. So to get the full URL path in JavaScript: var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + window.location.search A bit of a more modern way of working with URLs is the URL () global method.


How to Open URL in New Tab using JavaScript ?, In HTML, the anchor tag is used to open URLs in a new tab in an elementary and The window.open() method is used to open a new browser window or a new  The project structure consists of three files: index.html, style.css, text-processing.js. index.html – our HTML template; style.css – styles for the HTML file; text-processing.js – JavaScript logic file; Firstly, we need the index.html in which everything will be displayed: Let’s break it down: First, we need to connect our styles in


JavaScript best practices, This makes it easy to call functions and access variables from other places if(​playercontainer){ ajax('template.html'); }; function ajax(url){ var request; try{  A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).