Develop Reference

Update Global variable with JQuery onSelect

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

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/

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.

You are missing $ for ('#to').datepic...
https://jsfiddle.net/skrpv105/3/ is the updated code.

Javascript append onblur.value mysql

I trying to get the value of an input type="text" and with it, check if it really exists at my database and, if true, append it with an input type="hidden" value="value-of-last-input", but my code isn't working.
Here:
<input type="text" class="form-control" id="codigo" name="codigo" onblur="RetirarProduto(this)" />
and JS:
function RetirarProduto(campo) {
var codigo = campo.value;
alert(codigo);
});
I used alert to check the value, but it is not working.

Your function has one extra parenthesis at the end. Change your JavaScript to:
function RetirarProduto(campo) {
var codigo = campo.value;
alert(codigo);
}
And this should work. Here is a working JSFiddle. Let me know if I can help any further :)

Try this to get the value in the input form field. Then you can pass the value to your function and do whatever you need with it. Put this inside your input element.
onblur="var c = this.value; alert(c);"

AJAX / jQuery $.get method works, but $.post does not

Yesterday I made my first successful AJAX call using this function which was linked to a button click event.
function function1(){
$.get("ajax/calendar.php", function(data){
$('#ajaxResponse').html(data);
});
};
Now I would like to use the $.post method so that I can pass in 2 values that I had simply hard coded when I used the $.get method.
Here are my inputs and submit button:
<div ... >
<div ... >
<div ... >
<span ... >From:</span>
<input ... name="strDte">
</div>
<div ...>
<span ... >To: </span>
<input ... name="endDte">
</div>
</div>
<div ... >
<button type="submit" onclick="dateRange(strDte, endDte)">OK</button>
</div>
</div>
I created a similar function to my $.get method:
function dateRange(startD, endD){
$.post("ajax/calendar.php", {startDate : strDte, endDate : endDte}, function(data){
$('#ajaxResponse').html(data);
});
};
and I updated "ajax/calendar.php" to accept the value that were hard coded before:
$formStartDate = $_POST['startDate'];
$formEndDate = $_POST['endDate'];
EDIT: my console is telling me that the parameters are not being recognized by function call in the event handler.
Does anyone see what my issue is? I'd also love some design suggestions if you think there is a better way of achieving this function.

You are passing up form elements, not the values of the elements. You have wrong variable names.
Give the inputs ids
<input ... name="strDte" id="strDte">
<input ... name="endDte" id="endDte">
Update the JavaScript to reference the value.
function dateRange(startD, endD){
$.post("ajax/calendar.php", {startDate : startD.value, endDate : endD.value}, function(data){
$('#ajaxResponse').html(data);
});
};
You are using bad practice by referencing elements directly by their name/id and inline events are not the greatest thing to use. You should use getElementById or querySelector to reference the elements.

The variable names used in your function definition should match the names you use within your function. That is
{startDate : strDte, endDate : endDte}
should be
{startDate : startD, endDate : endD}
I suggest you play around with this fiddle: http://jsfiddle.net/Uwcuz/3657/
It is using a service from JSFiddle to echo back what you send to it. I changed the AJAX call to use $.post() instead of $.ajax() since this is the function you are playing with! :)
Some additional tips when learning such technologies. Always check with your browsers developers' tools. There you can follow the request being sent to your backend and catch any errors. The "Network" and "Console" (on Chrome dev tools, but Firefox has similar, too) tabs are your friends in this case!
Enjoy and happy learning!

