trigger change event after picking from dropdown - javascript

I have a JQuery timepicker defined as
<div class="form-group">
<label class="col-xs-4 col-md-3 control-label" align="right">
<div class="pull-right">{{ jc_settings_form.meeting_time.label() }}</div>
</label>
<div class='col-xs-8 col-md-9 dateContainer' style="max-width:200px">
<div class='input-group input-append date'>
<input type="select" class="form-control timepicker" name="meeting_time" id="meeting_time"/>
</div>
</div>
</div>
This is one option within a form and I would like to run automatic validation of the form whenever the user changes a field so I have some javascript like
$('.manage_jc_settings_form')
.formValidation({
framework: 'bootstrap',
excluded: ':disabled',
ignore: [],
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
meeting_time: {
validators: {
notEmpty: {
message: 'Please provide a meeting time'
}
}
},...
for any reason if I pick a time from the timepicker dropdown it does not trigger the change even and therefore does not validate the form? If I click into the text field and change the time manually it does trigger the change even?
Here is my timepicker initialisation
(function($) {
$(function () {
$('#meeting_time').timepicker({
defaultTime: '{{ jc_settings_form.meeting_time.default }}',
dropdown: true,
scrollbar: true,
startTime: '9:00 am',
timeFormat: 'h:mm a', // equivalent to 'h:mm a'
interval: 5 //Number of minutes the up/down arrow's will move the minutes value in the time picker
});
});
})(jQuery);
any idea how to force it to trigger the change event? I thought maybe I have to change the type="text" attribute of the input field?

You can run a function on the change event for jQuery Timepicker like this:
(function($) {
$(function () {
$('#meeting_time').timepicker({
defaultTime: '{{ jc_settings_form.meeting_time.default }}',
dropdown: true,
scrollbar: true,
startTime: '9:00 am',
timeFormat: 'h:mm a', // equivalent to 'h:mm a'
interval: 5,
change: function(time) {
alert('things changed');
}
});
});
})(jQuery);
It's listed on the docs here.

It is not entirely clear from your post what you are trying to do. If you are looking to validate the form every time a different is option is selected from the dropdown, you might want to try using onchange as follows:
<input type="select" class="form-control timepicker" name="meeting_time" id="meeting_time" onchange="yourValidationFunction()" />
I'd also consider moving away from jQuery whenever possible, as you will probably eventually find its syntactic sugar causes more problems than it solves (not to mention it considerably lengthens page load times).

Related

unable to get datetime of the clicked event - fullcalendar

I have a problem of the eventClick function which I set the input type is date, it's working well and can show output in specified textbox. However I set the input type is datetime-local , it can't show datetime in specified texbox.
This is my javascript:
eventClick: function(arg) {
$('#modal_show_from > #mesyuarat_from_date').val(arg.event.extendedProps.mesyuarat_from_date);
$('#calendarModal').modal();
},
editable: true,
dayMaxEvents: true,
events: <?php echo json_encode($myArray); ?>
});
This is show html code (for show datetime):
<div class="col-lg-10 padding_important" id="modal_show_from">
<input type="datetime-local" class="form-control" id="mesyuarat_from_date" name="mesyuarat_from_date" value="" title="Tarikh Masa Mesyuarat - From">
</div>

Datepicker on "focus" event in Laravel

I have a datatable where I have the option to edit the date of every record in that table, so I need to use "document on focus" event to get all my datepickers to work. The problem here is that my datepicker only works when I click on the input, if I click in the "icon" it doesn´t work.
This is my datepicker in the form:
<div class="form-group">
<label for="fecha" class="col-form-label">Fecha</label>
<div class="input-group date" id="datepickerEditT" data-target-input="nearest">
<input type="text" id="datepickerEditT" name="fechaTratamiento" value="{{date('d/m/Y',strtotime($fecha))}}" class="form-control datepicker-input" data-target="#datepickerEditT" required/>
<div class="input-group-append" data-target="#datepickerEditT" data-toggle="datepickerEditT">
<div class="input-group-text"><i class="fas fa-calendar-alt"></i></div>
</div>
</div>
</div>
and this is the javascript:
$(document).on("focus", "#datepickerEditT", function () {
$(this).datepicker({
format: "dd/mm/yyyy",
language: "es",
autoclose: true,
todayHighlight: true,
});
});
if I dont use on focus event my datepicker works fine, doesn´t matter if I click on the input or the icon, but I need to use this event because if I dont, my datepicker will only works on the first record in the table.
I used class div instead of the id like someone said and now everything its working without using the focus event.
$(".datepickerEditT").datepicker({
format: "dd/mm/yyyy",
language: "es",
autoclose: true,
todayHighlight: true,
});

Bootstrap validator for select box using ajax in codeigniter

I am trying to validate select box using ajax in codeigniter.
I also tried revalidated with bootstrap validator but due to adding revalidated the whole validation is not working.
Thats why I remove revalidated function.
Now I use disabled. It now shows red line error its good. When I select subcategory then it should change in green color but it still show red color error.
Here is screen shot of problem
and second picture:
In this picture a real problem is shown
Here is my code of view file:
<form class="form-horizontal" id="form_professional" role="form" method="Post" action="">
<div class="col-md-6">
<div class="form-group">
<label for="select" class="control-label col-sm-4">Select Subcategory</label>
<div class="col-sm-8">
<select class="subcategory1" id="select" name="framework[]" multiple class="form-control">
</select>
</div>
</div>
</div>
</form>
I am getting data through ajax according to related category.Every thing working fine.But the problem is that when i click on submit button it show red color error on subcategory field because i used excluded = 'disable'.
After the selecting multiple subcategory it still show red line error.It does not change in green line.
$(document).ready(function(){
$('.subcategory1').multiselect({
nonSelectedText: 'Select Subcategory',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
buttonWidth:'300px'
});
});
$('#form_professional').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
excluded: ':disabled',
fields: {
professional_building:{
validators: {
regexp: {
regexp: /^[a-zA-Z0-9_\.\s]+$/,
message: 'The building name can only consist of alphabetical, number, dot and underscore'
}
}
},
'framework[]': {
validators: {
notEmpty: {
message: 'Please specify at least one browser you use daily for development'
}
}
}
});

