Get variable from function does not work

Question

I'm trying to get the variables from the ready function:

var start = "";
var end = "";

$(document).ready(function(){
  $('#aktivnostiPregled').on("submit", function(event){  
    event.preventDefault(); 
    window.start = document.getElementById("date_get_pregled_start").value;
    window.end = document.getElementById("date_get_pregled_end").value;
  });
});

console.log(start);
console.log(end);

Does anyone know why this does not work?

Your variables will only be filled *after* the `submit` event has fired, therefore they will always be empty at the point you are currently calling `console.log()`. You would have more success here if you told us what you are attempting to do, as I can guarantee you there will be a much better way than this. — Rory McCrossan, Jan 04 '18 at 17:10
And, since you use jQuery....$("#date_get_pregled_start").val()...etc... — sinisake, Jan 04 '18 at 17:13
I want to get variables from the function after the form submit. Variables I need later in the code. — kamfulebu, Jan 04 '18 at 17:15
@RoryMcCrossan is right and from this code your "submit" event won't even be declared yet since document.ready fires once the page is ready. So, var start,end and your console logs will probably fire before your document.ready has fired and declared your submit function. After document.ready has fired your submit can be called. — Gander7, Jan 04 '18 at 17:15
You're setting the variables on the window object, so if they are set they will be available later for whatever logic you want to use them in. But there is no guarantee with the logic you have that the later logic will not happen before the submit happens, so they may not be set at all, which your future logic would have to account for. — Taplar, Jan 04 '18 at 17:17
I understand what the problem is. But I'm an absolute beginner. Can somebody help me? How to get a variable after submit form? — kamfulebu, Jan 04 '18 at 17:20
`I want to get variables from the function after the form submit. Variables I need later in the code` that doesn't make sense, as you won't be on the same page after submitting the form - unless you're using AJAX, but there's no indication of that — Rory McCrossan, Jan 04 '18 at 17:20
I stay on the same page. Variables we need later in ajax ...`var data = {page: page, per_page: 5, datum_start: start, datum_end:end};` — kamfulebu, Jan 04 '18 at 17:27
So console.log the variable when the ajax function is called then. Where those are actually placed execute on code parsing (on load), before the submit event occured. — Louys Patrice Bessette, Jan 04 '18 at 17:32

Gander7 · Answer 1 · 2018-01-04T17:40:56.847

Move your logs into your submit function (I've changed the button event from submit to click because I'm not sure how your calling it, but click should work for you). See below fiddle for example. You can test it by after clicking the button, run console.log(start) or console.log(end) from the console (F12, console tab on chrome) to prove that the values were saved to the window variables.

IF want them after the form submission (get/post result/data to/from server) then you need ajax or to use hidden html controls and this example won't work.

Excluding ajax, the difference between click and submit is that submit sends data to the server, which returns data and completely refreshes the page, wiping all page level and lower javascript variables since their scope is the page. If you don't need data from the server, then you just need to use click. You can return server data using click through using ajax. Click DOES NOT refresh the page unless you specifically tell it to.

var start = "";
var end = "";

$(document).ready(function(){
  $('#test').on("click", function(event){  
    console.log('here');
    event.preventDefault(); 

    window.start = $("#input1").val();
    window.end = $("#input2").val();

    console.log(window.start);
    console.log(window.end);
  });
});

See Fiddle here: https://jsfiddle.net/xwfdddsr/1/

Get variable from function does not work

1 Answers1