Auto deduct when barcode is scanned - Javascript, PHP - javascript

I want to create a simple form, just like at the supermarket system, when checkout at the counter, they just scan the barcode on the item, and the quantity of the item is added automatically.
The problem is, i dont know which event(onkeyup,onkeypress, etc..) to use on the textfield.
This is my simple code.
<!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>
<script>
$(document).ready(function() {
$("#acc_no").on('input', function() {
var a = document.getElementById("acc_no").value;
var b = document.getElementById("qty_dead").value;
if(b == '')
{
qty = 0;
}
else
{
var qty = parseInt(b);
qty +=1
}
document.getElementById("qty_dead").value = qty;
document.form1.acc_no.select();
})
});
</script>
</head>
<body onLoad="document.form1.acc_no.select()">
<form action="deduct_stage_two_submit.php" method="post" name="form1" id="form1">
Accession No:<br />
<input name="acc_no" type="text" id="acc_no" onkeypress="calc()" autocomplete="off"/><br />
Dead Quantity:<br />
<input name="qty_dead" type="text" id="qty_dead" onkeypress="calc()" />
<br />
Date:<br />
<input name="date_dead" type="text" id="date_dead"/><br />
Batch Date Out Stage 1:<br />
<input name="date_out" type="text" id="date_out"/><br />
<input name="submit" type="submit" value="save">
</form>
</body>
</html>

Related

Function keeps returning NaN, tuition calculator

I can't seem to get my function right.....It's a tuition calculator. At this point the residency and semesters don't matter. It's just credits * credit cost, but it keeps returning NaN.
<!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 charset="utf-8" />
<title>Greendale Community College</title>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
var numCredits = 0;
var creditCost = 302;
var instate = 0;
var outstate = 0;
var international = 0;
var tuitionCost = number;
function calcTuition(numCredits, creditCost) {
var tuitionCost = numCredits * creditCost;
document.write("Your tuition cost is $" + tuitionCost);
}
</script>
</head>
<body>
<p><center><font face="impact" font size="200" color="green">Greendale Community College</font></center></p>
<center><img src="greendale.jpg" alt="greendale" width="512" height="256"/></center>
<h1><center>Tuition Calculator</center></h1>
<form name="calculator" action="" method="get">
<h2>Semester</h2>
<h3>(choose a semester)</h3>
<input type="radio" name="semesterFall"/> Fall 2018 <br />
<input type="radio" name="semesterSpring"/> Spring 2018 <br />
<input type="radio" name="semesterSummer"/> Summer 2018 <br />
<h2>Residency</h2>
<h3>(choose your residency)</h3>
<input type="radio" name="instate" /> In-State <br />
<input type="radio" name="outstate" /> Out-of-State <br />
<input type="radio" name="international" /> International <br />
<h2>Credits</h2>
<h3>(enter your number of credits)</h3>
<input type="text" name="numCredits" size="2" onchange="calcTuition(numCredits, creditCost)"/> Credits <br />
<input type="button" name="tuition" onclick="window.alert(calcTuition(numCredits, creditCost))" value="Calculate your Tuition" />
</form>
</body>
</html>
I took a look at what's going on and it looks like you're trying to call numCredits when it is not a valid number. The exact type of it is $[object HTMLInputElement]. Addition between an HTMLInputElement and Integer is undefined behavior and as a result the value that you obtain is NaN.
One possible solution is using the document.getElementbyId method to return the actual element and then you can perform any operation on them.
PS: You should try and debug your own functions, you mentioned you're new to this but it would be great to set up some print statements or use an interactive debugger to see exactly where the problem is occurring. This way you can troubleshoot it and understand the problem at the same time.
<script type="text/javascript">
var c_amount = 302;
function calcu_Tuition(Credits, c_amount) {
//var Credits
var Credits = document.getElementById("Credits").value //it will get the value of Credits text box and be transfer to Credits variable.
var tuition = 0;
var tuition = Credits * c_amount;
document.write("Your tuition cost is $" + tuition);
}
</script>
<body>
<h2>Credits</h2>
<h3>(enter your number of credits)</h3>
<input type="text" id="Credits" size="2" onchange="calcu_Tuition(Credits, c_amount)"/> Credits <br>
<button id="tuition" onclick="calcu_Tuition(c_amount)">Calculate your Tuition"</button>
</form>
</body>

