Update HTML form with Javascript while typing - javascript

I can update an HTML form using Javascript, when the user hits enter when on something on the form or when he triggers the onclick event on the "submit" button, but I want the form to be updated while the user is typing something.
I know that I can do Infinity loop, yet it is not a good idea; or I can check after intervals but it will cause unnecessary checking, which I don't want.

Use keyUp event handler with the input field contained within your form.
References: Javascript,
jQuery
[UPDATE]
You missed round brackets at function definition, check the updated fiddle

I had the same question and based on this post and sohel's answer I managed to get it working. Now I would like to share my solution in form of a short working example: If you type your name in the first field it will suggest an email address in the second one.
<!DOCTYPE html>
<html>
<head>
<script>
function nameModify(emailElement, nameElement) {
emailElement.value = nameElement.value + '#stackoverflow.com';
}
</script>
</head>
<body>
<form name="aform" action="#">
<input type="text" name="name" onkeyup="nameModify(this.form.elements['email'], this);" >
<input type="text" name="email" >
</form>
</body>
</html>

You are looking for Autocomplete

Related

Custom error with setCustomValidity avoid submitting the form

I am facing a problem to customize the displayed error on a form. Here is the code who had problem :
<html>
<body>
<form action="/done.html">
<input type="text" id="query" name="query"
required
oninvalid="this.setCustomValidity('What ?')">
<input type="submit">
</form>
</body>
</html>
If I enter something into the input, the form is submitted without any problem. But if I just press submit, then it is impossible to submit it again even if the input is filled !
I must add onkeypress="this.setCustomValidity('')".
Why setCustomValidity is not automatically cleaned after a while ? Is there another solution without a ton of js ?
I see that your problem is that when you submit the form without data, it stops working and what worked was to execute the setCustomValidity function with an empty string.
Based on that a solution could be to add a onsubmit="setCustomValidity('')" on your form so it restarts every time you submit the form.
I can't tell you for sure because I don't know what that function setCustomValidity is doing. So try and let me know if it worked.

Adding object data to html form fields

Below is my simple form html where I want to add the object data to my form fields. I went through Google search and StackOverflow but all of them were talking about jquery implementation, so here is my simple form html where I want to add the object data to my form fields. Since I'm not aware of Jquery, I want to use the Java Script approach.
Below, I have a user form where I want to bind the details object to my above form fields, so for that I'm using the below java script approach. I don't know where I'm going wrong. My object data is not getting bound with my form. 
So kindly help me with it.
Thank you.
<!DOCTYPE html>
<html>
<body>
<div>
<form>
Name&nbsp<input id="name" type="text" name="name"><br>
Place&nbsp<input id="place" type="text" name="place"><br>
Age&nbsp<input id="age" type="text" name="age">
</form>
</div>
<script>
var details ={name:'Krishna',place:'India',age:26};
document.getElementById("name").innerHTML=details.name;
document.getElementById("place").innerHTML=details.palce;
document.getElementById("age").innerHTML=details.age;
</script>
</body>
</html>
As mentioned in the comment by #Jaromanda X, there is no innerHTML for an input field. Instead, you should try setting the value attribute.
<script>
var details ={name:'Krishna',place:'India',age:26};
document.getElementById("name").value = details.name;
document.getElementById("place").value = details.place;
document.getElementById("age").value = details.age;
</script>
This should do the trick.

Using <form> and <input> elements as an input for JavaScript code. Is this the best way to do this?

