I have an date input area using Bootstrap-dateinput
<div class="form-group row">
<div class="col-xs-8">
<label class="control-label">Date</label>
<div class="input-group date" id="dp3" data-date="12-02-2014" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" required="" placeholder="Date" name="date[]" value="">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</div>
Jquery Script To clone this form:
<script type="text/javascript">
$( document ).on( 'click', '.btn-add', function ( event ) {
event.preventDefault();
var field = $(this).closest( '.form-group' );
var field_new = field.clone();
$(this)
.toggleClass( 'btn-default' )
.toggleClass( 'btn-add' )
.toggleClass( 'btn-danger' )
.toggleClass( 'btn-remove' )
.html( '-' );
field_new.find( 'input' ).val( '' );
field_new.insertAfter( field );
} );
</script>
And Script to display calender:
<script type="text/javascript">
$('.input-group .date').datepicker({
...
});
</script>
But when New input area is created it do not show calender when clicked
I tried adding onclick
$(".input-group .date").click(function(){
$('.input-group .date').datepicker({
...
});
But yet seems there is some problem Can you please tell whats wrong and how to fix it ?
Try This:
<input class="form-control" type="text" required="" placeholder="Date" name="date[]" value="" onclick="$(this).datepicker({
...
});">
Related
There is an input which is Date Picker.
It is impossible to type in the input, everybody can only pick a date by mouse.
enter image description here
How can I call an event when the user changes Date ?
Here is HTML Code:
<div class="col-lg-3 col-md-3 col-xs-12">
<label for="homeWorkStartDate">From: </label>
<input type="text" id="homeWorkStartDate" class="pdate form-control" />
<input type="hidden" id="txtHomeWorkStartDate" />
<script>
var objCal1 = new AMIB.persianCalendar('homeWorkStartDate', {
extraInputID: 'txtHomeWorkStartDate',
extraInputFormat: 'YYYY-MM-DD'
});
</script>
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
<label for="homeWorkEndDate">To: </label>
<input type="text" id="homeWorkEndDate" class="pdate form-control" />
<input type="hidden" id="txtHomeWorkEndDate" />
<script>
var objCal1 = new AMIB.persianCalendar('homeWorkEndDate', {
extraInputID: 'txtHomeWorkEndDate',
extraInputFormat: 'YYYY-MM-DD'
});
</script>
</div>
Here is what I tried but doesn't work:
$("#homeWorkStartDate,#homeWorkEndDate").on('input propertychange',function(){
alert("hi");
});
Did you try something like this ?
$( "#datepicker" ).datepicker({
onSelect: function () {
alert('hello');
}
})
I want to display the loading.gif image when doing a domain search with a click button. So when php processes a domain name search request, the loading image appears and disappears when the search results appear.
Below code from my php page:
<form class="form-full-width" method="post">
<div class="group align-center form-row">
<input autofocus class="group-stretch" type="text" name="domain" placeholder="" value="" pattern="^[a-zA-Z0-9\.-]*$" title="">
<input type="hidden" name="token" value="70ed0e77d1b8f7124c494a970929ccb2">
<button class="button-secondary"> Search </button>
</div>
</form>
This is result after click search button, will appear approximately 5-30 seconds after clicking the Search button
$response = '<section class="content-row">
<div class="container">
<center>
<header class="content-header">
<h3><i class="fa fa-check text-color-success icon-left"></i> Selamat! Domain <b class="text-color-primary">'.$domain.'</b> Tersedia</h3>
<h4>Hanya dengan <b>Rp. 200.000</b> / tahun</h4>
<p>
<a href="member.domain.com/cart.php?a=add&domain=register&sld='.$domain.'" class="button button-primary">
<i class="fa fa-shopping-cart icon-left"></i>DAFTARKAN
</a>
</p>
<p>
atau<br>Lihat saran domain lainnya <i class="fa fa-angle-double-right"></i>
</p>
</header>
</center>
</div>
</section>
Javascript
<script type="text/javascript">
$( document ).ready(function() {
$('.button-secondary').click(function(){
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
});
event.preventDefault();
})
});
</script>
add <img id='loading' src='loading.gif' style='display:none' > to hide the image, then when a search prompts add this on your script $("#loading").css("display","block"); afterwards when php request is finish $("#loading").css("display","none");, hope that works
HTML
<form class="form-full-width" method="post">
<img id='loading' src='loading.gif' style='display:none' >
<div class="group align-center form-row">
<input autofocus class="group-stretch" type="text" name="domain"
placeholder="" value="" pattern="^[a-zA-Z0-9\.-]*$" title="">
<input type="hidden" name="token"
value="70ed0e77d1b8f7124c494a970929ccb2">
<button class="button-secondary"> Search </button>
</div>
</form>
JQuery
<script type="text/javascript">
$( document ).ready(function() {
$('.button-secondary').click(function(){
$("#loading").css("display","block");
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
$("#loading").css("display","none");
});
event.preventDefault();
})
});
</script>
JQuery EDIT
<script type="text/javascript">
$( document ).ready(function() {
$(document).on('click','.button-secondary',function(){
$("#loading").css("display","block");
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
$("#loading").css("display","none");
});
event.preventDefault();
})
});
</script>
I am having trouble validating if input fields contains only whitespaces. I have specified the required rule for the required fields but it still works if I just type spaces. also, noSpace rule for username field does not seem to work. It disables validation for the other fields. Here is my markup.
<form method=post class="form-auth-small" action="../php/controller/registration_controller.php">
<div class="form-group row m-t-10px">
<div class="col-sm-6 text-left m-b-5px">
<label><h5>RANK: </h5></label>
<select class="form-control" name="rank" required="required">
<option value="rank1">NUP</option>
<option value="rank2">PO1</option>
<option value="rank3">PO2</option>
<option value="rank4">PO3</option>
<option value="rank5">SPO1</option>
<option value="rank6">SPO2</option>
<option value="rank7">SPO3</option>
<option value="rank8">SPO4</option>
<option value="rank9">PINSP</option>
<option value="rank10">PSINSP</option>
<option value="rank11">PCINSP</option>
<option value="rank12">PSUPT</option>
<option value="rank13">PSSUPT</option>
<option value="rank14">PCSUPT</option>
<option value="rank15">PDIR</option>
<option value="rank16">PDDG</option>
<option value="rank17">PDG</option>
</select>
</div>
<div class="col-sm-6 text-left m-b-5px">
<label><h5>USERNAME: </h5></label>
<input class="form-control" name="username" placeholder="Username must only contain characters [A-Z] and numbers [0-9]" type="text" minlength="1" required="required">
</div>
<div class="clearfix"></div>
<div class="col-sm-6 text-left m-b-5px">
<label><h5>FIRST NAME: </h5></label>
<input class="form-control" name="fname" type="text" minlength="1" required="required">
</div>
<div class="col-sm-6 text-left m-b-5px">
<label><h5>PASSWORD: </h5></label>
<input class="form-control" name="pwd" placeholder="Choose a strong password" type="password" minlength="1" required="required">
</div>
<div class="clearfix"></div>
<div class="col-sm-6 text-left m-b-5px">
<label><h5>MIDDLE NAME: </h5></label>
<input class="form-control" name="mname" type="text" minlength="1" required="required">
</div>
<div class="col-sm-6 text-left m-b-5px">
<label><h5>EMAIL: </h5></label>
<input class="form-control" name="email" type="email" minlength="1" required="required">
</div>
<div class="clearfix"></div>
<div class="col-sm-6 text-left m-b-5px">
<label><h5>LAST NAME: </h5></label>
<input class="form-control" name="lname" type="text" minlength="1" required="required">
</div>
</div>
<div class="form-group clearfix m-b-5px">
<button type="submit" name="btnRegister" class="btn btn-primary btn-lg btn-block">REGISTER</button>
</div>
<div class="bottom m-b-15px">
<span><i class="fa fa-lock"></i> Already have an account? Sign in.</span>
</div>
</form>
JS (Without noSpace rule)
$(document).ready(function () {
$('.form-auth-small').validate({
rules: {
rank: {
required: true
},
username: {
required: true,
minlength: 3
},
fname: {
required: true
},
mname: {
required: true
},
lname: {
required: true
},
pwd: {
required: true
},
email: {
required: true
}
},
errorElement: "em",
errorPlacement: function ( error, element ) {
// Add the `help-block` class to the error element
error.addClass( "help-block" );
// Add `has-feedback` class to the parent div.form-group
// in order to add icons to inputs
element.parents( ".col-sm-5" ).addClass( "has-feedback" );
error.insertAfter( element );
// Add the span element, if doesn't exists, and apply the icon classes to it.
if ( !element.next( "span" )[ 0 ] ) {
$( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
}
},
success: function ( label, element ) {
// Add the span element, if doesn't exists, and apply the icon classes to it.
if ( !$( element ).next( "span" )[ 0 ] ) {
$( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
}
},
highlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".col-sm-6" ).addClass( "has-error" ).removeClass( "has-success" );
$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
},
unhighlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".col-sm-6" ).addClass( "has-success" ).removeClass( "has-error" );
$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
}
});
});
DEMO
Thank you in advance!
Just add this method before your jQuery validate function run::
jQuery.validator.addMethod("noSpace", function(value, element) {
return value.indexOf(" ") < 0 && value != "";
}, "No space please and don't leave it empty");
AND use
noSpace: true
for each field you want.
Try this
$(document).ready(function() {
jQuery.validator.addMethod("noSpace", function(value, element) {
return value.indexOf(" ") < 0 && value != "";
}, "No space");
$(".form-auth-small").validate({
rules: {
username : {
noSpace: true
}
}
});
})
$(".form-auth-small").validate({
rules: {
username : {
required: true,
normalizer: function(value) {
return $.trim(value);
}
}
}
});
use normalizer , in which it will trim or remove all whitespaces.
simple solution.enjoy your day
my form
<form action="javascript:alert( 'success!' );">
<div>
<input type="text" name="username">
<input type="password" name="password">
<input type="submit">
</div>
</form>
my ajax code
<script>
$( "form" ).submit(function( event ) {
if ( $( "input:first" ).val() === "correct" && $( "input:second" ).val() === "test" ) {
$( "span" ).text( "Validated..." ).show();
return;
}
$( "span" ).text( "Not valid!" ).show().fadeOut( 10000 );
event.preventDefault();
/// set here your ajax code
});
how can i select password field.
2.this method is easly hackable?
$('input[type="password"]')
OR
$('input[name="password"]')
Working Demo
$(document).ready(function() {
alert($('input[type="password"]').val())
alert($('input[name="password"]').val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" name="username">
<input type="password" name="password" value="test">
<input type="submit">
</div>
There is no such selector :second but you can use it with .next():
if ( $( "input:first" ).val() === "correct" &&
$( "input:first" ).next().val() === "test" ) {
other options are:
With .next()
Using :eq() or .eq().
with .index() etc.
I'm trying to latch onto a checkbox change event using jQuery, currently I have this:
<script type="text/javascript">
$(document).ready(function () {
$('.timepicker').datetimepicker({ datepicker: false, format: 'H:i' });
$('.mondaystartfinish').hide();
//subscribe to change events
$('#IsMonday').change(function () {
RunsOnMondays();
});
});
function RunsOnMondays() {
if ($('#IsMonday').prop('checked') == 'true') {
$('.mondaystartfinish').slideDown();
} else {
$('.mondaystartfinish').slideUp();
}
}
</script>
However in debug when I check/uncheck the box the RunsOnMondays() method is not firing.
I have tried using this also but still didn't work:
$('IsMonday').prop('checked').change(function () { RunsOnMondays();});
Browser output
<div class="form-group">
<label class="control-label col-md-2" for="IsMonday">Monday</label>
<div class="col-md-10">
<input class="check-box" data-val="true" data-val-required="The IsMonday field is required." id="IsMonday" name="IsMonday" type="checkbox" value="true" /><input name="IsMonday" type="hidden" value="false" />
<span class="field-validation-valid" data-valmsg-for="IsMonday" data-valmsg-replace="true"></span>
</div>
</div>
<div class="startfinish">
<div class="form-group">
<div class="mondaystartfinish">
<label class="control-label col-md-2" for="MondayFrom">Monday Start</label>
<div class="col-md-10">
<input class="timepicker" data-val="true" data-val-date="The field MondayFrom must be a date." id="MondayFrom" name="MondayFrom" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="MondayFrom" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
<div class="startfinish">
<div class="form-group">
<div class="mondaystartfinish">
<label class="control-label col-md-2" for="MondayTo">Monday Finish</label>
<div class="col-md-10">
<input class="timepicker" data-val="true" data-val-date="The field MondayTo must be a date." id="MondayTo" name="MondayTo" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="MondayTo" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
The reason it does not work is that this is not true true == 'true' is actually false: http://jsfiddle.net/TrueBlueAussie/2wwz1ore/6/
prop('checked') returns a boolean value! No need for == 'true'.
http://jsfiddle.net/TrueBlueAussie/2wwz1ore/1/
$(document).ready(function () {
//$('.timepicker').datetimepicker({ datepicker: false, format: 'H:i' });
$('.mondaystartfinish').hide();
// subscribe to change events
$('#IsMonday').change(function () {
RunsOnMondays();
});
});
function RunsOnMondays() {
if ($('#IsMonday').prop('checked')) {
$('.mondaystartfinish').slideDown();
} else {
$('.mondaystartfinish').slideUp();
}
}
Better yet, use slideToggle(): http://jsfiddle.net/TrueBlueAussie/2wwz1ore/3/
// subscribe to change events
$('#IsMonday').change(function () {
$('.mondaystartfinish').slideToggle($(this).prop('checked'));
});
If (and I very much doubt it) your element is added dynamically, use a delegated event handler attached to a non-change ancestor element (document is the default if nothing else is closer/convenient)
e.g.
$(document).on('click' , '#IsMonday', function () {
$('.mondaystartfinish').slideToggle($(this).prop('checked'));
});
You could use the below as follows:
$('#IsMonday').change(function(){
RunsOnMondays(this.checked);
});
function RunsOnMondays(isChecked) {
if (isChecked) {
$('.mondaystartfinish').slideDown();
} else {
$('.mondaystartfinish').slideUp();
}
}
jsFiddle