|
JavaScript - Saving Data To Cookies
hello people! i would like to ask if someone can help me code a couple of scripts for saving various data into cookies, and then post them to e-mail through a cgi script.
to be more clear, i want to save some questionare's answers given through a series of html pages, to cookies. when (and if) the last question is answered, send all the answers to an e-mail address. thanks! Similar TutorialsHello, Im pretty new at JavaScript still, and I am trying to add cookies to a page of my website, so that what is entered into form fields, is retained for future visits. Below is my code, and I am scratching my head as to why it is not working for me! I have viewed a few different cookie tutorials, and so far trying to shape them around what I am seeking, is leading me to my broken code. Javascript: Code: var today = new Date();
var expiry = new Date(today.getTime() + 100 * 24 * 3600 * 1000);
function setCookie(name, value)
{
document.cookie=name + "=" + escape(value) + "; path=/; expires=" + expiry.toGMTString();
}
function storeValues(form)
{
setCookie("name", contact.name.value);
setCookie("email", contact.email.value);
setCookie("phone", contact.phone.value);
return true;
}
if(name = getCookie("name")) document.contact.name.value = name;
if(email = getCookie("email")) document.contact.email.value = email;
if(phone =getCookie("phone")) document.contact.phone.value = phone;
HTML for the Form Code: <form action="mailto:ksim@dbk.com" method="POST" name="contact" onsubmit="return validateForm();" >
<ul>
<li>
<strong>Name<font color="#5fb81e">*</font></strong>
<div><input type="text" size="25" name="name" /></div>
</li>
<li>
<strong>E-mail Address<font color="#5fb81e">*</font></strong>
<div><input type="text" size="25" name="email" /></div>
</li>
<li>
<strong>Phone Number<font color="#5fb81e">*</font></strong>
<div><input type="text" size="25" name="phone" /></div>
</li>
<li>
<strong>Prefered Type of Contact?<font color="#5fb81e">*</font></strong>
<div><input type="radio" name="contact" value="email" id="contactem" /> E-mail<br />
<input type="radio" name="contact" value="phone" id="contactph" /> Phone</div>
</li>
<li>
<strong>Reason For Contact?</strong>
<div><input type="checkbox" name="reason" value="showinfo" />Show Information<br />
<input type="checkbox" name="reason" value="groupinfo" />Group Information<br />
<input type="checkbox" name="reason" value="collab" /> Collaboration<br />
<input type="checkbox" name="reason" value="misc" />Misc
</div>
</li>
<li>
<strong>What Are You Contacting About?<font color="#5fb81e">*</font></strong>
<div><textarea name="message" rows="7" cols="28"></textarea></div>
</li>
<li>
<strong></strong>
<div><input type="button" value="Save" conclick="setCookie();"/><button type="reset">Reset</button><button type="submit">Submit</button>
</div>
</li>
</ul>
If anyone has some tips to point me in the right direction, and let me see the error of my ways (pun totally intended) I would appreciate it. I'm trying to get my form to save a user's data via cookies. I found a script at http://www.fijiwebdesign.com/blog/re...ubmission.html, and it only seems to work if you refresh the page, but not if you close out the browser and restart. Code: <form action="process-contact.php" id="contact" method="post">
Name: <input type="text" name="name"/>
<br />Email: <input type="text" name="email"/>
<br />Message: <textarea name="message"></textarea>
<br /><input type="submit" value="Submit"/>
</form>
<script type="text/javascript">
window.onload = function() {
rememberFormInputs('contact', 'input-');
}
/**
* Set a cookie
* @param string cookie name
* @param string cookie value
* @param string cookie expiration counter in days
* @param string cookie path
* @param string cookie domain
* @param bool secure?
*/
function setCookie(name, value, expires, path, domain, secure) {
var today = new Date();
today.setTime(today.getTime());
if (expires) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date(today.getTime() + (expires));
document.cookie = name+"="+escape(value) +
((expires) ? ";expires="+expires_date.toGMTString() : "") +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
((secure) ? ";secure" : "");
}
/**
* Get a cookie value
* @param string cookie name
*/
function getCookie(name) {
var start = document.cookie.indexOf(name + "=");
var len = start + name.length + 1;
if ((!start) && (name != document.cookie.substring(0, name.length))) {
return null;
}
if (start == -1) return null;
var end = document.cookie.indexOf(";", len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len, end));
}
/**
* Remebers form inputs after you fill them in
* @param string form id to remember fields
* @param string a prefix to prepend to all cookie names. (prevent naming conflicts)
*/
function rememberFormInputs(form_id, prefix) {
var form = document.getElementById(form_id);
var els = document.getElementsByTagName('input');
for (var i = 0; i < els.length; i++) {
var el = els.item(i);
if (el.type == 'text') {
el.onblur = function() {
var name = this.name;
var value = this.value;
setCookie(prefix + name, value);
};
var old_value = getCookie(prefix + el.name);
if (old_value && old_value != '') {
el.value = old_value;
}
}
}
}
</script>
The demo on the site I got this code from is a broken link. I would really appreciate any and all help to get this resolved. I know cookies are suppose to save even after closing out the browser. I have a problem with this code. i want to save the result drawing to the database using php as binary format. but i dont know how, can you help me with this. below is my code Code: <div style="width:225px; padding-top:60px; height:452px; margin:0px auto; text-align:center; background:url(template/premium/img/guild.gif) no-repeat top center;">
<form action="" method="post" onsubmit="request('crgild','sh_','POST','index.php'); return false;" id="crgild">
Select Character: <select name="character">
<option value="[ASSASSIN]">[ASSASSIN]</option></select><br><br>NAME: <input class="txt-input" type="text" maxlength="10" name="guildname"><br>
<div style="margin:10px;"><div class="guild-top-left2" style="background-color:#000000;"></div>
<div class="guild-top-right2" style="background-color:#000000;"></div><div class="guild-top-center2" style="background-color:#000000;"></div>
<div class="guild-center-left" style="background-color:#000000;"><div class="guild-center-right">
<table style="width: 150px; height:150px" align=center cellpadding=0 cellspacing=1><tr>
<td onclick="addcolor(1);" id="gimage1" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[1]" id="poscolor[1]" value="0"></td>
<td onclick="addcolor(2);" id="gimage2" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[2]" id="poscolor[2]" value="0"></td>
<td onclick="addcolor(3);" id="gimage3" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[3]" id="poscolor[3]" value="0"></td>
<td onclick="addcolor(4);" id="gimage4" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[4]" id="poscolor[4]" value="0"></td>
<td onclick="addcolor(5);" id="gimage5" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[5]" id="poscolor[5]" value="0"></td>
<td onclick="addcolor(6);" id="gimage6" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[6]" id="poscolor[6]" value="0"></td>
<td onclick="addcolor(7);" id="gimage7" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[7]" id="poscolor[7]" value="0"></td>
<td onclick="addcolor(8);" id="gimage8" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[8]" id="poscolor[8]" value="0"></td></tr>
<tr><td onclick="addcolor(9);" id="gimage9" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[9]" id="poscolor[9]" value="0"></td>
<td onclick="addcolor(10);" id="gimage10" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[10]" id="poscolor[10]" value="0"></td>
<td onclick="addcolor(11);" id="gimage11" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[11]" id="poscolor[11]" value="0"></td>
<td onclick="addcolor(12);" id="gimage12" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[12]" id="poscolor[12]" value="0"></td>
<td onclick="addcolor(13);" id="gimage13" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[13]" id="poscolor[13]" value="0"></td>
<td onclick="addcolor(14);" id="gimage14" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[14]" id="poscolor[14]" value="0"></td>
<td onclick="addcolor(15);" id="gimage15" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[15]" id="poscolor[15]" value="0"></td>
<td onclick="addcolor(16);" id="gimage16" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[16]" id="poscolor[16]" value="0"></td></tr>
<tr><td onclick="addcolor(17);" id="gimage17" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[17]" id="poscolor[17]" value="0"></td>
<td onclick="addcolor(18);" id="gimage18" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[18]" id="poscolor[18]" value="0"></td>
<td onclick="addcolor(19);" id="gimage19" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[19]" id="poscolor[19]" value="0"></td>
<td onclick="addcolor(20);" id="gimage20" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[20]" id="poscolor[20]" value="0"></td>
<td onclick="addcolor(21);" id="gimage21" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[21]" id="poscolor[21]" value="0"></td>
<td onclick="addcolor(22);" id="gimage22" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[22]" id="poscolor[22]" value="0"></td>
<td onclick="addcolor(23);" id="gimage23" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[23]" id="poscolor[23]" value="0"></td>
<td onclick="addcolor(24);" id="gimage24" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[24]" id="poscolor[24]" value="0"></td></tr>
<tr><td onclick="addcolor(25);" id="gimage25" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[25]" id="poscolor[25]" value="0"></td>
<td onclick="addcolor(26);" id="gimage26" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[26]" id="poscolor[26]" value="0"></td>
<td onclick="addcolor(27);" id="gimage27" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[27]" id="poscolor[27]" value="0"></td>
<td onclick="addcolor(28);" id="gimage28" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[28]" id="poscolor[28]" value="0"></td>
<td onclick="addcolor(29);" id="gimage29" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[29]" id="poscolor[29]" value="0"></td>
<td onclick="addcolor(30);" id="gimage30" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[30]" id="poscolor[30]" value="0"></td>
<td onclick="addcolor(31);" id="gimage31" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[31]" id="poscolor[31]" value="0"></td>
<td onclick="addcolor(32);" id="gimage32" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[32]" id="poscolor[32]" value="0"></td></tr>
<tr><td onclick="addcolor(33);" id="gimage33" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[33]" id="poscolor[33]" value="0"></td>
<td onclick="addcolor(34);" id="gimage34" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[34]" id="poscolor[34]" value="0"></td>
<td onclick="addcolor(35);" id="gimage35" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[35]" id="poscolor[35]" value="0"></td>
<td onclick="addcolor(36);" id="gimage36" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[36]" id="poscolor[36]" value="0"></td>
<td onclick="addcolor(37);" id="gimage37" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[37]" id="poscolor[37]" value="0"></td>
<td onclick="addcolor(38);" id="gimage38" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[38]" id="poscolor[38]" value="0"></td>
<td onclick="addcolor(39);" id="gimage39" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[39]" id="poscolor[39]" value="0"></td>
<td onclick="addcolor(40);" id="gimage40" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[40]" id="poscolor[40]" value="0"></td></tr>
<tr><td onclick="addcolor(41);" id="gimage41" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[41]" id="poscolor[41]" value="0"></td>
<td onclick="addcolor(42);" id="gimage42" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[42]" id="poscolor[42]" value="0"></td>
<td onclick="addcolor(43);" id="gimage43" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[43]" id="poscolor[43]" value="0"></td>
<td onclick="addcolor(44);" id="gimage44" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[44]" id="poscolor[44]" value="0"></td>
<td onclick="addcolor(45);" id="gimage45" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[45]" id="poscolor[45]" value="0"></td>
<td onclick="addcolor(46);" id="gimage46" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[46]" id="poscolor[46]" value="0"></td>
<td onclick="addcolor(47);" id="gimage47" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[47]" id="poscolor[47]" value="0"></td>
<td onclick="addcolor(48);" id="gimage48" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[48]" id="poscolor[48]" value="0"></td></tr>
<tr><td onclick="addcolor(49);" id="gimage49" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[49]" id="poscolor[49]" value="0"></td>
<td onclick="addcolor(50);" id="gimage50" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[50]" id="poscolor[50]" value="0"></td>
<td onclick="addcolor(51);" id="gimage51" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[51]" id="poscolor[51]" value="0"></td>
<td onclick="addcolor(52);" id="gimage52" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[52]" id="poscolor[52]" value="0"></td>
<td onclick="addcolor(53);" id="gimage53" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[53]" id="poscolor[53]" value="0"></td>
<td onclick="addcolor(54);" id="gimage54" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[54]" id="poscolor[54]" value="0"></td>
<td onclick="addcolor(55);" id="gimage55" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[55]" id="poscolor[55]" value="0"></td>
<td onclick="addcolor(56);" id="gimage56" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[56]" id="poscolor[56]" value="0"></td></tr>
<tr><td onclick="addcolor(57);" id="gimage57" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[57]" id="poscolor[57]" value="0"></td>
<td onclick="addcolor(58);" id="gimage58" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[58]" id="poscolor[58]" value="0"></td>
<td onclick="addcolor(59);" id="gimage59" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15">
<input type="hidden" name="poscolor[59]" id="poscolor[59]" value="0"></td>
</tr>
<tr></table></div></div>
<div class="guild-bottom-left" style="background-color:#000000;"></div><div class="guild-bottom-right" style="background-color:#000000;"></div>
<div class="guild-bottom-center" style="background-color:#000000;"></div></div>
<div id="currentcolor2" style="width:15px; float:left; margin-left:30px; height:15px; border:1px solid #555555; background:url(template/premium/img/guild-back.gif);"></div>
<div style="float:feft; text-align:left; margin-left:50px; margin-right:20px;">After selecting a color with the mouse, please draw.</div><br>
<table align=center cellpadding=0 cellspacing=0 border=1><tr>
<td onclick="changecolor(this.style.background,0)" style="cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"></td>
<td onclick="changecolor(this.style.background,1)" style="cursor:pointer; background:#000000;" width="15" height="15"></td>
<td onclick="changecolor(this.style.background,2)" style="cursor:pointer; background:#8c8a8d;" width="15" height="15"></td>
<td onclick="changecolor(this.style.background,3)" style="cursor:pointer; background:#ffffff;" width="15" height="15"></td>
<td onclick="changecolor(this.style.background,4)" style="cursor:pointer; background:#fe0000;" width="15" height="15"></td>
<td onclick="changecolor(this.style.background,5)" style="cursor:pointer; background:#ff8a00;" width="15" height="15"></td>
<td onclick="changecolor(this.style.background,6)" style="cursor:pointer; background:#ffff00;" width="15" height="15"></td>
<td onclick="changecolor(this.style.background,7)" style="cursor:pointer; background:#8cff01;" width="15" height="15"></td></tr>
<tr><td onclick="changecolor(this.style.background,8)" style="cursor:pointer; background:#00ff00;" width="15" height="15"></td>
<td onclick="changecolor(this.style.background,9)" style="cursor:pointer; background:#01ff8d;" width="15" height="15"></td>
<td onclick="changecolor(this.style.background,'A')" style="cursor:pointer; background:#00ffff;" width="15" height="15"></td>
<td onclick="changecolor(this.style.background,'B')" style="cursor:pointer; background:#008aff;" width="15" height="15"></td>
<td onclick="changecolor(this.style.background,'C')" style="cursor:pointer; background:#0000fe;" width="15" height="15"></td>
<td onclick="changecolor(this.style.background,'D')" style="cursor:pointer; background:#8c00ff;" width="15" height="15"></td>
<td onclick="changecolor(this.style.background,'E')" style="cursor:pointer; background:#ff00fe;" width="15" height="15"></td>
<td onclick="changecolor(this.style.background,'F')" style="cursor:pointer; background:#ff008c;" width="15" height="15"></td>
</tr></table>
<input type="hidden" id="currentcolor" value=""><br><br>
<input class="guild-submit" name="createguild" type="submit" value="Create"></form></div>
<script type="text/javascript">
function changecolor(color,encode)
{
document.getElementById('currentcolor').value=encode;
document.getElementById('currentcolor2').style.background=color;
}
function addcolor(id)
{
document.getElementById('poscolor['+id+']').value=document.getElementById('currentcolor').value;
document.getElementById('gimage'+id).style.background=document.getElementById('currentcolor2').style.background;
}
</script>
<input type="hidden" id="new_credits" value="0">
Is there any possible way for JS to save changes that a user has made? my situation is that I'm a photographer who offers photobooks. My customers often have hundreds or thousands of photos and want captions on lots of them. I want to post a photo gallery with a user input form. I've created a simple form, but I want the user to be able to save comments straight to the gallery so I can look at them... it's only a very simple form and isn't quite finished yet, oh by the way, I'm not sure how to use the check box... but, i'll work on that. Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
#divWrapper {
text-align: center;
width: 430px;
margin-right: auto;
margin-left: auto;
}
-->
</style>
</head>
<body>
<script type="text/javascript">
function picForm()
{
if(document.frmInput.addPic.value="yes")
{
document.frmOutput.outChoice.value="will"
}
else
{
document.frmOutput.outChoice.value="will NOT"
}
document.frmOutput.outCap.value=document.frmInput.addCap.value;
document.frmOutput.outComm.value=document.frmInput.addComm.value;
}
</script>
<div id="divWrapper">
<p>Uncheck the box if you do NOT want this photo to appear in your photobook. Please write your caption in the box provided. Any further comments you wish to make can be entered in the second box.</p>
<div id="divInput">
<form name="frmInput">
<table id="tblForm" cellpadding="3px">
<tr>
<td><input name="addPic" type="checkbox" value="yes">
Add to Photobook</td>
<td> </td>
</tr>
<tr>
<td>Caption<br>
<textarea name="addCap" cols="24" rows="3" value="...Add Caption Here..."></textarea></td>
<td>Comments<br>
<textarea name="addComm" cols="24" rows="3" value="...Add Comments Here..."></textarea></td>
</tr>
<tr>
<td></td>
<td><div align="right">
<input name="btnSubmit" type="button" value="Submit" onClick="picForm()" />
</div></td>
</tr>
</table>
</form>
</div>
<div id="divOutput">
<form name="frmOutput">
<p>This photo
<input name="outChoice" type="text" value="" size="7" style="border:0px" />
appear in your photo book.</p>
<p>You would like the caption to read:
<input name="outCap" type="text" value="" size="50" style="border:0px" />
</p>
<p>Your comments to us a
<input name="outComm" type="text" value="" size="50" style="border:0px" />
</p>
</form>
</div>
</div>
</body>
</html>
Please help! hi guys kindly assist in this i have the code below used to generate additional dynamic fields how can i save data entered in mysql??? <HTML> <HEAD> <TITLE>New Task</TITLE> <link rel="stylesheet" href="style1.css" type="text/css"/> <meta http-equiv="Content-Script-Type" content="text/javascript"> <SCRIPT language="javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = rowCount + 1; newcell.innerHTML = table.rows[0].cells[i].innerHTML; //alert(newcell.childNodes); switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { if(rowCount <= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } </SCRIPT> </HEAD> <BODY> <br> <br> <h2>INPUT NEW TASK</h2> <table border="1" width="100%"> <tr> <td> <fieldset> <legend></legend> <table border="0" width="100%"> <tr> <td>User:</td> <td><input type="text" size="20" name=""disabled></td> <td>Start Date:</td> <td><input type="text" size="20"></td> </tr> <tr> <td>Client name:</td> <td><select name=""></select></td> <td>Process</td> <td><select name=""></select></td> <td>Day?</td> <td><input type="text" size="5"></td> </tr> </table> </fieldset> <fieldset> <legend>Tasks</legend> <table border="0" width="100%"> <th width="5">select</th><th width="5">No</th><th width="150">Task</th><th width="400">Description</th><th width="100">Start Time</th> <th width="100">End Time</th><th width="100">Worked hrs</th><th width="90">Action</th> <tr> </table> <TABLE id="dataTable" width="100%" border="1"> <TD><INPUT type="checkbox" name="chk"/></TD> <td width="5"><input type="text" size="5"name=""disabled></td> <td width="150"><select name=""></select></td> <td><textarea rows="2" cols="30"></textarea></td> <td><input type="text" size="10"name=""></td> <td><input type="text" size="10"name=""enabled></td> <td><input type="text" size="10"name=""disabled></td> <td><input type="button"type="button" value="+" onclick="addRow('dataTable')"></td> <td><input type="button"type="button" value="-" onclick="deleteRow('dataTable')"></td> </tr> </table> </fieldset> <table border="0" width="100%"> <tr> <td width="122"><input type="button" value="SAVE"></td> <td></td> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> </table> </BODY> </HTML> i want to have the capability similar as that of vbulletin so that if user is writing reply using 'quick reply' & want to move to full editor page the contents be preserved. @phpbb3 (I am successful needs optimisation) 1] the textarea id is similar both in quick & full reply editors 2] When replying a special string is there in url my code: Code: var field = document.getElementById("text_editor_textarea");
if (sessionStorage.getItem("autosave") && document.URL.indexOf("mode=reply") > 0) {
field.value = sessionStorage.getItem("autosave");
}
if (field) {
setInterval(function() {
sessionStorage.setItem("autosave", field.value);
}, 1e3);
}
Now everone knows this time interval function is heavy for browsers...so I want to start ts only when field.value.length > 0 but I am unable to do so. Any suggestions. Simply this willnt work Code: if (field && field.value.length > 0) {
I have trying to save an update the xml file which is there in same folder in which HTML page is there. In HTMl page i have written javascript code to Save and Update XML on server.The code is like this Code: function Save()
{
var xmlDoc= new ActiveXObject("MSXML.DOMDocument")
xmlDoc.async="false"
xmlDoc.load("/show/Share%20Workspace/Nidhi/Share%20%Document/Account.xml")
//..code to modify xmlDoc
xmlDoc.save ("/show/Share%20Workspace/Nidhi/Share%20%Document/Account.xml")
xmlDoc = null;
alert('Details saved');
}
When i am accessing HTMl page on server from client and this function is called error 'Parameter is incorrect' is showing on line Code: xmlDoc.save ("/show/Share%20Workspace/Nidhi/Share%20%Document/Account.xml")
Note: xmlDoc.load("/show/Share%20Workspace/Nidhi/Share%20%Document/Account.xml") is working fine. The save is working fine in local but not when on server and request from client. Kindly suggest me the possible solution to it. Hello, I have to print my cell phone call records but unfortunately my wireless provider displays the number I called only when mouse is hovered over Call details. I have 470 call records and copy pasting all those numbers when mouse is hovered over it will be one hell of a task. Is there any way I could save all the information related to Called Number and do not have to move my mouse for each and every number? Using my basic programming understanding (Though I know nothing about javascript), they are using some mouseover function that displays this information. The possibility of this information to be on the server is less because this information is even available when I switch off my wireless. I can paste that portion of the code if someone needs it to help me out. Saving this website using normal "Save as" does not save the required information. Is there any other way I can save this website will all its details or somehow disabling this mouseover function so that call details are not hidden anymore. Regards, Scoobydoo This little script works nicely in IE, and FF but fails in Chrome. It saves the contents of input boxes and displays them next time the page loads: (the cookie functions are the usual ones) Code: window.onload = function()
{
var theInputs = document.getElementsByTagName('input');
for(var i = 0; i < theInputs.length; i++)
{
if(theInputs[i].type == 'text')
{
theInputs[i].onkeyup = function()
{
createCookie(this.name,this.value,9999);
}
}
if(readCookie(theInputs[i].name+'val') != null)
{
theInputs[i].value = readCookie(theInputs[i].name+'val');
}
}
}
Is there an obvious reason why Chrome is not doing this? Hi everyone so ive been doing some searching on how to save textarea content as a file and found ... Code: http://www.codingforums.com/showthread.php?t=32077 Saving works ok but the issue I have is that when you enter some text and hit the submit button the content of the page becomes the content within the the file your saving check demo so you can see for yourself: Code: http://6d8.info/demo.html So what I need is for the page to stay the same ie always demo.html with textarea and submit button and not the saving file content Any help is appretiated and as normal thank you in advance ... The guy who originally coded this is no longer with us and we can't seem to figure out why this code isn't working. Neither of us really know JS. I've messed with jQuery more than I've messed with straight up JS but even that is limited knowledge. Basically this code is supposed to keep track of the left navigation so when it goes to a new page it holds the opened menus open. Here's a snippet of HTML: Code: <ul id="leftnav">
<li class="widthT1">
<div id="2042-open" style="display: none;"><a href="javascript:treeToggle('2042', 'open', '/JobSeekers/Recently_Unemployed/index.aspx');" class="orangePlus">Recently Unemployed</a></div>
<div id="2042-close" style="margin-bottom:10px;"><a href="javascript:treeToggle('2042', 'close');" class="orangeMinus">Recently Unemployed</a>
<!--<div class="fix1"><hr class="grey1HR"/></div>-->
<ul class="fix4">
<li>
<div id="2063-open" style="display: none;"><a href="javascript:treeToggle('2063', 'open', '/JobSeekers/Recently_Unemployed/Apply_for_Unemployment_Insurance_Benefits/index.aspx');" class="orangePlusGT2">Apply for Unemployment Insurance Benefits</a></div>
<div id="2063-close"><a href="javascript:treeToggle('2063', 'close');" class="orangeMinusGT2">Apply for Unemployment Insurance Benefits</a>
<!--<div class="fix2"><hr class="grey2HR"/></div>-->
<ul>
The above is repeated but that should be enough to show you what it's doing? Here's the JS: Code: function getTreeStateArray()
{
var empty = new Array();
var soc = document.cookie.indexOf("treestate=");
if(soc != -1)
{
var eoc = document.cookie.indexOf("-", soc);
if(eoc == -1)
eoc = document.cookie.length;
return(unescape(document.cookie.substring(soc+10, eoc)).split("-"));
}
return(empty);
}
function setTreeStateArray(treeState)
{
document.cookie = "treestate=" + escape(treeState.join("-"));
}
function restoreTreeState(treeID)
{
var treestate = getTreeStateArray();
var i, j, treeNodeName, treeElements;
treeElements = document.getElementById(treeID).getElementsByTagName("div");
for(i = 0; i < treeElements.length; i++)
{
var sosuffix = treeElements[i].id.indexOf('-close');
if(sosuffix == -1)
sosoffix = treeElements[i].id.indexOf('-open');
if(sosuffix != -1)
{
var nodeName = treeElements[i].id.substring(0, sosuffix);
var found = false;
for(j = 0; j < treestate.length; j++)
{
if(treestate[j] == nodeName)
found = true;
}
if(found == true)
{
document.getElementById(nodeName + '-open').style.display = 'none';
document.getElementById(nodeName + '-close').style.display = 'block';
}
else
{
document.getElementById(nodeName + '-open').style.display = 'block';
document.getElementById(nodeName + '-close').style.display = 'none';
}
}
}
}
function removeNodeFromTreeState(nodeName)
{
var treestate = getTreeStateArray();
var newTreeState = new Array();
var i, treeNodeName;
for(i = 0; i < treestate.length; i++)
{
treeNodeName = treestate[i];
if(treeNodeName != nodeName)
newTreeState.push(treeNodeName);
}
setTreeStateArray(newTreeState);
}
function addNodeToTreeState(nodeName)
{
var treestate = getTreeStateArray();
var newTreeState = new Array();
var i, treeNodeName;
for(i = 0; i < treestate.length; i++)
{
treeNodeName = treestate[i];
if(treeNodeName == nodeName)
return;
newTreeState.push(treeNodeName);
}
newTreeState.push(nodeName);
setTreeStateArray(newTreeState);
}
function treeToggle(treeNodeName, treeNodeState, followLink)
{
if(treeNodeState == 'open')
{
addNodeToTreeState(treeNodeName);
document.getElementById(treeNodeName + '-open').style.display =
'none';
document.getElementById(treeNodeName + '-close').style.display =
'block';
if(typeof(followLink) != 'undefined')
window.location.href = followLink;
}
else
{
removeNodeFromTreeState(treeNodeName);
document.getElementById(treeNodeName + '-open').style.display =
'block';
document.getElementById(treeNodeName + '-close').style.display =
'none';
}
}
What happens is it remembers the first thing you click on, but nothing more. We looked at the cookie value and it seems to be right. 4digit number followed by - followed by 4 more digits etc etc (0000-0001-0002 etc) If anyone could help that would be wonderful. Thanks for any and all help, Justin Hi all, I'm a beginner in JavaScript can someone please help me to resolve this issue and thanks in advance for your help! What I'm trying to do is.. When you select multiple <div> get the value of each one and save in separate hidden fields accordingly. What needs to happen is... Click div 1 --> if hidden field1 value is "none", save there, else check hidden field 2 if that's "none" save in hidden field 2 Click div 2 --> if hidden field1 value is "none", save there, else check hidden field 2 if that's "none" save in hidden field 2 Here's what I've come up with so far (currently I'm using JQuery) The problem with this is that no matter what div I click in which order it only updates the 1st hidden field Code: <div id="click1" name="click1" value="123" onclick="abc()"/>Click 1</div>
<div id="click2" name="click2" value="225" onclick="def()"/>Click 2</div>
<input id="passenger_1" name="passenger_1" type="hidden" value="none" />
<input id="passenger_2" name="passenger_2" type="hidden" value="none" />
<script>
function abc() {
var pasvalue = $('#click1').attr('value');
var pas1_value = $('#passenger_1').attr('value');
var pas2_value = $('#passenger_2').attr('value');
if(pas1_value == "none"){
$('#passenger_1').attr('value', pasvalue);
}else if (pas2_value == "none"){
$('#passenger_2').attr('value', pasvalue);
}}
function def() {
var pasvalue = $('#click2').attr('value');
var pas1_value = $('#passenger_1').attr('value');
var pas2_value = $('#passenger_2').attr('value');
if(pas1_value == "none"){
$('#passenger_1').attr('value', pasvalue);
}else if (pas2_value == "none"){
$('#passenger_2').attr('value', pasvalue);
}}
</script>
Hey all, I have this code, that saves the "play" or "pause" audio-tag state in a cookie for recognizing on different pages. This code only works properly in Chrome, but not in other browsers. In IE, it doesn't save/recognize the cookies, apparently. And in Firefox, I don't even get the audio to play. Code: $(document).ready(function(){
if ($.cookie("audioState") == "pause") {
$("p#sound audio").get(0).pause();
$("p#sound span#sound-icon").css({backgroundPosition: "0 -37px"});
}
else if ($.cookie("audioState") == "play") {
$("p#sound audio").get(0).play();
$("p#sound span#sound-icon").css({backgroundPosition: "0 0"});
}
$("p#sound").click(function() {
var song = $(this).find("audio").get(0);
var soundIcon = $(this).find("span#sound-icon");
if (song.paused) {
song.play();
soundIcon.css({backgroundPosition: "0 0"}).hide().stop(1, 1).fadeIn(500);
$.cookie("audioState", "play");
} else {
song.pause();
soundIcon.css({backgroundPosition: "0 -37px"}).hide().stop(1, 1).fadeIn(500);
$.cookie("audioState", "pause");
}
});
});
Code: <p id="sound">MUSIC <span id="sound-icon"></span> <audio autoplay="autoplay" loop="loop"> <source src="audio/Breather2000-Afterlife.ogg" type="audio/ogg" /> <source src="audio/Breather2000-Afterlife.mp3" type="audio/mp3" /> Your browser does not support the audio tag. </audio> </p> What am I doing wrong? Thanks already! Hello, I know there are dozens of threads on this topic but I can't figure out how to do what I want to do. I have three variables I want to store in a cookie when a user leaves this page which is a college project: http://jimbolgs.agilityhoster.com/wo.../ClockUTC.html They are (from the linked JS file): extraMins, geoLoc, UTCHours. I would also like to retrieve them on return to the page. Any help appreciated, Thanks. If I create a cookie in PHP here. PHP Code: setcookie('cookie_cl_'.$client_id, 'cookie_cl_'.$client_id, $time, "/","", 0); the php script is set on domain B the javascript I want to read the cookie is set on domain B as well However, the hosted on DOMAIN A Code: <script src=domain B .js> I want the cookie to remain on domain B, but if I open the JS file using domain A, both php and JS are using domain B, though I can't seem to get the JS to find the cookie, is it looking at domain A ? am I suppose to set a domain on cookie for this to work? Hopefully this makes sense. Ive looked it up on google and yahoo but i just cant find good explanations on how to use cookies?
Hi there, I am writing an extension for google chrome (or at least trying to, it's my first project), and I'm kinda stuck on one part. I'd like to save 2 variables, called "c" and "notes". I'd like it to get the cookies onLoad, and save them onUnload. I've tried different codes, but right now I just can't figure out how to set notes and c to the value of the cookie. Could anyone please help me? Thanks in advance. Hi there Guys, I'm looking to set a cookie that lasts 24 hours and has a specific name. The function is to check how many times a page has been visited by individual people and display it at the bottom of a HTML page. I have an existing script that holds the data for 6 months that i have found as below. My question, Can any one help me change this to the required time? I'm a Noob when it comes to java scripting but enthusiastic to learn. Code:
<SCRIPT>
expireDate = new Date
expireDate.setMonth(expireDate.getMonth()+6)
jcount = eval(cookieVal("jaafarCounter"))
jcount++
document.cookie = "test jaafarCounter="+jcount+";expires=" + expireDate.toGMTString()
function cookieVal(cookieName) {
thisCookie = document.cookie.split("; ")
for (i=0; i<thisCookie.length; i++){
if (cookieName == thisCookie[i].split("=")[0]){
return thisCookie[i].split("=")[1]
}
}
return 0
}
function page_counter(){
for (i=0;i<(3-jcount.toString().length);i++)
document.write('<span class="counter">0</span>')
for (y=0;y<(jcount.toString().length);y++)
document.write('<span class="counter">'+jcount.toString().charAt(y)+'</span>')
}
</SCRIPT>
Dear friends I need an help i am facing problem with my referral link as they are not supporting cookies. when ever someone going to my link they will going to sign up page but if someone going to any other link provided on the website and returning on sign up page again my referral vanished I have creating an blog for in by embadding my referral link using iframe. can anybody help me to resolve this problem. thnx in advance. Hi, Im a bit stuck on something, any help is greatly appreciated. I want a user to input a name, age, gender, city into a form, this gets stored in some cookies and when they click submit they are taken to another page where their details are displayed in the webpage. Thanks for the help. |
|||||||