I want to use Zebra datapicker... but if I attach it to the input, I can't write somethig different from data which is picked in calendar... so how I can choose what I can write into textbox...
P.S I am using only one textbox in my page
Whilst I'm not familiar with the date picker you mention, it ought to have some means of specifying a callback function that acts as an intermediary between the selected value and what, ultimately, gets put in the text field.
I wrote a date picker some years ago which does this - see the callback_func param.
Without a callback, it inserts the selected date into the field. With a callback, it passes the selected date to the callback and uses the function's return value to decide the new value for the field.
var cal = new Calendar({
callback_field: '#myField',
focusElements: '#myField',
callback_func: function(d, m, y, date) { return 'hijack!'; }
});
You need to use a plugin that validates your keyup event on the text field.
Here's a small piece of code I wrote that does just that:
https://github.com/cassilup/jquery.keyup.validator
Unfortunately, it does not have code for date, but you tweak it freely to suit your needs.
Alternatively, you could assign the text field as readonly and let the datepicker do the date input.
Related
At work, one of the systems I use outputs voyage schedules. The URL for each voyage is constructed as the form address followed by ?voyageCode= followed by the voyage number, which is a two-letter route prefix and a three-digit voyage number.
Rather than use the standard form, which has a whole bunch of fields I never need to use, I want to build a simple page where I can just select the route and enter a voyage number.
In practical terms, I'm trying to build a form with the following:
A drop-down menu or set of radio buttons to select the two-letter route code;
A text field to enter the three-digit route code;
A button or link to combine those inputs into a link in the format [LINK]?voyageCode=[ROUTE CODE][VOYAGE NUMBER]
My HTML knowledge is pretty outdated, and I've never worked much with forms. Can anyone advise on how I can construct this?
Why don't you use a select tag for the dropdown and a classic input text for the route coude ?
Then for the link part, you should capture the click event on your button through onClick and then call a small function that'll basically do that :
function concatRouteCode(){
var select= document.getElementById("routeCodeLetters");
var routeCodeLetters = select.options[select.selectedIndex].value;
var routeCodeNumber = document.getElementById('routeCode').value;
return routeCodeLettres+routeCodeNumber;
}
If you really want to combine the codes into a single query parameter, you'll have to use Javascript to fetch the values of the two fields and change the location. You don't need Javascript if you put the values into separate parameters, as in ?routeCode=xx&voyageNumber=123. In that case you would just give the select element the attribute name=routeCode and the input field the attribute name=voyageNumber.
In case you want to go with the first approach, you'd have something like
document.getElementById("idOfSubmitButton").addEventListener("load", function() {
const routeCode = document.getElementById("idOfSelectElement").value;
const voyageNumber = document.getElementById("idOfInputField").value;
location.href = "base URL here" + "?voyageCode=" + routeCode + voyageNumber;
});
I am using number format internationalization for input field.
e.g.my input field will take input values as 12,555.8 but when I submit form, I want to use value 12555.8 without comma.
I am using library react-number-format which is taking care of both the formats.
My question is how can I attach the 12555.8 number without comma to input field so that when I submit form, I can use that value?
<NumberFormat
thousandSeparator={this.props.thousandSeparator}
decimalSeparator={this.props.decimalSeparator}
value={this.state.formattedValue}
valOriginal={this.modifiedInputValue}
onKeyUp={(event) => {this.onKeyUpFormatted(event)}}
onValueChange={(values) => {
const {formattedValue, floatValue} = values;
this.modifiedInputValue = isNaN(floatValue)?'':floatValue;
this.setState({formattedValue});
}}
/>
I tried this code and while form submit tried to capture non formatted value like following
event.target.elements.valOriginal
I added property as data-valOriginal for React element. After this, we can access this value as element.dataset.valOriginal during submit form event.
I am using library react-number-format which is taking care of both the formats. My question is how can I attach the 12555.8 number without comma to input field so that when I submit form, I can use that value?
You do NOT want to attach the value of 12555.8 without the comma to the input field. Whenever you modify the "value" of an input field, you will be changing what is displayed for the user.
Instead, the solution is to do all data-modification outside of the form, right before it is submitted.
So on your form, you'll want to have an "onSubmit" handler, and in your react component, you'll define:
onSubmitHandler = (formData) => {
let cleanFormData = {...formData}
cleanFormData.myNumberInput = cleaningFunction(cleanFormData.myNumberInput)
//submit cleanFormData to server
}
When using a HTML5 date field, every key input triggers the change event on the field on Chrome.
See jsFiddle and try to input the date manually to see the effect:
https://jsfiddle.net/hx3zcenj/4/
document.getElementById('dateFilter').addEventListener('change', function(){
document.getElementById('msgContainer').innerHTML += 'Change triggered<br>';
}); //triggers on every keypress
I would like this event to trigger like it does in a normal text field, i.e. after either selecting the date from the picker or on blur. I don't want it to trigger every time I input a character.
This is mostly relevant for Chrome, since other browsers deal with this field in different ways.
Once the date input has all the three fields, i.e. dd, mm and yyyy; it starts triggering. Which is logical as the date has all the fields and the date is a valid date, though might not be valid for business case.
You can bind the blur event which will do your job. And provide the other attributes like min and max which will also trigger errors.
And if you are going to bind the change event, then first thing you should do is check that data is valid and in the range.
How about using the focusout event instead. This will trigger when they leave the field/change the focus
document.getElementById('dateFilter').addEventListener('focusout', function() {
document.getElementById('msgContainer').innerHTML += 'Change triggered<br>';
});
<input type="date" id="dateFilter">
<div id="msgContainer"></div>
I need to restrict my users to input only dates with a custom format. I want to have something like this example in JQuery: http://www.youtube.com/watch?v=BMaTiGKykl8&feature=player_embedded
How can i archieved this in AS3?
You'll have to catch the KeyPressed event on the TextField. Check if the key pressed is OK at the specified position, if yes, do nothing, if not, cancel the event (Event.cancel = true).
Alternatively (for more features, like these auto added slashes) you can ALWAYS cancel the Event, and use the TextField's selection together with a String and some checking to always make a new version of the TextField's text.
Why not use a DateField and format the data as you see fit?
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/DateField.html?filter_flex=4.1&filter_flashplayer=10.1&filter_air=2
I'm using the standard autocomplete plugin here.
I have two text boxes on my form, item name and item id. The idea is that I want the user to search for the item by name, but on form submit I actually need the item id.
I am returning json from an ASP.NET MVC action which is used in the autocomplete.
The user starts typing an item name, the autocomplete list appears and is formatted to show the item name from the json object. The user can then click on a name from the list and the item id will be populated in the other textbox (which will actually be a hidden field once everything is working). I can then check that there is a value in this second textbox before submitting the form.
In the above scenario everything works great. But there are two huge bugs in what I've got so far:
1) The user has to actually click on the item in the list for the result function to fire. So if there is an item apples, and the user simply types apples directly into the textbox, the item id doesn't get populated.
2) The user could select apples from the list, which populates the item id. The user then changes his mind and goes back to the text box and types oranges. Again, if he doesn't actually click on the item in the list, the item id doesn't change and now when the form is submitted the wrong item id is submitted. Same thing if the user types something which isn't a valid selection, for example he changes the textbox to applesblahblahblah, the item id of apples is still going to be submitted even though a valid item choice wasn't made.
I've seen examples which suggest this can be solved by firing the search event, but I've tried that and it doesn't really seem to do much.
Does anyone know how to solve this problem?
My code so far is below, it's all pretty standard at the moment...
$('#ItemSearch').autocomplete("MyAction/FindItems", {
dataType: 'json',
parse: function(data) {
var parsed = [];
for (var i = 0; i < data.length; i++) {
parsed[parsed.length] = {
data: data[i],
value: data[i].Value,
result: data[i].Key
};
}
return parsed;
},
formatItem: function(row) {
return row.Value;
}
}).result(function(event, data, formatted) {
$(this).val(data.Value);
$('#ItemId').val(data.Key);
}).blur(function() {
// this is where I was trying to force an update of the item id textbox,
// but it doesn't work.
$(this).search();
});
I'd be greatful for any pointers. Thanks
Edit: If there is a better autocomplete which handles json and forced validation I'd be happy to hear suggestions as it might be easier than trying to get this one to work.
A better autocomplete may be the jQuery UI autocomplete, which does require the jQuery UI (pretty big library), but is more flexible. It has plenty of events that you can use to force validation.