I have an HTML page where there are two Textboxes and a Button. And I had written a Compute function to display the result in a Textbox but its not working. Alerts are not being fired on the page.
Can any one help me out here, where am i going wrong.
<script type="text/javascript">
function isNumericKey(e)
{
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e)
{
var charCode = e.which;
}
else
{
return true;
}
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
function submitMyNumber()
{
alert(1);
var x = document.getElementById('myInput').value;
return x.match(/^[0-9]+$/) != null;
var y = document.getElementById('myInput1').value;
return y.match(/^[0-9]+$/) != null;
compute();
}
function compute()
{
alert(1);
var a,b,c;
var qtc=document.form1.myInput.value;
alert(qtc);
var hr=document.getByElementById('myinput1').value;
alert(hr);
a=60/hr;
alert(a);
b=math.sqrt(a);
alert(b);
c=qtc/b;
alert(c);
document.write(a + "" + b+ " " + c+ "")
}
</script>
</head>
<body>
<form>
<table align="center" style="border:2px solid black">
<tr>
<td>Qtc:</td>
<td><input type="text" id="myInput" name="myInput" onkeypress="return isNumericKey(event);" /><br /></td></tr>
<tr>
<td>Hr:</td>
<td><input type="text" id="myInput1" name="myInput1" onkeypress="return isNumericKey(event);" /><br />
</td>
</tr>
<tr>
<td> <input type="submit" id="mySubmit" name="mySubmit" value="Submit only Number" onclick="compute()" />
</td>
</tr>
<tr><td><input type="text" id="result" name="result" value="" /></td></tr>
</table>
</form>
</body>
</html>
in this function
function submitMyNumber() {
var x = document.getElementById('myInput').value;
return x.match(/^[0-9]+$/) != null; // <-- return
var y = document.getElementById('myInput1').value;
return y.match(/^[0-9]+$/) != null;
compute();
}
on the second line the function is returning, so all next lines won't never be executed.
If I have to guess you probably want to do something like
function submitMyNumber() {
var x = document.getElementById('myInput').value;
if (!x.match(/^[0-9]+$/)) { return false }
var y = document.getElementById('myInput1').value;
if (!y.match(/^[0-9]+$/)) { return false }
compute();
}
There are typo errors in your code:
Update: Fiddle
In compute() function
getByElementById('myinput1') should be getElementById('myInput1')
math.sqrt(a); should be Math.sqrt(a);
The function should look like
function compute(){
var a,b,c;
var qtc=document.form1.myInput.value;
alert(qtc);
var hr=document.getElementById('myInput1').value;
alert(hr);
a=60/hr;
alert(a);
b=Math.sqrt(a);
alert(b);
c=qtc/b;
alert(c);
document.write(a + "" + b+ " " + c+ "")
//var result = document.getElementById('result');
//result.value = c;
}
Your html form must have a name=form1 <form name="form1">
<form name="form1">
<table align="center" style="border:2px solid black">
<tr>
<td>Qtc:</td>
<td><input type="text" id="myInput" name="myInput" onkeypress="return isNumericKey(event);" /><br /></td>
</tr>
<tr>
<td>Hr:</td>
<td><input type="text" id="myInput1" name="myInput1" onkeypress="return isNumericKey(event);" /><br /></td>
</tr>
<tr>
<td><button type="button" onclick="compute(); return false;">Submit only Number</button></td>
</tr>
<tr><td><input type="text" id="result" name="result" value="" /></td></tr>
</table>
</form>
Possible mistakes in your code
Compute function is never getting called
Result text box value is never set
You dont have a form name in your code :
Change this from <form>
to
<form name = "form1" >
PS:
When you use something like document.form1.myInput.value;
You tell get the myInput value from the form with name form1
Change your return statements to if statements:
function submitMyNumber()
{
alert(1);
var x = document.getElementById('myInput').value;
if (x.match(/^[0-9]+$/) === null ) {
return;
}
var y = document.getElementById('myInput1').value;
if (y.match(/^[0-9]+$/) === null ) {
return;
}
compute();
}
I think Function should be:
function submitMyNumber() {
var x = document.getElementById('myInput').value;
var x_match= x.match(/^[0-9]+$/) != null;
//Store x_match in hiddenfield
var y = document.getElementById('myInput1').value;
var y_match= y.match(/^[0-9]+$/) != null;
//Store y_match in hiddenfield
compute();
return;
}
There are lot of javascript errors in above code i dont know what you are trying to do but correct javascript will be
function compute()
{
alert(1);
var a,b,c;
var qtc=document.form1.myInput.value;
alert(qtc);
var hr=document.getElementById('myInput1').value;
alert(hr);
a=60/hr;
alert(a);
b=Math.sqrt(a);
alert(b);
c=qtc/b;
alert(c);
document.getElementById('result').value = c;
//document.write(a + "" + b+ " " + c+ "")
return false;
}
plus form tag dont have name field. it should be like
<form onsubmit="return false;" name="form1">
and submit button should return false
like
<input type="submit" id="mySubmit" name="mySubmit" value="Submit only Number" onclick="compute(); return false;" />
or else form will continue to submit whether you got javascript error or not
You tool Like firebug to locate your javascript errors
Related
i want to create 2 text boxes.I want to write something on those text boxes ,and save the value of each in an array or somewhere.There are only char characters.I have and reset to delete a value if it needs.I did a lot work,but it didn't worked.
AM: <input type="text" id="myText" value="GiveAm" size="10" id="myInput">
<button onclick="document.getElementById('myInput').value = ''">Reset</button>
<button onclick="myFunction()">Kataxwrisi</button>
<br>
Surname <input id='charInput' type="text" value="" size="10%">
<button onclick="myFunction()">Kataxwrisi</button>
</br>
<script>
function myFunction() {
document.getElementById("myText").value = "Johnny Bravo";
}
function getChar(event){
if(event.which == null){
return String.fromCharCode(event.keyCode);
}else if(event.which !-0 && event.charCode != 0){
return String.fromCharCode(event.which);
}else{return null; }
}
document.getElementById('charInput').onkeypress=
function(event){
var char =getChar(event || window.event)
if(!char) return false;
document.getElementById('keyData').innerHTML =char + "was clicked";
return true;
}
</script>
Not 100% sure what you are trying to do here. But this is my best guess at a solution. When a user presses the 'enter' key in a text box, the current value of that text box is stored in an array.
var arrSavedValues = [];
function setInputValue(argInputID, argNewValue) {
document.getElementById(argInputID).value = argNewValue;
}
function saveValue(e){
if(e.keyCode === 13){
e.preventDefault();
var caller = e.target || e.srcElement;
arrSavedValues.push(caller.value);
alert("Saved " + caller.value + " to arrSavedValues.");
}
}
<div>
<label>AM:</label>
<input id="txtAM" type="text" value="GiveAm" size="10" onkeypress="saveValue(event)" />
<button onclick="setInputValue('txtAM','')">Reset</button>
<button onclick="setInputValue('txtAM','Johnny Bravo')">Kataxwrisi</button>
</div>
<div>
<label>Surname:</label>
<input id="txtSurname" type="text" value="" size="10" onkeypress="saveValue(event)" />
<button onclick="setInputValue('txtSurname','Johnny Bravo')">Kataxwrisi</button>
</div>
I want to prevent the submission of data when user enters a number or a special character. I've used this.
//restric entering numbers and special characters
function checkLetters() {
var crop = $('#crop').val().trim();
//Entering numbers
if (crop.match(/([0-9])/)) {
$('#cropEr4').show();
boolsub = false;
}
else {
$('#cropEr4').hide();
boolsub = true;
}
//Entering special characters
if (crop.match(/([!,%,&,#,#,$,^,*,?,_,~])/)) {
$('#cropEr3').show();
boolsub = false;
}
else {
$('#cropEr3').hide();
boolsub = true;
}
}
//prevent submitting
function validateSubmit() {
var crop = $('#crop').val().trim();
if (crop !== "") {
$('#cropEr2').hide();
if (boolsub) {
boolsub = false;
return false;
}
if (boolsub) {
boolsub = true;
return true;
}
}
else {
$('#cropEr2').show();
return false;
}
}
below is the form.
<form name="myForm" action="../controller/new.php" method="POST"
enctype="multipart/form-data" onSubmit="return validateSubmit()">
<table align="left" width="300" height="200">
<tbody>
<tr>
<td>Crop Name : </td>
<td><input type="text" name="crop_id" value=""size="45" id="crop" onkeyup="checkLetters(this.value);"/>
<div id="cropEr2" style="display:none;color:red">Enter crop name</div>
<div id="cropEr3" style="display:none;color:red">You cannot enter symbols, have to enter only letters.</div>
<div id="cropEr4" style="display:none;color:red">You cannot enter numbers, have to enter only letters.</div>
</td>
</tr>
<tr>
<td align="center">
<input class="button"type="reset" value="Clear Deatils" />
</td>
<td><input type="hidden" name="action" value="add_crop" />
<input class="button" id="submit" type="submit" value="Add Details" />
</td>
</tr>
</tbody>
</table>
Can anyone tell me why this doesn't work? When I enter numbers and special characters the message is displayed, but it is submitting the form anyway.
I'm loading this code in a facebox.
What you need is to not rely on JavaScript when there are saner options available.
Compare your wall of code, to this:
<input type="text" pattern="[a-zA-Z]+" required />
Suddenly it only allows letters, and even won't submit until you type something!
Isn't HTML5 awesome?
First you test to see if the string contains any numbers. If it does, you set boolsub to false otherwise you set it to true.
Then you test to see if it contains any special characters. If it does, you set boolsub to false otherwise you set it to true.
It doesn't matter what value you set boolsub to for the number test. You always overwrite that value for the special character test.
Set boolsub to true by default. Set it to false if it fails a check. Never reset it to true if it passes a check.
function checkLetters() {
boolsub = true;
var crop = $('#crop').val().trim();
//Entering numbers
if (crop.match(/([0-9])/)) {
$('#cropEr4').show();
boolsub = false;
} else {
$('#cropEr4').hide();
}
//Entering special characters
if (crop.match(/([!,%,&,#,#,$,^,*,?,_,~])/)) {
$('#cropEr3').show();
boolsub = false;
} else {
$('#cropEr3').hide();
}
}
Note, however, that you would be better off rewriting this so that checkLetters returned a value instead of setting a global, and to use modern event binding techniques.
Done your code with preventing special characters and blank fields. just try to implement like this way...
HTML :
<form name="myForm" action="../controller/new.php" method="POST" enctype="multipart/form-data" onSubmit="return validateSubmit()">
<input type="text" name="crop_id" value=""size="45" id="crop" />
<input class="button" id="submit" type="submit" value="Add Details" />
<div id="message" style="color:red;"></div>
</form>
JS CODE:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
//prevent submitting
function validateSubmit(){
var crop = $('#crop');
var sh = $('#message');
if(bv(crop,sh) === true && sc(crop,sh) === true){
return true;
}else{
return false;
}
}
function bv(e,sh){
var a = e.val().trim();
//Entering blank characters
if (a == ""){
sh.html('Blank not allowed.');
return false;
}else{
sh.html('');return true;
}
}
function sc(e,sh){
var b = e.val().trim();
//Entering special characters
if (b.match(/([0-9,!,%,&,#,#,$,^,*,?,_,~])/)){
sh.html('Allows only characters.');
return false;
}else{
sh.html('');return true;
}
}
</script>
What you need is " event.preventDefault()" : : If this method is called, the default action of the event will not be triggered.
And add an event for submit button.
$( "#submit" ).click(function( event ) {
var crop = $('#crop').val().trim();
if (crop !== "") {
$('#cropEr2').hide();
if (boolsub) {
boolsub = false;
event.preventDefault()
}
if (boolsub) {
boolsub = true;
return true;
}
}
else {
$('#cropEr2').show();
event.preventDefault()
}
});
You can remove this line: onSubmit="return validateSubmit()"
http://jsfiddle.net/#&togetherjs=L2vRaIkMNT
UPDATE AFTER OP's COMMENT
var boolsub = true;
function checkLetters() {
var crop = $('#crop').val().trim();
if ((crop.match(/([0-9])/)) || (crop.match(/([!,%,&,#,#,$,^,*,?,_,~])/))) {
$('#cropEr3').show();
boolsub = false;
}
else {
$('#cropEr3').hide();
boolsub = true;
}
}
//prevent submitting
function validateSubmit() {
var chek = 0;
var crop = $('#crop').val().trim();
if (crop !== "") {
$('#cropEr2').hide();
if (boolsub) {
return true;
}
else {
return false;
}
}
else {
$('#cropEr2').show();
return false;
}
}
<form id="form1" runat="server" action="abc.html">
<table align="left" width="300" height="200">
<tbody>
<tr>
<td>Crop Name : </td>
<td><input type="text" name="crop_id" value=""size="45" id="crop" onkeyup="checkLetters(this.value);"/>
<div id="cropEr2" style="display:none;color:red">Enter crop name</div>
<div id="cropEr3" style="display:none;color:red">You cannot enter symbols or numbers, have to enter only letters.</div>
</td>
</tr>
<tr>
<td align="center">
<input class="button"type="reset" value="Clear Deatils" />
</td>
<td><input type="hidden" name="action" value="add_crop" />
<input class="button" id="submit" type="submit" value="Add Details" onclick="return validateSubmit()" />
</td>
</tr>
</tbody>
</table>
</form>
UPDATED DEMO
Essentially, I am trying to have my form clear all input fields on submit if the default values are still present. Then if there are default values still present, then the submit process is stopped. The form clears the fields on submit, but wont stop the submit button from executing like its suppose to. Please help me out on this. I wrote this myself, and still trying to figure out why it isn't working.
The jQuery Script Below:
<script type="text/javascript" >
$(document).ready(function(){
$(".forms").each(function(){
var DefaultValue = $(this).value;
$("#Form_1").submit(function(){
if ( CheckInput() == "empty" ){
return false;
}
});
function CheckInput(){
var x = '';
$(".forms").each(function(){
if ($(this).value == DefaultValue){
this.value = '';
var y = "empty";
return y;
}
x = y;
return x;
});
}
});
});
</script>
The HTML code below:
<form id="Form_1">
<table>
<tr>
<td>
<table cellpadding="2" cellspacing="3" width="500px">
<tr>
<td>
<div class="InputContainer">
<input name="FirstName" value="First Name" class="forms" type="text"required="true" ></input>
<div class="InfoBlurp">First Name<div class="InfoTip"></div></div></div>
</td>
<td>
<div class="InputContainer">
<input name="BirthDate" value="Birth Date(MM/DD/YYYY)" class="forms" type="text" required="true" ></input>
<div class="InfoBlurp">Birth Date(MM/DD/YYYY)<div class="InfoTip"></div></div></div>
</td>
<td>
<div class="InputContainer">
<input name="Email" value="Email#sample.com" validType="email" class="forms" type="text" required="true"/></input>
<div class="InfoBlurp">Email#sample.com<div class="InfoTip"></div></div></div>
</td>
</tr>
</table>
<input id="Button_1" class="topopup" type="submit" value="" style="background-color: #FFFFFF; border:none; cursor:pointer;">
</form>
Your checkInput method is not returning anything, you are returning values from the each callback function not from the CheckInput method.
$(document).ready(function () {
$(".forms").each(function () {
var DefaultValue = $(this).value;
$("#Form_1").submit(function () {
if (CheckInput() == "empty") {
return false;
}
});
function CheckInput() {
var x = '';
$(".forms").each(function () {
if ($(this).value == DefaultValue) {
this.value = '';
x = "empty";
//return false to stop further iteration of the loop
return false;
}
});
return x;
}
});
});
I have worked out how to get the alert box up but it seems to skip my other validation which is checking the other feilds, ect, any ideas as too why it is skiiping it? it would really help!
I am fairly new to Javascript and HTML so could you explain it, thank you
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
window.validateForm=function() {
var result = true;
var msg = "";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color = "red";
//result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
//result = false;
}
if (document.ExamEntry.Exam_Number.value == "") {
msg += "You must enter the exam Number \n";
document.ExamEntry.subject.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
if (document.ExamEntry.Exam_Number.value.length != 4) {
msg += "You must enter at least Four Numbers in the Exam Number \n";
document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
var Number = document.ExamEntry.Exam_Number.value
if (isNaN(document.ExamEntry.Exam_Number.value)) {
msg += "You must enter at least four numeric characters in the Exam Number feild \n";
document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
var checked = null;
var inputs = document.getElementsByName('Exam_Type');
for (var i = 0; i < inputs.length; i++) {
if (!checked) {
checked = inputs[i];
}
}
if (checked == null) {
msg += "Anything for now /n";
} else {
return confirm('You have chosen ' + checked.value + ' is this correct?');
}
if (msg == "") {
return result;
} {
alert(msg)
return false;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="Exam_Number">Exam Number</td>
<td><input type="text" name="Exam_Number"<font size="1">(Maximum characters: 4)</font> </td>
</tr>
<tr>
<table><form action="">
<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br />
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
and here is a jsfiddle
Change:
var inputs = document.getElementsByName('Exam_Type');
to
var inputs = document.getElementsByName('examtype');
It seems you picked the wrong name for the radio elements.
Your for loop was checking the radio buttons incorrectly.
Code:
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
}
}
Please find the working fiddle here http://jsfiddle.net/sDLV4/2/
I changed code here please check...
Please find the working fiddle here
http ://jsfiddle.net/sDLV4/3/
Using HTML5 constraint validation, much of your code can be dropped, see my revision below. In addition to the wrong radio button group name pointed out by Juergen Riemer, your code has the following issues:
Better use the HTML5 DOCTYPE declaration, see below
Instead of <script language="javascript" type="text/javascript"> just use <script>. The script element does not have a language attribute, and the type attribute has the value "text/javascript" by default.
Do not define your validation function on the window object, but rather as global function (as below), or preferably as a member of a namespace object.
Instead of setting the form's name attribute to "ExamEntry", rather set its id attribute and reference the form of a variable like var examForm = document.forms["ExamEntry"];
Your HTML code is not well-formed, because in your form's table, on line 79, you start another table element with another form element, both of which do not have an end tag.
Also, it's preferable to us CSS for the form layout, instead of a table.
In my revision below I'm using a Pure CSS stylesheet for styling forms, and corresponding class values in certain elements.
For more about constraint validation in general and the HTML5 constraint validation features, see this tutorial.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8" />
<title>Exam entry</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.3.0/base-min.css&pure/0.3.0/forms-min.css" />
<script>
function validateForm() {
var result = true;
var msg = "";
var checked = null;
var examForm = document.forms['ExamEntry'];
var inputs = examForm.examtype;
for (var i = 0; i < inputs.length; i++) {
if (!checked) {
checked = inputs[i];
}
}
if (!checked) {
msg += "Anything for now /n";
} else {
return confirm('You have chosen ' + checked.value + ' is this correct?');
}
if (msg == "") {
return result;
} else {
alert(msg)
return false;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form id="ExamEntry" class="pure-form pure-form-aligned" method="post" action="success.html">
<div class="pure-control-group">
<label for="exNo">Exam Number:</label>
<input id="exNo" name="Exam_Number" required="required" pattern="\d{4}" title="You must enter a 4-digit exam number" />
</div>
<div class="pure-control-group">
<label>Exam type:</label>
<label class="pure-radio"><input type="radio" name="examtype" value="GCSE" /> GCSE</label>
<label class="pure-radio"><input type="radio" name="examtype" value="A2" /> A2</label>
<label class="pure-radio"><input type="radio" name="examtype" value="AS" /> AS</label>
</div>
<div class="pure-controls">
<button type="submit" class="pure-button pure-button-primary" onclick="return validateForm();">Submit</button>
<button type="reset" class="pure-button">Reset</button>
</div>
</form>
</body>
</html>
I have two functions. The first is the one in which all the input elements will be checked to make sure they are filled correctly. Every thing works well but as the second function comes into action ( The second function 'newInput()' adds inputs ) the first function can not be applied anymore.
The debugger says the emailSec in atpositionSec = emailSec.indexOf("#"), is undefined.
Does any body know the solution??
The markup goes here:
<--!The HTML-->
<form method="post" action="" id="cms" name="cms" onSubmit="return error()">
<table>
<tbody id="myInput">
<tr>
<td>
<label>Role:<span> *</span></label>
<input type="text" name="role" id="role" value="" class="required span3" role="input" aria-required="true" />
</td>
<td>
<label>Email:<span> *</span></label>
<input type="email" name="emailSec" id="emailSec" value="" class="required span3" role="input" aria-required="true" />
</td>
<td>
<button style="height: 20px;" title='Add' onclick='newInput()'></button>
</td>
</tr>
</tbody>
<input type="hidden" name="count" id="count" vale=""/>
</table>
<input type="submit" value="Save Changes" name="submit" id="submitButton" title="Click here!" />
</form>
The First Function:
function error()
{
var emailSec = document.forms['cms']['emailSec'].value,
role = document.forms['cms']['role'].value,
atpositionSec = emailSec.indexOf("#"),
dotpositionSec = emailSec.lastIndexOf(".");
if( topicSec == '' || topicSec == null)
{
alert ("Write your Topic!");
return false;
}
else if(role == '' || role == null)
{
alert ("Enter the Role of the email owner!");
return false;
}
else if(emailSec == '' || emailSec == null || atpositionSec < 1 || dotpositionSec < atpositionSec+2 || dotpositionSec+2 >= emailSec.length)
{
alert ("Enter a valid Email!");
return false;
}
else return true;
}
The Second Function:
//The Javascript - Adding Inputs
var i = 1,
count;
function newInput()
{
document.getElementById("myInput").insertAdjacentHTML( 'beforeEnd', "<tr><td><input type='text' name='role" + i + "' id='role' value='' class='required span3' role='input' aria-required='true' /></td><td><input type='email' name='emailSec" + i + "' id='emailSec' value='' class='required span3' role='input' aria-required='true' /></td><td><button style='height: 20px;' title='Remove' onclick='del(this)'></button></td></tr>");
count = i;
document.forms["cms"]["count"].value = count;
i++;
}
// Removing Inputs
function del(field)
{
--count;
--i;
document.forms["cms"]["count"].value = count;
field.parentNode.parentNode.outerHTML = "";
}
The problem is that after the first addition, document.forms['cms']['emailSec'] becomes an array with all the elements with the name emailSec, so you would need to validate all of them individually using document.forms['cms']['emailSec'][i].
To save you some trouble, you could use the pattern attribute of the input elements in html5 to do this automatically. Furthermore, you could use something like <input type="email" required /> which I think will do almost all the work for you.