Folks,
I am newbie to coding, obviously, so having completed few Lynda courses recently on HTML and Javascript, I have hit a wall with my simple HTML page. Basically, what I want is to do a basic calculation with JavaScript to have the user enter the two numbers using HTML form/ input elements and do a basic arithmetic calculation on JS. For some reason the code is not working. Can somebody point me to the right direction as why those input values are not being read by JS? Is getElementById the correct way?
Also, I am using the console.log to dislpay the results as I don't know yet how to have it displayed on the HTML page as a text below the submit button.
The HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Accurate Mass Error Calculator</title>
</head>
<body>
<h1> Accurate Mass Error Calculator </h1>
<p> Please enter the values below for each field:</p>
<form onsubmit="return calculateError()" method="post">
<p> Exact Theoretical Mass: <input id="exactMass" type="number" step="any" name="exactMass"/></p>
<p> Accurate Experimental Mass: <input id="accurateMass" type="number" step="any" name="accurateMass"/></p>
<p> <input id="submitButton" type="submit" name="submit1" value="Calculate" onclick="return calculateError()" /></p>
</form>
<script type="text/javascript" src="ppmError.js"></script>
</body>
</html>
The JS code(ppmError.js):
function calculateError () {
var exactMass=document.getElementById("exactMass");
var accurateMass=document.getElementById("accurateMass");
var ppmError=(accurateMass.value-exactMass.value)/exactMass.value*1000000;
if (isNaN (ppmError) ) {
console.log ("Not a valid Entry! Please try again.")
} else {
console.log(ppmError);
}
}
As Satpal said in the comment you should indeed cast your text to an int with :
var exactMass = parseInt(document.getElementById("exactMass").value);
var accurateMass = parseInt(document.getElementById("accurateMass").value);
var ppmError=(accurateMass-exactMass)/exactMass*1000000;
For your other question, in your html add an empty paragraph where you want to display your result
<p id="result"></p>
And instead of calling console.log you can do :
document.getElementById('result').innerHTML = ppmError;
Use solution from singe31, but to prevent reloading of the page after click change type of your button from "submit" to "button" or place "return false;" as the last line of calculateError() function. Otherwise you won't see any change on the page.

How do I highlight all invalid dijit.form.ValidationTextBoxes on a dijit.form.Form?

what I'm after is a form that when submitted, runs a validation check, and highlights all invalid fields and adds the tooltips.
I'm effectively looking for something like this:
dojo.forEach(dijit.byId('myForm')._invalidWidgets, function (thisWidget,index,array) {
thisWidget.displayMessage("normal invalid/empty message should go here, seems I should be calling something higher level than this");
});
but I don't want to be digging that deep, all I want to do is trigger the same sort of thing that's triggered when you tab out of an empty required field (exclamation icon and appropriate invalid/empty message). Maybe I should just try and fire the tab-out event?
Can someone point me in the right direction?
Yes, you're correct - you can get all your validation, highlighting, even focus on the first invalid field by just calling the validate() function on a dijit.form.Form element.
Here's an example where the validate() call is added to the onSubmit event:
<head>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.form.Form");
dojo.require("dojo.form.ValidationTextBox");
dojo.require("dojo.form.Button");
// more includes here...
</script>
</head>
<body>
<form dojoType="dijit.form.Form" action="..." method="...">
<input dojoType="dijit.form.ValidationTextBox" trim="true" regExp="..." invalidMessage="Oops...">
<!-- // more form elemts here... -->
<button type="submit" dojoType="dijit.form.Button" ...>
Submit
</button>
<script type="dojo/method" event="onSubmit">
if (!this.validate()) {
alert("Form contains invalid data. Please correct....");
return false;
}
return true;
<script>
</form>
</body>
Hope, you find it helpful.
Cheers.
Follow-up:
Here's an example of an input field that could be used to help prompt a user as to what sort of data is expected, and would alert them when validation fails:
<input type="text" id="EXT" name="EXT" value=""
maxLength="10"
dojoType="dijit.form.ValidationTextBox"
regExp="\d+?"
trim="true"
promptMessage="<p class='help'>Please your extension. (i.e. "1234")</p>"
invalidMessage="<p class='help'>The extension field should contain only numbers.</p>">
This is a declarative example. (I misspelled it in my initial response below.)
jthomas_ in #dojo on irc.freenode.net answered my question. It turns out that I wanted to be using dijit.byId('myForm').validate() which does everything I wanted in one swoop. Thanks, jthomas_!

Why does forms with single input field submit upon pressing enter key in input

