I am trying to see if the text field length is at least a certain length. here is my code:
<form name="form2" id="form2" onsubmit="return validate()">
length 4: <input type="text" name = "t" id="t" />
<input type="button" name="submit" value="submit" />
</form>
<script>
function validate() {
document.write("good");
submitFlag = true;
if(document.form2.t.value.length!=4){
submitFlag=false;
alert("ivalid length - 4 characters needed!");
}
return submitFlag;
}
</script>
when I click submit, nothing happens.
Change your submit button to type="submit". The form is never getting submitted so the validate function isn't being called.
The input type needs to be "submit"
<form name="form2" id="form2" onsubmit="return validate()">
length 4: <input type="text" name = "t" id="t" />
<input type="submit" name="submit" value="submit" /> <!--INPUT TYPE MUST BE SUBMIT -->
</form>
<script>
function validate() {
document.write("good");
submitFlag = true;
if(document.form2.t.value.length!=4){
submitFlag=false;
alert("ivalid length - 4 characters needed!");
}
return submitFlag;
}
</script>
You probably want greater than or equal to (>=), instead of not equal to (!=) if you want "at least a certain length"
Your button should be
<input type="submit" name="submit" value="submit" />
otherwise the onsubmit event will not occur. Also, use console.log() for debugging, rather than document.write().
DEMO
There's a few issues that you have. 1) You need to make your input a submit button and 2) you need to remove your document.write() statement. Change your code to the following (or see this jsFiddle):
<form name="form2" id="form2" onsubmit="return validate()">
length 4: <input type="text" name = "t" id="t" />
<input type="submit" name="submit" value="submit" />
</form>
<script>
function validate() {
submitFlag = true;
if(document.form2.t.value.length!=4){
submitFlag=false;
alert("ivalid length - 4 characters needed!");
}
return submitFlag;
}
</script>
You were pretty close, but you could use some clean-up on that code (Note: I did not provide any).
You should also add a maxlength attribute to your text input, it'll help the user.
<form name="form2" id="form2" onsubmit="return validate();">
<input type="text" name="t" id="t" maxlength="4"/>
<input type="submit" name="submit" value="submit"/>
</form>
<script type="text/javascript">
function validate()
{
if ( document.getElementById("t").value.length != 4 )
{
alert( "Invalid length, must be 4 characters" );
return false;
}
return true;
}
</script>
I've spotted various errors:
don't use document.write(), it will overwrite the currently open document
form2 is no property of document. You may use document.forms.form2, but document.getElementById("t") is simpler here
Your expression doesn't check for "at least 4", it checks for "exactly 4".
Your button won't submit anything. Change it to <button type="submit"> or <input type="submit" />
you could specify a pattern=".{4}" for the input or give it a required attribute
you can try this function
var a = txtTelNo1.value;
if (a.length != 10) {
alert('Phone number should be 10 characters');
return false;
}
Related
i am trying to create a form which needs to be filled with 9 numeric digits. I would like the submit button to be disabled untill the form is filled exactly with 9 digits. I have found many scripts with button disabled untill form is filled but not with specific length. Could you please help me?
<form name="form1">
<input type="text" name='text1' maxlength="9" class="phone-input">
<input type="button" value="submit" onclick="phonenumber(document.form1.text1); changeDiv();"/>
</form>
Thank You!
You can try to use a pattern. Didn't try it, but it must be something like this:
<input pattern=".{9}">
As suggested by Markus, you can use the pattern attribute to validate the input (specify \d to allow only digits), in addition to required. The validity.valid property of the text field can then be used to enable/disable the button in the input event handler:
<form name="form1">
<input id="txtPhone" type="text" name='text1' pattern="\d{9}" required maxlength="9" class="phone-input" >
<input id="btnSubmit" type="button" value="submit" disabled="disabled" />
</form>
<script>
document.getElementById("txtPhone").addEventListener("input", function () {
document.getElementById("btnSubmit").disabled = !this.validity.valid;
});
</script>
document.getElementById("txtPhone").addEventListener("input", function () {
document.getElementById("btnSubmit").disabled = !this.validity.valid;
});
<form name="form1">
<input id="txtPhone" type="text" name='text1' pattern="\d{9}" required maxlength="9" class="phone-input" >
<input id="btnSubmit" type="button" value="submit" onclick="alert('Submit!');" disabled="disabled" />
</form>
I'm having to dip my toe back in the EE and javascript world after many years. What am I doing wrong here... a simple form being submitted, with a JS block to validate during the onsubmit event of the submit button. The alert("Here") message box does not appear when I submit the form, and the form gets submitted successfully, i.e. HelloForm gets displayed, with blank values, so I'm led to believe that validate() is not being called. I've tried this in both the Eclipse internal web browser as well as Chrome and see the same thing both times. I'm assuming that I don't need to explicitly activate javascript in either browser, as it would be on by default.
<html>
<head>
<script>
function validate()
{
alert("Here");
var x = document.forms["inputForm"].["first_name"].value;
if (x == null || x == "") {
alert("First name must be filled out");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="inputForm" action="HelloForm" method="GET" onsubmit="return validate()">
First Name: <input type="text" name="first_name">
<br />
Last Name: <input type="text" name="last_name" />
<input type="submit" value="Submit The Form" />
</form>
</body>
</html>
In this line will throw a syntax error:
document.forms["inputForm"].["first_name"].value
^^^
The statement is wrong, should be without dot between braces:
document.forms["inputForm"]["first_name"].value
//or
document.forms.inputForm.first_name.value
Working with Objects
You can use Html5 Validations.
<form name="inputForm" action="HelloForm" method="GET" >
First Name: <input type="text" name="first_name" required />
<br />
Last Name: <input type="text" name="last_name" required />
<input type="submit" value="Submit The Form" />
</form>
Working Demo
I have a form which i summitting to a table.
I would like to be able to validate the values before they are
added to the table.
I would like the a "time#cnt#" to be a number that is either a interger
or a decicimal with only .5.
For example If the user enter a 1.2 and they try to submit it they will get
a error message. They can enter 1 ,1.5 ,.5 ,2.5 ect.
Below is the form that I have , being NEW to JS I have no idea how i would do it.
I have seen on this website and other how i validate if for a number.
<cfform method="post" action="time.cfm" >
<table >
......
<td><input type="text" size="3" maxlength="5" name="time#cnt#" id="add_time" value=""></td>
.....
</table>
<p><input type="submit" class="submit" name="Submit" value=""></p>
</cfform>
If you don't mind sticking to modern browsers only, you can use HTML5's validation. No javascript required. In this case, you want an input of type "number" and set its step attribute to "0.5"
<input type="number" step=".5" />
Now if you put in any number with a decimal that is not .5 the browser will show an error and prevent submitting. Note that older browsers will just treat this as a text input and let everything through, but you should be doing server-side validation anyway. Even a javascript validation can be circumvented.
jsfiddle: http://jsfiddle.net/wtwpz1u9/1/
Here's some code that will work in all browsers:
form.onsubmit = function(e) {
var value = document.getElementById("add_time").value;
if (!isNumber(value) || (value % 0.5) !== 0) {
e.preventDefault();
alert("Bad input");
return false;
}
}
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
<form id="form" method="post" >
<input type="text" size="3" maxlength="5" name="time#cnt#" id="add_time" value="" />
<input type="submit" class="submit" name="Submit" value="Submit" />
</form>
Try HTML5 validation:
<input type="number" step="0.5" min="1" value="1">
I'm currently working on a basic form. When you hit the submit button, it should first change the value of a field, and then submit the form as usual. It all looks a bit like this:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
And this is how far I've come with the JavaScript code. It changes "myinput"'s value to 1, but it does not submit the form.
function DoSubmit(){
document.myform.myinput.value = '1';
document.getElementById("myform").submit();
}
You could do something like this instead:
<form name="myform" action="action.php" onsubmit="DoSubmit();">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" />
</form>
And then modify your DoSubmit function to just return true, indicating that "it's OK, now you can submit the form" to the browser:
function DoSubmit(){
document.myform.myinput.value = '1';
return true;
}
I'd also be wary of using onclick events on a submit button; the order of events isn't immediately obvious, and your callback won't get called if the user submits by, for example, hitting return in a textbox.
document.getElementById("myform").submit();
This won't work as your form tag doesn't have an id.
Change it like this and it should work:
<form name="myform" id="myform" action="action.php">
Here is simple code. You must set an id for your input. Here call it 'myInput':
var myform = document.getElementById('myform');
myform.onsubmit = function(){
document.getElementById('myInput').value = '1';
myform.submit();
};
No. When your input type is submit, you should have an onsubmit event declared in the markup and then do the changes you want. Meaning, have an onsubmit defined in your form tag.
Otherwise change the input type to a button and then define an onclick event for that button.
You're trying to access an element based on the name attribute which works for postbacks to the server, but JavaScript responds to the id attribute. Add an id with the same value as name and all should work fine.
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" id="myinput" value="0" />
<input type="text" name="message" id="message" value="" />
<input type="submit" name="submit" id="submit" onclick="DoSubmit()" />
</form>
function DoSubmit(){
document.getElementById("myinput").value = '1';
return true;
}
My problem turned out to be that I was assigning as document.getElementById("myinput").Value = '1';
Notice the capital V in Value? Once I changed it to small case, i.e., value, the data started posting. Odd as it was not giving any JavaScript errors either.
I have done this and it works for me.
At first you must add a script such as my SetHolderParent() and call in the html code like below.
function SetHolderParent(value) {
alert(value);
}
<input type="submit" value="Submit" onclick="SetHolderParent(222);" />
You can use the onchange event:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" onchange="this.form.submit()"/>
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
This might help you.
Your HTML
<form id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="save()" />
</form>
Your Script
<script>
function save(){
$('#myinput').val('1');
$('#form').submit();
}
</script>
hi
i want two check two fields
if the value of two fields is same then its shows a message two me i have a code but
its not working can you tell me what worng with this code
<script type="text/javascript">
function checkForm(form1){
if(form1.field1.value == form1.field2.value ){
alert(" values are identical");
form1.field1.focus();
return true;
}else{
return false;
}
}
</script>
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkform1(this);" >
</form>
Change your if condition like this
if(document.form1.field1.value==document.form1.field2.value)
You're calling checkform(), but that's not defined anywhere. Also, checkform1(this) uses the button as the element form1, which screws everything up. Use this.parentNode, which passes the form as the argument.
Here's some working code:
<script>
function checkForm(form1) {
if (form1.field1.value == form1.field2.value) {
alert(" values are identical");
form1.field1.focus();
return true;
} else {
return false;
}
}
</script>
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkForm(this.parentNode);" >
</form>
You need to add document. in front of your form selections. And your method name is wrong from the method you are calling from your click event.
I've fixed it and included an example here : http://jsfiddle.net/jomanlk/Fu2wJ/1/
function checkForm(form1) {
if (document.form1.field1.value == document.form1.field2.value) {
alert(" values are identical");
document.form1.field1.focus();
return false;
}
else {
return true;
}
}
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkForm();" >
</form>
Apart from the fact that checkForm1 function does not exist , the main problem lies in
<input type="submit" onClick="return checkform1(this);" >
Here the this refers to the input and not the form.
To make your code working change the function name to checkForm and
<input type="submit" onClick="return checkform1(this.form);" >