Since you are not using a form, you should be declaring your button to be a button type to show that you are not submitting a form.
<button id="submitBtn" type="button">OK</button>
Your problem is that you are not supplying an id attribute for your <input> tags. name is only used in forms. Change your <input> tags to be
<input id="strDte">
<input id="endDte">
Then in your script, you can use
$("#submitBtn").click(function () {
var start = $("#strDte").val();
var end = $("#endDte").val();
$.post("ajax/calendar.php", { startDate: start, endDate: end }, function (data) {
$("#ajaxResponse").html(data);
}
});

The variable names you pass into the function must pass those you use in the data parameter of $.post(). You're passing:
startD but trying to use strDte .. and
endD but trying to use endDte .... strDte and endDte are not defined anywhere.
Try this instead:
function dateRange(startDate, endDate){
$.post("ajax/calendar.php", {startDate : startDate, endDate : endDate}, function(data){
$('#ajaxResponse').html(data);
});
};
UPDATE
Now that I know where the confusion was coming from the best approach is one that allows you to separate, clearly, your JS from your HTML.
Per your request for suggestions, here's how:
$(function() {
$('#my_form').on('submit', function(event) {
//stop the form from submitting via default submission
event.preventDefault();
//get form data
var formData = $(this).serialize();
//see what the data looks like
console.log( formData );
//make ajax call
$.post('ajax/calendar.php', formData, function(data){
$('#ajaxResponse').html(data);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="my_form">
<div><label for="strDte">Start Date:</label>
<input type="text" name="startDate" id="strDte"/>
</div>
<div><label for="endDte">End Date:</label>
<input type="text" name="endDate" id="endDte"/>
</div>
<div>
<input type="submit" value="OK" />
</div>
</form>

here is a simple ajax post you can play around with...
<input id="start_date" name="startDate" />
<input id="end_date" name="endDate" />
<button type="submit" id="submit_dates">Submit</button>
$(document).ready(function(){
$("button#submit_dates").click(function(){
var startDate = $("#start_date").val();
var endDate = $("#end_date").val();
$.ajax({
type:'POST',
url:'ajax/calendar.php',
data:"startDate=" + startDate + "&endDate=" + endDate,
success:function(data) {
if(data) {
$("#ajaxResponse").html(data);
} else {
// no response
}
}
});
});
});

clear text box using JS function in a href on click

I have this function:
<script>
function ClearTextBox(textbox_name) {
$(textbox_name).val("")
}
</script>
that removes values from a text input
i am trying to call it using:
Clear
but its not clearing the text box

You should use Unobtrusive JavaScript .
Try this code.
$('a').on('click',function(){
$('#customercompany1').val("");
});

It seems working fine for me.. but the console shows the following error
Uncaught SyntaxError: Unexpected token )
this is due to the javascript:void(); in your href attribute.
so i changed the mark up to
Clear
<input type="text" id="customercompany1" value="test value" />
and the script as
function ClearTextBox(textboxname) {
$(textboxname).val(" ");
return false;
}
Hope this helps....
DEMO HERE

Write your function like this:
function ClearTextBox(myInput) {
var txtBox = document.getElementById(myInput);
txtBox.value = "";
return false;
}
And write your html like this:
Clear
<input type="text" id="customercompany1" />

Need to see your HTML to be sure, but I'm guessing your text box looks like this :
<input type="text" name="customercompany1"/>
and it needs to look like this :
<input type="text" name="customercompany1" id="customercompany1"/>
The '#' jQuery selector matches on the id attribute, not the name attribute.
(This is true if you have used a textarea rather than an input)

HTML form does not submit in JavaScript

Trying to create a simple age calculator. At the moment the current year will populate but when you enter your birth year and click submit nothing happens.
function aaa(){
date=new Date();
var y=date.getFullYear();
document.getElementById('ddd').value=y;
}
function display(){
var c=document.getElementById('eee').getFullYear.value;
//var aa= document.getElementById('eee').(this).('getDate').value;
var e= y - c;
{
document.write("Ans="+e);
}
alret(e);
}
<body onload="aaa();">
<form name="xyz" method="post">
CurrentDate:<input type="text" name="ddd" id="ddd">
BirthDate:<input type="date" name="eee" id="eee">
Age:<input type="text" name="age" id="age">
<input type="submit" name="submit" value="submit" onClick="display();">
</form>
</body>

Probably better for code review, but here goes:
<script language="javascript">
The language attribute for script elements was deprecated in HTML 4 and removed in HTML5. Remove it.
function aaa()
Functions should have a meaningful name, e.g. setYear.
{
date=new Date();
You should keep variables local with var.
var y=date.getFullYear();
document.getElementById('ddd').value=y;
You could just do:
document.getElementById('ddd').value = new Date().getFullYear();
}
function display()
{
var c=document.getElementById('eee').getFullYear.value;
Input type date isn't supported by all browsers, and that won't work anyway. If you are just using the difference in years (which will be incorrect by 1 year about half the time) then why not just ask for the year?
var e= y - c;
{
document.write("Ans="+e);
}
The block is redundant, and calling document.write after the load event will first clear the entire document (everything, including all scripts) and load a new document with just the content passed to document.write.
[...]
So a re-write might look like:
function calcAge(element) {
var form = element.form;
form.age.value = form.currentYear.value - form.birthYear.value;
}
window.onload = function() {
document.forms[0].currentYear.value = new Date().getFullYear();
}
<form>
Current year: <input name="currentYear"><br>
Birth year: <input name="birthYear"><br>
<input type="button" onclick="calcAge(this)" value="Caluclate age"><br>
Your age: <input name="age" readonly><br>
</form>
Note that every control in a form has a form property that references the form it's in. Also, form controls with a name are available as named properties of the form (hence a control named submit overwrites the submit method).

document.getElementById('eee') is a DOM element.
document.getElementById('eee').getFullYear is, judging from your code, undefined.
document.getElementById('eee').getFullYear.value should throw an error.
You were trying to read a property from an object which is (unfortunately) undefined, that's why your code doesn't work. Open console and see if there is a red line saying something like this:
Cannot read property 'value' of undefined