I have a web page with one input text for the barcode content and a select for the barcode type.
So using the database, it is possible to generate the barcode in the good format.
A normal final user don't know which barcode as which type, but the barcode reader knows and can send this type as a keyboard input.
The problem is that I don't know how to change from the input to the select.
If I use, the \t, it prints a tabulation in the input instead of switching from a input to the other. If I use a \n it submit the form.
Do you have any idea of how I can do it so that my form can be use with or without the barcode reader?
It could print the barcode followed with the barcode type 6931442700194|EAN13 and split the content when processing the form but is there another solution?
You can use some Javascript and the onchange event (or some similar event) to detect the value of your input text has been changed (by your barcode reader). Then you get this value and split it over your input text and select.
<input type='text' id='inputtext' onchange='splitValue();' />
<select id='myselect'>...</select>
And the JavaScript
function splitValue()
{
var input=document.getElementById('inputtext');
var select=document.getElementById('myselect');
var test = input.value;
// Perform some splitting and formatting
input.value = splitted_inputvalue;
select.value = splitted_selectvalue;
}
Related
all. I'm curious to know if the regular text input (not text area) could detect multiple lines value. If I copy any string that has various lines and pastes it into a standard input box, it will display as a single-line string and has no idea whether it has multiple lines or a single line.
I just want to know if we can preserve the original value (with multiple lines)
Original string value
INVOICE_500
INVOICE_501
After pasting it into the regular text input
INVOICE_500 INVOICE_501
Thanks in advance.
I found an article from a previous post where an way has been shown. We can use clipboard API as it copy text as it was written. It was applied on a div. I have converted it on a input field. I have attached the code below. Hope this might help you.
Reference article: Clipboard data on paste event
function handlePaste(e) {
var clipboardData, pastedData;
// Stop data actually being pasted into input
e.stopPropagation();
e.preventDefault();
// Get pasted data via clipboard API
clipboardData = e.clipboardData || window.clipboardData;
pastedData = clipboardData.getData('Text');
// Do whatever with pasteddata
alert(pastedData);
}
document.getElementById('pasteInput').addEventListener('paste', handlePaste);
<input id='pasteInput' placeholder='Paste text here'></div>
No you can't, the only HTML input element that's designed to be multi-line is the "textarea" element.
<textarea name="textArea" cols="40" rows="5">
What's the best/recommended way to indicate a form field will have a particular default value if you don't fill it out? I'm especially thinking about fields that are dynamic based on other fields, and wanting it to be correctly accessible.
Think a URL slug. When creating an account, if you fill the field out then that's fine. If you don't, a value will be generated based on your username. But it won't be the same as your username, just generated from it.
Actually setting the form field seems bad because it makes it less obvious you can change it yourself.
I'm not sure if placeholder text works here, but I assume not. I could do an aria-labelledby pointing to something that says "Default value: xyz" but I'm not sure if that will work, or how well it will be understood by screen readers - especially if it's changing automatically.
Cheers
The best way to do this is to populate the input and expose the fact that it was automatically filled in via the label as an extra bit of information.
Labels on inputs are read once you focus the related input.
For this reason we can generate labels "on the fly" to contain whatever we want.
As such the best option here would be to generate the label on blur of the first input that the second input depends on.
Within the label we add the instructions that explain why this input is already filled in.
We then auto populate the second input based on the input of the first.
In the below example I have appended "URL" to the first input value in order to simulate some sort of transformation from username to URL.
I also remove the explanation in parenthesis if the user has changed the second input value.
$('#iUsername, #iUserURL').on('blur', function(){
var ElUserName = $('#iUsername');
var ElUserURL = $('#iUserURL');
if(ElUserURL.val() == ""){
ElUserURL.val(ElUserName.val() + "URL");
$('label[for="iUserURL"]').text("user url (you can change this if you want, we have set it as " + $('#iUsername').val() + "URL)");
}else if(ElUserURL.val() != ElUserName.val() + "URL"){
$('label[for="iUserURL"]').text("user url");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="iUsername">User Name</label><br/>
<input id="iUsername" /><br/>
<hr/>
<label for="iUserURL">User URL</label><br/>
<input id="iUserURL" /><br/>
<hr/>
<label for="itest">I have added this third input just so you have something to tab too, it does not add anything to the fiddle</label><br/>
<input id="itest" />
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
}
My ASP.NET MVC 3 website has code on the server side that checks for the name of the submit button clicked to submit the form. The code works when I use the mouse to click the button, but when I use the Enter key, the form gets posted, but the request doesn't contain the name of the submit button.
Is there some attribute I can set on the submit button to get this to work for both clicking and using the Enter key?
Here is my HTML:
<div>Search:</div>
<form action="/Item/Search" method="post">
<input class="fulltextsearch" id="FTSearchText" name="FTSearchText" type="text" value="" />
<input type="submit" value="Go" name="FTSearchButton" />
</form>
</div>
On the server side, I have a custom model binder that uses the following code to determine if the user clicked the submit button.
// See if the value provider has the required prefix
var hasPrefix = bindingContext.ValueProvider.ContainsPrefix(bindingContext.ModelName);
var searchPrefix = (hasPrefix) ? bindingContext.ModelName + "." : string.Empty;
var searchButton = GetValue(bindingContext, searchPrefix, "FTSearchButton");
// If this value doesn't have value, the user didn't click the button so exit
if (string.IsNullOrEmpty(searchButton)) {
return null;
}
private static string GetValue(ModelBindingContext context, string prefix, string key) {
var result = context.ValueProvider.GetValue(prefix + key);
return result == null ? null : result.AttemptedValue;
}
Here is the problem I'm having with this. I have a page that displays a list of items. I have a 'search' textbox and a submit button in an HTML form. When the user enters text in the textbox and clicks the search button or uses the enter key, the page posts the form data via HTML GET, and returns the first eight records found. The page then displays page links for additional pages. The problems is that when the user clicks a page link, the form data is all blank, and my filter information is lost (the form isn't posted with the form value when using these links). So, I end up displaying a blank list of items (blank searches returns zero results) instead of paging the data.
By adding the check for the button name in my form data, I could determine whether or not to simply page the data, or do a new look up.
I wouldn't rely on this. There are plenty of documented bugs with this scenario. Just add a hidden field with name='submit'. That way it wouldn't be too hard to recode the backend.
<input type='hidden' name='submit' value='FTSearchButton'/>
So, I researched this last night and almost got somewhere. Then this morning, I really did get somewhere and here's where I ended up.
Apparently the W3C standards for form submission are pretty lax when describing the functionality as it relates to the Enter button and submitting forms. It seems they determined that
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
So that leaves a lot of wiggle room for the browser makers. Today, virtually all browsers support using the Enter key to submit a form, whether the form contains one or more single line text input boxes.
The problem I'm having is more or less unique to Internet Explorer, and only when the form contains one, single-line text input control. For whatever reason, Microsoft decided that when Internet Explorer submits a form like this, it doesn't include the submit button's name/value pair in the post body. However, it does include the button's name/value pair if the user clicks the submit button --or-- uses the Enter key, and the form contains more than one single-line text input control.
So, the only solution I can think of or find suggested is to add a second single-line text input to my form, and then set the the style to
visibility: hidden; display: none;
My form now has two single-line text input controls, so the form will post with the name/value pair in the form body, regardless of whether or not the user used the Enter key or clicked the submit button.
So, we have a workaround that was discovered by ASP.NET developers. It seems the key/value pair is required by ASP.NET web-forms to fire the click event, so this work around isn't something new, albeit not my favorite way to do things.