|
JavaScript - Control Problem Based On Two Forms
Hello everyone,
I have a problem with the control of my two forms principle it is good for the first form, but if I wanted to control my 2nd form, blocking ca Here's the script: Code: <html>
<head>
<script type="text/javascript" >
function formValidation1(oEvent) {
oEvent = oEvent || window.event;
var txtField = oEvent.target || oEvent.srcElement;
var txt_nom_pereck1=true;
var msg=" ";
if(document.getElementById("txt_nom_pere").value.length < 3 ){ txt_nom_pereck1=false; msg = msg + "Your name should be minimun 3 char length";}
if(document.getElementById("txt_prenom_pere").value.length < 3 ){ txt_nom_pereck1=false; msg = msg + "Your name should be minimun 3 char length";}
if(txt_nom_pereck1){document.getElementById("submit_etape4").style.display='block'; }
else{document.getElementById("submit_etape4").style.display='none'; }
}
window.onload = function () {
var submit_etape4 = document.getElementById("submit_etape4");
var txt_nom_pere = document.getElementById("txt_nom_pere");
var txt_prenom_pere = document.getElementById("txt_prenom_pere");
var txt_courriel_pere = document.getElementById("txt_courriel_pere");
var txt_courriel_pere_conf = document.getElementById("txt_courriel_pere_conf");
var txt_nom_pereck1=false;
document.getElementById("submit_etape4").style.display='none';
txt_nom_pere.onkeyup = formValidation1;
txt_prenom_pere.onkeyup = formValidation1;
}
//************Partie 2 : ******/////////////////////////////
/*
function formValidation2(oEvent) {
oEvent = oEvent || window.event;
var txtField = oEvent.target || oEvent.srcElement;
var txt_nom_pereck2=true;
var msg=" ";
if(document.getElementById("txt_courriel_pere").value.length < 3 ){ txt_nom_pereck2=false; msg = msg + "Your name should be minimun 3 char length";}
if(document.getElementById("txt_courriel_pere_conf").value.length < 3 ){ txt_nom_pereck2=false; msg = msg + "Your name should be minimun 3 char length";}
if(txt_nom_pereck2){document.getElementById("submit_etape5").style.display='block'; }
else{document.getElementById("submit_etape5").style.display='none'; }
}
window.onload = function () {
var submit_etape5 = document.getElementById("submit_etape5");
var txt_courriel_pere = document.getElementById("txt_courriel_pere");
var txt_courriel_pere_conf = document.getElementById("txt_courriel_pere_conf");
var txt_nom_pereck2=false;
document.getElementById("submit_etape5").style.display='none';
txt_nom_pere.onkeyup = formValidation2;
txt_prenom_pere.onkeyup = formValidation2;
}
Je voulais activer cette partie pour comtrole le Form 2
Le probleme existe au niveau des nom des fonctions
I wanted this part to enable the Comtrol Form 2
The problem exists at the level of function names
*/
</script>
</head>
<body >
<form method=" post" action="form-success.php">
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="txt_nom_pere" name="FirstName"></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="txt_prenom_pere" name="FirstName"></td>
</tr>
</table>
<input type="button" id="submit_etape4" value="Sign Up!!" style="display:none;" />
</form>
<form method=" post" action="form-success.php">
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="txt_courriel_pere" name="FirstName"></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="txt_courriel_pere_conf" name="FirstName"></td>
</tr>
</table>
<input type="button" id="submit_etape5" value="Sign Up!!" style="display:none;" />
</form>
</body>
</html>
Similar TutorialsI am trying to set up a form for paypal where the amount (cost) of the product is based on the currency chosen. I am trying to set this up using javascript which would submit the form and change the amount in the form. However, as a beginner, I am having some issues. This is what I have currently: Code: <html>
<head>
<script type="text/javascript">
function CalculateOrder(theform)
{
var currency = theform.currency_code.value;
if (currency == "GBP")
{
theform.amount.value = "1.29"
}
else if (currency == "USD")
{
theform.amount.value = "1.99"
}
else if (currency == "EUR")
{
theform.amount.value = "1.39"
}
document.payform.submit();
}
</script>
</head>
<body>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr " method="post" name="payform">
<input type="hidden" name="on0" value="Currency">
<select name="currency_code">
<option value="GBP" selected >GBP</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</p>
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif " onClick="CalculateOrder(this.form)" alt="Make payments with PayPal - it's fast, free and secure!">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="myemail@gmail.com">
<input type="hidden" name="item_name" value="My Prouct">
<input type="hidden" name="amount" value="0.00">
<input type="hidden" name="shipping" value="0">
<input type="hidden" name="no_shipping" value="1">
</form>
</fieldset>
</body>
</html>
The javascript is executed but clicking the image submits the form before the javascript runs and I am worried that the javascript may not run before the form is submitted so the amount would not be calculated - please help! I do not want to calculate the costs based on the exchange rate. I would really prefer (and also find it simpler) to just specify the cost in each currency. Thanks in advance! I have set if sentence when form is validate like: {if $smarty.request.action == "form1"} {nocache} {literal} <script type="text/javascript"> document.location='replyfile'; </script> {/literal} {/nocache} {/if} 1. How to retrieve values with Smarty as fields have value in name='' ...'' as now it does not capture value in form. 2. How to send form ONLY when all fields are validated? I have currently: {if $smarty.request.action == "form1"} and send button like: <input type="submit" name="form" value="Send my messages" class="mybutton" /> How to send after validation is performed? 3. This should mean sending form when name="form1" is clicked. Is it if sentence correct set with name form1? Application is: http://bassistance.de/jquery-plugins...in-validation/ Version 1.7. Now is sending when I click on button but it should send values and after validation is made. I want to have several forms on one page that are not displayed until a selection is made from the category drop down box(select element). The form displayed will depend on the selection made. Here is the code I have so far. Please help. Code: <body> <label id="Label1">ADMINISTRATOR CONSOLE - ADD AND EDIT ASSETS<br /> </label> <form action="" method="post" style="border-style: ridge; width: 311px; height: 37px;" name="myform"> <table> <tr> <td>Select Category:</td><td> <select name="category" onchange="set_sub_category()" style="width: 157px"> <option selected="selected" value="select">Select an Option</option> <option value="add">Add Category</option> <option value="district">Council District</option> <option value="region">Region</option> <option value="pom">POM</option> <option value="proptype">Property Type</option> <option value="assetcat">Asset Category</option> <option value="assettype">Asset Type</option> <option value="property">Property</option> <option value="asset">Asset</option> </select> </td> </tr> </table> </form> <form style="display:none" action= "admin_console_new.html" onsubmit="return (validate_form(this)& validate_list(this))" method="post" style="border-style: ridge; border-width: medium; height: 154px; width: 346px;" name="district"> <table style="height: 86px"> <tr> <td>Select District Value:</td><td> <select name="district"> <option selected="selected">Select an Option</option> <option>Add Council District</option> </select> </td> </tr><tr> <td>Enter District Name:</td><td> <input name="name" type="text"/> </td> </tr><tr> <td>Enter Description:</td><td><textarea name="description"></textarea> </td> </tr><tr> <td><input type="submit" value="Submit" name="Submit3" /><input type="reset" value="Reset" /> </td> </tr> </table> </form> Help will be greatly appreciated! Situation: I have a very long page divided into many sections vertical-wise marked by bookmarks, say pageX.html#s1 to s10. I need to show the section inside an iframe (iFrame1) on the mainpage (mainpage.html). I am thinking of having 4 buttons, sitting on the mainpage, to help navigate between these sections on pageX, namely NEXT, PREVIOUS, TOP, END. condition of the frame, fixed width/height, no scroll, no border. Very new to javascript but need this code to make a page work for BIZ. Thank you in advance for anyone kind enough to point the right direction! Hello, i am doing a test right now. What i have done is 1. A Counter/Timer That Counts until Zero 2. A Button that appears when the counter is Zero When I Click the Button it executes this code in the address bar (Navigates): javascript:gonow(); The id of the Timer: count What i want? When the Button appears, it will be clicked automatically... i started doing a different code, when the timer = 0 to navigate at javascript:gonow(); but it didnt worked.... See my code he Code: function AutoClick(){
var timer = document.getElementById(count);
if(timer.value=0)
unsafewindow.gonow();
}
Tried to explain as more as i could, now im waiting for an answe, dont dissapoint me please. Hello, I am trying to build a jukebox online. I use a quicktime plugin, the reason for this is that windows media player wouldnt work in firefox. I can now work the plugin with javascript to make it stop play pause and fast forward to a song, thing is i cant make it to play another song. in all sources i looked at , this piece of code should be what i am looking for : document.getElementById('movie2').SetQTNEXTUrl(2,'music/myparty.mp3'); well, that in any case wont work for me, then there was another piece of code wich should go in the embed part wich is this: QTNEXT1=myparty.mp3 in firefox it has the effect of opening the myparty.mp3 on another page in wich the quicktime plugin will show but cant find the song, in internet explorer it just simply give's the error "page is ready but with errors". can anyone help me to understand what goes wrong, what would fix it or a simpler way to embed a large amount of songs onto a website? hoping to hear something soon this is the code /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// <!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> <SCRIPT LANGUAGE = "JavaScript"> function PlayIt(movname) { movname.Play(); } function StopIt(movname) { movname.Stop(); } function rewindIt(movname) { movname.rewind(); } function SetRate(movname,rate) { movname.SetRate(rate); } function SetTime(movname,time) { movname.SetTime(time); } function VolumeIt(movname,v) { movname.SetVolume(v); } document.getElementById('movie2').SetQTNEXTUrl(2,'music/myparty.mp3'); document.getElementByName('movie2').SetQTNEXTUrl(2,'music/myparty.mp3'); document.getElementById('movie2').SetQTNEXTUrl(1,'music/myparty.mp3'); document.getElementByName('movie2').SetQTNEXTUrl(1,'music/myparty.mp3'); </SCRIPT> </head> <body> <embed hidden="false" autostart="true" loop="-1" controls="largeconsole" height="25" width="100"></embed> <body> <br><br> <a href="#" onClick="StartVideo()" ;>startvideo</a><br> <a href="#" onClick="PlayIt(movie2)";>functie</a><br> <a href="javascript:document.movie2.Stop()">Stop</a><br> <a href="javascript:document.movie2.Play()">Play</a><br> <a href="javascript:document.movie2.SetRate(1.0);">SetRate(1.0)</a><br> <a href="javascript:document.movie2.SetRate(2.0);">SetRate(2.0)</a><br> <a href="javascript:document.movie2.SetVolume(100);"> SetVolume(100) </a><br> <a href="javascript:document.movie2.SetVolume(255);"> SetVolume(255) </a><br> <br> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="180" height="160" id="movie2"> <param name="src" value="music/camaro.mp3"> <param name="Autoplay" value="false"> <embed width="180" height="160" src="music/camaro.mp3" QTNEXT1=myparty.mp3 name="movie2" enablejavascript="true" autostart="false"> </object> <br> <SCRIPT LANGUAGE = "JavaScript"> document.getElementById('movie1').SetQTNEXTUrl(2,'music/myparty.mp3'); document.getElementByName('movie1').SetQTNEXTUrl(2,'music/myparty.mp3'); document.getElementById('movie2').SetQTNEXTUrl(2,'music/myparty.mp3'); document.getElementByName('movie2').SetQTNEXTUrl(2,'music/myparty.mp3'); </SCRIPT> <br> <br> http://userwww.sfsu.edu/~infoarts/te...avascript.html </body> </html> /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// I wonder if someone can help me. I've recently put together a new web form. The form is validated using JavaScript - it shows real-time error messages when forms are left blank, and also prevents the form from being submitted if any of the input data is invalid. The problem I have is that if JavaScript is disabled, the form cannot be submitted. At the moment I am submitting the form using the following button Code: <input type="button" value="Next" onclick="submitForm(this.form);" id="button" /> The 'onclick' event runs the 'submitForm' function, which runs a final validation check and submits the form if everything checks out. If there is invalid data in the table, an alert box pops up which prevents the form from submitting. Unfortunately, if JavaScript is disabled, the 'Next' button does nothing, as it is relying on JS to submit the form. I have tried using <input type="submit"> as well as <button type="submit">. Both of these allow the form to be submitted if JS is disabled. Unfortunately, when JavaScript IS enabled, the validation gets bypassed - the alert box still shows up but once you click 'OK' the form gets processed anyway. Can anyone suggest a solution? I am planning to write server-side validation in PHP as a backup but would prefer it if my JavaScript validation would work in it's entirety and the PHP simply be in place as a last line of defence for when JS is disabled. Thanks! I'm using the autofill forms plugin for firefox which can be found he https://addons.mozilla.org/en-US/firefox/addon/4775 I use it to automatically fill various web forms, duh. But I would like certain values to be chosend randomly from a list I create. I contacted the developer and he said the add on probably does not need a new feature because there is a 'dynamic tags' function to fill certain forms with dynamic values (e.g. the current time or date). He has given over the project to another developer and told me I probably would find a solution in a good javascript programming forum. So here I am! Can anyone help me with this? Basically, I just need a javascript code which chooses on item from an array randomly, I guess? I'm not a programmer myself, so any help would be greatly (!) appreciated. Thanks a lot in advance for any further guidance! Note: Here are sample dynamic tags from the plugin: <datetime> new Date().toLocaleString() <useragent> navigator.userAgent <langcode> navigator.language <resolution> screen.width+'x'+screen.height <clipboard> this.getClipboardText() hello everybody! this is my first atempt in writing javascript and i have a problem which I have no idea how to solve. I want to take the values from several dropdown forms and make some calculations whit those in order to display a number. Unfortunately the script responts in a way that i cannot identify what is happening. this is a shorten example of my script. Code:
<html>
<head>
<script type="text/javascript">
function calcul()
{
var pcno = document.plithospc.listplpc.value;
var ndno = document.plithosnd.listplnd.value;
var hotline = document.hotlform.listhotl.value;
var sumhotline = 0;
if (hotline == 2)
{
sumhotline = 8*(1+0.5*pcno) + 2*(1+0.5*ndno);
}
else if (hotline == 3)
{
sumhotline = 16*(1+0.5*pcno) + 4*(1+0.5*pcno);
}
else
{
sumhotline = 0;
}
document.write(sumhotline);
</script>
</head>
<body>
<FORM NAME="plithospc">
<SELECT NAME="listplpc">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>-1-</OPTION>
<OPTION VALUE=2>-2-</OPTION>
<OPTION VALUE=3>-3-</OPTION>
</SELECT>
<FORM NAME="plithosnd">
<SELECT NAME="listplnd">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>-1-</OPTION>
<OPTION VALUE=2>-2-</OPTION>
<OPTION VALUE=3>-3-</OPTION>
</SELECT>
<FORM NAME="hotlform">
<SELECT NAME="listhotl">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>1st selection</OPTION>
<OPTION VALUE=2>second selection</OPTION>
<OPTION VALUE=3>third selection</OPTION>
</SELECT>
<button type="button" onclick="calcul()">click me</button>
</body>
does anyone knows how to fix this? thanks in advance I have a page up with an iframe that's approximately 300px by 405px. When I load up the site in FF and IE, it frames just fine. However, in Chrome and Opera the iframe is shifted upwards and is off-frame. I've tried looking for a solution to center the iframe correctly. Someone said to make a php code that loads 2 different iframes depending on browser (1 iframe for IE/FF and another frame for OP/CH). I have no knowledge of php coding, so I couldn't get it to work. So now, I think I'm limited to redirecting users based on browser type. If the user is using FF or IE, I'll redirect them to my original page. If they're using some other browser, I'll redirect them to a different page without the iframe. I've tried to set up a redirector, but it has trouble distinguishing between FF and Chrome. It treats them exactly the same. Does anyone have any advice on what to do? I've done tons of searching for what seems to be such a small problem. Someone please enlighten me. Sup gents. Excuse my tenaciously novice questions, but dont disparage just yet, im beginning to grasp how the mechanism behind the code words, in due part to your helpful suggestions Im in the last stages of the code. In this section i have added three methods, whose function is to direct access control over the ciphers i will be adding shortly. I firstly need for the methods to be working. What they do is, categorize the set of values inside the first array and give a set of names privileges. The three methods that deal with the access control are link(), secondgroup() and third group. Ive assigned that the first three names( link() ) can access all the ciphers, ie administrators, the next three names ( secondgroup() ) can only access the shift, permutation and vigenere ciphers and the rest ( thirdgroup() ) can access the other remaining ciphers. But ive added so much code at once that i overwhelmed myself and i now i cant figure out where ive gone wrong, be it in the syntax or the logic Code: <html>
<head>
<script type ="text/JavaScript">
var counter = 0;
var counter2 = 0;
var arraynumb = 0;
var arraynumb2 = 0;
var global;
var array = ['Mohamad', 'Karim', 'Anthony', 'Rami', 'Natalia', 'Sarah', 'Samer', 'Violette', 'Plume', 'Sharshabil'];
var array2 = ["1000", "1001", "1002", "1003", "1004", "1005", "1006", "1007", "1008", "1009"];
function pass(){
var searchKey = document.searchform.inputVal.value;
for (var i = 0, len = array.length; i < len; i++){
if (array[i] == searchKey){
counter = 1;
arraynumb = i;
}
}
}
function pass1(){
var searchKey2 = document.searchform.inputVal2.value;
for (var i = 0, len = array2.length; i < len; i++){
if (array2[i] == searchKey2){
counter2 = 1;
arraynumb2 = i;
}
}
}
function access()
{
if (counter == 1 && counter2 == 1 && arraynumb == arraynumb2)
{
window.alert("You may access the website");
global = 1;
}
else{
window.alert("You may not access the website");
global = 0;
}
}
function link()
{
var searchKey3 = document.searchform.inputVal.value;
if (global == 1 && (searchkey3 == array[0] || searchkey3 == array[1] || searchkey3 == array[2] ))
{
window.alert("You are an administrator, you may use all the ciphers");
}
else
window.alert("you are not signed in, please do so");
}
function secondgroup()
{
var searchKey4 = document.searchform.inputVal.value;
if (global == 1 && (searchkey4 == array[3] || searchkey4 == array[4] || searchkey4 == array[5] ))
{
window.alert("You are an ordinary user of class A, you may proceed to access the Shift, Vigenere and Permutation ciphers");
}
else
window.alert("You may not access this cipher");
}
fucntion thirdgroup()
{
var searchKey5 = document.searchform.inputVal.value;
if (global == 1 && (searchkey5 == array[6] || searchkey5 == array[7] || searchkey5 == array[8] || searchkey5 == array[9] ))
{
window.alert("You are an ordinary user of class B, you may proceed to access the Hill, Affine, Substitution and DES ciphers");
}
else
window.alert("You may not access this cipher");
}
</script>
</head>
<body>
<form name = "searchform" action = "">
<p>Enter username<br/>
<input name = "inputVal" type = "text" size = "30"/>
<input name = "search2" type = "button" value = "Search" onclick = "pass()"/>
</p>
<p>Enter password<br/>
<input name = "inputVal2" type = "password" size = "30"/>
<input name = "search" type = "button" value = "Search" onclick = "pass1()"/>
<input name = "Access site" type = "button" value = "Access" onclick = "access()"/>
<br/>
<br/>
<input name = "link to" type = "button" value = "Shift" onclick = "link();return secondgroup();" enabled=""/>
<input name = "link to" type = "button" value = "Vigenere" onclick = "link();return secondgroup();" enabled=""/>
<input name = "link to" type = "button" value = "Permutation" onclick = "link();return secondgroup();" enabled=""/>
<input name = "link to" type = "button" value = "Hill" onclick = "link();return thirdgroup();" enabled=""/>
<input name = "link to" type = "button" value = "Affine" onclick = "link();return thirdgroup();" enabled=""/>
<input name = "link to" type = "button" value = "Substitution" onclick = "link();return thirdgroup();" enabled=""/>
<input name = "link to" type = "button" value = "Des" onclick = "link();return thirdgroup();" enabled=""/>
<br/>
</p>
<br/>
<p></p>
</form>
</body>
</html>
Hey all, I have a script that limit characters and lines entered by users in a textarea.. i want instead of throwing that alert message to jump to the next line and the user can continue writing, here is the script: Code: <script type="text/javascript">
var alert_title='Input Restriction';
function limitTextarea(el,maxLines,maxChar){
if(!el.x)
{
el.x=uniqueInt();
el.onblur=function(){clearInterval(window['int'+el.x])}
}
window['int'+el.x]=setInterval(function(){
var lines=el.value.replace(/\r/g,'').split('\n'),
i=lines.length,
lines_removed,
char_removed;
if(maxLines&&i>maxLines){
alert('You can not enter\nmore than '+maxLines+' lines');
lines=lines.slice(0,maxLines);
lines_removed=1
}
if(maxChar){
i=lines.length;
while(i-->0)if(lines[i].length>maxChar){
lines[i]=lines[i].slice(0,maxChar);
char_removed=1
}
if(char_removed)
alert('You can not enter more\nthan '+maxChar+' characters per line')
}
if(char_removed||lines_removed)
el.value=lines.join('\n')
},50);
}
function uniqueInt(){
var num,maxNum=100000;
if(!uniqueInt.a||maxNum<=uniqueInt.a.length)uniqueInt.a=[];
do num=Math.ceil(Math.random()*maxNum);
while(uniqueInt.a.hasMember(num))
uniqueInt.a[uniqueInt.a.length]=num;
return num
}
Array.prototype.hasMember=function(testItem){
var i=this.length;
while(i-->0)if(testItem==this[i])return 1;
return 0
};
</script>
The HTML Code: <textarea onFocus="limitTextarea(this,5,40)" wrap="soft"></textarea> please help! Hello Friends... I am working on the healthcare project.So in that project there are different html pages for the user interaction & Events,such as user registration,patient profiles,doctor registration. So in the patient registration page i want to add the calendar control the requirement is whenever i click on the calendar control the user selected date is displayed in the textbox in the ddmmyyyy format.. So please tell me the answer... Thanking you..... Umesh Hi, Ok i want to do the following... I am using blogger and I have thousands of posts and each post topic has a specific image assigned to it but every now and then I like to change the image that is being displayed but then I have to go through thousands of posts to change the image URL and this takes super long to complete. I thought of an idea of using Javascript to control this so I need your help please.. I want to be able to have a JS that I can insert the URL's of each image required for the posts and assign an ID like a number or a name to them, then have a seperate JS script that I can insert in ALL my posts and assign the same number to each related post relating to the image ID... So if I need to change images then all I need to do is change the URL in the Javascript and it affects all the posts that contain this image... hope this makes sense.. Please help Thank you. I have seen code like this but it only randomizes the images but is the same concept, perhaps someone can just alter this code for me please... [CODE] <head> <script language="JavaScript"> <!-- var theImages = new Array() theImages[0] = 'http://lh5.ggpht.com/_MAclvGBXzj4/TEtvnlxvvrI/AAAAAAAABQw/N7UVoBvtjxU/s320/video34.png' theImages[1] = 'http://lh6.ggpht.com/_MAclvGBXzj4/TEIZlr5FE6I/AAAAAAAABKU/LoBdw7Kqf3w/s200/Inside-blogger-256.png' theImages[2] = 'http://3.bp.blogspot.com/_MAclvGBXzj4/TCHDY788QaI/AAAAAAAAAAU/SnWr-NP0dqE/s200/news.png' theImages[3] = 'http://3.bp.blogspot.com/_MAclvGBXzj4/TEwgs_hhcXI/AAAAAAAABQ4/JTX1mzmdQLU/s200/croatia-flag.GIF' theImages[4] = 'http://lh6.ggpht.com/_MAclvGBXzj4/TEtzAvpIEQI/AAAAAAAABQ0/RiLAfiUsCiA/s320/warning23.png' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } //--> </script> </head> <body> <script language="JavaScript"> <!-- showImage(); </script> </body> [CODE] I've got a style control for my website where the user can select text color and background color. Cookies then remember the selections. The problem I have is when you select a text color the background color is changed instead of the text color. After page refresh both the text and background colors are correct. The error console reports a few errors in each js script. The errors all say 'sel is undefined' on line 7. html: Code: <!DOCTYPE html>
<html lang="en">
<head>
<title>Style Control</title>
</head>
<body>
<p><b>Style Control</b></p>
<p>Text color: (Broke - Sets bg color insted, works after page refresh)</p>
<form onsubmit="return false;" action="">
<script type="text/javascript" language="JavaScript" src="text_color.js"></script>
<select name="color_select1" size="1" onchange="return setColor(this, global_name1)">
<option style="background-color: white;" value="white">white</option>
<option style="background-color: black; color: white;" value="black">black</option>
<option style="background-color: seagreen;" value="seagreen">seagreen</option>
<option style="background-color: springgreen;" value="springgreen">springgreen</option>
<option style="background-color: royalblue;" value="royalblue">royalblue</option>
<option style="background-color: skyblue;" value="skyblue">skyblue</option>
</select>
</form>
<br /><br />
<p>Background color:</p>
<form onsubmit="return false;" action="">
<script type="text/javascript" language="JavaScript" src="bg_color.js"></script>
<select name="color_select2" size="1" onchange="return setColor(this, global_name2)">
<option style="background-color: white;" value="white">white</option>
<option style="background-color: black; color: white;" value="black">black</option>
<option style="background-color: seagreen;" value="seagreen">seagreen</option>
<option style="background-color: springgreen;" value="springgreen">springgreen</option>
<option style="background-color: royalblue;" value="royalblue">royalblue</option>
<option style="background-color: skyblue;" value="skyblue">skyblue</option>
</select>
</form>
</body>
</html>
</body>
</html>
text_color.js : Code: var global_name1 = 'tcolor';
//
function getColor(sel, cookie_name) {
var cookie_value = getCookie(cookie_name);
if (!cookie_value) cookie_value = 'black';
document.body.style.color = cookie_value;
var opt = sel.options;
var x, len = sel.length;
for (x=0; x<len; x++) {
if (opt[x].value == cookie_value) {
opt[x].selected = true;
break;
}
}
return true;
}
getColor(document.forms[0].color_select1, global_name1);
//
function setColor(sel, cookie_name) {
var opt = sel.options[sel.selectedIndex].value;
var oneDay = 24 * 60 * 60 * 1000;
var oneYear = 365 * oneDay;
var expDate = new Date();
expDate.setTime(expDate.getTime() + oneYear);
setCookie(cookie_name, opt, expDate);
return getColor(sel, cookie_name);
}
// ---------------------------------------- //
function getCookie(name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function setCookie(name, value) {
var argv = setCookie.arguments;
var argc = setCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function delCookie(name) {
exp = new Date();
exp.setTime(exp.getTime() - (24*60*60*1000));
var cval = getCookie(name);
cval = (cval == null) ? "" : cval;
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
bg_color.js : Code: var global_name2 = 'bgcolor';
//
function getColor(sel, cookie_name) {
var cookie_value = getCookie(cookie_name);
if (!cookie_value) cookie_value = 'white';
document.body.style.backgroundColor = cookie_value;
var opt = sel.options;
var x, len = sel.length;
for (x=0; x<len; x++) {
if (opt[x].value == cookie_value) {
opt[x].selected = true;
break;
}
}
return true;
}
getColor(document.forms[0].color_select2, global_name2);
//
function setColor(sel, cookie_name) {
var opt = sel.options[sel.selectedIndex].value;
var oneDay = 24 * 60 * 60 * 1000;
var oneYear = 365 * oneDay;
var expDate = new Date();
expDate.setTime(expDate.getTime() + oneYear);
setCookie(cookie_name, opt, expDate);
return getColor(sel, cookie_name);
}
// ---------------------------------------- //
function getCookie(name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function setCookie(name, value) {
var argv = setCookie.arguments;
var argc = setCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function delCookie(name) {
exp = new Date();
exp.setTime(exp.getTime() - (24*60*60*1000));
var cval = getCookie(name);
cval = (cval == null) ? "" : cval;
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
Many thanks for any help. Hello friends... i am working on the healthcare project.In which there are user interactive pages such as registration page,profile page. In registration page to register the portal the birth date of user is required . so i have added the calendar control using javascript. I want that whenever user clicks on the calendar the birth date is displayed in the textfield. but it cannot displayed the birth date... So please tell me the sloution... following is the code for calendar control <p> <meta content="text/html;" http-equiv="Content-Type" /> <style type="text/css"> #calender { width: 200px; font-family: ms sans serif, sans serif; font-size: 7pt; } #calenderTable { border-style: outset; border-width: 2px; border-color: black; background-color: #EEE; display: none; position: absolute; z-index: 1; top: 0px; left: 0px; } #calenderTableHead TR { background-color: #5FB404; } #calenderTableDays TR { background-color: #B40404; color: #E6E6E6; } .normalDay { border: 1px dotted black; cursor: pointer; } .hlDay { border: 1px black; background-color: #585858; color: #E6E6E6; cursor: pointer; } .toDay { border: 1px solid #E70; background-color: #FD8; color: #E70; font-weight: bold; cursor: pointer; } .choosenDay { border: 1px #000000; background-color: #585858; color: #E6E6E6; font-weight: bold; cursor: pointer; } </style> <link rel="stylesheet" type="text/css" href="calendar.css" /> <script language="javaScript" type="text/javascript" src="calendar.js"> // Array of max days in month in a year and in a leap year monthMaxDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; monthMaxDaysLeap= [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; hideSelectTags = []; function getRealYear(dateObj) { return (dateObj.getYear() % 100) + (((dateObj.getYear() % 100) < 39) ? 2000 : 1900); } function getDaysPerMonth(month, year) { /* Check for leap year. These are some conditions to check year is leap year or not... 1.Years evenly divisible by four are normally leap years, except for... 2.Years also evenly divisible by 100 are not leap years, except for... 3.Years also evenly divisible by 400 are leap years. */ if ((year % 4) == 0) { if ((year % 100) == 0 && (year % 400) != 0) return monthMaxDays[month]; return monthMaxDaysLeap[month]; } else return monthMaxDays[month]; } function createCalender(year, month, day) { // current Date var curDate = new Date(); var curDay = curDate.getDate(); var curMonth = curDate.getMonth(); var curYear = getRealYear(curDate) // if a date already exists, we calculate some values here if (!year) { var year = curYear; var month = curMonth; } var yearFound = 0; for (var i=0; i<document.getElementById('selectYear').options.length; i++) { if (document.getElementById('selectYear').options[i].value == year) { document.getElementById('selectYear').selectedIndex = i; yearFound = true; break; } } if (!yearFound) { document.getElementById('selectYear').selectedIndex = 0; year = document.getElementById('selectYear').options[0].value; } document.getElementById('selectMonth').selectedIndex = month; // first day of the month. var fristDayOfMonthObj = new Date(year, month, 1); var firstDayOfMonth = fristDayOfMonthObj.getDay(); continu = true; firstRow = true; var x = 0; var d = 0; var trs = [] var ti = 0; while (d <= getDaysPerMonth(month, year)) { if (firstRow) { trs[ti] = document.createElement("TR"); if (firstDayOfMonth > 0) { while (x < firstDayOfMonth) { trs[ti].appendChild(document.createElement("TD")); x++; } } firstRow = false; var d = 1; } if (x % 7 == 0) { ti++; trs[ti] = document.createElement("TR"); } if (day && d == day) { var setID = 'calenderChoosenDay'; var styleClass = 'choosenDay'; var setTitle = 'this day is currently selected'; } else if (d == curDay && month == curMonth && year == curYear) { var setID = 'calenderToDay'; var styleClass = 'toDay'; var setTitle = 'this day today'; } else { var setID = false; var styleClass = 'normalDay'; var setTitle = false; } var td = document.createElement("TD"); td.className = styleClass; if (setID) { td.id = setID; } if (setTitle) { td.title = setTitle; } td.onmouseover = new Function('highLiteDay(this)'); td.onmouseout = new Function('deHighLiteDay(this)'); if (targetEl) td.onclick = new Function('pickDate('+year+', '+month+', '+d+')'); else td.style.cursor = 'default'; td.appendChild(document.createTextNode(d)); trs[ti].appendChild(td); x++; d++; } return trs; } function showCalender(elPos, tgtEl) { targetEl = false; if (document.getElementById(tgtEl)) { targetEl = document.getElementById(tgtEl); } else { if (document.forms[0].elements[tgtEl]) { targetEl = document.forms[0].elements[tgtEl]; } } var calTable = document.getElementById('calenderTable'); var positions = [0,0]; var positions = getParentOffset(elPos, positions); calTable.style.left = positions[0]+'px'; calTable.style.top = positions[1]+'px'; calTable.style.display='block'; var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$'); var m = matchDate.exec(targetEl.value); if (m == null) { trs = createCalender(false, false, false); showCalenderBody(trs); } else { if (m[1].substr(0, 1) == 0) m[1] = m[1].substr(1, 1); if (m[2].substr(0, 1) == 0) m[2] = m[2].substr(1, 1); m[2] = m[2] - 1; trs = createCalender(m[3], m[2], m[1]); showCalenderBody(trs); } hideSelect(document.body, 1); } function showCalenderBody(trs) { var calTBody = document.getElementById('calender'); while (calTBody.childNodes[0]) { calTBody.removeChild(calTBody.childNodes[0]); } for (var i in trs) { calTBody.appendChild(trs[i]); } } function setYears(sy, ey) { // current Date var curDate = new Date(); var curYear = getRealYear(curDate); if (sy) startYear = curYear; if (ey) endYear = curYear; document.getElementById('selectYear').options.length = 0; var j = 0; for (y=ey; y>=sy; y--) { document.getElementById('selectYear')[j++] = new Option(y, y); } } function hideSelect(el, superTotal) { if (superTotal >= 100) { return; } var totalChilds = el.childNodes.length; for (var c=0; c<totalChilds; c++) { var thisTag = el.childNodes[c]; if (thisTag.tagName == 'SELECT') { if (thisTag.id != 'selectMonth' && thisTag.id != 'selectYear') { var calenderEl = document.getElementById('calenderTable'); var positions = [0,0]; var positions = getParentOffset(thisTag, positions); // nieuw var thisLeft = positions[0]; var thisRight = positions[0] + thisTag.offsetWidth; var thisTop = positions[1]; var thisBottom = positions[1] + thisTag.offsetHeight; var calLeft = calenderEl.offsetLeft; var calRight = calenderEl.offsetLeft + calenderEl.offsetWidth; var calTop = calenderEl.offsetTop; var calBottom = calenderEl.offsetTop + calenderEl.offsetHeight; if ( ( /* check if it overlaps horizontally */ (thisLeft >= calLeft && thisLeft <= calRight) || (thisRight <= calRight && thisRight >= calLeft) || (thisLeft <= calLeft && thisRight >= calRight) ) && ( /* check if it overlaps vertically */ (thisTop >= calTop && thisTop <= calBottom) || (thisBottom <= calBottom && thisBottom >= calTop) || (thisTop <= calTop && thisBottom >= calBottom) ) ) { hideSelectTags[hideSelectTags.length] = thisTag; Tag.style.display = 'none'; } } } else if(thisTag.childNodes.length > 0) { hideSelect(thisTag, (superTotal+1)); } } } function closeCalender() { for (var i=0; i<hideSelectTags.length; i++) { hideSelectTags[i].style.display = 'block'; } hideSelectTags.length = 0; document.getElementById('calenderTable').style.display='none'; } function highLiteDay(el) { el.className = 'hlDay'; } function deHighLiteDay(el) { if (el.id == 'calenderToDay') el.className = 'toDay'; else if (el.id == 'calenderChoosenDay') el.className = 'choosenDay'; else el.className = 'normalDay'; } function pickDate(year, month, day) { month++; day = day < 10 ? '0'+day : day; month = month < 10 ? '0'+month : month; if (!targetEl) { alert('target for date is not set yet'); } else { targetEl.value= day+'-'+month+'-'+year; closeCalender(); } } function getParentOffset(el, positions) { positions[0] += el.offsetLeft; positions[1] += el.offsetTop; if (el.offsetParent) positions = getParentOffset(el.offsetParent, positions); return positions; } </script> <link rel="stylesheet" type="text/css" href="calendar.css" /></p> <form> <input name="datum1" type="text" /><a onClick="setYears(1900, 2020); showCalender(this, 'datum1');" href="#"> <img alt="" width="17" height="13" src="/image/image_gallery?uuid=ad0e28d1-ae91-4535-a558-32d62a7df92e&groupId=10136&t=1294233035464" /></a> </form> <!-- Calender Script --> <table id="calenderTable"> <tbody id="calenderTableHead"> <tr> <td colspan="4" align="center"><select id="selectMonth" onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value, this.selectedIndex, false));"> <option value="0" selected="selected">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 id="selectYear" onChange="showCalenderBody(createCalender(this.value, document.getElementById('selectMonth').selectedIndex, false));"></select></td> <td align="center"><a onClick="closeCalender();" href="#"><font color="#003333" size="+1">X</font></a></td> </tr> </tbody> <tbody id="calenderTableDays"> <tr> <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> <!-- End Calender Script --> Thanking you... can anyone tell me how to use jquery with asp.net web user control? Thanks in Advance Regards Salman Ansari I've been trying to get a form to control iframes, but new to javascript I basically want to input the url from a form & display it in an iframe, but cant figure out how to link the url from the form to the iframe The code im using atm Code: <html>
<head>
<title> SearchLite v2 - search multiple sites at once</title>
<STYLE TYPE="text/css">
.txt
{
BACKGROUND-COLOR: lavender; BORDER-BOTTOM-COLOR: lavender; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-COLOR: lavender; BORDER-LEFT-WIDTH: 0px; BORDER-RIGHT-COLOR: lavender; BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-COLOR: lavender; BORDER-TOP-WIDTH: 0px; HEIGHT: 22px; WIDTH: 599px;
}
.cellht
{
HEIGHT: 50px;
}
.cell
{
BACKGROUND-COLOR: lavender;
}
</STYLE>
<script>
function win()
{
frmlen = document.myform.elements.length;
idiv=1;
for (var icnt=0;icnt<frmlen;icnt++)
{
//loop thru all FORM elements and look for checkboxes which have been checked
if (document.myform.elements[icnt].type=="checkbox" && document.myform.elements[icnt].checked)
{
//make IFRAME visible
document.getElementById("f"+idiv).style.visibility = 'visible';
//make textbox that shows heading with name of site being searched, visible
document.getElementById("t"+idiv).style.visibility = 'visible';
//build the URL
strSite = document.myform.elements[icnt].value;
strSearch= escape(document.myform.mytext.value);
url = strSite + strSearch;
//set SRC property of IFRAME to dynamically built URL
document.getElementById("f"+idiv).src = url;
//show only the domain name part of the URL
dmn=url.substring(7);
document.getElementById("t"+idiv).value= dmn.substring(0,dmn.indexOf("/"));
idiv+=1;
}
}
}
function hide()
{
for (var icnt=1;icnt<13;icnt++)
{
//hide all IFRAME s
document.getElementById("f"+icnt).style.visibility = 'hidden';
//hide all the camouflaged textboxes that display the title
document.getElementById("t"+icnt).style.visibility = 'hidden';
}
}
</script>
</head>
//Form1 i want to use for the url ...........
<form> Enter URL1: <input type="text" name="Enter Url" /> </form>
//Form2 i want to use for the url ...........
<form> Enter URL2: <input type="text" name="Enter Url" /> </form>
<body onload="hide()">
<form method=post action="" name="myform">
<table border=0 align='center'>
<tr><td colspan=3 height='30%'><font size="5">SEARCH</font><i><font size="5" color="blue">LITE</font></i> v2 -search multiple sites at once and view results on a single page </td><td colspan=2> </td></tr>
<tr >
<td COLSPAN=3 ><input type="text" name="mytext" size="55"></td>
<td COLSPAN=3><input type="button" value="Find" onClick="win()"> <input type="reset" value="Reset" onclick="hide()"> <a href="mailto:dotnut@hotmail.com">Feedback</a></td>
</tr>
<tr > //Want to change the value= replaced by the value in the form
<td class="cell"><input type="checkbox" name="1" value="http://www.google.com/search?hl=en&btnG=Google+Search&q=">Google</td>
<td class="cell"><input type="checkbox" name="2" value="http://www.dictionary.com/search?q=">Dictionary</td>
<tr><td COLSPAN=5 HEIGHT='50' CLASS='cellht'><input type='text' id='t1' class='txt'></td></tr>
<tr><td COLSPAN=5><IFRAME id='f1' FRAMEBORDER=1 SCROLLING='yes' WIDTH=600 HEIGHT=360></IFRAME><br></td></tr>
<tr><td COLSPAN=5 CLASS='cellht'><input type='text' id='t2' class='txt' ></td></tr>
<tr><td COLSPAN=5><IFRAME id='f2' FRAMEBORDER=1 SCROLLING='yes' WIDTH=600 HEIGHT=360></IFRAME><br></td></tr>
</table>
</form>
</body>
</html>
thnx All, I have some code on my page which changes images in a div without reloading the page. This works great, however my problem comes with I go through a couple images and the actual URL is still on the original image. Is there any way to change the URL when I click the image as well?? Thanks in advance. edit::I guess I tried everything else before thinking of a toggle variable....seems to be working now I have an if clause that triggers died(); Quote: died() { monster.y=-100; //move element off canvas setTimeout("respawn()", 2500); } respawn() { //move monster to random location inside canvas monster.x = 32 + (Math.random() * (canvas.width - 64)); monster.y = 32 + (Math.random() * (canvas.height - 64)); } if(collision condition true) { died(); } This works but it sends setTimeout("respawn()",2500); about a dozen times, so 2.5 seconds later when it respawns it runs a dozen times and the monster flickers around the canvas before finding it's final destination. I've tried both a WHILE loop which WORKED initially but I couldn't get it to reset properly, it worked the first time it ran and that was it.... I tried an if() with a global variable called count so it would only be called if count was under 2 but it didn't work right.... I tried a for loop as well. But my main() function is running every 10ms, and it just triggers things so fast that it triggers things multiple times when I only want it to fire once.... pseudo of what I'm trying to do. If(collision) {died();} died(){ move char off viewable screen, delay 2.5 seconds before moving back onto screen at random location} Seems so simple......but when there's a collision, it sends died() every pixel as the 2 objects move across each other.....where I need it to only trigger died after the first collision is detected and stop checking for 2.5 seconds or the duration of the wait before showing back up on the screen.. so maybe I need a new function to call died which can only be called once.... |
|||||||