Develop Reference

Datepicker calls error

I use that datepicker (http://t1m0n.name/air-datepicker/docs/), and when I call him with my parameters from JS - he doesn't work. And when I use class datepicker-here - works, but I need to use with my config.
Look: https://jsfiddle.net/MyZik/3j2j7xe2/22/
Thanks in advance.

Change this:
<input type="text"
id="#datepicker1"
name="available_time"
class="form-control"
placeholder="Время активации">
to this:
<input type="text"
id="datepicker1"
name="available_time"
class="form-control"
placeholder="Время активации">
what changed is the id. You don't need any # for id attribute in HTML.

Jquery - I can't apply a mask in a field

I'm new using Jquery, and I'm trying to apply a mask in a field but i get the following error:
TypeError: $(...).mask is not a function
Here is my HTML
<div class="col-md-6">
<div class="form-group">
<label>CPF</label>
<input type="text" maxlength="17" id="cpf" name="cpf" class="form-control cpf" />
</div>
</div>
And here is my script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script>
<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#cpf").mask("999.999.999-99");
});
</script>
I already try to do $(document).ready(function($){} But i get no success.
Does anyone have an ideia ? I'm kind lost after alot of tries

The main problem is the "https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js" link. I'm getting a "refused to execute from ... because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled".
The first two lines do not include the protocol.
The solution (works in my test anyway, ping me if you have problems / questions):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js" type="text/javascript"></script
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js" type="text/javascript"></script>

Maybe this can help you. I think you need a jQuery mask plug in. I saw several but this post will steer you in the right direction JQuery apply input mask to field onfocus and remove onblur so to avoid problems with placeholder text

Are you trying to access the libraries locally?... because if you are you need to add the http protocol or https to the jquery library and the jquery form validator
You can't access the libraries locally with out them and thus, $()mask is not recognized as a function
like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script>

Probably you should use class selector $('.cpf').mask(); instead id selector. This should work:
$(document).ready(function(){
$(".cpf").mask("000.000.000-00");
});
Also, you can use this other way:
<input type="text" name="field-name" data-mask="000.000.000-00" />

$(document).ready(function() {
$("#cpf").mask("999.999.999-99");
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<div class="col-md-6">
<div class="form-group">
<label>CPF</label>
<input type="text" maxlength="17" id="cpf" name="cpf" class="form-control cpf" />
</div>
</div>
<script src="https://rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
use the link about instead of your link
use rawgit.com check here for more info

Use the following
<input type="text" pattern="[0-9]{3}\.[0-9]{3}\.[0-9]{3}\-[0-9]{2}" value="" name="cpf" id="cpf" maxlength="17" placeholder="CPF">
JSFiddle here

Automatically edit users input when they click off input

This seems to be a simple problem - However I just can't get my head around it!
So basically what the issue is, is that when a customer enters a "Payment amount" on my website I am trying to convert their input into something like this...
CUSTOMER INPUTS SOMETHING LIKE THIS:
£175.98
I want it to be converted to something like this: 175.98
Or if the customer enters 19803
I want to be able to append the decimal and comma places and remove any invalid characters like so:
19,803.00
I have searched and searched the internet for about 2 days and can't find anything like this!
Sorry I haven't provided any code but I figured if i can't find anything like this I'm sure that others will have the same issue.
Form I am using:
<form action="https://myaccount.mysite.com/s/customer/payment/new-payment/action.do" method="post">
<input type="text" name="pamt" id="payment_amount" />
<input type="submit" value="Continue to PayPal" />
</form>

You should try out numeral.js. I have used it for similar formatting tasks in the past.
http://numeraljs.com/
For example:
var string = numeral(1000).format('0,0.00');
So, then you could use the onblur event to change the value to what you would like it to be:
<form action="https://myaccount.mysite.com/s/customer/payment/new-payment/action.do" method="post">
<input type="text" name="pamt" id="payment_amount" onblur="try{this.value = numeral(this.value).format('0,0.00') }catch(e){};" />
<input type="submit" value="Continue to PayPal" />
</form>
UPDATE
It appears there is a bug in the following version of numeral.js
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
However, I had full success using the version titled numeral.js that can be downloaded here:
https://github.com/adamwdraper/Numeral-js/zipball/master

validating required fields with asp.net required field validators using jquery

HTML:
<fieldset>
<p>
<label>SOME LABEL</label><span class="required"> *</span>
</p>
<input type="text" id="txtBox">
</fieldset>
Using jQuery i am trying to get "span.required" and add a class "missing" (changes color to red).
JQuery Code:
$('#txtBox').closest('fieldset').find('span.required').addClass('missing');
JQUERY CODE FOR required field validator in ASP.NET:
for (var i = 0; i < Page_Validators.length; i++) {
var val = Page_Validators[i];
var ctrl = document.getElementById(val.controltovalidate);
if (ctrl != null && ctrl.style != null) {
if (!val.isvalid) {
ctrl.closest('fieldset').find('span.required').addClass('missing');
}
else {
//alert('no error');
}
}
}
ERROR via Console: object [ctrl object - the textbox] has no method closest
i have tried different interations using "find" "parent" etc. but nothing i try seems to work.
What is wrong with my code? I cannot grab that span.required
Thank you to everyone's input, I have learned a lot from each of your input. EVERYONE's answer has valid and working code, however only the selected provided the solution.

First off, there are a couple of changes in your HTML that you should make which will not only help you solve this issue, but will also make for cleaner, more valid code:
Add a for attribute to all of your <label> tags that pairs them with the input that they match (this really should always be done with labels), and
Move the <span class="required"> *</span> inside the label (since it really is part of the label)
The resulting code would look like this:
<fieldset>
<p>
<label for="txtBox">SOME LABEL<span class="required"> *</span></label>
</p>
<input type="text" id="txtBox">
</fieldset>
Once you've done that, what you are trying to accomplish becomes much easier:
Instead of:
ctrl.closest('fieldset').find('span.required').addClass('missing');
. . . you can use the id of the input (val.controltovalidate) as part of a JQuery selector to find the related label directly:
var $targetLabel = $("label[for='" + val.controltovalidate +"']")
$targetLabel.find('span.required').addClass('missing');
I've used this many times to pair validations with the labels of the field that is being validated . . . quick and clean. :)
Edit: I split up the last JS piece to keep it from scrolling, but it could be one line. :)

Try txtbox.parent() instead.
txtbox.parent().find('span.required-field').addClass('missing')

$('span.required').addClass('missing');

Try this:
$(function(){
$('#txtBox').parent().find('span.required').addClass('missing');
});
Check http://jsfiddle.net/alaminopu/unZPZ/

Check this one out, I used both, closest() and parent().
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.missing{color:red;}
.required{color:blue;}
</style>
<script>
$(document).ready(function(){
$(function(){
$('#txtBox').parent().find("span.required").removeClass("required").addClass("missing");
//$('#txtBox').closest("fieldset").find("span.required").removeClass("required").addClass("missing");
});
});
</script>
</head>
<body>
<fieldset>
<p>
<label>Some Label</label> <span class="required"> *</span>
</p>
<input type="text" id="txtBox">
</fieldset>
</body>
</html>
http://jsfiddle.net/GdBnw/
HTH.

How do I copy input from one textbox to another via checkbox using jQuery?

I'm cleaning up a simple form that has a Start Date textbox and an End Date textbox. I want to add a checkbox in between these fields that the user can check if the End Date is the same as the Start Date, so when they check it, the Start Date input value (e.g., 04/01/09) will automagically appear in the End Date textbox, so they don't have to type in the same date twice. Does that make sense?
BTW, I'm using the sexy jquery datepicker UI, and it's sweet, but I just can't figure out the above problem.
I know there's a simple solution (event handler?) but I'm stumped.

Try this code:
$("#checkboxId").click(copyDate);
function copyDate()
{
var start=$("#startDate").val();
if (this.checked==true)
$("#endDate").val(start);
}
Replace the 'id's with your own field ids.

Simple hack to solve your problem.
<html>
<head>
<script src="js/jquery.js" ></script>
</head>
<body>
<form>
<input type="text" name="startdate" id="startdate" value=""/>
<input type="text" name="enddate" id="enddate" value=""/>
<input type="checkbox" name="checker" id="checker" />
</form>
<script>
$(document).ready(function(){
$("input#checker").bind("click",function(o){
if($("input#checker:checked").length){
$("#enddate").val($("#startdate").val());
}else{
$("#enddate").val("");
}
});
}
);
</script>
</body>
</html>