|
JavaScript - Using Barcode Input Data To Textbox And Move To Second Textbox The Focus
Hi..
I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php
error_reporting(0);
date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');
if (!$con) {
echo 'failed';
die();
}
mysql_select_db("mes", $con);
?>
<html>
<head>
<script type="text/javascript">
function ini()
{
// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;
}
</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">
<form name=barcode onsubmit = "return ini()">
<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>
</body>
</html>
Similar TutorialsHi.. I just want to know how does it happen that when I scan the barcode using barcode scanner it will automatically put on the first textbox, then the focus will go to the next textbox and on the last textbox will automatically save the data to database. here is my sample form. PHP Code: <?php error_reporting(0); date_default_timezone_set("Asia/Singapore"); //set the time zone $con = mysql_connect('localhost', 'root',''); if (!$con) { echo 'failed'; die(); } mysql_select_db("mes", $con); $sr_date =date('Y-m-d H:i:s'); $sql = "SELECT sr_number FROM receiving_materials ORDER BY sr_date DESC LIMIT 1"; $result = mysql_query($sql, $con); if (!$result) { echo 'failed'; die(); } $total = mysql_num_rows($result); if ($total <= 0) { $currentSRNum = 1; $currentYear = (int)(date('y')); $currentMonth = (int)(date('m')); $currentDay = (int)(date('d')); $currentSRYMD = substr($row['sr_number'], 0, 6); $currentYMD = date("ymd"); if ($currentYMD > $currentSRYMD) { $currentSRNum = 1; } else { $currentSRNum += 1; } } else { //------------------------------------------------------------------------------------------------------------------ // Stock Number iteration.... $row = mysql_fetch_assoc($result); $currentSRNum = (int)(substr($row['sr_number'],0,3)); $currentSRYear = (int)(substr($row['sr_number'],2,2)); $currentSRMonth = (int)(substr($row['sr_number'],0,2)); $currentSRNum = (int)(substr($row['sr_number'],6,4)); $currentYear = (int)(date('y')); $currentMonth = (int)(date('m')); $currentDay = (int)(date('d')); $currentSRYMD = substr($row['sr_number'], 0, 6); $currentYMD = date("ymd"); if ($currentYMD > $currentSRYMD) { $currentSRNum = 1; } else { $currentSRNum += 1; } } //------------------------------------------------------------------------------------------------------------------ $yearMonth = date('ymd'); $currentSR = $currentYMD . sprintf("%04d", $currentSRNum); ?> <html> <title>Receiving Materials</title> <head> <link rel="stylesheet" type="text/css" href="kanban.css" /> <style type="text/css"> #SR_date{ position: relative; font-family: Arial, Helvetica, sans-serif; font-size: .9em; margin-left: 10px; width: auto; height: auto; float: left; top : 10px; } </style> </head> <body> <form name="receiving_form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <div id="SR_date"> <label>Date :</label> <input type="text" name="sr_date" value="<?php echo $sr_date; ?>" size="16" readonly="readonly" style="border: none;"> </div> <div id="SR_number"> <label>RM# :</label> <input type="text" name="sr_number" value="<?php echo $currentSR; ?>" size="9" readonly="readonly" style="font-weight: bold; border: none;"> </div> <div id="SI_number"> <label class="LLabelRM">SI/DR# :</label> <input type="text" name="si_num" id="si_num" class="LFieldRM" value="" size="25"> <br/></br/> <label class="LLabelRM">Supplier Name :</label> <input type="text" name="s_name" id="s_name" class="LFieldRM" value="" size="25"> <br/></br/> <label class="LLabelSecRM">PO # :</label> <input type="text" name="po_num" id="po_num" class="LFieldSecRM" value="" size="25"> <label class="LLabelSecRM">Quantity :</label> <input type="text" name="qty" id="qty" class="LFieldSec1RM" value="" size="25"> <br/> <br/> <label class="LLabelSecRM">Material Code :</label> <input type="text" name="mat_code" id="mat_code" class="LFieldSecRM" value="" size="25"> <label class="LLabelSecRM">Material Desc. :</label> <input type="text" name="mat_desc" id="mat_desc" class="LFieldSec1RM" value="" size="25"> <br/></br/> <label class="LLabelSecRM">WH Code :</label> <input type="text" name="wh_code" id="wh_code" class="LFieldSecRM" value="" size="25"> <label class="LLabelSecRM">BIN Location :</label> <input type="text" name="bin_loc" id="bin_loc" class="LFieldSec1RM" value="" size="25"> </div> </form> </body> </html> Thank you In javascript normally when you call .focus() on a textbox id, it places the cursor inside the textbox. Trying the same on ipad does not place the cursor in the text field and the keypad does not pop up. How to place cursor and bring up the keypad on ipad using javascript? Any help is appreciated I'm trying to move a list of names from a textbox (jim;bill;sam;cathy to a listbox. My code so will move the name to listbox but all one line. I need the list the names in the listbox so that can click them one at a time. Please see my code. How can I modify it to fill the list one name per line? function addItem(){ var tb = $get('<%=txtWhoTo.ClientID%>'); var rightListbox = document.getElementById('<%=lstNDisplay.ClientID%>'); if(strText.length > 0){ var nlength = rightListbox.options.length; rightListbox.options[nlength] = new Option(strText, nlength, false, false); } } I don't want remove any names from the listbox till I click the "OK" button and overwrite what is in the textbox. Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be? Code: <form name="signup" action="javascript:void(0);" method="post">
<table>
<tr>
<td>Date Of Birth:</td>
<td>
<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
</tr>
<tr>
<td></td>
<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
<!--
document.signup.DOBmonth.value="MM";
document.signup.DOBday.value="DD";
document.signup.DOByear.value="YYYY";
function clearDOBmonth() { document.signup.DOBmonth.value="";}
function clearDOBday() { document.signup.DOBday.value="";}
function clearDOByear() { document.signup.DOByear.value="";}
function restoreDOBmonth()
{
if ('document.signup.DOBmonth.value = ""')
{
document.signup.DOBmonth.value = "MM";
// alert(document.signup.DOBmonth.value);
}
}
//-->
</script>
Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code: var a = document.form.textbox.value; a = blue; does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks! <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <meta http-equiv='Content-Script-Type' content='text/javascript'> <script type = 'text/javascript'> function unselectall(form) { var i=0; for(i=0;i<=15;i++) { tdname = 'invbox'+i; if (document.getElementById && document.getElementById(tdname).style) { document.getElementById(tdname).style.borderColor = '#000000'; form.selected.value = 0; } else { i=20; } } } function selectthis(form, pos) { unselectall(form); var tdname = 'inventory'; document.getElementById(tdname).style.borderColor = '#ffff00'; form.selected.value = form.position1.value; } </script> </head> <body> <form id='inventorytable' method='post' action='addflowerlight.php'> <table id='inventory' border=1> <tr> <td id = 'invbox1' ><img src = 'images/Lights/6inv.jpg' onclick="selectthis('inventorytable', 1);"><input type = 'text' id = 'position1' value='6'></td></tr></table> <input type ='text' id='selected'> <input type ='submit' value='Equip Light'> </form> </body> </html> What am I doing wrong? The onclick wont trigger. Hi is there a way to only allow a certain numeric amount to be entered into a text input? i.e, Like nothing over 20? Thanks What I want is when the button 'Total' is pressed, the total frame the pictures and frames appears in the textbox. Here is the code (sorry, it's long): <!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" /> <script language="javascript" src="jquery-1.3.2.js"></script> <title>Ivis's Picture Gallery</title> <script language="javascript"> var price1, price2, price3, price4, price5, price6, price7, price8, price9, price10; function price() { price1 = document.getElementById("price1").innerHTML=price1; price2 = document.getElementById("price2").innerHTML=price2; price3 = document.getElementById("price3").innerHTML=price3; price4 = document.getElementById("price4").innerHTML=price4; price5 = document.getElementById("price5").innerHTML=price5; price6 = document.getElementById("price6").innerHTML=price6; price7 = document.getElementById("price7").innerHTML=price7; price8 = document.getElementById("price8").innerHTML=price8; price9 = document.getElementById("price9").innerHTML=price9; price10 = document.getElementById("price10").innerHTML=price10; } function total() { var text = document.getElementById("txt1").value; text = bigImage + bigFrame; } function changeImageZebra() { $("#bigImage").hide(); $("#bigImage").attr("src", "ZooZebra.gif"); $("#bigImage").fadeIn(3000); } function changeImageTiger() { $("#bigImage").hide(); $("#bigImage").attr("src", "tiger.jpg"); $("#bigImage").fadeIn(3000); } function changeImageGraff() { $("#bigImage").hide(); $("#bigImage").attr("src", "graff.jpg"); $("#bigImage").fadeIn(3000); } function changeImageBDog() { $("#bigImage").hide(); $("#bigImage").attr("src", "boys with dog.jpg"); $("#bigImage").fadeIn(3000); } function changeImageSeal() { $("#bigImage").hide(); $("#bigImage").attr("src", "seal.jpg"); $("#bigImage").fadeIn(3000); } $(document).ready(function(){ $("#zebPic").mouseover(changeImageZebra); $("#tigPic").mouseover(changeImageTiger); $("#graffPic").mouseover(changeImageGraff); $("#bdogPic").mouseover(changeImageBDog); $("#sealPic").mouseover(changeImageSeal); }); function changeFrame1() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square.png"); $("#bigFrame").fadeIn(3000); } function changeFrame2() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square2.png"); $("#bigFrame").fadeIn(3000); } function changeFrame3() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square3.png"); $("#bigFrame").fadeIn(3000); } function changeFrame4() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square4.png"); $("#bigFrame").fadeIn(3000); } function changeFrame5() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square5.png"); $("#bigFrame").fadeIn(3000); } $(document).ready(function(){ $("#frame1").mouseover(changeFrame1); $("#frame2").mouseover(changeFrame2); $("#frame3").mouseover(changeFrame3); $("#frame4").mouseover(changeFrame4); $("#frame5").mouseover(changeFrame5); }); </script> </head> <body><h1>Frames</h1> <p> </p> <p><img src="ZooZebra.gif" id="zebPic" alt="" width="50" height="50" /><div id="price1">$100</div></p> <p><img src="tiger.jpg" id="tigPic" alt="" width="50" height="50" /><div id="price2">$110</div></p> <p><img src="graff.jpg" id="graffPic" alt="" width="50" height="50" /><div id="price3">$120</div></p> <p><img src="boys with dog.jpg" id="bdogPic" alt="" width="50" height="50" /><div id="price4">$130</div></p> <p><img src="seal.jpg" id="sealPic" alt="" width="50" height="50" /><div id="price5">$140</div></p> <p> </p> <hr /> <p> </p> <div id="sq1"><img src="square.png" id="frame1" width="100" height="100" /> Frame1</div><div id="price6">$50</div> <div id="sq2"><img src="square2.png" id="frame2" width="100" height="100" /> Frame2</div><div id="price7">$60</div> <div id="sq3"><img src="square3.png" id="frame3" width="100" height="100" /> Frame3</div><div id="price8">$70</div> <div id="sq4"><img src="square4.png" id="frame4" width="100" height="100" /> Frame4</div><div id="price9">$80</div> <div id="sq5"><img src="square5.png" id="frame5" width="100" height="100" /> Frame5</div><div id="price10">$90</div><hr /> <p> </p> <p><img src="ZooZebra.gif" name="bigImage" align="top" id="bigImage" /><img src="square.png" name="bigFrame" id="bigFrame" /></p> <p> <label> <input type="button" name="btn1" id="btn1" value="Total" onclick="total()" /> </label> <label> <input type="text" name="txt1" id="txt1" /> </label> </p> <p> <input type="button" name="btn2" id="btn2" value="To Checkout" /> </p> <p> </p> [<a href="galleryindex.htm">Back</a>] </body> </html> Hello, I am new to JavaScript and I am asking for help with this problem. I have a three textboxes in a form. Using OnBlur, I am attempting to call a function to add one to an input textbox to add 1 to the cost. As the user enters text into textbox01, the number 1 appears in the input box about cost, as the user enters text into textbox02, the input box displays 2 and the user enters text into textbox03, the input box displays 3. My JavaScript is as follows: <script type="text/javascript"> //copies contents of first textbox to second textbox function copyValue() { var textbox1 = document.getElementById("textbox1"); var textbox2 = document.getElementById("textbox2"); var textbox3 = document.getElementById("textbox3"); var txtAttendee = document.getElementById("txtAttendee"); var input_A = document.getElementById("input_A"); textbox2.value = textbox1.value; txtAttendee.value = 1; input_A.value = 1; } </script> In the form I have this: <input type="text" id="textbox3" style="background-color:yellow" onblur="copyValue();" /> I would greatly appreciate ANY help with being able to calculate costs, perhaps using the JavaScript ++/-- operators. Thank you in advance for your time and assistance. Hi! I am quite new to the world of JavaScript as I have done basic corse for it... and I have learnt that best way to understand it is to play around with it... but now I am stuck with on of the problem!! Problem: How can we assign text box input values by user to a variable and display that variable back on another element of the same HTML document(dynamically)... Conditions: The value has to be stored as a JavaScript variable only. No server-side script is to be used and has to be done locally. Please help! hi, i am using <input type = "file" id = "upload"> in my html page. i want to disable the textbox of this control so that user cannot type any file location here. user can upload file only through browse button. is there a way to disable this textbox thru javascript? thnx I have 2 text boxes on my page. When the user clicks in one text box, I would like whatever is in there to be copied to the other text box. Is this possible? I have looked into it and onClick seems like it might do it but I can't get it to work. Thanks. Hello! First off, please excuse my ignorance. I am a bit new to the coding world. I want users to be able to enter data into a textbox on my site, and the data then be placed at the end of a specific url, followed by '.html'. For example, say my website is mysite.com. If someone enters in the word "John" in the textbox and clicks the 'Submit' button, the URL should now be: mysite.com/John.html Thanks in advance! hi there, i wish there could be solution to this as I cannot figure how to do it. I would like to have an autocopy and paste data from a page to a textbox...Like if a webpage has the details like receive from: and receive to:, can this text be autocopied to a textbox on a click of a button? the text box is place on another webpage, so there are basically two webpages, 1st page is where the data to be copied is contained while the 2nd webpage is where the textbox is contained. the data to be copied on the 1st page are the contents of received from: and recieved to: like receive from:edward receive to:jacob. So with a click of a button I would like the contents receive from:edward receive to:jacob be copied and pasted on the text box from another page... I hope this sounds clear enough...sorry to be a pain... regards, verve Hi, i got a textbox with a submit button but when submit button is clicked it works but it reloads the page. is possible to submit without reload the page? thanks Hi there, I have two textboxes and I want some images to be displayed in my textboxes randomly if randomNumber==1 let textbox1/textbox2 backgroundimage change and if randomnumber==2 let textbox1 backgroundimage change again. I think I need some fixing in the following lines: document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(1.jpg)';"); Thanks for any help.. PHP Code: <script> setInterval("showimages()",500); function showimages() { var rno=Math.floor(Math.random()*2)+1; document.getElementById("box1").value=rno; if(rno==1){ document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(1.jpg)';"); document.getElementById("txtbox2").Attributes.Add("this.style.backgroundImage = 'url(2.jpg)';"); } if(rno==2){ document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(3.jpg)';"); document.getElementById("txtbox2").Attributes.Add("this.style.backgroundImage = 'url(4.jpg)';"); } } </script> <input type="text" id="txtbox1" style="position:absolute;top:200px;left:200px;height:150px"> <input type="text" id="txtbox2" style="position:absolute;top:200px;left:500px;height:150px"> <input type="text" id="box1" style="position:absolute;top:100px;left:100px;width:40px;"> <input type="button" onclick='location.reload()' style="position:absolute;top:20px;left:100px;"> how would you make a function that cheks if any text is in a text box.
hi, I am tring to display some texts in a textbox using \n to create a new line but it does not work. PHP Code: <script> document.getElementById("txtbox1").value=" this is my firstline \n This is my second line \n this is my third line" </script> <input type="text" id="txtbox1"> thanks Hi, I am having a very difficult time trying to get my text box to validate. I successfully validated my first program using prompts but now when I am using a HTML form I cannot get it to work. I have spent hours upon hours trying to get this working, any help would be greatly appreciated. Code: <html>
<head>
<title></title>
<script type="text/javascript">
function validateform()
{
var temp = document.forms["inputform"]["temperature"].value
while ((isNaN(temp)) || (temp == ""))
{
alert("Please enter a number");
return false;
}
if (parseFloat(temp) > 35)
{
alert("Wow, it's really hot!");
}
else if (parseFloat(temp) <= 35) && (parseFloat(temp) >= 18))
{
alert("It's a comfortable temperature right now");
}
else if (parseFloat(temp) < 18)
{
alert("Brrr, it's a little bit cold for my liking");
}
else
{
alert("Goodbye, and thanks for using TempReader");
}
}
</script>
</head>
<body>
<form name="inputform" method="post" action="">
<table>
<tr><td>What Is The Temperature?</td><td><input type="text" name="temperature"></td></tr>
<!-- Below is submit button that when pressed validates the form -->
<tr><td></td><td><input type="submit" value="Submit Details" onclick = validateform()></td></tr>
</table>
</form>
</body>
</html>
I would like to type something into my textbox and then press ENTER, it will execute a function. I tried onFocus, onChange and onBlur but it doesn't do what I want it to. Here's an example I use for onChange. Code: Application: <input type="text" onchange="execProg(0);"> Any comments or suggestions is greatly |
|||||||