|
JavaScript - Comparing Values Using Javascript
Hello
I'm trying to compare two values and return with an answer, 2 if Value 1 is greater than Value 2, 0 if Value 2 is greater than value 1 and 1 if the two values are equal. I have a script which does this when the Compare Button is selected, however I would like to remove the button so the answer is generated when the Values ae entered The script is [CODE] <html> <head> <script type="text/javascript"> <!-- function resultH1() { var str1 = document.getElementById("TotalH1").value; var str2 = document.getElementById("TotalA1").value; if(str1 != str2) { if(str1 < str2) { document.getElementById("ans").value= "2"; } else { document.getElementById("ans").value= "0"; } } else { document.getElementById("ans").value= "1"; } } // --> </script> </head> <body> <form name = "clock" action = ""> <table border = "1"> <caption>Compare</caption> <tr><td>Value 1</td> <td><input name = "TotalH1" type = "text" /> </td></tr> <tr><td>Value 2</td> <td><input name = "TotalA1" type = "text" /> </td></tr> <tr><td>Answer</td> <td><input type=text name="ans" size="3" readonly="readonly" style="background:silver"> </td></tr> <tr><td><input type = "button" value = "Compare" onclick = "resultH1()" /></td></tr> </table> </form> </body> </html> [ICODE] Can anyone advise what I need to do to remove the button Thanks Similar TutorialsI don't know if JavaScript is the best choice for this or maybe just Java but i want to create something were I can compare a list of names and their picks with a correct list. For example lets say this is the list of peoples picks... Code: Dan Slota New York Jets Dan Slota Cincinnati Bengals Dan Slota Pittsburgh Steelers Dan Slota Denver Broncos Dan Slota Green Bay Packers Dan Slota Atlanta Falcons Dan Slota New Orleans Saints Dan Slota Seattle Seahawks Dan Slota Indianapolis Colts Dan Slota Houston Texans Dan Slota Philadelphia Eagles Dan Slota San Diego Chargers Dan Slota Chicago Bears Dan Slota New England Patriots Danielle rossi New York Jets Danielle rossi Cincinnati Bengals Danielle rossi Baltimore Ravens Danielle rossi Tennessee Titans Danielle rossi Green Bay Packers Danielle rossi Atlanta Falcons Danielle rossi New Orleans Saints Danielle rossi St. Louis Rams Danielle rossi Indianapolis Colts Danielle rossi Houston Texans Danielle rossi Philadelphia Eagles Danielle rossi San Diego Chargers Danielle rossi Chicago Bears Danielle rossi Miami Dolphins David Fleischer New York Jets David Fleischer Cincinnati Bengals David Fleischer Baltimore Ravens David Fleischer Denver Broncos David Fleischer Green Bay Packers David Fleischer Atlanta Falcons David Fleischer New Orleans Saints David Fleischer Seattle Seahawks David Fleischer Indianapolis Colts David Fleischer Oakland Raiders David Fleischer Philadelphia Eagles David Fleischer San Diego Chargers David Fleischer New York Giants David Fleischer Miami Dolphins and here is the master list of the correct picks ... Code: Master List New York Jets Master List Cleveland Browns Master List Baltimore Ravens Master List Tennessee Titans Master List Green Bay Packers Master List Atlanta Falcons Master List New Orleans Saints Master List Seattle Seahawks Master List Indianapolis Colts Master List Houston Texans Master List Philadelphia Eagles Master List San Diego Chargers Master List New York Giants Master List Miami Dolphins After the user list is compared to the master list i need it to say the results of each user for example Code: David Fleischer 8 correct Danielle Rossi 9 correct Dan Slota 5 correct . . Sam Adams 2 correct [/CODE] What would be a good way of doing this? Any help would be appreciated Thanks. Hi, I have a problem related to Javascript. 1) I have a php form in which there two text boxes. 2) User enter date in these text boxes via using a calender control. 3) Dates displayed in the textbox in this format i.e: 05-11-2009 I need to compare the dates of both text boxes, but my code is not working fine. I think i need to convert these the values of both text boxes to date format, but i am unable to do this. Can anyone please help in writing the new code. Thanks i am making a mock website where the user make their own computer by selecting items from drop down menus. then a value of the item comes up below. this works but i am having trouble adding the numbers up for the total cost. here is my code <html><head><title>build</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css"> </style></head> <body> <script type="text/javascript"> var motherboard = new Array( '74', '50', '73', '106', '269', '64', '55', '135', '47', '79', '118', '163'); var cpu = new Array( '88', '104', '168', '352'); function changeMotherboard(Mid) { var ind = document.getElementById(Mid).selectedIndex; document.getElementById("motherboardDisplay").innerHTML=motherboard[ind]; } function changeCpu(Cid) { var ind = document.getElementById(Cid).selectedIndex; document.getElementById("cpuDisplay").innerHTML=cpu[ind]; } </script> </head><body> <form> Motherboard <select id="motherboard" onChange="changeMotherboard('motherboard');"> <option value="0">Asus P5G41C-M-LX G41 DDR2+DDR3</option> <option value="1">MSI G41M-P33 </option> <option value="2">Asus P5P41T-LE </option> <option>G-B H55M-S2H</option> <option>Asus P7P55D-E-Deluxe</option> <option>Asus M2N68-AM Plus </option> <option>ASRock N68S3-UCC </option> <option>Asus M4A88TD-M-EVO-USB3</option> </select><br> </form> <div id="motherboardDisplay">Select from the list to see price</div> <form> CPU <select name="cpu" id="cpu" onChange="changeCpu('cpu');"> <option value="0">E6500</option> <option value="1">Core G6950</option> <option value="2">i3-550</option> <option>Core i7-930</option> </select> <br> </form> <div id="cpuDisplay" type = text>Select from the list to see price</div> <p> </p> <p> </body> </html> hi, (JAVASCRIT) the actual program reads and prints values from a checkbox tree and this piece of code does it. Code: dhtmlXTreeObject.prototype.getAllChecked=function(){
return this._getAllChecked("","",1);
}
dhtmlXTreeObject.prototype.getAllCheckedBranches=function(){
return this._getAllChecked("","",0);
}
dhtmlXTreeObject.prototype._getAllChecked=function(htmlNode,list,mode){
if(!htmlNode)htmlNode=this.htmlNode;
if(((mode)&&(htmlNode.checkstate==1))||((!mode)&&(htmlNode.checkstate>0))){if(list)list+=","+htmlNode.id;else list=htmlNode.id;}
var j=htmlNode.childsCount;
for(var i=0;i<j;i++)
{
list=this._getAllChecked(htmlNode.childNodes[i],list,mode);
};
if(list)return list;else return "";
};
the values are returned to alertbox. Code: <a href="javascript:void(0);" onclick="alert(tree2.getAllChecked());">Get list of checked</a><br><br> kindly help me with reading the returned values in to an array or list (but bot in alertbox) ...so that i can pass them to next JSP page. waiting for ur answer, BeanBoy ! I wasnt sure where to put this one, since its mainly javascript I thought I would put it here. I am trying to pull a value being stored in a php function (it works fine) which is echoed into an html element, and use it in a javascript function. my HTML: Code: <img id="menu_image" src="<?php echo get_php_value(); ?>" width="356" /> my javascript: Code: function get_large_image(){
var image = document.getElementById('menu_image').src;
alert(image);
}
right now the alert is giving me flie path to the current page, I need a file path to the image. When I had javascript pull a value from an input tag using the id to reference and stored the php function in the value attribute, I got this: "object HtmlElement" The final purpose of all this is to modify dynamically and HTML <a>'s href and class attribute based on a certain condition being true. apprecaite the help Hi all! I am trying to write code that does the following: 1) creates an array with 6 objects in it. 2) each object has a respective image. 3) from the 6, one object is selected as the "target" 4) all the 6 images are displayed on the screen with a hint as to which of the 6 is the target this time. 5) the user selects one of the 6 he/she thinks is the right object. 6) if the selection is right, his/her score increases by 1, and the whole process loops. The issue is I want the whole process to loop, but I want to store the users score somewhere otherwise it will get reset to 0 everytime the process loops.I've been told I could use cookies for this, but I've been reading a lot that cookies are outdated. Is there an easy way to do this without cookies? The required code is below: Code: <head>
<script language="text/javascript">
var redScore = 0;
....
targets = new Array(); // creating a new array with all the possible elements
....
fisherYates(targets); //randomizing the array
...
var theTarget = targets[0]; // selecting the element at index 0 to be the target
...
...
lots of code that is not relevant
...
...
function redClick( buttonLocation ) {
if(buttonLocation == redLocation){
redScore = redScore +1;
I need something here that will save the score and reload the page
}
}
...
...
</script>
</head>
<body>
<table>
<tr>
<td><img id="red0" onclick="redClick(0)" /></td>
<td><img id="red1" onclick="redClick(1)" /></td>
<td><img id="red2" onclick="redClick(2)" /></td>
...
...
...
</tr>
</table>
</body>
I know this is quite complicated, so any help or direction would be much appreciated. Thank you! Hi, i followed a tutorial online on how to use Javascript to calculate total price. Everything works fine, when all the dropdown select value has it's own value and does not correspond to each other. Eg : Cake Type : Round $4.00 Cake Color : Red $3.00 Cake Filling : Raspberry $4.00 So total is $11.00 The problem comes when you want to add Cake Layers and the price of Cake Color changes based on No of Layers - 1 Layer , 2 Layer and so on. Eg: Cake Layer : Layer 1 $5.00 | Layer 2 $2.50 | Layer 3 $2.50 (for color Orange) Cake Layer : Layer 1 $7.00 | Layer 2 $4.00 | Layer 3 $4.00 (for color Red) Do i have to use if and else conditional statement for every possibility? I am just a beginner. Attached below is the example code i have so far.. Code: var filling_prices= new Array();
filling_prices["None"]=0;
filling_prices["Lemon"]=5;
filling_prices["Custard"]=5;
filling_prices["Fudge"]=7;
filling_prices["Mocha"]=8;
filling_prices["Raspberry"]=10;
function getFillingPrice()
{
var cakeFillingPrice=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the select id="filling"
var selectedFilling = theForm.elements["filling"];
//set cakeFilling Price equal to value user chose
//For example filling_prices["Lemon".value] would be equal to 5
cakeFillingPrice = filling_prices[selectedFilling.value];
//finally we return cakeFillingPrice
return cakeFillingPrice;
}
This is for the calculation Code: function calculateTotal()
{
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Cake $"+cakePrice;
}
Some sample of the HTML Code: <select id="filling" name='filling' onchange="calculateTotal()">
<option value="None">Select Filling</option>
<option value="Lemon">Lemon($5)</option>
<option value="Custard">Custard($5)</option>
<option value="Fudge">Fudge($7)</option>
<option value="Mocha">Mocha($8)</option>
<option value="Raspberry">Raspberry($10)</option>
Is there a better way of simplifying this calculation method ? How do i change the price of form values based on selected values on previous dropdown. Thanks in advance. Hello folks: I've got an html table populated by a php foreach routine. One field in this table is an Input type=checkbox. The goal is to run a javascript function when the user checks the checkbox. But, since the checkbox is in a table populated by a foreach routine, I'm having some problems. Below is the applicable code for my table: <?php foreach($results as $row) { $bk_owner = $row['BookOwner']; $addrss_owner = $row['AddressOwner']; $f_name = $row['FName']; $l_name = $row['LName']; $email = $row['EmailAddress']; $d_phone = $row['DeskPhone']; $ext = $row['Ext']; $cell = $row['CellPhone']; $title = $row['Title']; echo "<tr>"; echo "<td class='a'>".$l_name ."</td>"; echo "<td class ='a'>".$f_name ."</td>"; echo "<td class ='c'>".$email ."</td>"; echo "<td class ='a'>".$d_phone ."</td>"; echo "<td class='b'>".$ext."</td>"; echo "<td class='a'>".$cell."</td>"; echo "<td class='c'>".$title."</td>"; echo "<td class='b'><input type='checkbox' id='chk_Bx' value=". $addrss_owner. " onClick='selectFunction()'></input></td>"; echo "</tr>"; } echo"</tbody>"; ?> Specifically, note this line: echo "<td class='b'><input type='checkbox' id='chk_Bx' value=". $addrss_owner. " onClick='selectFunction()'></input></td>"; the value is set to $address_owner. This value is a primary key value and will allow me to run routines related to the record chosen when the checkbox is checked. Following is the javascript code for selectFunction(): function selectFunction(){ var check = document.getElementById("chk_Bx").checked; var val = document.getElementById("chk_Bx").value; alert(val); } At this point the javascript is very simple. All I'm trying to do is pick up applicable values for the record selected. But - I believe because the table is populated through a foreach loop, the javascript alert is returning the same primary key value for every record checked (or unchecked). Also, if I alert out check, it continually returns false, even if I've checked the box and it should read true. I am assuming this is also related to the foreach table presentation. How do I grab ONLY the primary key value, or checked true/false for the applicable record? Thanks in advance: Pavilion Hi there, I am trying to build an interface to upload files and change some of the form (hidden) values depending on the file uploaded, here is where I got so far: Code: $('#buttonUpload').click(function (){
$.ajaxFileUpload({
url:'doajaxfileupload.php',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'txt',
success: function (data, status){
alert("File is uploaded,");
if(typeof(data.error) != 'undefined'){
if(data.error !=''){ alert(data.error); }
else{ alert(data.msg); }
}
document.getElementById('buttonUpload').style.color="green";
document.getElementById('isfileuploaded').value="green";
},
error: function (data, status, e){ alert(e); }
});
return false;
});
My problem is that I want doajaxfileupload.php to return a variable to javascript/change some html form value. The code works as it is for the file upload, I just need to add something for the output, any suggestion? Edit: I just noticed that some previous part of the code is still the the part that changes the color of the button depending if the file is uploaded or not. Now I want those values to change depending on what file is uploaded. Hi, I've a Javascript function where i'm sending an return value. How do i capture this return value from HTML. My javascript func is as below: Code:
function check()
{
var frm=document.forms.stream_selection
sel_num = new Array();
Parr = new Array();
for(j=1;j<1000;j++)
{
if(frm[j] != null)
{
if(!frm[j].checked)
{
frm[0].checked=false
}
else
{
Parr.push(j);
ParrStr=Parr.join(',');
alert(Parr);
}
}
}
return(ParrStr);
}
My HTML call function is as below: Code: echo "<td><center><input name=\"sstreamname\" type=\"checkbox\" onclick=\"check():return true;\"></center></td></tr></font></center></tr></font></center>"; How do i get the value of ParrStr and transfer this to next form. I'm using PHP . Thanks, Ramki. I have the following script that currently returns 4 of the same images. I can't wrap my head around how to get it to return 4 random images (out of the 7 in this example)? Also the links aren't working? --- Code: var imagenumber = 7 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images= new Array
images[1] = "image1.jpg"
images[2] = "image2.jpg"
images[3] = "image3.jpg"
images[4] = "image4.jpg"
images[5] = "image5.jpg"
images[6] = "image6.jpg"
images[7] = "image7.jpg"
var image = images[rand1]
links= new Array
links[1] = "link1.html"
links[2] = "link2.html"
links[3] = "link3.html"
links[4] = "link4.html"
links[5] = "link5.html"
links[6] = "link6.html"
links[7] = "link7.html"
var link = links[rand1]
document.write('<div id="image-1"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-2"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-3"><a href="' + link + '"><img src="' + image + '" border="0"></a></div><div id="image-4"><a href="' + link + '"><img src="' + image + '"></a></div>')
--- Any help would be greatly appreciated! I like to store into database with PHP values from Javascript. How to do this as I like to test local values from visitor. PHP Code: <script type="text/javascript"> document.write("Browser CodeName: " + navigator.appCodeName); document.write("<br /><br />"); document.write("Browser Name: " + navigator.appName); document.write("<br /><br />"); document.write("Browser Version: " + navigator.appVersion); document.write("<br /><br />"); document.write("Cookies Enabled: " + navigator.cookieEnabled); document.write("<br /><br />"); document.write("Platform: " + navigator.platform); document.write("<br /><br />"); document.write("User-agent header: " + navigator.userAgent); </script> I have the following code ... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
body {
background-color:#000;
}
#scenery {
width:964px;
height:482px;
padding:318px 0 0 316px;
margin:auto;
background-image:url('http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg');
}
</style>
</head>
<body>
<div id="scenery">
<img src="http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/DrawingPin1_Blue.png" alt="">
</div>
</body>
</html>
... in which I would like to use Javascript to control the values in the 'padding'. Code: padding:318px 0 0 316px; May I know how can I use Javascript to control that 'padding' values? Appreciate any help. Hi people, I'm a novice in javascript and have no clue how to get get the following logic through in a form. Any help will be greatly appreciated. I have searched the forums and looked at a few similar script but can't make out head and tail of it Sorry if this is a oft repeated question. Here is the form I need, the post method is email : Name (txtfield) DOB (Date) Address (txtarea) Programme (Select list) : Options : Programme1, Programme2, Programme3 Date (Select list) : options : 10/10/2009 to 12/09/2009 15/10/2009 to 16/10/2009 Venue : Mainland Harvey Waterloo Time : 9am - 12 noon 1 pm - 3 pm 3 pm - 5 pm Here is the Logic : Date : Conditions If Programme1 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable. If Programme2 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable. If Programme3 is selected then date option 15/10/2009 to 16/10/2009 should auto selected and greyed out so that user don't have to select this. Venue : Conditions If Programme = Programme1 then all the venues should be selectable. If Programme = Programme2 and date = 10/10/2009 to 12/09/2009 then all the venues should be selectable. If Programme = Programme2 and date = 15/10/2009 to 16/10/2009 then only venues Harvey and Waterloo should be selectable. If Programme = Programme3 and date = 15/10/2009 to 16/10/2009 then only venue Waterloo should be selectable.... in fact venue Waterloo should be auto selected and greyed out so that user cannot change it. Time :Conditions : Always should be default selection and greyed out If Programme = Programme1 and venue is any one of Mainland, Harvey, Waterloo then the time should default to 9 am - 12 noon. If Programme = Programme2, Date = 10/10/2009 to 12/09/2009 and venue is any one of three then, the time should default to 1 pm - 3 pm. If Programme = Programme2, Date = 15/10/2009 to 16/10/2009 and venue is one of Harvey or Waterloo then the time should default to 1 pm - 3 pm If Programme = Programme3, Date = 15/10/2009 to 16/10/2009 and venue = Waterloo then the default time should be 3 pm to 5 pm Sorry for the long post and so many conditions. I'm trying to get a hang of how to go about doing this. This looks a pretty complicated logic but if you can point me in the right direction I'm sure I will get my head around this. Thanks for having a look and thanks in advance for any help. Cheers Ok, guys. I'm new to JavaScript, so go easy. I'll be asking bunches of "dumb" questions for a while. 1st question, and the only one for now ... Say I have the following function: Code: function SwapValues(SwapVal1,SwapVal2)
{
TempSwapVal=SwapVal1;
SwapVal1=SwapVal2;
SwapVal2=TempSwapVal;
}
I don't care about the return value of the function itself, but I do need the new values of SwapVal1 and SwapVal2. In ASP when I do this, the values get returned. How do I get this to work in JS? so i have a navigation bar and instead of clicking on it to another page on the site where everything reloads again i want it to just reload the content area, so i have 5 tables of content each representing a different page and i just want it this way so i can implement something else that doesnt have anything to do with this Code: <script type="text/javascript">
var page = 1;
function setPage1()
{
page = 1;
}
function setPage2()
{
page = 2;
}
function setPage3()
{
page = 3;
}
function setPage4()
{
page = 4;
}
function setPage5()
{
page = 5;
}
function setBlank1(x)
{
if (page==1)
{
x.class="content";
}
else
{
x.class="blank";
}
}
function setBlank2(x)
{
if (page==2)
{
x.class="content";
}
else
{
x.class="blank";
}
}
function setBlank3(x)
{
if (page==3)
{
x.class="content";
}
else
{
x.class="blank";
}
}
function setBlank4(x)
{
if (page==4)
{
x.class="content";
}
else
{
x.class="blank";
}
}
function setBlank5(x)
{
if (page==5)
{
x.class="content";
}
else
{
x.class="blank";
}
}
this is my javascript so whats supposed to happen is when someone clicks a link on the nav bar it sets the page to that value so only that value is showing. i put the functions setPage1-5 in class="setPage1(this)" according to what content area they go too Code: table.blank {
display: none;
that is my blank class attribute so its not there but its loaded please ask me any questions and sugest anything im not a javascript expert or anything of that sort but ive been looking this over for a couple days now and i cant find anything online either hi I have one text box , it can have values like 1 or 1,2 or 1,225,345,21 ie multiple values so ......But now i want textbox should validate weather values entered by user are proper toString().match(/^(([0-9](,)?)*)+$/) This is code i'm using its validating correct only ,but one problem when user enter values like this inputval:1,22,34,25,645, the last comma is not validating it should through error can any one help me plz This form collects info of the customer who wishes to select add-ons that would be applied to their digital photos. Examples of add-ons: Photo makeover Add object or person Crop image Have a look at the form Once a customer selects one of the options (Photo Manipulation or Photo Restoration for example - radio buttons) and then one or more Add-ons (check boxes in the Html form), enter their details and upload a photo, they hit the submit button and it then takes them to the PayPal checkout page where the total amount is shown. (see image below) The Issue: In the PayPal page, it now shows the total amount whichever add-ons you select, however it keeps showing "Add object or person" as well as all the 5 main options (radio buttons on the form) no matter what I select. This will be an issue as I will not know exactly which add-ons the customer has selected. Can someone please help me complete the coding so that the add-ons show on the PayPal checkout page. I look forward to your reply/replies. Kind Regards Rafi p.s: Could this be a possible solution? Even if it is, can someone help by completing the code? In order to send the options/add-ons the customer selects I may need to use the onX and osX variables (Where X is a number starting with 0 and incrementing by 1 see below), These can be used to set options for the add-onsthey select. The onO is the "option name" and os0 is the "option choice". So for example: <input type="hidden" name="on0" value="Photo manipulation"> <input type="hidden" name="os0" value="Whatever add-ons the customer selects"> <input type="hidden" name="on1" value="Photo restoration"> <input type="hidden" name="os1" value="Whatever add-ons the customer selects"> hello Friends In my jsp project i am using the calendar control which selects the Birth Date of the client and on that basis it calculates the age after completion of all the fields user get registered successfully.but when registered user trying to update his date of birth his age field is blank please tell me why this happening Also please tell me the javascript function My jsp code is: Code: <%@page import="java.lang.reflect.Array"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@page import="java.util.ArrayList"%>
<%@page import="com.udhc.model.City"%>
<%@page import="com.udhc.model.User" %>
<%@page import="com.udhc.model.Country"%>
<%@page import="com.udhc.model.State"%>
<%@page import="com.udhc.config.ApplicationConstant"%>
<%@page import="org.apache.struts.Globals" %>
<%@page import="com.udhc.utility.CommanUtility"%>
<%@page import="java.util.HashMap"%>
<%@page import="com.udhc.form.UserForm"%>
<%@page import="com.udhc.utility.DateUtlity"%>
<%@page import="java.util.Calendar"%>
<jsp:include page="Header.jsp"></jsp:include>
<link type="text/css" href="css/jquery.ui.core.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.datepicker.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.theme.css" rel="stylesheet" />
<link type="text/css" href="css/calendar.css" rel="stylesheet"></link>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datepicker.js"></script>
<script type="text/javascript" language="javascript" src="js/calendar.js"></script>
<script type="text/javascript">
<%
User user= (User)session.getAttribute(ApplicationConstant.UDHC_USER_MODEL);
%>
// Array of max days in month in a year and in a leap year
function addUser()
{
if(validate())
{
document.forms[0].method = "POST";
document.forms[0].nextStep.value = "addUser";
document.forms[0].action = "User.do";
document.forms[0].submit();
}
}
function updateUser()
{
if(validate())
{
document.forms[0].method = "POST";
document.forms[0].nextStep.value = "updateUser";
document.forms[0].action = "User.do";
document.forms[0].submit();
}
}
function ClearOptions(OptionList)
{
for (x = OptionList.length; x >= 0; x = x - 1)
{
OptionList[x] = null;
}
}
function AddToOptionList(OptionList, OptionValue, OptionText)
{
OptionList[OptionList.length] = new Option(OptionText, OptionValue);
}
}
function getSecretQuestion()
{
var questionId=document.forms[0].secretQuestion.value;
if(questionId== "")
{
alert("Select Secret question");
}
else
{
$ajax({
type: "get",
url: "Register.do",
error: function(data){alert("Error");}
});
}
}
function finish()
{
var countryId = document.forms[0].country.value;
if(countryId == "")
{
alert("Please select country.");
}
else
{
$.ajax({
type: "get",
url: "Register.do",
data: "nextStep=getStateListByCountry&country="+countryId,
error: function(data) {alert("Error");},
success: function(response)
{
var stateList = document.forms[0].state;
ClearOptions(stateList);
AddToOptionList(stateList,"","Select State");
$.each($(response).find("state"), function(i, state)
{
var stateId = $(state).children("stateId").text();
var stateName = $(state).children("stateName").text();
AddToOptionList(stateList,stateId,stateName);
});
}
});
}
}
</script>
<%
ArrayList<City> cityList =(ArrayList<City>)request.getAttribute("CITY_LIST");
ArrayList<Country> countryList =(ArrayList<Country>)request.getAttribute("COUNTRY_LIST");
ArrayList<State> stateList =(ArrayList<State>)request.getAttribute("STATE_LIST");
%>
<div> </div>
<input type="hidden" name="<%=org.apache.struts.taglib.html.Constants.TOKEN_KEY %>" value="<bean:write name="<%=Globals.TRANSACTION_TOKEN_KEY%>"/>" />
<div style="float: left;">
<logic:notEmpty name="UPDATE_USER">
<a href="User.do?nextStep=userHome">Back</a>
</logic:notEmpty>
</div>
<div style="width: 700px; margin-left: 100px;" class="border">
<table class="back_img" cellspacing="5" width="100%" height="600">
<tr valign="top">
<td height="10"><h3><u>User Registration</u></h3></td>
</tr>
<tr valign="top">
<td>
<table>
<tr>
<td> </td>
</tr>
<!--<tr>
<td><b>Name:</b> </td>
<td><input type="text" name="firstName" class="textfield"/> <input type="text" name="middleName" class="textfield"/> <input type="text" name="lastName" class="textfield"/></td>
</tr>
<tr>
<td width="200"> </td>
<td> First Name Middle Name Last Name</td>
</tr>-->
<tr>
<td><span style="color:red;font-size:small;visibility: true">*</span><b>Gender:</b></td>
<td><html:radio property="gender" name="UserForm" value="<%=ApplicationConstant.GENDER_MALE %>" tabindex="1"/>Male <html:radio property="gender" name="UserForm" value="<%=ApplicationConstant.GENDER_FEMALE %>" tabindex="2"/>Female <span style="color:red;font-size:small;visibility: true">*</span>
<b>Birth Date: </b>
<input type="text" name="dateOfBirth" readonly="readonly" value="<bean:write property="dateOfBirth" name="UserForm"/>" ><a href="#" onClick="setYears(1900, 2013); showCalender(this, 'dateOfBirth');" > <img src="images/calendar.gif"></a>
<span style="color:red;font-size:small;visibility: true">*</span><b>Age: </b>
<!-- <input type="text" id='idAge' name="age" class="textfield4" ondblclick="closeCalender();calcAge();" tabindex="4" maxlength="3"></input>-->
<input type="text" id='idAge' name="age" class="textfield4" onclick="pickDate(month,day,year);" tabindex="4" maxlength="3"></input>
</td>
</tr>
<tr>
<td><span style="color:red;font-size:small;visibility: true">*</span><b>Password:</b></td>
<td><html:password name="UserForm" property="userPassword" styleClass="textfield"/></td>
</tr>
<tr>
<td><span style="color:red;font-size:small;visibility: true">*</span><b>Confirm Password:</b> </td>
<td><input type="password" name="confirmPassword" class="textfield" value="<bean:write name="UserForm" property="userPassword"/>"/></td>
</tr>
<tr>
<td><span style="color:red;font-size:small;visibility: true">*</span><b>Secret Question:</b> </td>
<td><select name="secretQuestion" class="selectfield" style="width:220px;">
<option value="">Select secret Question?</option>
<%
HashMap<String, String> qHash = CommanUtility.getQuestion();
if(session.getAttribute(ApplicationConstant.UDHC_USER_MODEL) != null)
{
//User user = (User)session.getAttribute(ApplicationConstant.UDHC_USER_MODEL);
if(user != null)
{
for(int i = 1; i <= qHash.size(); i++)
{
if((i+"").equals(user.getSecretQuestion()))
{
%>
<option value="<%=i %>" selected="selected"><%=qHash.get(i+"") %></option>
<%
}
else
{
if(qHash.get(i+"") != null)
{
%>
<option value="<%=i %>"><%=qHash.get(i+"") %></option>
<%
}
}
}
}
}
else
{
for(int i = 1; i <= qHash.size(); i++)
{
if(qHash.get(i+"") != null)
{
%>
<option value="<%=i %>"><%=qHash.get(i+"") %></option>
<%
}
}
}
%>
</select>
</td>
</tr>
<tr>
<td><span style="color:red;font-size:small;visibility: true">*</span><b>Secret Answer:</b> </td>
<td><html:text property="secretAnswer" name="UserForm" styleClass="textfield"/></td>
</tr>
<tr>
<td><b>Contact details:</b> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<table>
<tr>
<td><span style="color:red;font-size:small;visibility: true">*</span>Address 1:</td>
<td><html:text property="address1" name="UserForm" styleClass="textfield1"/></td>
</tr>
<tr>
<td>Address 2:</td>
<td><html:text property="address2" name="UserForm" styleClass="textfield1"/></td>
</tr>
</table>
<table>
<tr>
<td><span style="color:red;font-size:small;visibility: true">*</span>Country: </td>
<td>
<html:select property="country" name="UserForm" styleClass="selectfield" onchange="javascript:getStateList();">
<html:option value="">Select Country</html:option>
<html:optionsCollection name="COUNTRY_LIST" value="countryId" label="name" />
</html:select>
</td>
</tr>
<tr>
<td><span style="color:red;font-size:small;visibility: true">*</span>State:</td>
<td>
<html:select property="state" name="UserForm" styleClass="selectfield" onchange="javascript:getCityList();">
<html:option value="">Select State</html:option>
<html:optionsCollection name="STATE_LIST" value="stateId" label="name" />
</html:select>
</td>
<td><span style="color:red;font-size:small;visibility: true">*</span>City: </td>
<td>
<html:select property="cityId" name="UserForm" styleClass="selectfield">
<html:option value="">Select City</html:option>
<html:optionsCollection name="CITY_LIST" value="cityId" label="name" />
</html:select>
</td>
<td>PIN:</td>
<td><html:text property="pinCode" name="UserForm" styleClass="textfield"/></td>
</tr>
<tr>
<td>Phone: </td>
<td><html:text property="phone" name="UserForm" styleClass="textfield"/></td><td><span style="color:red;font-size:small;visibility: true">*</span>Cell:</td><td><html:text property="cellNo" name="UserForm" styleClass="textfield"/></td>
</tr>
<tr>
<td><span style="color:red;font-size:small;visibility: true">*</span>Email: </td>
<td colspan="4"><html:text property="email" name="UserForm" styleClass="textfield1"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top"><b>Other Relevant Information:</b></td>
<td>
<table>
<tr>
<td>Height:</td>
<td><html:text property="height" name="UserForm" styleClass="textfield3"/><b>Cm.</b></td>
<td>Weight:</td>
<td><html:text property="weight" name="UserForm" styleClass="textfield3"/><b>Kg</b></td>
</tr>
<tr>
<td>Blood Pressu </td>
<td><html:text property="bPSystolic" name="UserForm" styleClass="textfield4"/> <html:text property="bPDiastolic" name="UserForm" styleClass="textfield4"/><b>mmHg</b></td>
<td>Pulse rate:</td>
<td><html:text property="pulseRate" name="UserForm" styleClass="textfield3"/></td>
</tr>
</table>
</td>
</tr>
<logic:empty name="UPDATE_USER">
<tr>
<td> </td>
<td align="char" colspan="2" rowspan="2"><a href="javascript:addUser();"><img src="images/Register1.png" border="0"></img></a> <a href="index.jsp"><img src="images/Cancel1.png" border="0"></img></a></td>
</tr>
</logic:empty>
<logic:notEmpty name="UPDATE_USER">
<tr>
<td> </td>
<td align="char"><a href="javascript:updateUser();"><img src="images/update.png" border="0"></img></a> <a href="User_Home.jsp"><img src="images/Cancel1.png" border="0"></img></a></td>
</tr>
</logic:notEmpty>
</table>
</td>
</tr>
<logic:messagesPresent message="true">
<tr>
<td colspan="2" align="center">
<html:messages id="message" message="true">
<div class="error">
<bean:write name="message"/>
</div>
</html:messages>
</td>
</tr>
</logic:messagesPresent>
</div>
</table>
<table id="calenderTable">
<tbody id="calenderTableHead">
<tr>
<td colspan="4" align="center">
<select onChange="showCalenderBody(
createCalender(document.getElementById('selectYear').value,
this.selectedIndex, false));"
id="selectMonth">
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
</td>
<td colspan="2" align="center">
<select onChange="showCalenderBody(createCalender(this.value,
document.getElementById('selectMonth').selectedIndex, false));"
id="selectYear">
</select>
</td>
<td align="center">
<a href="#" onClick="closeCalender();calcAge();">
<font color="#003333" size="+1">X</font>
</a>
</td>
</tr>
</tbody>
<tbody id="calenderTableDays">
<tr style="">
<td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td>
<td>Thu</td><td>Fri</td><td>Sat</td>
</tr>
</tbody>
<tbody id="calender"></tbody>
</table>
<jsp:include page="Footer.jsp"></jsp:include>
|
|||||||