So I am working on this project and I use a barcode scanner that has Windows CE 5.0 as its operating system. whenever I scan the barcode, the page automatically refreshes which should not. After it scans the barcode the user should be able to enter a number for quantity and after that the user will click the preview button which will take the user to another page. I've searched the net for solutions for this problem but still does not work. Help Please. Thank you.
<?php
include("webconfig.php");
ob_start();
session_start();
if(!isset($_SESSION["USER_CODE"]) || $_SESSION["ACTIVE"] == '0')
header("location:login.php");
$barcode = $_REQUEST["barcode"];
$item_desc = $_REQUEST["item_desc"];
$price = $_REQUEST["price"];
$quantity = $_REQUEST["txtQty"];
$pricef = number_format($price, 2);
$sql = ibase_query($conn, "SELECT * FROM ITEM_MASTER WHERE ITEM_CODE = '$barcode'") or die(ibase_errmsg());
$row = ibase_fetch_assoc($sql);
$imgname = $row['IMGNAME'];
?>
<!DOCTYPE html>
<html>
<head>
<link href="docs/css/metro.css" rel="stylesheet">
<link href="docs/css/metro-icons.css" rel="stylesheet">
<link href="docs/css/docs.css" rel="stylesheet">
<script src="docs/js/jquery-2.1.3.min.js"></script>
<script src="docs/js/metro.js"></script>
<script src="docs/js/docs.js"></script>
<script src="docs/js/prettify/run_prettify.js"></script>
<script src="docs/js/ga.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.ajaxcomplete.js"></script>
<script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css">
<link rel="shortcut icon" href="_img/assigns-favicon.PNG">
<title>Albert Smith Signs - Warehouse Inventory System</title>
</head>
<body>
<div class="page-content">
<div class="align-center">
<div class="container">
<!-- Default -->
<div class="panel">
<div class="content">
<div class="grid">
<div class="row cells12">
<!-- Default -->
<div class="panel">
<div class="heading">
<span class="title">ENTER QUANTITY</span>
</div>
<div class="content">
<div class="grid">
<div class="row cells12">
<div class="cell colspan12">
<form onsubmit="return false;" method="post">
<label>Enter Quantity</label>
<br />
<div class="input-control text full-size" placeholder="Type search keyword here" data-role="input">
<!-- <input name="txtQty" class="keyboardInput" style="width: 225px;" type="text" value="1" autocomplete="off" /> -->
Scan Barcode
<input name="txtBarcode" id="ip" type="text" autofocus />
<br />
<br />
Enter Quantity
<input name="txtQty" id="next" type="text" />
</div>
<div class="cell colspan12">
<hr>
<br />
<br />
<br />
<br />
<br />
<input type="submit" onsubmit="return true;" name="btnPreview" style="width:80px; height:50px;" class="button primary rounded large-button" value="Preview" />
</div>
</div>
<?php
if(isset($_POST['btnPreview']) && $_POST['txtQty'] > 0)
{
$quantity = $_POST['txtQty'];
$barcode = $_POST['txtBarcode'];
$sql = "SELECT * FROM ITEM_MASTER WHERE ITEM_CODE = '$barcode'";
$query = ibase_query($conn, $sql) or die(ibase_errmsg());
if ($row = ibase_fetch_assoc($query))
{
$item_desc = $row['ITEM_DESC'];
$price = $row['COST'];
header("location:preview.php?barcode=$barcode&quantity=$quantity&item_desc=$item_desc&price=$price");
}
else{
echo "Barcode not found";
}
}
?>
</form>
<div class="cell colspan1">
</div>
</div>
</div>
</div>
</div><!-- panel -->
</div><!-- row cells12 -->
</div><!-- grid -->
</div><!-- content -->
</div><!-- panel -->
</div>
</div>
</div>
<script>
//$("#ip").focus();
/*var d = false;
$("#ip").on('change', function(){
//$("#ip").keyup(function(){
if(d == false){
$(".block").animate({"top": "-=50px"});
d = true;
}
var v = $(this).val();
$(".res").html("Search results for " + v );
$("#next").focus();
});*/
$("#ip").focus();
function init() {
key_count_global = 0; // Global variable
document.getElementById("ip").onkeypress = function() {
key_count_global++;
setTimeout("lookup("+key_count_global+")", 1000);//Function will be called 1 second after user types anything. Feel free to change this value.
}
}
window.onload = init; //or $(document).ready(init); - for jQuery
function lookup(key_count) {
if(key_count == key_count_global) { // The control will reach this point 1 second after user stops typing.
// Do the ajax lookup here.
$("#next").focus();
}
}
</script>
</body>
</html>
It is supposed to do that. But you can stop it this way:
<form method="post" name="form" id="form" onsubmit="return false;">
Add this to your FORM like you see above.
onsubmit="return false;"
That will stop it from refreshing the page.
Related
I use the userClicked() in code.gs of my google apps script to save some data if the user password in login.html is correct.
How can I redirect the user to page.html after saving data in line #18?
I want to redirect only if the password is correct. So I can't use simple on the login page.
Code.gs file
login.html
code.gs
function doGet(e) {
if (!e.parameters.v){
return HtmlService.createTemplateFromFile("login").evaluate();
}
else {
return HtmlService.createTemplateFromFile(e.parameters['v']).evaluate();
}
}
function userClicked(userInfo){
if (userInfo.userPassword && userInfo.userPassword == userInfo.dbPassword){
/* save page data in a google spreadsheet */
var ss = SpreadsheetApp.openById("1OU6y0Iid5r2xGcfxZpUqGzZjZo8Gz7rALkYcajCslN8"); // calls "DB_" spreadsheet
var ws = ss.getSheetByName("Sheet1");
var lastRow = ws.getRange("A1").getDataRegion().getLastRow(); // get last row of column A
var lastRow1 = lastRow + 1;
ws.getRange("A"+ lastRow1 +":D"+ lastRow1).setValues([[new Date(), userInfo.userName, userInfo.userPassword, userInfo.dbPassword ]]);
}
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function lookup(pass){
var ss = SpreadsheetApp.openById("1gBo8UrCpqtQ5Rf67HCriEDRhJeQuhvPZ1vebeTHndt0"); // calls "Therapists" spreadsheet
var ws = ss.getSheetByName("Therapists");
var data = ws.getRange(1, 4, ws.getLastRow(), 2).getValues();
var therapistsList = data.map(function(r){ return r[0];});
var passwordsList = data.map(function(r){ return r[1];});
var position = therapistsList.indexOf(pass);
if (position > -1){
return passwordsList[position];
}
else {
return 'Not Found!';
}
}
Login.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<?!= include("css"); ?>
</head>
<body>
<div class="container">
<p>Login</p>
<div class="row">
<div class="input-field col s3">
<input id="username" type="text" class="validate">
<label for="username">Username</label>
</div>
<div class="input-field col s3">
<input disabled id="dbPass" type="text" class="validate">
<label for="dbPass">Database Pass</label>
</div>
</div><!-- row -->
<div class="row">
<div class="input-field col s3">
<input id="userPass" type="text" class="validate">
<label for="userPass">Password</label>
</div>
</div><!-- row -->
<div class="row">
<button id="btn" class="waves-effect waves-light btn-small blue accent-4"><i class="material-icons left">play_arrow</i>submit</button>
</div>
</div> <!-- Container -->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!= include("js_"); ?>
</body>
</html>
add tag and surround inside all your input field and other elements that take values from user.use return attribute with your function name. Return attribute does is; if your function returns true you can direct return false, you can't redirect
Ex:
<form onsubmit="return productsvalidationform();" method="POST" action="AddProductServlet">
<div class="form-group">
<label>Product Name</label><br> <input type="text" required class="form-control" name="ProductName" placeholder="productname" id="productname">
</div>
</form>
productsvalidationform(); is the function,This function return true or false.If true we can be redirected to AddProductServlet.In the form tag, include action attribute that describes where you want to go.
I have the following problem:
I want to add textfields to my html form, send them to my script and than redirect back AND have the number of fields and their values shown.
Adding the fields via jQuery is working fine, but I can't store the values later on, because it's done via adding DIVs and they're having the same name.
Can someone point me to the right direction?
Here's the code in my index.php and in my action.php
index.php
<?php
session_start([
'cookie_lifetime' => 3600,
]);
?>
<html>
<head>
<!-- HTML5 -->
<meta charset='utf-8'>
<!-- HTML 4.x -->
<meta http-equiv='content-type' content='text/html; charset=utf-8'>
<link rel='stylesheet' href='https://unpkg.com/purecss#1.0.0/build/pure-min.css' integrity='sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w' crossorigin='anonymous'>
<link rel='stylesheet' href='style/style.css'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>
myDrop2
</title>
<script src="scripts/jquery.js"></script>
</head>
<body>
<script>
function showLoadingMessage() {
document.getElementById('content').style.display = 'none';
var message = document.createElement('div');
message.innerHTML = '<center><h1>Wird gearbeitet, bitte warten!</h1></center>';
document.body.appendChild(message);
}
function checkRemove() {
if ($('div.d1_drops').length == 1) {
$('#remove').hide();
} else {
$('#remove').show();
}
};
$(document).ready(function() {
checkRemove()
$('#add').click(function() {
$('div.d1_drops:last').after($('div.d1_drops:first').clone());
$('div.d2_drops:last').after($('div.d2_drops:first').clone());
checkRemove();
});
$('#remove').click(function() {
$('div.d1_drops:last').remove();
$('div.d2_drops:last').remove();
checkRemove();
});
});
</script>
<center>
<div id='header'>
<b>myDrop2</b>
</div>
<br><br>
<div id='content'>
<br>
<button id='add'>[ + ]</button>
<button id='remove'>[ - ]</button>
<form action=scripts/action.php class='pure-form pure-form-aligned' onsubmit='showLoadingMessage();' method='post'>
<!-- <form action=scripts/action.php class='pure-form pure-form-aligned' onsubmit='showLoadingMessage();' method='post'> -->
<div id='settings1'>
<br>
Belichtung starten
<br><br>
<label>Warten (ms) <input name='firstwait' type='number'></label>
</div>
<div id='ventile'>
<div id='ventil1'>
<input type='radio' id='v1' name='ventile' value='1' checked='checked'>
<label for='v1'><h2>1 Ventil</h2></label>
<br><br>
<div class='d1_drops'>
<label>Tropfen 1 Dauer (ms) <input name='d1_drop[]' type='number'></label>
<br><br>
<label>Warten (ms) <input name='d1_wait[]' type='number'></label>
<br><br>
</div>
</div>
<div id='ventil2'>
<input type='radio' id='v2' name='ventile' value='2'>
<label for='v2'><h2>2 Ventile</h2></label>
<br><br>
<div class='d2_drops'>
<label>Tropfen 1 Dauer (ms) <input name='d2_drop[]' type='number'></label>
<br><br>
<label>Warten (ms) <input name='d2_wait[]' type='number'></label>
<br><br>
</div>
</div>
</div>
<div id='settings2'>
Blitzen
<br><br>
<label>Warten (ms) <input name='lastwait' type='number'></label>
<br><br>
Belichtung stoppen
<br><br>
</div>
<div id='run'>
<button type='submit'>ausführen</button>
<br>
<br>
</div>
</form>
</div>
</center>
</body>
</html>
action.php
<?php
session_start();
include ('../conf.php');
$d1_array_drop = $_POST['d1_drop'];
$d1_array_wait = $_POST['d1_wait'];
$d2_array_drop = $_POST['d2_drop'];
$d2_array_wait = $_POST['d2_wait'];
(...) do stuff with the data (..)
header('Location: ' . $_SERVER['HTTP_REFERER']);
?>
You can use sessionstorage or localstorage to remember values,if you want to output values from php ,first store them in session|files|db after redirecting , you can just output the values to js
<?php
$data=$_SESSION["data"];
?><script>
var data=<?php echo json_encode($data);?>;
</script>
This is my simple html code. I included javascript inside this html file.I would like to perform validation on name like no empty field and data format validation but it is not working. Can some one please help me to get rid of this
<html>
<head>
<title>Aptitude Competition Online</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function validate()
{
var nam = document.forms[0].name.value;
if(nam == "")
{
alert("Name should be filled out");
document.getElementById("name").focus;
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<div id="header1">
<font id="font1">Aptitude Quiz</font>
</div>
<div id="bgr">
<div id="emal">
<font style="position:absolute;top:16px;left:100px;font-size:20px;">Welcome to Aptitude Quiz</font><br><br><br
<form name="form">
Name : <input type="text" name="name" id="name"><br><br>
<input name="Participate" type="button" value="Participate" onClick="validate()" >
</form>
</div>
</div>
<div id="footer">
Contact Us : gmail#name.com
</div>
</body>
</html>
You have a mistake in your HTML code. You forgot to close a <br> tag before <form name='form'>
Also, "focus" is a method, not a property. I have added that as well
Here is the corrected code.
<html>
<head>
<title>Aptitude Competition Online</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function validate() {
var nam = document.forms[0].name.value;
if (nam == "") {
alert("Name should be filled out");
document.getElementById("name").focus();
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<div id="header1">
<font id="font1">Aptitude Quiz</font>
</div>
<div id="bgr">
<div id="emal">
<font style="position:absolute;top:16px;left:100px;font-size:20px;">Welcome to Aptitude Quiz</font>
<br>
<br>
<br> <form name="form"> Name :
<input type="text" name="name" id="name">
<br>
<br>
<input name="Participate" type="button" value="Participate" onClick="validate()">
</form>
</div>
</div>
<div id="footer">
Contact Us : gmail#name.com
</div>
</body>
</html>
I need to get the value of the id attribute of an element.
javascript:
function checkPhoneZip() {
$.get(encodeURI("checkPhoneZip.aspx?mobilePhone=" + $("#mobilePhone").val() + "&postalCode=" + $("#postalCode").val()), function (data) {
$("#ajaxResults").html(data);
})
.done(function () {
var divs = $("#ajaxResults").find('div');
if (divs.length == 1) {
if ($("#ajaxResults").html() == "<div>dbEmpty<div>") {
$("#emailGetError").text("Cannot find an email address for the information entered");
}
else {
$("#user").val($("#ajaxResults").text())
$("#user").focus();
$("#emailRecovery").slideUp();
}
}
else {
var options = "";
for (i = 0; 1 < divs.length; i++) {
options += "<option value='" + $(divs[i]).attr("id") + "'>" + $(divs[i]).text() + "</option>";
}
$("#companies").html("<option selected>Select which business you are</option>" + options);
$("#companies").slideDown('fast');
}
})
.fail(function () { alert("Failed to contact Database. Please try again in a few seconds"); })
;
}
html
<%# Page Language="C#" AutoEventWireup="true" CodeFile="passwordReset.aspx.cs" Inherits="passwordReset" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="https://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
<link href='https://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Dosis:800' rel='stylesheet' type='text/css'/>
<style type="text/css">
.link{text-decoration:underline;cursor:pointer}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="getCode" runat="server">
<div>Enter the email address associated with your account and a verification code will be texted to the mobile phone number you used to sign up.</div>
<div>
<input id="user" runat="server" type="email" />
<div id="userError"></div>
</div>
<div>
<button type="button" id="getCodeButton">GET CODE</button>
</div>
<div class="link" id="forgotEmail">Forgot email address?</div>
</div>
<div id="emailRecovery" style="display:none">
<div>Enter the mobile phone number you registered with</div>
<div><input type="tel" id="mobilePhone" /></div>
<div>Enter the postal code you registered with</div>
<div><input type="text" id="postalCode" /></div>
<div>
<button type="button" id="getEmailButton">GET EMAIL</button>
</div>
<div id="emailGetError"></div>
<div id="chooseCompany" style="display:none">
<select id="companies"></select>
</div>
</div>
<div id="code" runat="server" style="display:none">
<div>A text message with a verification code has been sent to <span id="msgPhone"></span>.<br />Enter the code you received below.</div>
<div><input type="text" id="codeInput" /></div>
<div id="codeInputError"></div>
<div>
<button type="button" id="sendCodeButton">SEND CODE</button>
</div>
</div>
<div id="changePass" style="display:none">
<div>Enter new password</div>
<div><input type="text" id="pwInput1" /></div>
<div id="pwInput1Error"></div>
<div>Enter new password again</div>
<div><input type="text" id="pwInput2" /></div>
<div id="pwInput2Error"></div>
<div>
<button type="button" id="changePassButton">UPDATE</button>
</div>
</div>
<div id ="ajaxResults" style="display:none"></div>
</form>
<script type="text/javascript" src="passwordReset.js"></script>
</body>
</html>
This part, $(divs[i]).attr("id"), comes back as undefined in the debugger. I'm trying to get the value of the id attribute of each div inside of #ajaxResults, and each div does have an id attribute. Something wrong with my syntax or understanding.
You're biggest problem is your for loop is checking 1 < divs.length instead of i < divs.length.
Use this instead:
for (i = 0; i < divs.length; i++) {
options += "<option value='" + $(divs[i]).attr("id") + "'>" + $(divs[i]).text() + "</option>";
}
I have the following lines of js
var select_container = "container_"+parts[2];
var get_container = document.getElementById(select_container);
The function this is part of is failing and when I look in firebug it returns get_container as undefined. I have checked select_container is the correct value and that there isn't a duplicate id on page.
This is called by an onclick event so I can't see waiting for the page to load being an issue (the result is same no matter how long I wait).
revelent html example:
<div id="container_0">
I'm stumped!
edit
This is all the Javascript from the parent functions
/*detects links in the form editor and uses them to adjust the layout*/
window.onload = function () {
clickDetection();
} /*detect clicks on interesting links*/
function clickDetection() {
var canvas = document.getElementById("content");
var dumbLinks = canvas.getElementsByTagName("a");
for (var i = 0; i < dumbLinks.length; i++) {
dumbLinks[i].onclick = function () {
clickRoute(this);
return false
};
}
} /*reroute click behaviour to correct function*/
function clickRoute(link_object) {
var linkId = link_object.getAttribute("id");
var linkParts = linkId.split("_");
if (linkParts[1] == "delete") {
delete_route(linkParts);
} else if (linkParts[1] == "new") {
new_route(linkParts);
}
}
function delete_route(parts) {
alert(parts);
if (parts[0] == "field") {
var select_container = "container_" + parts[2];
var get_container = document.getElementById(select_container);
document.removeChild(get_container);
} else if (parts[0] == "option") {
alert("delete a option");
}
}
full (typical) html (please note repeating sections have been cut for length and other details changed for secuity):
<!DOCTYPE HTML>
<html>
<head>
<!-- determines header content -->
<meta charset="utf-8" />
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<script type="text/javascript" src="some.js"></script>
<title>Title of the document</title>
</head>
<body>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav linke</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div id="content">
<h1>screen name</h1>
<form method="post" action="#this">
<label for="summary">Select an item to edit:<br></label>
<select name="summary" id="summary">
<option value="generic">generic</option>
<option value="updated">updated</option>
</select>
<input type="submit" name="summary_select" value="Select">
</form>
<h2>screen name</h2>
<div id="container_7">
<form method="post" action="#this">
<fieldset><legend>existing segment</legend>
<p><a id="field_delete_7" href="#">Delete field</a></p>
<label for="name_7">Field Name</label><input type=text id="name_7" name="name" value="Colour"><br>
<label for="type_7">Data type expected</label>
<select name="type" id="type_7">
<option value="name" >Name</option>
<option value="email" >Email Address</option>
<!-- cut for length -->
</select>
<p>Some text</p>
<label for="option_7_0">Option Value</label><input type=text id="option_7_0" name="option_7_0" value="Red">
<a id="option_delete_7_0" href="#">Delete option</a><br>
<label for="option_7_1">Option Value</label><input type=text id="option_7_1" name="option_7_1" value="Green">
<a id="option_delete_7_1" href="#">Delete option</a><br>
<label for="option_7_2">Option Value</label><input type=text id="option_7_2" name="option_7_2" value="Blue">
<a id="option_delete_7_2" href="#">Delete option</a><br>
<a id="option_new_7" href="#">Add new option</a>
<input type="submit" name="detail" value="Finish"></fieldset></form></div>
<p><a id="field_new" href="#">Add new field</a></p>
</div>
<!-- determines footer content -->
footer content
</body>
</html>
Change this:
document.removeChild(get_container);
to this:
get_container.parentNode.removeChild(get_container);
or if the containers are a direct descendant of body, then you could do this:
document.body.removeChild(get_container);