The submit button in my html code doesnt respond to the onclick event
.please take a look at my html code and please let me know where i went wrong..
I use location.href usually, but, that too doesnt work here.
I used the function to switch between 2 URL's based on the radio button options "yes" or "No".
thanks in advance.
<html>
<head>
<style type="text/css">
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:10px;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #000000;
background:#ebf4fb;
width:500px;
height:350px;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:left;
width:140px;
float:left;
}
#stylized form{
float:left;
font-size:12px;
<!--padding:4px 2px;-->
<!-- border:solid 1px #aacfe4;-->
width:100px;
margin:2px 0 20px 10px;
}
#stylized table, th, td
{
font-size:12px;
width:400px;
border: 1px solid black;
}
th
{
width:10%;
background-color: black;
color: white;
}
#stylized button.custom-submit {
float: left;
clear: none;
margin-left: 50px;
}
</style>
<script>
$(function(){
$('myform').submit(function(event){
event.preventDefault();
window.location = $('input[type=radio]:checked').val();
});
});
</script>
</head>
<body>
<div id="stylized" class="myform">
<form id="form" name="form">
<label>New Data set :
</label>
<input type="radio" name="url" value="Inputs1.html" /> Yes
<input type="radio" name="url" value="ResultsPage.html" /> No
<br>
<label>Dataset description:
</label>
<input type ="text" name= "Dataset" size="30"><br><br><br>
<table id="Previous Datasets">
<tr>
<th>Check</th>
<th>Token Number</th>
<th>Dataset description</th>
</tr>
<tr>
<td><input type="checkbox"> </td>
<td>234567</td>
<td>MHEX North America Dataset</td>
</tr>
<tr>
<td><input type="checkbox"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"> <td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"> </td>
<td></td>
<td></td>
</tr>
</table>
<div style="text-align: center"><br>
<input type="Submit" name="submit" value="Submit" class="submit" onClick="gotoResults()">
<div class="spacer"></div>
</form>
</div>
</body>
When you have an input of type submit and you click it, the form tag is looked at to determine where to go.
You need to add the action command to the form if you are going to do it this way, and specify the new page in that action command. Something like this..
<form id="form" name="form" action="newpage.html" method="get">
This will send a get request to the server when you hit submit, and bring you to the new page with the form's elements in the query string.
On the other hand, if you decide you do want to call a javascript function and grab the form's field values on your own, just take the button out of the form tags, make it a regular button (not a submit button), and call the javascript function in the onclick like you are now.
Instead of onClick you need to use onsubmit on the form:
<form id="form" name="form" onsubmit="gotoResults(); return false;">
return false will prevent default behavior of submiting a form and go to the same page (if you don't have action).
Its working...
javascript
$(document).ready(function () {
$("#sub").click(function () {
var x = $("#select").val();
if (x == "yes") {
window.location.href = "http://www.google.com";
}
else {
window.location.href = "http://www.yahoo.com";
}
})
});
css
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:10px;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #000000;
background:#ebf4fb;
width:500px;
height:350px;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:left;
width:140px;
float:left;
}
#stylized form{
float:left;
font-size:12px;
<!--padding:4px 2px;-->
<!-- border:solid 1px #aacfe4;-->
width:100px;
margin:2px 0 20px 10px;
}
#stylized table, th, td
{
font-size:12px;
width:400px;
border: 1px solid black;
}
th
{
width:10%;
background-color: black;
color: white;
}
#stylized button.custom-submit {
float: left;
clear: none;
margin-left: 50px;
}
html
<div>
<div id="stylized" class="myform">
<form id="form" name="form" method="post">
<label>
New Data set :
</label>
<select id="select">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br>
<br>
<label>
Dataset description:
</label>
<input type="text" name="Dataset" size="30"><br>
<br>
<br>
<table id="Previous Datasets">
<tr>
<th>
Check
</th>
<th>
Token Number
</th>
<th>
Dataset description
</th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
234567
</td>
<td>
MHEX North America Dataset
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
<td>
<td>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<div style="text-align: center">
<br>
<input id="sub" type="Submit" name="submit" value="Submit" class="submit">
<div class="spacer">
</div>
</div>
</form>
</div>
</div>
Related
I have two input tags so for this example I want to have two buttons that can the change color of a text or italicize. In my function I call the button, but they are not unique. My "change color" button will also italicize and vice versa which makes sense. How can I fix this?
$(document).ready(function(){
$("input").click(function(){
$('#myForm [type="text"]').css("color", "red");
});
});
$(document).ready(function(){
$("input").click(function(){
$('#myForm [type="text"]').css("font-style", "italic");
});
});
.table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="table">
<thead>
<tr>
<th>text</th>
<th>change color</th>
<th>italicize</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="HELLO WORLD!"></td>
<td><input type="button" value="change color"></td>
<td><input type="button" value="italicize"></td>
</tr>
</tbody>
</table>
</form>
You have to use unique id or classes, I added 2 different classes to buttons italicBtn and colorBtn and changed your click event listeners
PS you don't have to use $(document).ready(function(){ twice, just place your code inside one ready function
$(document).ready(function(){
$(".colorBtn").click(function(){
$('#myForm [type="text"]').css("color", "red");
});
$(".italicBtn").click(function(){
$('#myForm [type="text"]').css("font-style", "italic");
});
});
.table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="table">
<thead>
<tr>
<th>text</th>
<th>change color</th>
<th>italicize</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="HELLO WORLD!"></td>
<td><input type="button" class="colorBtn" value="change color"></td>
<td><input type="button" class="italicBtn" value="italicize"></td>
</tr>
</tbody>
</table>
</form>
You can use a class to distinguish the button or you can use the value property. All with the keyword this that refers to the current button:
$("input").click(function(){
if (this.value == 'change color') {
$(this).css("color", "red");
} else {
$(this).css("font-style", "italic");
}
});
.table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="table">
<thead>
<tr>
<th>text</th>
<th>change color</th>
<th>italicize</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="HELLO WORLD!"></td>
<td><input type="button" value="change color"></td>
<td><input type="button" value="italicize"></td>
</tr>
</tbody>
</table>
</form>
You should add a class instead of the inline changes and toggle between the classes with jQuery.
Read more about jQuery's .toggleClass method.
Also, you should use ids to get the button click event and to change the input.
$(document).ready(function(){
$("#button-red").click(function(){
$("#input").toggleClass("red");
});
$("#button-italic").click(function(){
$("#input").toggleClass("italic");
});
});
.table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.red{
color: red;
}
.italic{
font-style: italic;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="table">
<thead>
<tr>
<th>text</th>
<th>change color</th>
<th>italicize</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="input" type="text" value="HELLO WORLD!"></td>
<td><input id="button-red" type="button" value="change color"></td>
<td><input id="button-italic" type="button" value="italicize"></td>
</tr>
</tbody>
</table>
</form>
Give each button a unique id or class and set up the event based on that particular element.
You can do the same thing with the input so that you don't have to search for it by its attribute value.
Lastly, you can set up both event handlers inside of just one document.ready.
$(document).ready(function(){
let $input = $("#input"); // Get the reference to the input just once
$("#color").click(function(){
$input.css("color", "red");
});
$("#italics").click(function(){
$input.css("font-style", "italic");
});
});
.table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="table">
<thead>
<tr>
<th>text</th>
<th>change color</th>
<th>italicize</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="input" value="HELLO WORLD!"></td>
<td><input type="button" id="color" value="change color"></td>
<td><input type="button" id="italics" value="italicize"></td>
</tr>
</tbody>
</table>
</form>
You can combine things that are alike each other by using data attributes.
$("input[data-style]").on("click", function() {
var btn = $(this);
$('#myForm [type="text"]').css(btn.data('style'), btn.data('value'));
});
.table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="table">
<thead>
<tr>
<th>text</th>
<th>change color</th>
<th>italicize</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="HELLO WORLD!"></td>
<td><input type="button" value="change color" data-style="color" data-value="red"></td>
<td><input type="button" value="italicize" data-style="font-style" data-value="italic"></td>
</tr>
</tbody>
</table>
</form>
I want to make a "contact form" popup in home page and I want that contact form should be in a light box.I am successfully displaying contact form in home page.But I am not getting light box background.I want to get a grey colour background behind the popup.Can any body help me?
window.addEventListener("load", popupContact, true);
function popupContact() {
setTimeout(popup, 3000);
}
function popup() {
document.getElementById("popupBackground").style.display = "block";
document.getElementById("popupBackground").style.width = 500 px;
document.getElementById("popupBackground").style.height = 500 px;
document.getElementById("contactPopup").style.display = "block";
}
#popupBackground {
display: block;
background-color: blue;
z-index: 1000;
}
contactPopup {
display: none;
position: absolute;
top: 250px;
}
<div id="popupBackground">
<h1>this is 3987</h1>
</div>
<div id="contactPopup">
<h2>Contact Us</h2>
<form action="https://www.SnapHost.com/captcha/send.aspx" id="ContactUsCaptchaWebForm" method="post" onsubmit="return ValidateForm(this);" target="_top">
<table border="0" cellpadding="5" cellspacing="0" width="600">
<tr>
<td><b>Name*:</b></td>
<td><input name="Name" type="text" maxlength="60" style="width:350px;" /></td>
</tr>
<tr>
<td><b>Phone number:</b></td>
<td><input name="PhoneNumber" type="text" maxlength="43" style="width:350px;" /></td>
</tr>
<tr>
<td><b>Email address*:</b></td>
<td><input name="FromEmailAddress" type="text" maxlength="60" style="width:350px;" /></td>
</tr>
<tr>
<td><b>Comments and questions*:</b></td>
<td><textarea name="Comments" rows="7" cols="40" style="width:350px;"></textarea></td>
</tr>
<table>
</form>
</div>
Your original code had a couple of issues:
1) It crashed because of a syntax error. Both times where you wrote 500 px it should have been "500px".
2) Your CSS rule for "contactPopup" was missing the # at the start to denote an element ID.
3) I'm not sure what the purpose of the separate "popupBackground" area was. It neither covered the area behind the popup, nor set it to a grey (or grey-ish) colour. And you don't need a separate background element anyway, you can just style the contactPopup element directly.
Here's a demo:
window.addEventListener("load", popupContact, true);
function popupContact() {
setTimeout(popup, 3000);
}
function popup() {
document.getElementById("contactPopup").style.display = "block";
}
#contactPopup {
display: none;
background-color: #dddddd;
padding: 5px 10px;
border-radius: 5px;
font-family: sans-serif;
color: #121212;
font-size: 0.9em;
}
input[type="text"],
textarea {
border: 1px solid #cccccc;
border-radius: 3px;
width: 350px;
}
table {
width: 600px;
border-collapse: collapse;
border: none;
}
th {
text-align: left;
vertical-align: top;
}
th,
td {
padding: 5px;
}
<div id="contactPopup">
<h2>Contact Us</h2>
<form action="https://www.SnapHost.com/captcha/send.aspx" id="ContactUsCaptchaWebForm" method="post" onsubmit="return ValidateForm(this);" target="_top">
<table>
<tr>
<th>Name*</th>
<td><input name="Name" type="text" maxlength="60" /></td>
</tr>
<tr>
<th>Phone number</th>
<td><input name="PhoneNumber" type="text" maxlength="43" /></td>
</tr>
<tr>
<th>Email address*</th>
<td><input name="FromEmailAddress" type="text" maxlength="60" /></td>
</tr>
<tr>
<th>Comments and questions</th>
<td><textarea name="Comments" rows="7" cols="40"></textarea></td>
</tr>
<table>
</form>
</div>
You also had some deprecated element properties (e.g. on your table) which should be replaced by CSS, and some inline styles on your elements which should be replaced by entries in your main CSS block. I've also made the popup look a bit nicer in general with some rounded corners and softer font and colours.
http://www.tweeturrep.com.s3-website-us-east-1.amazonaws.com/index.html
for some reason when i added style to the nav bar at the top, the links started to only work sometimes. for example, u can't click to enter your zip code until u open and close the votes modal. also if u mouseover the videos link it'll change to the pointer then back and u can't click. idk whats going on but i think it's something to do with bootstrap stuff
<div class="content" position="absolute">
<table position="absolute">
<tr>
<td class="navOPtion">
<img class ="navImage" src="navicon.png">
</td>
<td class="navOPtion" id="hideNav5">
<a style="color:white" href="index.html" id="home">home</a>
</td>
<td class="navOPtion" id="hideNav1">
<a style="color:white" href="videos.html" id="videos" >videos</a>
</td>
<td class="navOPtion" id="hideNav">
<a style="color:white" href="resume.html" target="blank" id="resume">resume</a>
</td>
<td class="navOPtion" id="hideNav2">
<a style="color:white" data-toggle="modal" data-target="#myModal1">
about
</a>
</td>
<td class="navOPtion" id="hideNav3">
<a style="color:white" href="blog.html">blog</a>
</td>
<td class="navOPtion" id="hideNav4">
<a style="color:white" data-toggle="modal" data-target="#myModal">
votes
</a>
</td>
</tr>
<tr>
<td class="title" colspan="7">
tweetUrRep
</td>
</tr>
<tr>
<td class="search" colspan="7">
<form id="find_overlords" align="center">
<form action="" id="find_overlords" type="post">
<input type="text" id="user_Zip" name="zip" placeholder="Zip code" style="width:225px; height:75px;
font-size:20pt" class="input33"></input>
<input type="image" src="search-13-128.png" name="saveForm" class="smallSearchIcon" id="saveForm" >
<br>
<input type="image" src="search-13-128.png" name="saveForm" class="searchIcon" id="saveForm" >
</form>
</td>
</tr>
</table>
the css:
table{
position:static;
margin:auto auto auto auto;
color:white;
width:100%;
}
.navImage {
height: 50px;
width: 75px;
cursor: pointer;
}
.navOPtion{
width:10%;
}
#hideNav{
display:none;
font-size: 30px;
}
#hideNav2{
display:none;
font-size: 30px;
}
#hideNav3{
display:none;
font-size: 30px;
}
#hideNav4{
display:none;
font-size: 30px;
color:white;
}
#hideNav5{
display:none;
font-size: 30px;
color:white;
}
#hideNav1{
display:none;
font-size: 30px;
color:white;
}
the javascript to display the hideNavs:
$(document).ready(function(){
$('.navImage').click(function(){
$('#hideNav').slideToggle('fast');
$('#hideNav1').slideToggle('fast');
$('#hideNav2').slideToggle('fast');
$('#hideNav3').slideToggle('fast');
$('#hideNav4').slideToggle('fast');
$('#hideNav5').slideToggle('fast');
});
});
i have created a simple signup webpage.when i reduce the zoom percentage to 25% in chrome total arrangement is lost.I tried to use percentage but it is not working properly.i tried it in many ways.but i did not get.so please help me with this i'm a beginner.
Demo of the situation #fiddle
code-html
<body onload="fill()">
<div id="page">
<div class="central">
<h2 class="signup">Sign Up...</h2>
<table border="2" class="forum" cellspacing="5px" cellpadding="10px;" >
<tr>
<td >
<input type="text" value=" first name" class="opac"/>
</td>
<td>
<input type="text" value=" last name" class="opac"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" value=" email" size="50" class="opac"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" value=" contact number" size="50"class="opac"/>
</td>
</tr>
<tr>
<td>Birthday</td>
</tr>
</table>
<table border="2" class="dates" cellpadding="4px" cellspacing="5px" >
<tr>
<td>
<select>
<option value="month">Jan</option>
<option value="month">Feb</option>
<option value="month">Mar</option>
<option value="month">Apr</option>
<option value="month">May</option>
<option value="month">Jun</option>
<option value="month">Jul</option>
<option value="month">Aug</option>
<option value="month">Sep</option>
<option value="month">Oct</option>
<option value="month">Nov</option>
<option value="month">Dec</option>
</select>
</td>
<td>
<select id="days">
<option value="day">31</option>
</select>
</td>
<td>
<select id="years">
<option value="year">2000</option>
</select>
</td>
<tr>
</table>
</div>
</div>
</body>
#page
{
position: relative;
margin:auto;
margin-top:40px;
margin-left:auto;
background-color:#b3dced;
height:900px;
width:1100px;
border-radius:10px;
padding-top: 1px;
background-image:url('limericki.png');
//background-position:top;
background-size:40px 40px;
}
.central
{
position:relative;
margin-left:60%;
margin-top:5%;
background-color: #F7F7F7;
height:400px;
width:400px;
border-radius:10px;
//border-width:40px;
padding:10px;
background-image:url('pattern.jpg');
background-position:top;
background-repeat:no-repeat;
background-size:100% 60px;
}
.forum/*form class*/
{
margin-top:20%;
margin-left:3%;
//padding:20px;
}
.opac/*opacity inside the text boxes*/
{
opacity:0.6;
height:30px;
border-radius:5px;
border-width:3px;
border-style:double;
}
.dates
{
margin-top:-1%;
margin-left:3%;
}
.dates td
{
//height:30px;
width:80px;
}
.signup
{
position:absolute;
top:1%;
left:25%;
z-index:1;
color:White;
}
Sincerely, they are already out of bounds on 100% and I'm using Chrome on Gnome (Debian). Have you considered responsiveness?
Bootstrap might be what you want, albeit it's a completely different thing.
Ok, I have looked at your CSS. The problem is this:
you fix the #page size to 1100px;
you set the margin-left of .central to 60%;
fixed (px) and proportional (%) metrics don't always go well with one another.
The easiest thing you can try is:
remove left-margin from .central;
add right: 50px to .central;
don't constraint .central so much but let it fit the content.
I apologize first for this question. I tried to fill data in sale_price section but it still no work.
R1. My sale4.php is okay. I tried it with this url and it has returns as I need.
sale4.php?q=Samsung%20Galaxy%20S4
R2. My test.php is okay. IT returned/filled with obtained value from sale4.php
But in my cash.php file it is working well. Can anyone tell what is my wrong?
Screen shot:
Explain:
test.php: send get request to sale4.php
sale4.php return sale price with $_GET var.
cash.php the applied file to obtain as test.php. My file are bellow-
// sale4.php
<?php
include('../_db/_con.php');
$m=$_GET['q'];
$que="SELECT `purchase_list`.`sale_price` , `purchase_list`.`pur_id`
FROM `purchase_list`
JOIN `item_info` ON `purchase_list`.`item_id` = `item_info`.`item_id`
WHERE `purchase_list`.`sale_price` <>0 AND `item_info`.`item_name` = '$m'";
$result = $mysqli->query($que);
$y=$result->fetch_array(MYSQLI_NUM);
echo $y['0'];
include('../_db/con_.php');
?>
//test.php
<html><head><title>hello</title></head><body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</script>
<script>
function sale_price(itemed)
{
$(document).ready(function()
{
$.get("sale4.php?q="+itemed,function(data,status)
{
$("#sale").val(data);
//alert("Data: " + data + "\nStatus: " + status);
});
});
}
</script>
<input onChange="sale_price(this.value)" value="Mobile battery">
<input id="sale" value="<?php
$msg='fdf'; print $msg; ?>">
</div>
</body>
</html>
// cash.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Epos</title>
<link rel="stylesheet" href="http://localhost/epos/css/jquery-ui.css" />
<style type="text/css">
#body{
margin:0 auto;
width:1000px;
}
#main{
font-size: 40px;
color:#039;
font-weight:bold;
font-family:"Courier New", Courier, monospace;
}
#bottom{
font-size: 12px;
color:#039;
font-weight:bold;
font-family:"Courier New", Courier, monospace;
background-color: #DDDDDD;
}
#menuWrapper {
width:1000px; /* Menu width */
height:35px;
padding-left:14px;
background-color: #fff;
border-radius: 10px; /* Menu border roundedness */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background-color:#C0C0C0;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
background-color:#C0C0C0;
color:#000;
text-decoration:none;
font-family:"Verdana", sans-serif;
font-size:16px; /* Tama�o de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
width:146px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#000; }
.menu li:hover {position:relative; z-index:2;}
.menu ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu li:hover ul.sub {
left:0;
top:35px;
background:#CBE4E4; /* Submenu background color */
padding:3px;
color:#000;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#000;
font-size:16px;
font-weight:600;
text-decoration:none;
}
.menu li:hover ul.sub li a:hover {
background: #0779F8; /* Background Color on mouseover */
color:#fff;
}
table{
margin:0 auto;
}
.h1{
font-size:72px;;
text-align:center;
}
</style>
</head>
<body>
<div id="body">
<center>
<span class="h1">EPOS</span>
</center>
<div id="menuWrapper">
<ul class="menu">
<li class="top">
<a class="top_link" href="http://localhost/epos/master/user.php"><span class="top">Epos</span></a>
<ul class="sub">
<li class="top">Admin setup</li>
<li class="top">Company setup</li>
<li class="top">Logout</li>
</ul>
<span> </span>
<li class="top">
<a class="top_link" href="http://localhost/epos/master/user.php"><span class="top">Master</span></a>
<ul class="sub">
<li class="top">User master</li>
<li class="top">Group master</li>
<li class="top">Unit master</li>
<li class="top">Category master</li>
<li class="top">Item master</li>
</ul>
<span> </span>
<li class="top"><a class="top_link" href="http://localhost/epos/?go=rent"><span class="top">Market</span></a>
<ul class="sub">
<li class="top">Cash sale</li>
<li class="top">Credit sale</li>
<li class="top">Cash purchase</li>
<li class="top">Credit purchase</li>
<li class="top">Cash purchase2</li>
<li class="top">Credit purchase2</li>
</ul>
<span> </span></li>
<li class="top"><a class="top_link" href="http://localhost/epos/?go=account"><span class="top">Account</span></a>
<span> </span></li>
<li class="top"><a class="top_link" href="?go=reports"><span class="top">Reports</span></a></li>
</ul>
</div></header>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function sale_price(itemed)
{
$(document).ready(function()
{
$.get("sale4.php?q="+itemed,function(data,status)
{
$("#sale").val(data);
//alert("Data: " + data + "\nStatus: " + status);
});
});
}
</script>
<script>
$(function() {
var items = ["Motorola Razr HD",
"iPhone 4",
"Samsung Galaxy S3",
"Motorola Razr HD",
"Mobile equipment",
"Mobile equipment",
"Samsung Galaxy S4",
"Mobile equipment",
"Mobile equipment",
"Samsung Galaxy S4",
"Mobile equipment",
"Mobile equipment",
"Sony Xperia S",
"Walton Mobile",
"Mobile",
""
];
$( "#item" ).autocomplete({
source: items
});
var dates = [
"",
"20/7/2013"
];
$( "#day" ).autocomplete({
source: dates
});
});
</script>
<style type="text/css">
.y2
{
background-color:#DDDDDD;
}
.scope
{
background-color:#CCCCCC;
padding:4px;
}
.y1
{
width:25px;
background-color:#DDDDDD;
}
.y21
{
width:55px;
background-color:#DDDDDD;
}
#txt
{
width:200px;
height:25px;
}
#input{
background-color:#666666;
color:#fff;
font-size:16px;
border:#000 1px solid;
padding:2px;
font-weight:600;
}
td
{
padding:3px;
vertical-align:top;
}
th
{
width:300px;
}
.ordel
{
width:300px;
}
</style>
<div id="hello"></div>
<form action="cash.php" method="post" name="users">
<table width="400" border="0" class="ui-widget">
<tr>
<th class="col">Date</th>
<th class="col">Customer</th>
<th class="col">Note</th>
<th class="col">Item</th>
<th class="col">Quantity</th>
<th class="col">Vat(%)</th>
</tr><input name="form" value="usr" type="hidden">
<tr>
<td><input size="10" name="date" id="day" value="20/7/2013" type="text"></td>
<td><input size="20" name="customer" id="customer" value="" type="text"></td>
<td><textarea id="txt" name="note" id="info"></textarea></td>
<td><input onChange="sale_price(this.value)" size="20" name="item_name" id="item" value="" type="text"></td>
<td><input size="10" name="qty" id="qty" value="" type="text"></td>
<td><input name="vat" size="5" id="vat" value="" type="text"></td>
</tr>
<tr>
<th align="left" colspan="3">Sale Price:
<input id="salep" name="sale" size="5" value="" type="text">
Profit:
<input disabled="disabled" name="price" size="5" value="" type="text"></th><th align="left" colspan="5">
<input name="add" value="Add new" id="input" type="submit"> <input name="go" size="4" value="" placeholder="10" id="lab" type="text">
<input name="goto" value="Go to S.N." id="input" type="submit">
<input value="Delete" name="delete" id="input" type="submit"></th>
</tr>
</table>
<table>
<tr>
<th style="width:25px;" class="scope">#</th>
<th style="width:145px;" class="scope">Date</th>
<th style="width:225px;" class="scope">Customer</th>
<th style="width:645px;" class="scope">Note</th>
<th style="width:205px;" class="scope">Item</th>
<th style="width:25px;" class="scope">Sale(each)</th>
<th style="width:25px;" class="scope">Bye(each)</th>
<th style="width:35px;" class="scope">Quantity</th>
<th style="width:25px;" class="scope">Vat</th>
</tr>
<tr>
<td class="y1">1</td>
<td class="y21">18 July 2013</td>
<td class="scope"></td>
<td class="y2"><i></i></td>
<td class="y2">Mobile</td>
<td class="y2">11111111</td>
<td class="y2">444444</td>
<td class="y2">4 Taka</td>
<td class="y2">10%</td>
</tr>
<tr>
<td class="y1">2</td>
<td class="y21">20 July 2013</td>
<td class="scope">Shiam</td>
<td class="y2"><i>asdf</i></td>
<td class="y2">Huawei Ascend G330</td>
<td class="y2">0</td>
<td class="y2">78</td>
<td class="y2">8 piece</td>
<td class="y2">10%</td>
</tr>
<tr>
<td class="y1">3</td>
<td class="y21">20 July 2013</td>
<td class="scope">Shiam</td>
<td class="y2"><i>asdf</i></td>
<td class="y2">Huawei Ascend G330</td>
<td class="y2">0</td>
<td class="y2">78</td>
<td class="y2">8 piece</td>
<td class="y2">10%</td>
</tr></table>
</form>
</div>
</body>
</html>
Add Jquery 1.10.1 and jquery UI for autocomplete 1.10.3
I think you need as so.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Epos</title>
<link rel="stylesheet" href="http://localhost/epos/css/jquery-ui.css" />
<style type="text/css">
#body{
margin:0 auto;
width:1000px;
}
#main{
font-size: 40px;
color:#039;
font-weight:bold;
font-family:"Courier New", Courier, monospace;
}
#bottom{
font-size: 12px;
color:#039;
font-weight:bold;
font-family:"Courier New", Courier, monospace;
background-color: #DDDDDD;
}
#menuWrapper {
width:1000px; /* Menu width */
height:35px;
padding-left:14px;
background-color: #fff;
border-radius: 10px; /* Menu border roundedness */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background-color:#C0C0C0;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
background-color:#C0C0C0;
color:#000;
text-decoration:none;
font-family:"Verdana", sans-serif;
font-size:16px; /* Tama�o de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
width:146px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#000; }
.menu li:hover {position:relative; z-index:2;}
.menu ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu li:hover ul.sub {
left:0;
top:35px;
background:#CBE4E4; /* Submenu background color */
padding:3px;
color:#000;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#000;
font-size:16px;
font-weight:600;
text-decoration:none;
}
.menu li:hover ul.sub li a:hover {
background: #0779F8; /* Background Color on mouseover */
color:#fff;
}
table{
margin:0 auto;
}
.h1{
font-size:72px;;
text-align:center;
}
</style>
</head>
<body>
<div id="body">
<center>
<span class="h1">EPOS</span>
</center>
<div id="menuWrapper">
<ul class="menu">
<li class="top">
<a class="top_link" href="http://localhost/epos/master/user.php"><span class="top">Epos</span></a>
<ul class="sub">
<li class="top">Admin setup</li>
<li class="top">Company setup</li>
<li class="top">Logout</li>
</ul>
<span> </span>
<li class="top">
<a class="top_link" href="http://localhost/epos/master/user.php"><span class="top">Master</span></a>
<ul class="sub">
<li class="top">User master</li>
<li class="top">Group master</li>
<li class="top">Unit master</li>
<li class="top">Category master</li>
<li class="top">Item master</li>
</ul>
<span> </span>
<li class="top"><a class="top_link" href="http://localhost/epos/?go=rent"><span class="top">Market</span></a>
<ul class="sub">
<li class="top">Cash sale</li>
<li class="top">Credit sale</li>
<li class="top">Cash purchase</li>
<li class="top">Credit purchase</li>
<li class="top">Cash purchase2</li>
<li class="top">Credit purchase2</li>
</ul>
<span> </span></li>
<li class="top"><a class="top_link" href="http://localhost/epos/?go=account"><span class="top">Account</span></a>
<span> </span></li>
<li class="top"><a class="top_link" href="?go=reports"><span class="top">Reports</span></a></li>
</ul>
</div></header>
<script src="http://localhost/epos/js/jquery-1.9.1.js"></script>
<script src="http://localhost/epos/js/jquery-ui.js"></script>
<script>
function checkform()
{ var q1 = parseInt(document.form.qty.value);
var q2 = parseInt(document.form.q.value);
if(q1 > q2)
{
alert("Maximum available quantity is "+q2);
return false;
}
else
{
document.form.submit();
}
}
function sale_price(itemed)
{
$(document).ready(function()
{
$.get("sale4.php?q="+itemed,function(data,status)
{
var prcS = data.split("|");
var prc = prcS[0];
document.getElementById("sale").value=prc;
var prc2 = prcS[1];
document.getElementById("qt").innerHTML=prc2;
});
});
}
function myformat(x) {
var partz = x.toString();
var parts = partz.split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return parts.join(".");
}
function calculated()
{
$(document).ready(function()
{
var prc = parseInt(document.getElementById("sale").value);
var vatQ = document.getElementById("vat").value;
var vatzz =vatQ*prc;
var vat= vatzz/100;
var prc1=parseInt(vat)+parseInt(prc);
var quan = document.getElementById("qty").value;
var inp = parseInt(quan)*prc1;
var vals= parseInt(inp);
var x1 = myformat(vals);
var parts1 = inp.toString();
var parts = parts1.split('.');
var x2 = parts[1] ? "." + myformat(parts[1]) : "";
var profits = x1+x2;
var elem = document.getElementById("profit");
if(inp){
elem.setAttribute("style","font-family: Tahoma; background-color: #ccc; font-weight: bold; color:#000;");
$("#profit").val(profits);
}else{
elem.setAttribute("style","font-family: Courier; background-color: red; text-decoration: blink; color:#fff;");
alert("Please enter info");
$("#profit").val("0");
}
//document.getElementById("profit").value=profits;
//alert(profits);
});
}
</script>
<script>
$(function() {
var items = ["Samsung Galaxy S4",
"Motorola Razr HD",
"iPhone 4",
"Samsung Galaxy S3",
"Motorola Razr HD",
"Mobile equipment",
"Mobile equipment",
"Samsung Galaxy S4",
"Mobile equipment",
"Mobile equipment",
"Samsung Galaxy S4",
"Mobile equipment",
"Mobile equipment",
"Sony Xperia S",
"Walton Mobile",
"Mobile",
""
];
$( "#item" ).autocomplete({
source: items
});
var dates = [
"",
"22/7/2013"
];
$( "#day" ).autocomplete({
source: dates
});
});
</script>
<style type="text/css">
.y2
{
background-color:#DDDDDD;
}
.scope
{
background-color:#CCCCCC;
padding:4px;
}
.y1
{
width:25px;
background-color:#DDDDDD;
}
.y21
{
width:55px;
background-color:#DDDDDD;
}
#txt
{
width:200px;
height:25px;
}
#txt:hover{
background-color:#999999;
border:#666666 1px solid;
padding:5px;
}
#input{
background-color:#666666;
color:#fff;
font-size:16px;
border:#000 1px solid;
padding:2px;
font-weight:600;
}
td
{
padding:3px;
vertical-align:top;
}
th
{
width:300px;
}
.ordel
{
width:300px;
}
</style>
<div id="hello"></div>
<form action="cash.php" method="post" name="form">
<table width="400" border="0" class="ui-widget">
<tr>
<th class="col">Date</th>
<th class="col">Customer</th>
<th class="col">Note</th>
<th class="col">Item</th>
<th class="col">Quantity</th>
<th class="col">Vat(%)</th>
</tr><input name="form" value="usr" type="hidden">
<tr>
<td><input size="10" name="date" id="day" value="22/7/2013" type="text"></td>
<td><input size="20" name="customer" id="customer" value="" type="text"></td>
<td><textarea onFocus="if(this.value=='n/a'){this.value=''}" id="txt" name="note" id="info">n/a</textarea></td>
<td><input onChange="sale_price(this.value)" size="20" name="item_name" id="item" value="" type="text"></td>
<td id="qt">
<input type="hidden" value="1" name="q" id="q">
<input size="10" name="qty" id="qty" value="1" type="text"></td>
<td><input onChange="" name="vat" size="5" id="vat" value="5" type="text"></td>
</tr>
<tr>
<th align="left" colspan="3">Price(each):
<input id="sale" name="sale" size="6" value="" type="text">
Total(+Vat):
<input name="price" disabled="disabled" id="profit" size="6" value="" type="text">
<input id="input" type="button" onClick="calculated()" value="Calculate"></th><th align="left" colspan="5">
<input onClick="return checkform()" name="add" value="Add new" id="input" type="submit"> <input name="go" size="4" value="" placeholder="10" id="lab" type="text">
<input name="goto" value="Go to S.N." id="input" type="submit">
<input value="Delete" name="delete" id="input" type="submit"></th>
</tr>
</table>
<table>
<tr>
<th style="width:25px;" class="scope">#</th>
<th style="width:145px;" class="scope">Date</th>
<th style="width:225px;" class="scope">Customer</th>
<th style="width:645px;" class="scope">Note</th>
<th style="width:205px;" class="scope">Item</th>
<th style="width:25px;" class="scope">Sale(each)</th>
<th style="width:25px;" class="scope">Bye(each)</th>
<th style="width:35px;" class="scope">Quantity</th>
<th style="width:25px;" class="scope">Vat</th>
</tr>
<tr>
<td class="y1">1</td>
<td class="y21">18 July 2013</td>
<td class="scope"></td>
<td class="y2"><i></i></td>
<td class="y2">Mobile</td>
<td class="y2">11111111</td>
<td class="y2">444444</td>
<td class="y2">4 Taka</td>
<td class="y2">10%</td>
</tr>
<tr>
<td class="y1">2</td>
<td class="y21">20 July 2013</td>
<td class="scope">Shiam</td>
<td class="y2"><i>asdf</i></td>
<td class="y2">Huawei Ascend G330</td>
<td class="y2">0</td>
<td class="y2">78</td>
<td class="y2">8 piece</td>
<td class="y2">10%</td>
</tr>
<tr>
<td class="y1">3</td>
<td class="y21">20 July 2013</td>
<td class="scope">Shiam</td>
<td class="y2"><i>asdf</i></td>
<td class="y2">Huawei Ascend G330</td>
<td class="y2">0</td>
<td class="y2">78</td>
<td class="y2">8 piece</td>
<td class="y2">10%</td>
</tr>
<tr>
<td class="y1">4</td>
<td class="y21">20 July 2013</td>
<td class="scope">jonson</td>
<td class="y2"><i>n/a</i></td>
<td class="y2">Motorola Razr HD</td>
<td class="y2">0</td>
<td class="y2">6000</td>
<td class="y2">2 piece</td>
<td class="y2">12%</td>
</tr>
<tr>
<td class="y1">17</td>
<td class="y21">22 July 2013</td>
<td class="scope">Shiamss</td>
<td class="y2"><i>dsadasd</i></td>
<td class="y2">Motorola Razr HD</td>
<td class="y2">0</td>
<td class="y2">8000</td>
<td class="y2">100 piece</td>
<td class="y2">5%</td>
</tr>
<tr>
<td class="y1">18</td>
<td class="y21">22 July 2013</td>
<td class="scope">Mister Don</td>
<td class="y2"><i>He is a mangow people.</i></td>
<td class="y2">Mobile equipment</td>
<td class="y2">0</td>
<td class="y2">1222</td>
<td class="y2">30 piece</td>
<td class="y2">5%</td>
</tr>
<tr>
<td class="y1">19</td>
<td class="y21">22 July 2013</td>
<td class="scope">Doen</td>
<td class="y2"><i>nothing</i></td>
<td class="y2">Sony Xperia S</td>
<td class="y2">0</td>
<td class="y2">8000</td>
<td class="y2">5 piece</td>
<td class="y2">2%</td>
</tr>
<tr>
<td class="y1">20</td>
<td class="y21">22 July 2013</td>
<td class="scope">Northern</td>
<td class="y2"><i>no need to do.</i></td>
<td class="y2">Sony Xperia S</td>
<td class="y2">0</td>
<td class="y2">8000</td>
<td class="y2">4 piece</td>
<td class="y2">5%</td>
</tr>
<tr>
<td class="y1">21</td>
<td class="y21">22 July 2013</td>
<td class="scope">Sael</td>
<td class="y2"><i>win to do</i></td>
<td class="y2">Sony Xperia S</td>
<td class="y2">0</td>
<td class="y2">4000</td>
<td class="y2">5 piece</td>
<td class="y2">5%</td>
</tr>
<tr>
<td class="y1">22</td>
<td class="y21">22 July 2013</td>
<td class="scope">Sael</td>
<td class="y2"><i>win to do</i></td>
<td class="y2">Sony Xperia S</td>
<td class="y2">0</td>
<td class="y2">4000</td>
<td class="y2">5 piece</td>
<td class="y2">5%</td>
</tr></table>
</form>
</div>
</body>
</html>