Why is it that a <form> with a single <input> field will reload the form when the user enters a value and presses the Enter, and it does not if there are 2 or more fields in the <form>?.
I wrote a simple page to test this oddity.
If you enter a value in the second form and press Enter, you'll see it reloads the page passing the entered value as if you called GET. why? and how do I avoid it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testFormEnter</title>
</head>
<body>
<form>
<input type="text" name="partid2" id="partid2" />
<input type="text" name="partdesc" id="partdesc" />
</form>
<p>2 field form works fine</p>
<form>
<input type="text" name="partid" id="partid" />
</form>
<p>One field form reloads page when you press the Enter key why</p>
</body>
</html>
This is a little known "Quirk" that has been out for a while. I know some people have resolved it in various ways.
The easiest bypass in my opinion is to simply have a second input that isn't displayed to the user. Granted not all that user friendly on the backend, it does work to resolve the issue.
I should note that the most common place that I hear of this issue is with IE specifically and not with FireFox or others. Although it does seem to affect them as well.
This is a known bug in IE6/7/8. It doesn't appear that you will get a fix for it.
The best workaround you can do for this, is to add another hidden field (if your engineering conscience permits). IE will no longer auto-submit a form when it finds that there are two input-type fields in the form.
Update
In case you were wondering why this is the case, this gem comes straight out of the HTML 2.0 specification (Section 8.2):
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.
No, the default behaviour is that on enter, last input in the form is submitted.
If you don't want to submit at all you could add:
<form onsubmit="return false;">
Or in your input
<input ... onkeypress="return event.keyCode != 13;">
Of course there are more beautiful solutions but these are simpler without any library or framework.
Pressing Enter works differently depending on (a) how many fields there are and (b) how many submit buttons there are. It may do nothing, it may submit the form with no 'successful' submit button, or it may pretend the first submit button was clicked (even generating an onclick for it!) and submit with that button's value.
For example, if you add an input type="submit" to your two-field form, you'll notice it too submits.
This is an ancient browser quirk going back at least as far as early Netscape (maybe further), which is unlikely to be changed now.
<form>
Invalid without an ‘action’. If you don't intend to submit anywhere, and you don't need radio button name grouping, you could just completely omit the form element.
Here is the code that I used would use to solve the problem:
<form>
<input type="text" name="partid" id="partid" />
<input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" />
</form>
It's not reloading the page as such, it's submitting the form.
However, in this example because you have no action attribute on the form it submits to itself which gives the impression of reloading the page.
Also, I can't repro the behaviour you describe. If I am in any text input in a form and I press Enter it submits the form, no matter where in the form the input is located or how many inputs there are.
You might want to try this out some more in different browsers.
as vineet already said, this is rooted in the html 2.0 specification:
here is how to prevent this from happening without screwing up your urls:
<form>
<input type="text" name="partid" id="partid" />
<input type="text" style="display: none;" />
</form>
Thanks to everyone who answered. It's an eye opener that a form with a single field acts differently then a form with many fields.
Another way to deal with this automatic submit, is to code a submit function that returns false.
In my case I had a button with an onclick event, so I moved the function call with the added return keyword to the onsubmit event. If the function called returns false the submit won't happen.
<form onsubmit="return ajaxMagic()">
<input type="text" name="partid" id="partid" />
<input type="submit" value="Find Part" />
</form
function ajaxMagic() {
...
return (false);
}
The solution I found for all of the browsers that I tested (IE, FF, Chrome, Safari, Opera) is that the first input type=submit element on the form has to be visible and has to be the first element in the form. I was able to use CSS placement to move the submit button to the bottom of the page and it did not affect the results!
<form id="form" action="/">
<input type="submit" value="ensures-the-enter-key-submits-the-form"
style="width:1px;height:1px;position:fixed;bottom:1px;"/>
<div id="header" class="header"></div>
<div id="feedbackMessages" class="feedbackPanel"></div>
...... lots of other input tags, etc...
</form>
This problem occurs in both IE and Chrome.
It does not occur on Firefox.
A simple solution would be to add the following attribute to the form tag:
onsubmit="return false"
That is, of course, assuming that you submit the form using an XMLHttpRequest object.
Yes, form with a single inputText field working as different in HTML 4.
onSubmit return false not working for me but the below fix bug is working fine
<!--Fix IE6/7/8 and HTML 4 bug -->
<input style="display:none;" type="text" name="StackOverflow1370021" value="Fix IE bug" />
I handled this by the following code but I am not sure if this a good approach.
By looking for input fields in a given form and if its 1 prevent the default action.
if($j("form#your-form input[type='text']").length == 1) {
$j(this).bind("keypress", function(event) {
if(event.which == 13) {
event.preventDefault();
}
});
}
I think that's a feature, which I did also disable it though. It's not taking big effort to disable it. Just capture the enter key, ignore it, will do.

Categories