Click here to Skip to main content
15,918,596 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello,

I'm using the "gen_validatorv4" form validiation method to validiate form values. However, I'm making a tiny calculator in Javascript, in which I don't submit form, I press on a button and the calculated values appear in a box whtout the form being submitted.

The problem is, that this form validiator apparently only comes into action when the onsubmit event is trigerred. Is there a way to get the form validiated without trigerring onsubmit?

Please help!

Thanks :)
Posted
Comments
adriancs 2-May-13 8:57am    
For example? what do you want to validate?
Prasad Khandekar 2-May-13 9:10am    
Have a look at (http://www.asynccontrols.com/)

HTML
<head>
    <script type="text/javascript">
        function validateData() {
            try {
                var data1 = document.getElementById("txt1").value;
                if (data1 == "submit") {
                    document.getElementById("Form1").submit();
                }
                else {
                    document.getElementById("div1").innerHTML = "You have said " + data1;
                }
            }
            catch (err) {
                document.getElementById("div1").innerHTML = err.Message;
            }
        }
    </script>
</head>
<body>
    <form id="Form1">
        If you want to submit, type the word: submit <br />
        <input id="Text1" name="txt1" type="text" />
        <div id="div2"></div>
        <input type="button"  önclick="javascript:validateData();" value="Validate Text" />";
    </form>
</body>
 
Share this answer
 
v6
On a different note here is a simple calculator
HTML
<!DOCTYPE html>
<html>
	<head>
		<title>Simple Calculator</title>
		<style type="text/css">
			#cntr {
				border: 1px solid black;
				display: inline-block;
				position: absolute;
				font-size: 50px;
			}
			button {
				width: 2em;
				font-size: 50px;
			}
		</style>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript">
			var d;
			var val1 = 0;
			var val = 0;
			var op = '';
			$(document).ready(function() {
				d = document.getElementById("disp");
				var cntr = $("#cntr");
				var doc = $(document);
				var left = (doc.width() - cntr.width()) / 2;
				var top = (doc.height() - cntr.height()) / 2;
				left=(left>=0)?left:-left;
				top=(top>=0)?top:-top;
				cntr.css("left", parseInt(left) + "px");
				cntr.css("top", parseInt(top) + "px");
			});
			function numhandler(id) {
				if (d.value == "0") {
					if (id == -1) {
						if (d.value.indexOf('.') == -1)
							d.value += '.';
					} else
						d.value = id;
				} else {
					if (id == -1) {
						if (d.value.indexOf('.') == -1)
							d.value += '.';
					} else
						d.value += id;
				}
				val = parseFloat(d.value);
			}

			function ophandler(id) {
				val1 = val;
				val = 0;
				op = id;
				d.value = 0;
			}

			function eqhandler() {
				if (op) {
					switch(op) {
						case"+":
							d.value = val1 + val;
							break;
						case"-":
							d.value = val1 - val;
							break;
						case"X":
							d.value = val1 * val;
							break;
						case"/":
							if (val != 0)
								d.value = val1 / val;
							else
								alert("Cannot divide by zero");
							break;
					}
					val = parseFloat(d.value);
				}
			}
		</script>
	</head>
	<body>
		<div id="cntr">
			<div style="text-align:center;font-weight:bold;font-style:italic;">Calculator</div>
			<table>
				<tr><td colspan="4"><input id="disp" style="text-align: right;font-size: 40px;" type="text" size="20" maxlength="20" disabled="disabled" value="0" /></td></tr>
				<tr>
					<td><button id="btn1" onclick="numhandler(1)">1</button></td>
					<td><button id="btn2" onclick="numhandler(2)">2</button></td>
					<td><button id="btn3" onclick="numhandler(3)">3</button></td>
					<td><button id="btnac" onclick="d.value=0;val=parseFloat(d.value);">AC</button></td>
				</tr>
				<tr>
					<td><button id="btn4" onclick="numhandler(4)">4</button></td>
					<td><button id="btn5" onclick="numhandler(5)">5</button></td>
					<td><button id="btn6" onclick="numhandler(6)">6</button></td>
					<td><button id="btnpls" onclick="ophandler('+')">+</button></td>
				</tr>
				<tr>
					<td><button id="btn7" onclick="numhandler(7)">7</button></td>
					<td><button id="btn8" onclick="numhandler(8)">8</button></td>
					<td><button id="btn9" onclick="numhandler(9)">9</button></td>
					<td><button id="btnmin" onclick="ophandler('-')">-</button></td>
				</tr>
				<tr>
					<td><button id="btn0" onclick="numhandler(0)">0</button></td>
					<td><button id="btndot" onclick="numhandler(-1)">.</button></td>
					<td><button id="btnmul" onclick="ophandler('X')">X</button></td>
					<td><button id="btndiv" onclick="ophandler('/')">/</button></td>
				</tr>
				<tr>
					<td colspan="4"><button style="width:9em" id="btnequl" onclick="eqhandler()">=</button></td>
				</tr>
			</table>
		</div>
	</body>
</html>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900