<input id="format_ThisFormat" name="format_ThisFormat" type="hidden" value="##-##-##-##" />
So, I know this much to go on, but basically, my issue is that the input field is being cleared if the complete mask isn't being entered (For example, if just "12-44" is being input, the field will clear, but if "12-34-56-78" is entered, the field will stay. I want the ability to allow for partial inputs. Any ideas how I can edit this line to accomplish what I am trying to achieve? I'm assuming it's an issue with this line, I'm not just going to post thousands and thousands of lines of code because it won't make any sense, custom API in visual basic SPA.
you can add a event listener and check if the input is valid:
let input = document.getElementById('format_ThisFormat');
input.addEventListener('blur', (e) => {
if(!e.target.value.match(/\d{2}-\d{2}-\d{2}/g)){
e.target.value = '';
}
})
<input id="format_ThisFormat" name="format_ThisFormat" type="text" />
Related
I was working on search bar where user input the keyword. When the user hit the enter key, results are displayed. I want to implement in this way -
Whenever, user hits enter to search results for a keyword, you can see there is no blinking cursor at the end of keyword. This don't happen when you go to google.com and click on input box. At that time, we see a blinking cursor.
The problem I'm facing is that, when a user hits enter key, results are displayed but cursor remains blinking in search bar. What should I do to solve this problem so that clicking on input box should display a blinking cursor but on hitting enter key, it hides blinking cursor ?
NOTE - Since I don't know, how this problem is being generated I haven't provided the code. I just wanted to have some rough idea with code how should I proceed. :)
This is done by taking the focus away from the input field, which requires a tiny bit of javascript.
I don't know how your code works as you aren't providing the code but form submit would be I imagine, how you would trigger the action on enter?
So I'll do a quick example...
We have a form which is populated with an input field.
var form = document.querySelector('#form');
var input = document.querySelector('#text');
form.onsubmit = function(e) {
e.preventDefault();
text.blur();
}
<form id="form">
<input type="text" id="text">
</form>
Using .blur takes the focus away from the input.
I miss read your question and saw that you were doing this with Angular, however I will leave the original answer there for anyone else that may stumble upon this answer.
To do it in Angular, it has a lovely attribute of ng-enter.
We can then add this to the input by doing <input type="text" ng-enter="$scope.blur()" />
Then we can create this action by doing
$scope.blur = function($event) {
var input = $event.target;
input.blur();
}
Is it possible to choose input type only for custom keyboard but prevent any browser validations so that entered value could be processed by the application?
I.e.
<input type="number">
With value 12345-123
On mobile device user would be presented with keyboard which allows to enter numbers as well as -. As soon as such value is entered browser returns empty string thus not allowing for me to choose and do validation on my side.
$0.value
with a return of:
""
I would like to use specific keyboards for some input types but I'm not sure if it's possible, if so - how?
Maybe try with $.val() not value. you can find the documentation here:
http://api.jquery.com/val/
http://codepen.io/TunderScripts/pen/jVvzNj?editors=1111
Html:
<input type="number" />
JS using JQuery:
var input = $('input[type=number]');
input.on('clic change', function(){
console.log($(this).val());
})
Hope it helps :)
I would like to
(1) not show any suggestions to the user while typing in an input field.
This can be done like this:
<input autocomplete="off">
However, I noticed that this also
(2) disables the history chaching, e.g. when you go to another site and click on the history back button the input field will be empty.
You can try it here:
http://jsfiddle.net/LC53F/
Only text inserted into the first field will survive going to a new page and back again.
Is there a way to only have effect (1), but not (2)?
This solution should work, but is not ideal: just sharing an idea.
I don't think you will be able to preserve history with 'autocomplete', so let's try to fiddle out something.
Here's an idea: the history is based on input names, so you can turn off the autocompletion from other sites by using an uncommon name (but still constant, for example: 'email_fakeSuffix_194h5g48').
Then, to turn off autocompletion from this input previous values, you can change its name everytime the page is loaded (ie. append a random number). The problem is that, doing this, you will also turn off the history.
So, the main idea is to use an uncommon input's name and to change it just before submitting the form:
The value won't be saved by the browser because the name has changed
If you navigate to another page without submitting, the value will
still be set because you haven't change the name yet.
Here's an example using JQuery (you can use anything else, or even vanilla JS)
JSFiddle: http://jsfiddle.net/vse9jx3r/
HTML
<form>
<input id="input1" name="email_fakeSuffix_194h5g48">
<input name="input2">
<input type="submit">
</form>
JS
$('form').submit(function() {
$('#input1').attr('name', 'email_fakeSuffix_194h5g48_' + Date.now());
//SUBMIT THE FORM (MAY DO NOTHING AT ALL)
});
You can tell me if I'm not clear enough.
This works for me (using jQuery 1.9.1):
$(function(){
$('input[type=text]').prop('autocomplete','off');
$('#formid').on('submit', function(e){
$('input[type=text]').removeProp('autocomplete');
});
});
Example:
<form>
<input type='submit'>
</form>
When submitted results in:
http://example.com/?
How to make it:
http://example.com/
?
[This is a very simple example of the problem, the actual form has many fields, but some are disabled at times. When all are disabled, the trailing ? appears]
In my case I'm using window.location, not sure it's the best alternative, but it's the only one I could make it work:
$('#myform').submit(function()
{
... if all parameters are empty
window.location = this.action;
return false;
});
My real use was to convert GET parameter to real url paths, so here is the full code:
$('#myform').submit(function()
{
var form = $(this),
paths = [];
// get paths
form.find('select').each(function()
{
var self = $(this),
value = self.val();
if (value)
paths[paths.length] = value;
// always disable to prevent edge cases
self.prop('disabled', true);
});
if (paths.length)
this.action += paths.join('/')+'/';
window.location = this.action;
return false;
});
Without using Javascript, I'm not sure there is one. One way to alleviate the problem may be to create a hidden input that just holds some junk value that you can ignore on the other side like this:
<input type="hidden" name="foo" value="bar" />
That way you will never have an empty GET request.
This is an old post, but hey.. here ya go
if you are using something like PHP you could submit the form to a "proxy" page that redirects the header to a specific location + the query.
For example:
HTML:
<form action="proxy.php" method="get">
<input type="text" name="txtquery" />
<input type="button" id="btnSubmit" />
</form>
PHP (proxy.php)
<?php
if(isset($_GET['txtquery']))
$query = $_GET['txtquery'];
header("Location /yourpage/{$query}");
?>
I am assuming this it what you are trying to do
I was looking for similar answer. What I ended up doing was creating a button that redirects to a certain page when clicked.
Example:
<button type="button" value="Play as guest!" title="Play as guest!" onclick="location.href='/play'">Play as guest!</button>
This is not an "answer" to your question but might be a good work around. I hope this helps.
Another option would be to check the FormData with javascript before submitting.
var myNeatForm = document.getElementById("id_of_form");
var formData = new FormData(myNeatForm); // Very nice browser support: https://developer.mozilla.org/en-US/docs/Web/API/FormData
console.log(Array.from(formData.entries())); // Should show you an array of the data the form would be submitting.
// Put the following inside an event listener for your form's submit button.
if (Array.from(formData.entries()).length > 0) {
dealTypesForm.submit(); // We've got parameters - submit them!
} else {
window.location = myNeatForm.action; // No parameters here - just go to the page normally.
}
I know this is a super old question, but I came across the same issue today. I would approach this from a different angle and my thinking is that in this day and age you should probably be using POST rather than GET in your forms, because passing around values in a querystring isn't great for security and GDPR. We have ended with a lot of issues where various tracking scripts have been picking up the querystring (with PII in the parameters), breaking whatever terms of services they have.
By posting, you will always get the "clean url", and you won't need to make any modifications to the form submit script. You might however need to change whatever is receiving the form input if it is expecting a GET.
You will get a trailing question mark when submitting an empty form, if your server adding trailing slash to URL and your action URL of form - is directory (and not file) and:
Trailing slash in the action attribute URL (action="/path/").
With dot (with or without trailing slash after it) instead specific URL (action="." or action="./").
With empty action (action="").
Form without action attribute.
Try to specify an action-URL without trailing slash:
action="path"
or
action="./path/sub"
and
action="/path"
or
action="/path/sub"
I would like to create a form that changes dynamically.
I have a form for creating a project (with fields such as: project_name, project_description...) and the project can have any amount (bigger or equal to 0) of categories.
What i want is to display a button which would give the user the option to add another category field. In addition I would also like the option for category fields to be "deleteable" by the user (if he changes his mind or made a mistake). What would be the best way to do so. I would like an Ajax type solution.
My solution so far is to leave an empty div beneath the last category and onclick of the button to load another field into that div with yet another div which will be used for the next div. Not to happy with this solution since i now have to count how many fields I have and give each div it's own id which complicates the matter even more.
Is there a more simple solution to this?
If you are trying to add fields dynamically with a button, you can easily do so by doing something like the following:
HTML:
<form>
<p>
<label>Name:</label> <input type="text">
<label>Age:</label> <input type="text">
<span class="remove">Remove</span>
</p>
<p>
<span class="add">Add fields</span>
</p>
</form>
JS:
$(".add").click(function() {
$("form > p:first-child").clone(true).insertBefore("form > p:last-child");
return false;
});
$(".remove").click(function() {
$(this).parent().remove();
});
Demo: http://jsfiddle.net/UeSsu/1/
I started to write a form generator is based on a definition in JSON a while back. It works but could use some enhancements. It's written using Prototype.js but it wouldn't be a huge effort to port it over to jQuery.
You're welcome to steal the code. (just view source)
I've done something similar. To delete fields I didn't really removed fields. I just hidden them with a display:none and had a hidden input "delete" that I trigger to true. Then, the page receiving the result knows which field is to be deleted in the database.
They are not deleted before the form is submitted. It's like a "two pass" conception. But if you don't really need a true ajax, it works fine. Otherwise you need your JS remove function to call the server and tell to delete the field with its id. A little bit more complex to code.