|
JavaScript - Need Assistance On How To Store Cookies Containing User Information
Hey everyone -
I am having some trouble with creating cookies and getting them to work for an onclick event. What I am trying to do is create a button to store cookies containing all user information with an alert message and set the expiration date one day after the visit. (This is just a project I am working on to help me understand how to create cookies.) Below is the cookies code I came up with but it doesn't seem to be functioning at all. Any help would be greatly appreciated. Thanks Code: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Brooks Rogalski
December 6, 2010 -->
<title>ABC Outdoor Sports</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
<script type = "text/javascript">
/* <![CDATA[ */
//cookie button function
function cookieForm() {
var equipment = document.forms[0].equipment.value;
var pDate = document.forms[0].pickupDate.value;
var pHour = document.forms[0].pickupHours.value;
var pMin = document.forms[0].pickupMinutes.value;
var rDate = document.forms[0].returnDate.value;
var rHour = document.forms[0].returnHours.value;
var rMin = document.forms[0].returnMinutes.value;
var first = document.forms[0].firstName.value;
var last = document.forms[0].lastName.value;
var street = document.forms[0].street.value;
var city = document.forms[0].city.value;
var zip = document.forms[0].zip.value;
var DoBYear = document.forms[0].date.value;
var myDate = new Date();
myDate.setDay(myDate.getDay() +1) ;
document.cookie = "equipment" + encodeURIComponent(equipment) + "; expires=" + mydate.toUTCString();
document.cookie = "pDate" + encodeURIComponent(pDate) + "; expires=" + mydate.toUTCString();
document.cookie = "pHour" + encodeURIComponent(pHour) + "; expires=" + mydate.toUTCString();
document.cookie = "pMin" + encodeURIComponent(pMin) + "; expires=" + mydate.toUTCString();
document.cookie = "rDate" + encodeURIComponent(rDate) + "; expires=" + mydate.toUTCString();
document.cookie = "rHour" + encodeURIComponent(rHour) + "; expires=" + mydate.toUTCString();
document.cookie = "rMin" + encodeURIComponent(rMin) + "; expires=" + mydate.toUTCString();
document.cookie = "first" + encodeURIComponent(first) + "; expires=" + mydate.toUTCString();
document.cookie = "last" + encodeURIComponent(last) + "; expires=" + mydate.toUTCString();
document.cookie = "street" + encodeURIComponent(street) + "; expires=" + mydate.toUTCString();
document.cookie = "city" + encodeURIComponent(city) + "; expires=" + mydate.toUTCString();
document.cookie = "zip" + encodeURIComponent(zip) + "; expires=" + mydate.toUTCString();
document.cookie = "DoBYear" + encodeURIComponent(DoBYear) + "; expires=" + mydate.toUTCString();
/* ]] */
</script>
</head>
<body onload = "rotateImage('rImage')">
<h1> ABC Outdoor Sports Equipment </h1>
<img src="fishing.jpg" id="rImage" width="250" height="200" onmouseover = "pause=true;" onmouseout = "pause=false;">
<br/>
<br/>
<form onsubmit = "return validateForm();" action = "mailto:rogalskibf@gmail.com?subject=ABC Customer Reservation" method="post" enctype="text/plain">
<table border = "0">
<tr>
<td>
Equipment:<br/>
<select name = "equipment">
<option value="unselected">Select Equipment Type</option>
<option value = 20>Fishing Boat</option>
<option value = 15>Kayak</option>
<option value = 2>Mountain Bike</option>
<option value = 10>Scuba Gear</option>
</select>
</td>
</tr>
<tr>
<td>
Pick-up Date: <br/>
<input type = "text" name = "pickupDate" value = "(mm/dd/yyyy)"/>
</td>
<td>
Pick-up Time: <br/>
<select name = "pickupHours">
<option value="unselected">hr</option>
<option value = 7>07</option>
<option value = 8>08</option>
<option value = 9>09</option>
<option value = 10>10</option>
<option value = 11>11</option>
<option value = 12>12</option>
<option value = 13>13</option>
<option value = 14>14</option>
<option value = 15>15</option>
<option value = 16>16</option>
<option value = 17>17</option>
</select>
<select name = "pickupMinutes">
<option value="unselected">min</option>
<option value = 0>00</option>
<option value = .5>30</option>
</select>
</td>
</tr>
<tr>
<td>
Return Date: <br/>
<input type = "text" name = "returnDate" value = "(mm/dd/yyyy)"/>
</td>
<td>
Return Time: <br/>
<select name = "returnHours">
<option value="unselected">hr</option>
<option value = 7>07</option>
<option value = 8>08</option>
<option value = 9>09</option>
<option value = 10>10</option>
<option value = 11>11</option>
<option value = 12>12</option>
<option value = 13>13</option>
<option value = 14>14</option>
<option value = 15>15</option>
<option value = 16>16</option>
<option value = 17>17</option>
</select>
<select name = "returnMinutes">
<option value="unselected">min</option>
<option value = 0>00</option>
<option value = .5>30</option>
</select>
</td>
</tr>
<tr>
<td>
First Name: <br/>
<input type = "text" name = "firstName"/>
</td>
<td>
Last Name: <br/>
<input type = "text" name = "lastName"/>
</td>
</tr>
<tr>
<td>
Street: <br/>
<input type = "text" name = "street"/>
</td>
<td>
City: <br/>
<input type = "text" name = "city"/>
</td>
<td>
Zip:<br/>
<input type = "text" name = "zip" maxlength = "5"/>
</td>
</tr>
<tr>
<td>
Date of Birth: <br/>
<input type = "text" name = "date" value = "(mm/dd/yyyy)"/>
</td>
</tr>
<tr>
<td colspan = "3" align = "center">
<input type = "submit" name = "submit" value = "Submit Reservation"/>
<input type = "button" name = "cookies" value = "Store User Information"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Similar TutorialsHi, I am trying to write a small javascript program where I can call the following two functions and store information which a user enters. The problem is if I call the function a second time to add more information the array gets overwritten. info () insert (name, surname, favouriteColour) function info () { name = prompt ("Please enter your name."); surname = prompt ("Please enter your surname."); favouriteColour = prompt ("Please enter your favourite colour."); } function insert (name, surname, favouriteColour) { var info = new Array (); info.name = name; info.surname = surname; info.favouriteColour = favouriteColour; return info }; Help is really appreciated.. Hello all, I would like to implement a cookie feature on my site that when a user logs in a cookie is stored for him and the next time he comes back, he doesn't have to sign in. I have researched hotscripts and javascripts but the ones I have found have to do with the "remember me" and thats not quite what I want. I tried to manipulate it but with no luck. Any help with either posting code or an article would be greatly appreciated! Thanks a bunch-Dan I have a form where users will be making a selection in a drop down box. I need, essentially, to store two values: the first value is the actual value assigned with each drop down item (their label, basically), and the second value being a completely separate value that will change based on what they chose from the drop down box to begin with. Example: Drop down box contains selections A, B, C, D. User selects A, I need to keep the original dropdown box's A value in tact for the dropdown box's value, and then store a 1 in a hidden textbox. User selects B, a 2 is stored, etc. Both of these values will be e-mailed, hence the reason I chose a hidden textbox to store the second value. Additionally, I don't want the user to see the second value on the form itself. If there's a better way to accomplish this, please let me know. I need help using javascript cookies to save the input users will fill in to many inputs within one form. I've never worked with cookies and I was wondering if someone could help me out here - the answers I've found searching the web do not work for me. Any help is appreciated, Thanks. JS beginner here; Ok, I'm trying to manipulate the functions of Codaslider for a layout. What I need is the ability to use an image for slide dynamic slide navigation. I've solved the issue for dynamic hashing, however I'm stuck at modifying the HTML. I've tried a few things but I figure this is the easiest way... This is what I've got so far; function navigate () { var url = document.getElementById('back'); url.href = page_back(); return url; } function page_back(inward) { new Object(inward.location.hash); var rehash = inward.location.hash.match(/[^#]/); if (rehash == 1) { rehash = 5; } else if(rehash == 2) { rehash = 1; } else if(rehash == 3) { rehash = 2; } else if(rehash == 4) { rehash = 3; } else if(rehash == 5) { rehash = 4; } else if(rehash == null) { rehash = 5; } else{rehash = "Invalid URL or REFERRER"} inward.location.hash = rehash; return inward.location.href; }; Implemented here; <a href="#5" id="back" class="cross-link"> <input type="image" class="left_arrow" src= "images/leftarrow.png" onclick="navigate()" /></a> What I expect this to do is change the href value to "#1" so that Codaslider will do it's thing while I provide a stationary dynamic image for slide browsing. Anyone have any idea what i'm doing wrong? page_back works fine but navigate seems to be useless. http://jsfiddle.net/Wsekx/ Populate the following array with string data instead of numeric data, and then test it with these states as data: "Georgia", "Colorado". "Iowa", "Florida", "Kentucky", and "Arizona." How exactly do I do this? So confused after reading this I've been wanting to create a sort of user controlled cms... Something that a user controls no matter if there logged in or not, Something that works on flatfile no PHP no server side scripting. Just browser scripting. I was wondering if this was even possible to do, or if it's been done before. Thanks in advance.
So I have the jcarousel with pagination working fine. So Im happy with all of the behavior that is going on right now, it is great. My issue is I would liek to have the pagination numbers still change the class on the slide changes, But my one thing is, I want to make the pagination numbers NOT links. So they keep the same hover states and the color changes on slide change, but only the slide carousel arrows can change the slides, and the pagination is only for notification purposes. not links or able to change slides. Can this be done? my code is here http://www.cesariomendoza.com/jcarousel/
i have a selection menu here. what i would like to do is that when i select "not copy" it will not show and not copy the contents of "todo" textfield. but when i select any of the "copy text" it will show and copy the contents of the "todo" text. help plsssssssssssssssssss <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <form id="form" name="form" method="post" action=""> <p>Phone Number: <input type="text" name="Name" /> </p> <p>Location: <select name="selector" > <option>copy text</option> <option>not copy text</option> <option>copy text</option> <option>copy text</option> </select> </p> <p>To Do Today: <input type="text" name="todo" /> </p> <p> <input type="button" value="Copy" /> </p> </form> </body> </html> I am needing to use javascript to show a prompt, and when the user enters a number from 1-12 (1 for each month of the year) it adds it to a new array. Then when the user types "stop" it prints the corresponding months. I'm new to javascript so I am not quite sure how to go about doing it. This is what I have currently, but I don't think it is right. Code: <script type="text/javascript">
var month=['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var selmonth= new Array();
var month2=prompt('Which Month', '');
if (month2==1){
selmonth[0] = month[1];
var month2=prompt('Which Month', '');
}
if (month2==2){
selmonth[1] = month[2];
var month2=prompt('Which Month', '');
}
if (month2==3){
selmonth[2] = month[3];
var month2=prompt('Which Month', '');
}
if (month2==4){
selmonth[3] = month[4];
var month2=prompt('Which Month', '');
}
if (month2==5){
selmonth[4] = month[5];
var month2=prompt('Which Month', '');
}
if (month2==6){
selmonth[5] = month[6];
var month2=prompt('Which Month', '');
}
if (month2==7){
selmonth[6] = month[7];
var month2=prompt('Which Month', '');
}
if (month2==8){
selmonth[7] = month[8];
var month2=prompt('Which Month', '');
}
if (month2==9){
selmonth[8] = month[9];
var month2=prompt('Which Month', '');
}
if (month2==10){
selmonth[9] = month[10];
var month2=prompt('Which Month', '');
}
if (month2==11){
selmonth[10] = month[11];
var month2=prompt('Which Month', '');
}
if (month2==12){
selmonth[11] = month[12];
var month2=prompt('Which Month', '');
}
if (month2=='stop'){
document.write(selmonth.join(" <br> "));
}
else{
alert('Please enter a valid value');
}
</script>
It'd be great if someone is able to help me. Thanks. Hi Guys, I would like to add a confirmation to this: PHP Code: echo "<a href=\"delete.php?dir=$dir&file=$file\" onclick='return del(this, \"$id\")'><img src=\"images/delete.gif\" border=\"0\" /></a>"; However I seem to be struggling, severely! Any help would be greatly appreciated, especially if spelt out if alphabetti spaghetti. Kind Regards, Drew I wish to create an applett, which i am working on, Though I want to know if there is any way to: 1) Take screenshots of entire web page 2) Take screenshots of a certian part of the web page selected by the user with a Rectangle tool 3) Take screenshots of a certian part of the web page selected by the user with a FreeForm tool Im not asking for a full code or anything, But I just wish to know in what way could i go about this? Hello, I have a form that calculates a dollar amount based on the percentage entered by the user. Now the client wants the form to also calculate the percentage if the user enters a dollar amount. I am new to this so I am having trouble figuring out how to format the if statement. Here is the code that performs the calculations: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".TextBox").hover(function(){
$(this).toggleClass('TextBoxSelected');
},function(){
$(this).toggleClass('TextBoxSelected');
}).change(function(){
calculate();
});
});
function getFldValue(fldValue) {
return isNaN(fldValue) ? 0 : parseFloat(fldValue);
}
function calculate() {
var property_SPrice = getFldValue($('#property_SPrice').val());
var price = getFldValue($('#price').val());
var REO_sale_percentage = getFldValue($('#REO_sale_percentage').val());
var REO_sale_dollars = getFldValue($('#REO_sale_dollars').val());
var REO_sale_bonus_dollars = getFldValue($('#REO_sale_bonus_dollars').val());
var REO_sale_fixed_dollars = getFldValue($('#REO_sale_fixed_dollars').val());
var REO_sale_total_dollars = getFldValue($('#REO_sale_total_dollars').val());
var REO_list_percentage = getFldValue($('#REO_list_percentage').val());
var REO_list_dollars = getFldValue($('#REO_list_dollars').val());
var REO_list_bonus_dollars = getFldValue($('#REO_list_bonus_dollars').val());
var REO_list_fixed_dollars = getFldValue($('#REO_list_fixed_dollars').val());
var REO_list_total_dollars = getFldValue($('#REO_list_total_dollars').val());
var gr_comm_percentage = getFldValue($('#gr_comm_percentage').val());
var gr_comm_dollars = getFldValue($('#gr_comm_dollars').val());
var gr_bonus_dollars = getFldValue($('#gr_bonus_dollars').val());
var gr_fixed_dollars = getFldValue($('#gr_fixed_dollars').val());
var gr_total_dollars = getFldValue($('#gr_total_dollars').val());
$('#price').val(property_SPrice);
$('#gr_comm_percentage').val(REO_list_percentage + REO_sale_percentage);
$('#gr_comm_dollars').val(getFldValue(REO_list_dollars + REO_sale_dollars));
$('#REO_list_dollars').val(getFldValue(REO_list_percentage/100*price));
$('#REO_sale_dollars').val(getFldValue(REO_sale_percentage/100*price));
$('#gr_fixed_dollars').val(getFldValue(REO_list_fixed_dollars + REO_sale_fixed_dollars));
$('#gr_bonus_dollars').val(getFldValue(REO_list_bonus_dollars + REO_sale_bonus_dollars));
$('#gr_total_dollars').val(getFldValue(REO_sale_total_dollars + REO_list_total_dollars));
$('#REO_sale_total_dollars').val(getFldValue(REO_sale_dollars + REO_sale_fixed_dollars + REO_sale_bonus_dollars));
$('#REO_list_total_dollars').val(getFldValue(REO_list_dollars + REO_list_fixed_dollars + REO_list_bonus_dollars));
}
</script>
I now need to add: Code: $('#REO_list_percentage').val(getFldValue(REO_list_dollars/price*100));
$('#REO_sale_percentage').val(getFldValue(REO_sale_dollars/price*100));
So that if the user enters a dollar amount, the form can calculate the percentage along with all of the other calculations above. How would I write that? Thanks. Evening all, I am by no means a JS programmer, but I like to exhaust all avenues when attacking an issue. A signature fired off on a piece of javascript that came across the wire, with an odd "var unescape" inside of it. I am hoping to throw this code out there, to see if anyone has any insight on what this might be. I am assuming this is double encoded, but I am not certain. Here is the snippet of code the signature fired off from: var ibdf=unescape("%u0b0b%u0b0"+"b"); var fdofdopf="xcvb9090"; Thanks in advance for anyone willing to assist with this. Cheers, Anon I have the following regex pattern: var patt=/(&(?=(amp|apos|gt|lt|quot)|[^&])+/; It's validation to ensure that any ampersand sign is followed by amp;, apos;, gt;, lt;, or qout;. It should validate any other character except the aforementioned ampersand case. The regex checks out ok on all online regex testers. however, when i apply it to javascript via the test() method, things that return a fail in the testers return true with the js test() method, so the validation isn't working for me right now in javascript. e.g. var testStr = 'someString&'; //should fail var testStr2 = 'someString&'; //should pass however, calling patt.test(testStr); returns true when it should be returning false... Thanks for any input and help you all have to offer. I've been beating this to death for about 3 hours and I'm a little stuck on it.. I've been working on this for a few days now and I'm not sure if it could be done or not. I'm trying to do the following complex formula in Adobe Acrobat. I want to be able to calculate tInterest (Total Interest Due) = fDays (# of days) * .0002739726 (interest rate) * PrincipalAmt (principal) but ONLY IF fDays > 90 or if CheckBox1 is checked then fDays > 180, otherwise tInterest = 0. See, I'm trying to create a form where the interest is only to be calculated if 90 days has elapsed OR 180 days has elapsed if checked off.Either way, interest is to be calculated from StartDate. Is this possible? Greetings, First off - You can see my problem at psychopathgames.com I have an image stretched to fit as the page background in a DIV and the page content inside a seperate DIV. When you mouseover the links, the background changes to represent each link (as does the color of the link... but that is working fine). Trouble is, the images that are being pulled aren't fullsized as the main background is... it is being cut off by some code I can't figure out and isn't resizing. Please visit the site to see what talking about. Here is the code... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Psychopath Games</title>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position: relative; z-index:1; padding:10px;}
</style>
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: none}
</style>
<script language="JavaScript">
<!--
img0_on = new Image(100,11);
img0_on.src="images/titlesred.png";
img0_off = new Image(100,11);
img0_off.src="images/titles.png";
img1_on = new Image(130,11);
img1_on.src="images/contactred.png";
img1_off = new Image(130,11);
img1_off.src="images/contact.png";
img2_on = new Image(170,11);
img2_on.src="images/talentred.png";
img2_off = new Image(170,11);
img2_off.src="images/talent.png";
function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
-->
</script>
<script type="text/javascript">
function showIt1(imgsrc)
{
newImage = "url(images/backgroundone.jpg)";
document.getElementById('content').style.backgroundImage = newImage;
}
function showIt2(imgsrc)
{
newImage = "url(images/backgroundtwo.jpg)";
document.getElementById('content').style.backgroundImage = newImage;
}
function showIt3(imgsrc)
{
newImage = "url(images/backgroundthree.jpg)";
document.getElementById('content').style.backgroundImage = newImage;
}
function hideIt()
{
newImage = "url(images/background.jpg)";
document.getElementById('content').style.backgroundImage = newImage;
}
</script>
</head>
<body>
<div id="page-background">
<img src="images/background.jpg" width="100%" height="100%">
</div>
<div id="content">
<center>
<img src="images/title.png">
<br><br>
<br>
<table width="100%">
<tr>
<td width="40%" align="right" valign="bottom">
<a href="titles.html" onmouseover="over_image('img0'); showIt1(this.src);" onmouseout="off_image('img0'); hideIt();">
<img src="images/titles.png" border="0" name="img0">
</a>
<br>
<br>
<a href="contact.html" onmouseover="over_image('img1'); showIt2(this.src);" onmouseout="off_image('img1'); hideIt();">
<img src="images/contact.png" border="0" name="img1">
</a>
<br>
<br>
<a href="talent.html" onmouseover="over_image('img2'); showIt3(this.src);" onmouseout="off_image('img2'); hideIt();">
<img src="images/talent.png" border="0" name="img2">
</a>
<br>
<br>
</td>
<td width="60%">
<center>
<img src="images/eye.png">
</td>
<tr>
</table>
</div>
</body>
</html>
I am using the Mega Menu from http://www.javascriptkit.com/script/...megamenu.shtml and need some assistance with an adjustment. The menu is working great as provided. However, we have a fairly wide menu layout and I have received comments that it is visually distracting to have the menu fly out horizontally. We want to have the menu start out full width and only animate to drop down vertically. Is this possible? If so, where in jkmegamenu.js would I make this adjustment? Thank you. Paul |
|||||||