How to call one javascript variable to another javascript file

Admin 1
Viewed 250

I have an HTMLForm which on click forward me to new HTML page i have Two JS files for each HTML

What i am doing and trying to achieve is :-

  • On 1st HTML when i click search button i am storing the values of input field and select field in different variables
  • What I am trying to achieve is when on search new page loaded I want to use that new variable into my new JavaScript
  • I have Two HTML files also

here is the code of my file1.html

<form id="formId" action="file2.html">
        <div class="container">
            <h4>Date:</h4>
            <input type="text" id="startdate" name="fromdate" width="276"
                placeholder="dd/mm/yyyy" required />
            <h4>Outlets:</h4>
            <select name="outlet" id="myselect">
                <option>ALL</option>
            </select>
            <div>
                <br>
                <button id="btn-search" class="btn btn-default" type="submit">
                    <i class="fa fa-search"></i>&nbsp;Search
                </button>
            </div>
        </div>
    </form>
<script type="text/javascript" src="JS/JavaScript1.js"></script>
  • In This HTML i have a form having one date field and one select field
  • On clicking submit Button I am Storing the values of date and Outlet into a variable in my JavaScript file which is JavaScript1

**Here is my JavaScript1 file **

$(document).ready(function() {  
    $("#btn-search").click(function(){  
       var   currentlyClickedOutletform = $("#myselect").find(":selected")[0].textContent;
       var   currentlyClickedStartdateform= $("#startdate").val();                
          $.ajax({
                url : "LinkReportMain",
                method : "POST",
                data : {
                       Outletlink : currentlyClickedOutletform,  
                       Fromdatelink : currentlyClickedStartdateform,                            
                     },                          
            });

    });

});

var currentlyClickedOutletform and var currentlyClickedStartdateform are the two values i want to use in my new JavaScript file which is JavaScript2

my file2.html is

  • in this file i am just populating an HTML table so i only have an div tag inside

<div id="tbl"></div> <script type="text/javascript" src="JS/JavaScript1.js"></script>
<script type="text/javascript" src="JS/JavaScript2.js"></script>

And finally my JavaScript2 is

  • in this file I want to use the values of first Javascript file

$(document).ready(function() {
  alert(currentlyClickedOutletform)
  $('.loader').show();
  $('.overlay').show();
  $.ajax({
    url: "LinkReportMain",
    method: "GET",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: {
      fromdate: $("#startdate").val(),
      todate: $("#enddate").val(),
      outlet: $("#all").val()
    },
    success: function(data) {
      let formatedData = formatData(data);
      renderTable(formatedData);
      $('.loader').hide();
      $('.overlay').hide();
    }
  });
});

NOTE to see the code of JavaScript2 file please see the snippet its not working but my code was not getting formatted so I have put that into snippet

So what I am trying to achieve is to use the Variable of JavaScript1 into JavaScript2

i am doing it right but its not working any one out here who can guide em please, it would be very helpfull

html jquery javascript
1 Answers

Without localStorage

First set type="button" of you search button or prevent form submit by e.preventDefault(); on click event. 

$("#btn-search").click(function(){
    e.preventDefault();
    // your other code

    //code to redirect to another html page
    var queryString = "?para1=" + currentlyClickedOutletform + "&para2=" + currentlyClickedStartdateform;
    window.location.href = "page2.html" + queryString;
})

for other page script:

var queryString = decodeURIComponent(window.location.search);
    queryString = queryString.substring(1);
    var oldParam = queryString.split("&");
    var param1 = oldParam[0];
    var param2 = oldParam[1];

Now you can use param1 and param2.

**localStorage ** :

in first page store object :

localStorage.setItem("outletFrom",currentlyClickedOutletform);
localStorage.setItem("startDate",currentlyClickedStartdateform);

in seond page get data:

var currentlyClickedOutletform = localStorage.getItem("outletFrom");
var currentlyClickedStartdateform= localStorage.getItem("startDate");
user_89704630
Related