Clearing a form field when page goes back (html / javascript) - javascript

Do you know when you use in a form the password field, like this:
<input type="password" name="pass">
And you do a GET or POST submit to the same page who have the form and if the user hit back in the browser the password field gets blank. Well thats good, but i need to get blank another form field when the user hit back. Thats because i asking for a captcha and the text field who hold the information entered by the user ramain fill when he hit back, but the captcha image change, and if i dont blank the field the user (sometimes) dont get that he needs to re-enter the captcha.
Thanks!

Try randomizing input name on each refresh, like:
<input type="text" id="CaptchaTextBox" name="captcha[612361]" />
Browser will notice that input field is different and will clear the value
Edit:
I have better solution: as user typed captcha once, just let him go without typing it second time. Now you know that this user is fairly non-machine so why give him so much to do ;)

Javascript
window.onload(function()
{
document.getElementById("CaptchaTextBox").value = '';
});
html
<input type="text" id="CaptchaTextBox" name="Captcha" />
Javascript erases the value of the textbox when the page is loaded

Related

How can I read the original value of an input field with type email without the Umlaut conversion?

I have a html input element on my page in which the user can enter his e-mail address:
<input type="email" id="yourEmail" name="yourEmail">
I do not send this field via the form directly but read it into a variable with javascript like this:
let email = document.getElementById('yourEmail').value.trim();
Now that works fine for normal e-mails, but as soon as I have special chars like German Umlauts, I get the transcribed email in the javascript variable. If I enter mail#gründlicher.de for example, the js variable contains the value mail#xn--grndlicher-beb.de. Since I want to show this data on a summary page back to the user before I sent it, that is really confusing to the user - it feels like something is broke (at least if you are not a techn nerd, understanding what happens).
Now I'm wondering: How do I get the text, that was actually entered by the user instead of the transcribed email? Obviously I could change form type="email" to type="text", but then I will also loose the e-mail specific keyboard on mobile devices, which I would like to have.
Try using type="text" to get the special characters to display, then use inputmode="email" to allow for e-mail-specific keyboard on mobile devices:
document.getElementById('yourEmail').addEventListener('change', function() {
console.log(this.value);
});
<input type="text" inputmode="email" id="yourEmail" name="yourEmail">

Fetching and storing data from form fields (email, password) without user clicking a button using Angular, Javascript

I am newbie to Angular and Java-script and trying to figure the following problem. I would appreciate any inputs.
I have 2 fields in our div class. One of them is a form entry (email) and other one is a drop down menu which has some static values of "occupation" where a user can select one from it. Both of them are in the same row.
I want to repeat this row (for second entry) as soon as the user finishes typing the valid email address in first row/entry. Also I want to store the values of first row in an array that is in the controller.
I want to do same thing for second entry and so on.
Once the user hits "OK" at the bottom, I want take an action on the array that has all the above values. I have the action defined and it works for a single entry but I am unable to figure out 2 things:
How can I store values of each row/entry in an array without user clicking any button but just on the event of completing typing the email address?
How can I automatically create a new row when user finishes typing the email on previous row? Is ng-repeat a good option?
Any help would be much appreciated. I just want to get started in right direction.
You should consider, that email addresses can be prefixes of each other - or at least that most of the regular expressions checking for validity of an email address will already allow "a#example.c" and not wait for the complete ".com".
Besides that, from a user perspective I would like it more to at least press enter to commit my inputs.
The best thing to do is probably to create the new line when you start to enter something in the previous one and just let the user decide when to switch to it (by clicking or hitting the tab key). When he or she enters something there you can then submit the data from the current line.
To check if the email address is valid you can use input type email in angular[1].
<input type="email" ng-model="user.email" name="uEmail" required="" />
[1]https://docs.angularjs.org/guide/forms

The URL will be appended with a question mark as the user press enter

I have an input tag within a form, when I press enter in the input box. The url will be appended with a question mark.
code:
<form>
<input id="xyz" type="text" value="">
</form>
This is very annoying, so I add some code to prevent the user from doing this behaviour. I change the body tag to:
<body onkeydown="(event.keyCode==13) ? 0 : 1">
Well, this works in another webpage, but not in this case.
What have I missed?
And is this a good solution to prevent user from pressing enter on the keyboard?
Please give some explanation in your answer, thanks.
p.s. I can't use jQuery.
UPDATE: I don't want the user to enter press on their keyboard to submit a form even I define the form action and method.
The default action when you press enter while in an input is to submit the form. Since you don't have any action defined for the form, it doesn't do anything. You also don't have a method defined so I believe it defaults to GET which uses parameters in the URL (like example.com?param1=abc&param2=123).
If you change <form> to <form method="post">that should stop the question mark from appearing. Though it's still not valid HTML because you don't have an action or a name for your form.
May I ask why you don't want them submitting the form when they press enter?

Form Field Into Url

I'm new to this kind of stuff so sorry if this is not possible or does not make any sense. Im making a app where someone puts in there username into the form and when they press enter a popup says words but then i want for after they press ok it puts the username into the form ---- instagram://user?username --- where it says username thats where i want the username from the form to go then it will go there. sorry if this doesnt make sense or is not possible wondering if it is
You want to set your form action to GET. I believe that is what you are trying to ask.
<form action='[url submitting to]' method='GET'></form>
Using jQuery, if this is the language you are working with, you could prevent the submit and get the username field and add it to url and load this page.
//html
<form>
<input id="username">
</form>
//javascript
//the submit event is captured
$('form').on('submit', function(e){
//the event is passed in on the function and is used to prevent the
//default action so we can perform some further action
e.preventDefault();
//here we grab the value of the the #username text field
var user = $('input#username').val();
//here we are loading the instagram page based upon the user's textfield
window.location = 'instagram://user?' + user;
});
Is this what you are looking for?

mvc 3 razor cannot clear form value with validation class

I'm using MVC 3 with Razor and using unobtrusive client validation. Things are working great, but I want to be able to reset the form if a user decides he wants to start over or cancel his action. It seems that there is a lot of meta data attached to each form element when using the validation.
<input type="text" value="" name="User.FirstName" id="User_FirstName" data-val-required="The First Name field is required." data-val-length-max="50" data-val-length="The field FirstName must be a string with a maximum length of 50." data-val="true" class="text-box single-line">
The jQuery snippet here shows my problem. When you try to manually reset the value of the text field, some other javascript is intercepting execution after I clear the value and it sets it back to what it was:
$("#btnReset").click(function () {
alert($("#User_FirstName").val());
$("#User_FirstName").val("");
alert($("#User_FirstName").val());
});
I'm looking for pointers here on how to clear form values when a user clicks a button. It seems like such a simple task, but I can find no documentation how to accomplish this and I haven't found anything here or elsewhere to help.
I was using an html input of type reset rather than the button type. The reset should not have been used in this case.

Categories

Resources