Validation of only one form

On a page with two forms I need a script that will validate only the one that is being submitted.
I have made a simple page that shows the problem
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function validateForm() {
var checks = document.getElementsByName("tjek");
var checksChecked = false;
var i = 0;
while (!checksChecked && i < checks.length) {
if (checks[i].checked) checksChecked = true;
i++;
}
if (!checksChecked) {
alert("Select something!")
return false;
}
}
</script>
</head>
<body>
<form onSubmit='return validateForm()' action="" method="get">
<input name="tjek" type="checkbox" value="" />
<input name="" type="submit" />
</form>
<form onSubmit='return validateForm()' action="" method="get">
<input name="tjek" type="checkbox" value="" />
<input name="" type="submit" />
</form>
</body>
</html>
http://jsbin.com/duqotobi/1/edit
But it doesn't work. Why?
Here goes: live demo: http://jsbin.com/duqotobi/2/edit?html,output.
The code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Demo</title>
<script>
function validateForm(caller) {
var checks = caller.querySelectorAll('input[type="checkbox"]');
for (var i=0; i<checks.length; i++) {
if (checks[i].checked == false) {
alert("Select something.");
return false;
}
else {
caller.submit();
}
}
}
</script>
</head>
<body>
<form name="firstForm" action="form_handler.php" method="get">
<input name="tjek" type="checkbox" value="" />
<input type="button" value="Send" onclick="validateForm(this.parentNode)" />
</form>
<form name="secondForm" action="form_handler.php" method="get">
<input name="tjek" type="checkbox" value="" />
<input type="button" value="Send" onclick="validateForm(this.parentNode)" />
</form>
</body>
</html>
If it's not fully self-explanatory, let me know. Do realize however, that it is tricky to give checkboxes the same names, even if it concerns different forms. Only radio inputs belonging to the same group should have the same name. This script is not critical in that aspect, but just so you know.
I rewrote it in my style of JS validation scripting; other styles are possible as well.

Checkbox ticked value to go to textbox (toggle like)