How to submit form with Bootstrap Validator

I am using http://bootstrapvalidator.com/ with visual studio in bootstrap asp.net project.
Problem I am having that I can never get validate button to actually validate like it does in examples, it validates fine when I start typing into textbox, but never validates when I click on button following examples.
Another issue is I don't know how to call my c# method which will get value from textbox after validation was successful, I can call my method on button click, but I want it to happen just after validation was successful .
What I am looking for is simple example how to make submit button validate fields and then call my c# method which will read values from inputs.
I been unable find even single example online , and I dont know much about javascript.
Here is some testing code I have
<div class="form-group" id="nameEmail2">
<div class="form-group">
<label for="inputContactName" class="col-sm-5 control-label">Contact Name </label>
<div class="col-sm-7">
<input type="text" class="form-control" name="fullName1" id="TextBox1" placeholder="Contact Name" maxlength="50"/>
</div>
</div>
<div class="form-group">
<label for="inputContactEmail" class="col-sm-5 control-label">Contact Email <b>*</b></label>
<div class="col-sm-7">
<input type="text" class="form-control" name="email1" id="TextBox2" placeholder="Contact Email" maxlength="50"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-3">
<button type="submit" runat="server" onserverclick="submitValidate" class="btn btn-default">Validate</button>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#nameEmail2').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fullName1: {
validators: {
notEmpty: {
// enabled is true, by default
message: 'The full name is required and cannot be empty'
},
stringLength: {
enabled: true,
min: 8,
max: 40,
message: 'The full name must be more than 8 and less than 40 characters long'
},
regexp: {
enabled: false,
regexp: /^[a-zA-Z\s]+$/,
message: 'The full name can only consist of alphabetical, number, and space'
}
}
},
email1: {
validators: {
emailAddress: {
message: 'The value is not a valid email address'
}
}
}
}
});
});
</script>
I have removed most of asp objects and almost nothing runs at server any more, but that didnt help much here is my codebehind method
protected void submitValidate(object sender, EventArgs e)
{
string contactName = Request.Form["fullName1"];
string email = Request.Form["email1"];
System.Diagnostics.Debug.Write("test",email);
}
Found an answer to my own question
http://thuyvk.com/article/validate-form-su-dung-bootstrapvalidator-cho-website-aspnet-224
Be careful with google translate, will translate code into some random html code

jQuery timepicker not loading for dynamic text fields

I have a form, which first loads text fields and has a Time Picker associated with it.
The user can also click a 'More' button, which dynamically loads extra text fields underneath. This also has a time picker associated with it, however it will not load on the dynamic fields.
I am using a jQuery timepicker addon by Trent Richardson http://trentrichardson.com/examples/timepicker
I also found a previous answer (https://stackoverflow.com/questions/18666634/jquery-timepicker-doesnt-work-on-dynamic-input), however this does not fix my problem.
This is the form; the first div is loaded dynamically:
<div class="row">
Add More+
<div class="sample" style="display: none;">
<label> </label>
<input type="text" class="outlet-hour from timepicker2" name="from[{$day}][]" />
<span>to</span>
<input type="text" class="outlet-hour to timepicker2" name="to[{$day}][]" />
</div>
<div>
<label for="from_{$outlet}_{$day}">{$name}</label>
<input id="from_{$outlet}_{$day}" class="outlet-hour from timepicker" type="text" name="from[{$day}][]" />
<span>to</span>
<input id="to_{$outlet}_{$day}" type="text" class="outlet-hour to timepicker" name="to[{$day}][]" />
</div>
This is the JS for the main fields (which is working fine):
$('.timepicker').timepicker({
showSecond: false,
timeFormat: "H:mm",
stepMinute: 15
});
This is the JS that adds the extra fields:
$(document).on('click', 'a.add-hours-link', function(event, hour){
var from = !!hour ? hour.from : '';
var to = !!hour ? hour.to : '';
$('.timepicker2').removeClass('hasDatepicker');
$('.timepicker2').each(function(){
$(this).timepicker({
showSecond: false,
timeFormat: "H:mm",
stepMinute: 15
});
});
$(this).parent().find('.sample')
.clone()
.removeClass('sample')
.appendTo($(this).parent())
.find('.from').val(from).end()
.find('.to').val(to).end()
.fadeIn('fast');
return false;
});
Currently I have renamed the class to timePicker2 and am removing the hasDatepicker class, as mentioned in a previous answer.
Any ideas appreciated.
Thanks
You need to apply the timepicker function after you have added to the DOM:
$(document).on('click', 'a.add-hours-link', function(event, hour){
var from = !!hour ? hour.from : '';
var to = !!hour ? hour.to : '';
$(this).parent().find('.sample')
.clone()
.removeClass('sample')
.appendTo($(this).parent())
.find('.from').val(from).end()
.find('.to').val(to).end()
.fadeIn('fast');
$('.timepicker2').removeClass('hasDatepicker');
$('.timepicker2').each(function(){
$(this).timepicker({
showSecond: false,
timeFormat: "H:mm",
stepMinute: 15
});
});
return false;
});

Categories

Resources