Update Global variable with JQuery onSelect

Question

I'm trying to use a datepicker and dropdown menu to update the values of my global variable. I'm a bit clueless on how I can get this to work.

var startValue, endValue, intervalValue, startDate, endDate, offset; 
$(document).ready(function() {
    startDate = $("#from").datepicker({
        onSelect: function() {
            startValue = $(this).datepicker('getDate');
        }
    });

    endDate = ("#to").datepicker({
        onSelect: function() {
            endValue = $(this).datepicker('getDate');
        }
    });

    intervalValue = $("#number").selectmenu().selectmenu("menuWidget").addClass("overflow");

    $("#btnSubmit").click(function(){});
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Start Date: <input type="text" id="from"></p>
<p>End Date: <input type="text" id="to"></p>

<label for="number">Select a number</label>
<select name="number" id="number">
    <option selected="selected">15</option>
    <option>30</option>
    <option>60</option>
</select>

<input id="btnSubmit" type="submit" value="Get Data">

The values from my dropdown menu is assigned to intervalValue to carryout a little calculation.

Here's my Fiddle link

@LonelyPlanet thanks. However that doesn't solve my problem. — Ekom, Jan 05 '17 at 09:07

Ovidiu Dolha · Answer 1 · 2017-01-05T09:48:15.530

1

Change to

$("#from").datepicker({
    onSelect: function() {
        startValue = $(this).datepicker('getDate');
    }
});

$("#to").datepicker({
    onSelect: function() {
        endValue = $(this).datepicker('getDate');
    }
});

You use onSelect so you don't need to assign the result of the datepicker() function to the value, the values will be updated when onSelect is triggered.

As Martin E mentions, to keep the value updated on changes, initialize it on document.ready:

intervalValue = $('#number option:selected').val();

And then update it on each change

$('#number').change(function(){ intervalValue = this.value; });

Then use the submit event to do final calculation and anything else needed after submission (note that you should use form submit rather than button click because it's semantically better, although click will work as well)

$('#yourFormId').on('submit', function(event) {
  event.preventDefault();
  intervalValue = intervalValue * (1000*60);
  // ...

Result: https://jsfiddle.net/jw1w4k5o/

edited Jan 05 '17 at 09:48

answered Jan 05 '17 at 09:03

Ovidiu Dolha

5,335
1
21
30

Thanks. Do you have an idea of how I can structure my `intervalValue` and Do I need a `submit` button ? – Ekom Jan 05 '17 at 09:10
what exactly do you mean by `structure my intervalValue` ? as i see you do have a submit button - you can use it as trigger for your calculation - although you should better use the form's submit instead of the button's click event – Ovidiu Dolha Jan 05 '17 at 09:14
1

put `intervalValue = $('#number option:selected').val();` right after `$(document).ready(function() {` to get the initial value of the select .... and `$('#number').change(function(){ intervalValue = this.value; });` to update the value on change. – Martin E Jan 05 '17 at 09:18
You're right. But how can I use the form's submit to calculate ? `intervalValue` has to values `15, 30, 60` which is multiplied by `1000 * 60` – Ekom Jan 05 '17 at 09:19
1

bind to the submit event of the form `$('#yourFormId').on('submit', function(event) { // event.preventDefault(); intervalValue = intervalValue * (1000*60); // make other stuff ... });` – Martin E Jan 05 '17 at 09:27
@MartinE [Please can you update in JSFiddle](https://jsfiddle.net/skrpv105/) Thanks – Ekom Jan 05 '17 at 09:28
@OvidiuDolha you should update your answer and Ekom should accept it :) – Martin E Jan 05 '17 at 09:40

score 0 · Answer 2 · answered Jan 05 '17 at 09:00

0

You can have access to all global variables using window object.

window.variable

I must add that you should try to use local variables as much as you can and use global only if you really have no other option, because global variables will be visible to all javascript code on page and other scripts might assume different values for same thing.

When you create variable using var outside of function it will be global variable.

Also you can access to variables of upper scope inside functions. So you can just use those inside function, while you defined it in upper scope.

answered Jan 05 '17 at 09:00

Lukas Liesis

24,652
10
111
109

Using `window.variable` how can I declare global variable so I can use in any JS file?? – Ekom Jan 05 '17 at 09:44
`window.a = 'b';` and it will be available everywhere, or you can just create new variable with `var a = 'b';` outside of any function, so it will be declared in global scope. Which is bad practise to do as mentioned before. More info about why: http://stackoverflow.com/questions/2613310/ive-heard-global-variables-are-bad-what-alternative-solution-should-i-use – Lukas Liesis Jan 05 '17 at 09:45
Thanks for the link. I appreciate it. Would this work in nodeJS? I think nodeJS has its unique way of handling global variables. – Ekom Jan 05 '17 at 10:53

score 0 · Answer 3 · answered Jan 05 '17 at 09:03

0

You are missing $ for ('#to').datepic...

https://jsfiddle.net/skrpv105/3/ is the updated code.

answered Jan 05 '17 at 09:03

Garfield

2,487
4
31
54

this is not what he asked for and this is not answer, should be submitted as comment. – Lukas Liesis Jan 05 '17 at 09:03
@LukasLiesis yes, however I felt that's the mistake stopping him to get the values. My jsfiddle has the code to show the global var access – Garfield Jan 05 '17 at 09:06

Update Global variable with JQuery onSelect

3 Answers3