I have problem with changeing text in my input text field. I would like to let user use "start" button to start my aplication: This should write hours and minutes to the text field and same for the "end" button, when user click on submit. These times and other will be fire on firebase.
Thanks for help and there is my code:
<template>
...
<label>Start Time:</label>
<input type="text" v-model="newAct.startTime" disabled/><br>
<label>End Time:</label>
<input type="text" v-model="newAct.endTime" disabled/><br>
<button #click="submitStart">Start</button>
<button #click="submitEnd">Stop</button>
...
</template>
There is my Code:
<script>
...
export default {
...
submitStart() {
let t = new Date();
let time = t.getHours() + ":" + t.getMinutes();
newAct.StartTime = time;
},
submitEnd() {
let t = new Date();
let time = t.getHours() + ":" + t.getMinutes();
newAct.EndTime = time;
}
}
...
</script>
Related
The following HTML code rests inside a Modal component provided by reactstrap.
<div>
<label htmlFor="address">Location*</label>
<br />
<input
id="address"
className={classes.WholeWidthInput + " " + classes.BorderOverride}
type="text"
onChange={this.handleFormChange.bind(this, "address")}
onBlur={this.saveAddress.bind(this)}
required
placeholder="Find location"
value={this.props.post.address}
/>{" "}
<br />
</div>
The following code hooks up the google places api with the above input element.
handleGoogleSearchLoad = () => {
/* global google */
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, -180),
new google.maps.LatLng(90, 180)
);
var options = { bounds: defaultBounds, types: ['(cities)'] };
const autocomplete = new google.maps.places.Autocomplete(document.getElementById("address"), options);
autocomplete.setFields(['address_components', 'formatted_address', 'geometry']);
this.setState({autocomplete});
}
But the thing is the dropdown appears behind the modal when I type something into the form to search. I tried the .pac_container css suggestion but it didn't work or maybe I don't know where the css should have been used. Thanks in advance.
I can't get value from input field in html.
This is my html:
<div class="form-group">
<label class="control-label col-sm-2" for="subject">Subject:</label>
<div class="col-sm-10">
<input class="form-control" id="idsubject" ng-model="subject" placeholder="Enter Subject">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="body">Body:</label>
<div class="col-sm-10">
<input class="form-control" id="idbody" ng-model="body" placeholder="Enter Body">
</div>
</div>
Then this is my controller insert:
// insert data
$scope.InsertData = function() {
var insert = {
subject: $scope.subject,
body: $scope.body
}
var promiseGet = GetAllEntryService.InsertData(insert);
GetAllEntry();
ClearModels();
promiseGet.then(function(pl) {
$scope.InsertData = pl.data
},
function(errorPl) {
console.log('Some Error in Getting Records.', errorPl);
});
}
But this return value post like http://localhost:51458/ServiceRequest.svc/InsertData?subject=undefined&body=undefined
I don't know why from input field not get the value.
This is my service insert:
this.InsertData = function (ticket, request, category, subCategory, subject, body, assignto, status, fileName, fileContent, fileBinary, isActive, createdBy, aCNo) {
return $http.post("http://localhost:51458/ServiceRequest.svc/InsertData?"&subject=" + subject + "&body=" + body);
};
this the picture output from inspect element developer network
Please help me what I'm missing in my code
I can see a couple of problems, first you are setting InsertData as a function and later you set it to data.
Then you have your service which takes separate params but you've pass an object to it:
this.InsertData = function (ticket, request, category, subCategory, subject, body, ...)
And your usage:
var insert = {
subject: $scope.subject,
body: $scope.body
}
var promiseGet = GetAllEntryService.InsertData(insert);
While you should've used it like this:
var promiseGet = GetAllEntryService.InsertData(/*ticket goes here*/, ... , $scope.subject, $scope.body, ...);
HTML:
<template name="Dep_Con">
<input disabled={{SBD_Dep_Con}} class="input" value="" type="text"/>
</template>
Js:
Template.registerHelper("SBD_Dep_Con", function() {
var returnval = "n";
const ans = Session.get('chosen')
const product = ProductList.findOne({ product: ans});
console.log("product.dep_con:" + product.department_contact)
if(product.department_contact == "N/A") {return true}
else {return false}
});
I've successfully enable / disable an inputfield (text) in html depends on another dropbox's value using the code above.
The problem is when the inputfield is filled when enabled and followed by being disabled, the value filled remains. Is there a way to reset an inputfield's value when its 'disabled' status change? Or am I looking at the wrong direction (i.e. there's a way for the form to not retrieve value from a disabled inputfield)?
You can clear the input field before disabling it using jquery. I have modified your code slightly.
<template name="Dep_Con">
<input disabled={{SBD_Dep_Con}} class="input" id="input_field" value="" type="text"/>
</template>
JS File
Template.registerHelper("SBD_Dep_Con", function() {
var returnval = "n";
const ans = Session.get('chosen');
const product = ProductList.findOne({ product: ans});
console.log("product.dep_con:" + product.department_contact)
if(product.department_contact == "N/A") {
$('#input_field').val(''); //Add this corresponding to id.
return true }
else {
return false}
});
I have a form in which I have 2 fields, ssn and phone. I would like the user to enter anyone of the field. I'm using semantic validation, here is my code, can you please let me know how to validate the form using Semantic?
<form class="ui error form basic segment" role="form" method="POST" action="{{ url('/username/email') }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="_method" value="patch">
<div class="ui info message">
Please enter either SSN or phone to email you the username.
</div>
<div class="field">
<label for="ssn">SSN</label>
<div class="ui icon input">
<input type="text" class="form-control" name="ssn" value="{{ old('ssn') }}">
</div>
</div>
<div class="field">
<label for="phone">Phone</label>
<div class="ui icon input">
<input type="text" class="form-control" name="phone" value="{{ old('phone') }}">
</div>
</div>
<input type="submit" value="Email Username" class="ui primary button">
</form>
<script type="text/javascript">
$('.ui.form')
.form({
inline : true,
on: 'blur',
fields: {
username: {
identifier : 'ssn',
rules: [
{
type : 'empty',
prompt : 'Please enter a SSN'
}
]
},
}
})
;
</script>
`
Here's a little bit more elegant solution that follows Semantic UI fields identification standard.
Field could be identified not only via input[name="…"] CSS selector offered in Oniisaki's accepted answer, but also by DOM element id or data-validation attribute:
/**
* Checks whether current field value or at least one of additionally
* given fields values is not empty, neither blank string.
* #param {string} value Current field value.
* #param {string} fieldIdentifiers Comma separated field identifiers.
* #return {boolean}
*/
$.fn.form.settings.rules.allEmpty = function(value, fieldIdentifiers) {
var $form = $(this);
return !!value || fieldIdentifiers.split(',').some(function(fieldIdentifier) {
return $form.find('#' + fieldIdentifier).val() ||
$form.find('[name="' + fieldIdentifier +'"]').val() ||
$form.find('[data-validate="'+ fieldIdentifier +'"]').val();
});
};
// Using newly created custom validation rule.
// Notice how multiple fields are defined, if required.
$('.ui.form').form({
ssn: {
identifier: 'ssn',
rules: [{
// Multiple field identifiers could be defined,
// like `allEmpty[phone,email,skype]`.
type: 'allEmpty[phone]',
prompt: 'SSN or Phone (at least one field) must be filled.'
}]
}
});
I would create a Semantic UI custom validation function that accepts parameters for your purpose.
Here's the link: http://jsfiddle.net/owcfuhtq/
The code:
$(document).ready(function(){
// function to check if at least one text is not empty for a collection of elements
// text is the value of the input device
// csv is the argument as string. It's the string inside "[" and "]"
$.fn.form.settings.rules.isAllEmpty = function(text,csv){
//If the text of the field itself isn't empty, then it is valid
if (text)
return true;
var array = csv.split(','); // you're separating the string by commas
var isValid = false; // return value
$.each(array,function(index,elem){
// for each item in array, get an input element with the specified name, and check if it has any values
var element = $("input[name='"+elem+"']");
//If element is found, and it's value is not empty, then it is valid
if (element && element.val())
isValid = true;
});
return isValid;
};
var formValidationRules =
{
ssn: {
identifier: 'ssn',
rules: [{
type: "isAllEmpty[phone]",
//If you got additional fields to compare, append it inside the [] with a "," separator
//E.g. isAllEmpty[field1, field2]
prompt: 'An error occurred'
}]
}
}
$('.ui.form').form(formValidationRules);
});
If you want to include select box you can use it sth like this :
$.fn.form.settings.rules.isAllEmpty = function (text, csv) {
if (text) {
return true;
}
var array = csv.split(',');
var isValid = false;
$.each(array, function (index, elem) {
var element = $("input[name='" + elem + "']");
if (element.length == 0) {
element = $("select[name='" + elem + "']")
}
if (element && element.val()) {
isValid = true;
}
});
return isValid;
};
I am a little new to JQuery. let's suppose that we have this jquery function :
var f = $("#myForm");
var url = f.attr("action");
var formData = f.serialize();
$.post(url, formData, function(data) {
$("#postResult").html(data);
});
and this form :
<form id="myForm" action="/Monitor/Test/FormPost" method="post">
<div>First Name: <input name="FirstName" type="text" value="Bob" /></div>
<div>Last Name: <input name="LastName" type="text" value="Cravens" /></div>
<div>Age: <input name="Age" type="text" value="43" /></div>
<input type="submit" value="Save Contact" />
<div id="postResult">?</div>
</form>
How can I bind the save button with the jquery function ? Thank you
One simple way would be to bind to the click event of the button. Something like this:
$('#myForm input[type="submit"]').click(function () {
var f = $("#myForm");
var url = f.attr("action");
var formData = f.serialize();
$.post(url, formData, function(data) {
$("#postResult").html(data);
});
});
This specifically looks for the submit input that's a child of the form of id "myForm" (in case there are other buttons, etc.) and responds to its click event with the function in question.
Just to be safe, since you're essentially short-circuiting the form and posting via AJAX, you should also probably change the submit to a normal button:
<input type="button" value="Save Contact" />
Or perhaps:
<button value="Save Contact" />
Which would change your jQuery selector to:
$('#myForm input[type="button"]')
Or:
$('#myForm button')
$(document).on("click","input[type=submit]",function(e)
{
e.preventDefault();
var form = $(this).closest("form");
$.post(form.attr("action",form.serialize(),function(d){
//result
});
});
more general way.
//this handler can work on any form that need to post all values
$("form input[type='submit']", f).click(function(e){
e.preventDefault();
var $this = $(this);
var f = $this.parents('form');
var url = f.attr("action");
var formData = f.serialize();
$.post(url, formData, function(data) {
$("#postResult").html(data);
});
return false;
})
In this code you are subscribing click event.
[e.preventDefault();][1] will stop your form from premature submittion and you can do the work you want.