I am experiencing difficulties with getting a text value from bootstrap-timepicker24 form.
jsp code:
<form action="#" class="form-horizontal form-bordered" id="shop-time">
<div class="form-body form" >
<div class="form-group">
<label class="control-label col-md-4">Monday</label>
<div class="col-md-4">
<div class="input-group shop-monday-open-time">
<input type="text" class="form-control timepicker timepicker-24">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-clock-o"></i>
</button>
</span>
</div>
</div>
</div>
js code:
// forms
var shopForm = $('#shop-time');
var shopMondayOpen = shopSave.find('.shop-monday-open-time');
// time picker listener
shopMondayOpen.on('changeTime.timepicker', function(open) {
var time = dateInUTC(open.time);
});
But the event changeTime does not affect the listener. But if I just reload the page and stop at the breakpoint on this line: var shopMondayOpen = shopSave.find('.shop-monday-open-time') line and evaluate shopMondayOpen.val at the console I get something like:
shopMondayOpen.val
jquery.min.js:4 function (a){var b,c,d,e=this[0];{if(arguments.length)return d=m.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,m(this).val()):a,null==e?e="":"number"==typeof e?e+="":m.isArray(e)&&(e=m.map(e,function(a){return null==a?"":a+""})),b=m.valHooks[this.type]||m.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=m.valHooks[e.type]||m.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(lc,""):null==c?"":c)}}
I tried to use timepicker-24 manual but it didn't get me far..
Guess that I am missing something but I just can't figure it out.
After several days I have made a conclusion that only way you can get a value from a timepicker-24 is a value from conroler, as I have already said at tht comment to my post:
<input type="text" class="form-control timepicker timepicker-24 shop-monday-open">
var time = $('shop-monday-open').val
Related
I created the following HTML form inside a jqxWindow widget for a Laravel project:
<div id="provinceWindow">
<div id="provinceWindowHeader"></div>
<div id="provinceWindowContent">
<form id="provinceForm" method="POST" action="{{route('province.store')}}">
{{ csrf_field() }}
<input type="hidden" name="provinceId" id="provinceId" value=""/>
<div class="form-group row">
<div class="col-6"><label>English province name</label></div>
<div class="col-6"><input type="text" name="provinceNameEn" id="provinceNameEn" maxlength="20"/></div>
</div>
<div class="form-group row">
<div class="col-6"><label>Spanish province name</label></div>
<div class="col-6"><input type="text" name="provinceNameSp" id="provinceNameSp" maxlength="20"/></div>
</div>
<br/>
<div class="form-group row justify-content-center">
<input type="button" value="Submit" id="submitBtn" class="btn btn-sm col-3" />
<span class="spacer"></span>
<input type="button" value="Cancel" id="cancelBtn" class="btn btn-sm col-3" />
</div>
</form>
</div>
</div>
This is the javascript file:
$(document).ready(function () {
var datarow = null;
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
});
//-----------------------------
// Window settings
//-----------------------------
$('#provinceWindow').jqxWindow({
autoOpen: false,
isModal: true,
width: 400,
height: 160,
resizable: false,
title: 'Province name',
cancelButton: $('#cancelBtn'),
initContent: function () {
$('#submitBtn').jqxButton();
$('#submitBtn').on('click', function () {
$('#provinceForm').submit();
});
}
}).css('top', '35%');
The file routes\web.php has only one resourse route defined for this page:
// Routes for province maintenance
Route::resource('province', 'provinceController');
Checking the available routes with php artisan route:list command, I get these:
Method URI Name Action
GET|HEAD / APP\Http\Controllers\homeController#index
GET|HEAD province province.index APP\Http\Controllers\provinceController#index
POST province province.store APP\Http\Controllers\provinceController#store
GET|HEAD province/create province.create APP\Http\Controllers\provinceController#create
GET|HEAD province/{province} province.show APP\Http\Controllers\provinceController#show
PUT|PATCH province/{province} province.update APP\Http\Controllers\provinceController#update
DELETE province/{province} province.destroy APP\Http\Controllers\provinceController#destroy
GET|HEAD province/{province}/edit province.edit APP\Http\Controllers\provinceController#edit
My controller action:
public function store(Request $request)
{
$fields = $request->all();
if ($request->provinceId == '') {
$province = new province($fields);
$validator = Validator::make($fields, $province->rules());
if ($validator->fails()) {
return redirect('')->withErrors($validator)->withInput();
}
else {
$province->save();
}
return view('province/index');
}
}
The form is shown on top of a jqxGrid widget, as a modal window, in order to capture the required information and perform the CRUD operations for the corresponding DB table.
The problem is, when I click the "Submit" button the window is closed and nothing else happens. The form is not posted to the indicated action and the data entered get lost.
It does not matter if I initialize the submitBtn inside the initContent or outside of it. The form is never posted.
I also tried the Close event of the jqxWindow to no avail.
If I take a look to the generated HTML it looks like this:
<form id="provinceForm" method="POST" action="http://mis:8080/province">
<input type="hidden" name="_token" value="Y9dF5PS7nUwFxHug8Ag6PHgcfR4xgxdC43KCGm07">
<input type="hidden" name="provinceId" id="provinceId" value="">
<div class="form-group row">
<div class="col-6">
<label>English province name</label>
</div>
<div class="col-6">
<input type="text" name="provinceNameEn" id="provinceNameEn" maxlength="20">
</div>
</div>
<div class="form-group row">
<div class="col-6">
<label>Spanish province name</label>
</div>
<div class="col-6">
<input type="text" name="provinceNameSp" id="provinceNameSp" maxlength="20">
</div>
</div>
<br>
<div class="form-group row justify-content-center">
<input type="button" value="Submit" id="submitBtn" class="btn btn-sm col-3 jqx-rc-all jqx-button jqx-widget jqx-fill-state-normal" role="button" aria-disabled="false">
<span class="spacer"></span>
<input type="button" value="Cancel" id="cancelBtn" class="btn btn-sm col-3">
</div>
</form>
Pressing the submit button takes me to the home page and nothing gets added to the DB table.
I guess the issue has something to do with Laravel routes because I get no errors.
What is missing or what is wrong with this approach?
Any light is appreciated.
Alright, because I erroneously added in my Model a validation, that was not needed, for a column (there was already a constraint defined at the DB table level), it was not possible to fulfill the validator when saving a new record. I commented that line in my Model and, that was it!
protected $rules = array(
'provinceNameEn' => 'required|alpha|max:20',
'provinceNameSp' => 'required|alpha|max:20'
//'deleted' => 'required|in:M,F' // This is already validated in a DB constraint.
);
I noticed the control was returned to my home page but without any message or error, but if you pay attention to my controller it was precisely the behavior programmed. However, there is no implementation to display the error messages, so I added dd($validator); before that return statement. There I read the message and finally found the solution.
I have some problems passing the text value of a textbox to a href. I want to do something like this:
<div class="form-group mx-sm-3 mb-2">
<label for="inputWord" class="sr-only">word</label>
<input type="text" class="form-control" id="inputWord" placeholder="Word">
</div>
And then I want to do a google search:
<a type="button" class="btn btn-primary mb-2" href="https://www.google.com.uy/search?q=" + 'inputWord' target="_blank">Search</a>
I know that it's wrong but I've no idea about how to make it work. I put everything inside a form.
Replace a tag element with button
<button onclick="doSearch()">Search</button>
<script>
function doSearch() {
let word = document.querySelector('#inputWord').value;
window.location = "https://www.google.com.uy/search?q=" + word;
}
</script>
What you need to do is collect the form value and send it as a variable to the link with js.
This script sends data when the input field has Changed
<div class="form-group mx-sm-3 mb-2">
<label for="inputWord" class="sr-only">word</label>
<input type="text" class="form-control" id="inputWord" placeholder="Word" onChange="setHref(this.value)"> </div>
<script>
function setHref(val){
document.getElementsByClassName("btn").setAttribute("href", val)
}
</script>
my below datepicker code is like below. Its working fine. But the datepicker popup opens when i click on the input field. But want that to be open once i click on the calendar icon. Please suggest me a way to achieve that.
<div class="col-sm-6 col-md-6 col-lg-6 padleft">
<div class="form-group">
<label for="exampleSelect1">Start Date
</label>
<div class="input-group" style="width:75%">
<div class="input-group-btn">
<input type="text"
class="form-control date"
id="dateFrom"
placeholder="From"
ng-click="model.dateFrom=true"
datepicker-popup="{{model.format}}"
ng-model="model.defect.startDate"
is-open="model.dateFrom"
datepicker-options="dateOptions"
date-disabled="model.disabled(date, mode)"
ng-required="true"
close-text="Close" my-date>
<span class="btn btn-default " ng-click="model.dateFrom=true"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
</div>
</div>
In My controller :
self.format = 'MM-dd-yyyy';
self.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
self.opened = {};
self.opened[$event.target.id] = true;
// log this to check if its setting the log
console.log(self.opened);
};
Angular : 1.6
Using 'ui.bootstrap.datetimepicker',
and 'ui.bootstrap
You'll need to add ng-click="model.dateFrom=true" as an attribute to the <i> element containing your calendar icon, not its parent span.
I would actually recommend writing a separate function for toggling the datepicker on and off. Something like
$scope.toggleDatePicker = function() {
$scope.model.dateFrom = !$scope.model.dateFrom;
};
and then calling that from your html: ng-click="toggleDatePicker()"
I'm using the following jQuery Datepicker and when I try to use JS to get the values I'm either getting "undefined" or "[object Object]".
I'm automatically setting a value to the datepicker and when viewing the page I can see a value.
Here is the code I have. I've tried it with the id being on the wrapping around the as well as the id on the actual but got the same results.
<div class="col-md-2 text-left">
<div class="input-group date">
<input id="startDatepicker" class="datepicker form-control" type="text" />
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
Here is the JavaScript I've tried base on the suggestions I've seen in my research.
var start = $('#startdate').datepicker("getDate");
//var start = $('#startdate').data('datepicker').date;
//var start = $('#startdate').val();
//var start = $('#startdate').data('datepicker').date;
alert(start);
I'ts probably because your input is empty.
check this out(JSFiddle) :
<input id="startDatepicker" class="datepicker form-control" type="text" value="05/09/2016" />
and
$('#startDatepicker').datepicker();
$('#getdate').on('click', function() {
var st = $('#startDatepicker').datepicker('getDate');
alert(st)
console.log(st);
});
I have a file upload which works, and am trying add a spinner icon to show that the file is being put into memory. The form save/submit button is disabled until the file is fully in memory. Right now I have the spinner working but it broke my button disable
previous HTML:
<div class="form-group">
<label class="col-xs-12 col-sm-4">Image <span class="required_field">*</span>:</label>
<input class="input-dnld" id="loadImg" type='file' placeholder="Select an image to upload" name="topoImg" onchange="angular.element(this).scope().readimg(this)" accept="image/*" required>
<label for="loadImg" required><span class="glyphicon glyphicon-open glyph-style"></span>Select an image to upload</label>
</div>
...
<button ng-click="saveTopo()" ng-disabled="frmNode.$invalid || !image" class="btn btn-default action_btn_style">Save</button>
current HTML:
<div class="form-group">
<label class="col-xs-12 col-sm-4">Image <span class="required_field">*</span>:</label>
<input class="input-dnld" id="loadImg" type='file' placeholder="Select an image to upload" name="topoImg" onchange="angular.element(this).scope().readimg(this)" accept="image/*" required>
<label for="loadImg" required><span class="glyphicon glyphicon-open glyph-style"></span>Select an image to upload</label>
</div>
<span style="width: 30px">
<i class="fa fa-fw fa-lg fa-spinner fa-pulse" ng-show="imgupload"></i>
</span>
...
<button ng-click="save()" ng-disabled="frmNode.$invalid || imgupload || !image" class="btn btn-default action_btn_style">Save</button>
previous JS function:
$scope.readimg = function(ele) {
$scope.image = ele.files[0];
}
current JS function:
$scope.readimg = function(ele) {
$scope.imgupload = true;
$scope.$apply();
$scope.image = ele.files[0];
$scope.imgupload = false;
$scope.$apply();
}
I've added $apply and a boolean variable to show that the image is being uploaded. Before adding the $apply the boolean from the function wasn't being changed until after the function returned. After adding the $apply the spinner shows up but the button is enabled long before the spinner disappears. I tried modifying the condition statement with the boolean value but it doesn't seem to be updating. Because of the lack of ng-change support on file type field in angularjs and me being a beginner at web dev I'm scratching my head how to make this one work.