I have the following form:
<form action="" method="get">
<input name="form1" type="radio" onclick="document.forms[0].testbox.value='0.00'; "/>
<input name="form1" type="radio" onclick="document.forms[0].testbox.value='1.00'; "/>
<input name="" type="checkbox" value="" onclick="document.forms[0].testbox2.value='1.00'; "/>
<input name="testbox" type="text" value="0.00"/>
<input name="testbox2" type="text" value="0.00"/>
</form>
When radio button changed, the value in the text box also changes from 0.00 to 1.00 back to 1.00 etc..
I want to do the same thing with the tick/checkbox - when clicked value in testbox2 should become 1.00, when unclicked should go back to 0.00..
The same onclick coding not working? Ideas?
Thank you
Following comments tried this.. But not working??
<!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>
<script type="text/javascript">
function checkboxClick() {
var textbox = document.forms[0].testbox2;
textbox.value = (textbox.value == 0) ? '1.00' : '0.00';
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<form action="" method="get">
<input name="form1" type="radio" onclick="document.forms[0].testbox.value='0.00'; "/>
<input name="form1" type="radio" onclick="document.forms[0].testbox.value='1.00'; "/>
<input name="" type="checkbox" value="" onclick="document.forms[0].testbox2.value='1.00'; "/>
<input name="testbox" type="text" />
<input name="testbox2" type="text" value="0.00"/>
</form>
<body>
</body>
</html>
Forgot to add this change changes to onclick as suggested below.. Thank you.. Perfect..
You need to toggle the value between 0 and 1. The you're onclick just sets the textbox to 1.00.
<script>
function checkboxClick() {
var textbox = document.forms[0].testbox2;
textbox.value = (textbox.value == 0) ? '1.00' : '0.00';
}
</script>
<form method='get' action='#'>
<input name='testbox2' value='0.00'>
<input type='checkbox' onclick='checkboxClick()'>
</form>

Show me a Simple javascript onSubmit handler

Hello again everyone
i am working on this
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>**Form**</h2>
<form name=form method="post" action="javascript" subject=RSVP" enctype="text/plain" >
<input type=text name="first" size="20"> First Name<BR>
<input type=text name="last" size="20"> Last Name<BR>
<input type="text" name="email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
</body>
</html>
I am getting really confused here.. I need to have a onsubmit form handler and a create validation script. Ok now if I am right the validation script is the the function that needs to be placed right? sorry i know some of you guys might think this is easy but I am still learning. Now I have examples in my book of it but they only due one at a time. Is there a way you can do a onsubmit of all or does it have to be one at a time? thanks
ok I have this one i am working on..
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
<!--
function validate_form()
{
valid = true;
if ( document.contact_form.contact_first.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
return valid;
}
//-->
</script>
</head>
<body>
<h2>**Form**</h2>
<form name="contact_form" method="post" action="javascript" onSubmit="return validate_form();">
<input type=text name="contact_first" size="20"> First Name<BR>
<input type=text name="contact_last" size="20"> Last Name<BR>
<input type="text" name="contact_email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
</body>
</html>
now Can i just copy the function for the other two or how do i do the one for the email?
I've added an example here of how to do it:
http://jsfiddle.net/tomgrohl/JMkAP/
I added an onsubmit handler to the form:
<form method="post" action="javascript" enctype="text/plain" onsubmit="return valForm(this);">
And added this at the top of the page, a simple validation function:
<script type="text/javascript">
function valForm( form ){
var firstVal, lastVal, emailVal, error = '';
firstVal= form.first.value;
lastVal= form.last.value;
emailVal= form.email.value;
//OR
//firstVal= document.getElementById('first').value;
//lastVal= document.getElementById('last').value;
//emailVal= document.getElementById('email').value;
if( firstVal.length == 0){
error += 'First name is required\n';
}
if( lastVal.length == 0){
error += 'Last name is required\n';
}
if( emailVal.length == 0){
error += 'Email is required\n';
}
if( error ){
alert( error );
return false;
}
return true;
}
</script>
OnSubmit is invoked once for the form.
You can validate all the form fields in one onSubmit function, during one call to that function.
function myOnSubmitHandler(theForm) {
if (theForm.data1.value == "") {
alert("This field is empty.");
return false; // suppress form submission
} else {
return true; // A-OK, form will be submitted
}
}
in HTML:
<form method="POST" ACTION="SomethingOnServer.php"
onSubmit="return myOnSubmitHandler(this);">
I need to have a onsubmit form handler
You said it; <form onsubmit="return myValidate(this);" .... >
myValidate is your validation function that returns true|false indicating whether or not you want the form to be submitted to its handler script (which your also missing).
might I suggest you use jQuery and jQuery validate to validate your form no need to re-invent the wheel
be sure to check out validator's demo

Making editable header text, won't work!

I have a header message that is brought in from another file (message.txt), and I'm making a text box that you can edit. (I will add the part where it makes it permanent later on.)
It is changing to nothing.
(E: "This is the header!" to "")
This is the code..
<script type="text/javascript">
function change(text)
{
//document.forms["f1"].elements["ta"].value="Hi!";
//document.f1.ta.value="Hi!";
document.getElementById("msg").innerHTML='<h2 class="hmsg">'+text+'</h2>';
}
function getText()
{
return document.getElementById("ta").value;
}
function all()
{
change(getText())
}
</script>
<form name="f1">
<input type="text" value="Enter your message here!" id="ta"/>
<input type="button" value=" " onclick='all()'/>
</form>
Perhaps you can clarify what is not working as you expect. I expanded your code into a working example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Test</title>
</head>
<body>
<script type="text/javascript">
function change(text)
{
document.getElementById("msg").innerHTML='<h2 class="hmsg">'+text+'</h2>';
}
function getText()
{
return document.getElementById("ta").value;
}
function all()
{
change(getText())
}
</script>
<form action="#">
<div id="msg">
</div>
<div>
<input type="text" value="Enter your message here!" id="ta"/>
<input type="button" value=" " onclick='all()'/>
</div>
</form>
</body>
</html>
Changing the content of the <div> with id msg works here.

Categories