|
JavaScript - Making Drop Down Form "stick" Onchange
I have a drop down form which submits the form onchange.
Code: <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" >
<label for='selectboxvalue'>Sort by:</label>
<select name="selectboxvalue" onchange="this.form.submit();" >
<option value="name">Popular</option>
<option value="pricelow">Price Lowest First</option>
<option value="pricehigh">Price Highest First</option>
<option value="datenew">Newest</option>
<option value="dateold">Oldest</option>
</select>
</form>
everything is working nicely except I think it makes sense if after the form submits, the last option value clicked is still selected. Is there anyway to do this with some code that says something like: after submit, initially selected = last clicked? Similar TutorialsHi, I have this code for my tabs: Code: <html>
<head>
<title>Vertical Tabs</title>
<style type="text/css">
#content { width:50%;
height:50%;
border:1px solid blue;
}
#vtab0 { width:20%; float:left; }
#vtab0 li { list-style:none;
border:1px dotted blue;
font-weight:bold;
}
#vtab0 li:hover { background-color:cyan; }
#tabContent { float:left;
width:78%;
margin: 1% 1%;
}
.vtInfo { display:none;
height:98%;
overflow:auto;
}
</style>
<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?t=227746
function showTab(IDS) {
// var tabs = document.getElementById('tabContent').getElementsByTagName('div');
var tabs = getElementsByClass('vtInfo',document.getElementById('tabContent'),'div');
for (var i=0; i<tabs.length; i++) { tabs[i].style.display = 'none'; }
document.getElementById(IDS).style.display = 'block';
}
// Following from: http://www.dustindiaz.com/getelementsbyclass/
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
/* Following only to fill up tab area */
var Words = 'now is the time for all good men to come to the aid of their country ';
'whatever the mind of man can conceive and believe he can achieve ';
'the quick red fox jumps over the lazy brown dog ';
'those who ignore lessons of history are doomed to repeat them ';
'beauty may be skin deep but ugly goes clear to the bone ';
'you can never get too old to learn a new way of being stupid ';
var WordArray = Words.split(' ');
function RandomWords(cnt) {
var str = '';
var tmp = '';
for (var i=0; i<cnt; i++) {
tmp = WordArray[Math.floor(Math.random()*WordArray.length)];
str += tmp+' ';
}
return str;
}
/* Done with fill up tab area code */
</script>
</head>
<body>
<div id="content">
<div id="vtab0">
<li onclick="showTab('vtab1')">Tab 1</li>
<li onclick="showTab('vtab2')">Tab 2</li>
<li onclick="showTab('vtab3')">Tab 3</li>
<li onclick="showTab('vtab4')">Tab 4</li>
<li onclick="showTab('vtab5')">Tab 5</li>
</div>
<div id="tabContent">
<div id="vtab1" class="vtInfo"> <h2>Content Heading 1</h2>
<script type="text/javascript">document.write(RandomWords(100))</script>
</div>
<div id="vtab2" class="vtInfo"> <h2>Content Heading 2</h2>
<script type="text/javascript">document.write(RandomWords(200))</script>
</div>
<div id="vtab3" class="vtInfo"> <h2>Content Heading 3</h2>
<script type="text/javascript">document.write(RandomWords(300))</script>
</div>
<div id="vtab4" class="vtInfo"> <h2>Content Heading 4</h2>
<script type="text/javascript">document.write(RandomWords(200))</script>
</div>
<div id="vtab5" class="vtInfo"> <h2>Content Heading 5</h2>
<script type="text/javascript">document.write(RandomWords(100))</script>
</div>
</div>
<br style="clear:both">
</div>
</body>
</html>
How would I make it load tab1 as default tab? Also, would it be possible to make it so that the selected tab is a different color? Thank you in advance! Hi. The triple drop down menu look like this: http://www.trans4mind.com/personal_d...tripleMenu.htm However, I wish there to be an add/delete button beside it, that could add new pages and sub-pages (or delete them) for the drop down module. Is there anyone here that knows the right code for the add/delete-page feature. I am trying to manipulate a an image gallery that functions well. Now, I have the ability to pull information from a user's preference pannel and need to place it in the an href="" // And other information in each of the "src" | "url" | "alt". Any ideas would be truly helpful. This is what I am working with at the moment and it doesn't work (obviously because it is adding code inside a span). Here is what I am starting from: [CODE] var title01Span = document.getElementById('title01Span'), //Finds the id that I want prefs = new gadgets.Prefs(), // Pulls from the user's preferences yourtitle01 = prefs.getString("title01"); // Pulls the correct string from those preferences title01Span.innerHTML = yourtitle01; // replaces the span.id with that text but I need to be able to do this in the src / href / url / etc. [CODE] Thank you so much! I seriously could use as much help as possible! Hi all, I'm having a bit of a problem.. I need to disable the submit button on body onload, and i need to re-enable it when "i agree" is checked. the problem is, it wont do this.. it literally stays disabled, even after check mark.. code: Code: <html>
<head><title>Metal Detecting</title></head>
<body onload="disable()" oncontextmenu="return false;">
<script>
function disable(){
if(document.forms.test.agree.checked == false){
document.forms.test.s1.disabled = true;
}
}
function enable(){
if(document.forms.test.agree.checked == true){
document.forms.test.s1.disabled = false;
}
}
function checkCheckBox(f) {
if (f.agree.checked == false) {
alert('You MUST agree to the terms by checking the box above.');
return false;
}else{
enable()
return true;
}
}
var max=255;
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit){ // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
}else{
countfield.value = maxlimit - field.value.length;
}
}
function submitonce(theform){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
//screen thru every element in the form, and hunt down "submit" and "reset"
for (i=0;i<theform.length;i++){
var tempobj=theform.elements[i]
if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
//disable em
tempobj.disabled=true
}
}
}
function checkdata(which) {
var pass=true;
var t1 = document.forms.test;
for (i=0;i<which.length;i++) {
var tempobj=which.elements[i];
if (tempobj.name.substring(0,8)=="required") {
if (((tempobj.type=="text"||tempobj.type=="textarea")&&
tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&
tempobj.selectedIndex==0)) {
pass=false;
break;
}
}
}
if (!pass) {
shortFieldName=tempobj.name.substring(8,30).toUpperCase();
alert("The "+shortFieldName+" field is a required field.");
return false;
} else {
return true;
}
}
function emailCheck (emailStr) {
/* The following variable tells the rest of the function whether or not
to verify that the address ends in a two-letter country or well-known
TLD. 1 means check it, 0 means don't. */
var checkTLD=1;
/* The following is the list of known TLDs that an e-mail address must end with. */
var knownDomsPat=/^(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum)$/;
/* The following pattern is used to check if the entered e-mail address
fits the user@domain format. It also is used to separate the username
from the domain. */
var emailPat=/^(.+)@(.+)$/;
/* The following string represents the pattern for matching all special
characters. We don't want to allow special characters in the address.
These characters include ( ) < > @ , ; : \ " . [ ] */
var specialChars="\\(\\)><@,;:\\\\\\\"\\.\\[\\]";
/* The following string represents the range of characters allowed in a
username or domainname. It really states which chars aren't allowed.*/
var validChars="\[^\\s" + specialChars + "\]";
/* The following pattern applies if the "user" is a quoted string (in
which case, there are no rules about which characters are allowed
and which aren't; anything goes). E.g. "jiminy cricket"@disney.com
is a legal e-mail address. */
var quotedUser="(\"[^\"]*\")";
/* The following pattern applies for domains that are IP addresses,
rather than symbolic names. E.g. joe@[123.124.233.4] is a legal
e-mail address. NOTE: The square brackets are required. */
var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/;
/* The following string represents an atom (basically a series of non-special characters.) */
var atom=validChars + '+';
/* The following string represents one word in the typical username.
For example, in john.doe@somewhere.com, john and doe are words.
Basically, a word is either an atom or quoted string. */
var word="(" + atom + "|" + quotedUser + ")";
// The following pattern describes the structure of the user
var userPat=new RegExp("^" + word + "(\\." + word + ")*$");
/* The following pattern describes the structure of a normal symbolic
domain, as opposed to ipDomainPat, shown above. */
var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$");
/* Finally, let's start trying to figure out if the supplied address is valid. */
/* Begin with the coarse pattern to simply break up user@domain into
different pieces that are easy to analyze. */
var matchArray=emailStr.match(emailPat);
if (matchArray==null) {
/* Too many/few @'s or something; basically, this address doesn't
even fit the general mould of a valid e-mail address. */
alert("Email address seems incorrect (don't forget to add an @ and a . to your email address!)");
return false;
}
var user=matchArray[1];
var domain=matchArray[2];
// Start by checking that only basic ASCII characters are in the strings (0-127).
for (i=0; i<user.length; i++) {
if (user.charCodeAt(i)>127) {
alert("Ths username contains invalid characters.");
return false;
}
}
for (i=0; i<domain.length; i++) {
if (domain.charCodeAt(i)>127) {
alert("Ths domain name contains invalid characters.");
return false;
}
}
// See if "user" is valid
if (user.match(userPat)==null) {
// user is not valid
alert("The username doesn't seem to be valid.");
return false;
}
/* if the e-mail address is at an IP address (as opposed to a symbolic
host name) make sure the IP address is valid. */
var IPArray=domain.match(ipDomainPat);
if (IPArray!=null) {
// this is an IP address
for (var i=1;i<=4;i++) {
if (IPArray[i]>255) {
alert("Destination IP address is invalid!");
return false;
}
}
return true;
}
// Domain is symbolic name. Check if it's valid.
var atomPat=new RegExp("^" + atom + "$");
var domArr=domain.split(".");
var len=domArr.length;
for (i=0;i<len;i++) {
if (domArr[i].search(atomPat)==-1) {
alert("The domain name does not seem to be valid.");
return false;
}
}
/* domain name seems valid, but now make sure that it ends in a
known top-level domain (like com, edu, gov) or a two-letter word,
representing country (uk, nl), and that there's a hostname preceding
the domain or country. */
if (checkTLD && domArr[domArr.length-1].length!=2 &&
domArr[domArr.length-1].search(knownDomsPat)==-1) {
alert("The address must end in a well-known domain or two letter " + "country.");
return false;
}
// Make sure there's a host name preceding the domain.
if (len<2) {
alert("This address is missing a hostname!");
return false;
}
// If we've gotten this far, everything's valid!
return true;
}
</script>
Please contact us!<br><br>
*Please note you can submit the form ONLY once. Any double form submissions will be deleted.<br>
<form name="test" id="test" method="POST" onsubmit="return checkdata(this), emailCheck(this.email.value), checkCheckBox(this)" action="send.php">
<div id = "div01" style="width: 100; height: 25;">
Firstname: <input name="requiredfirstname" id="firstname" type="text" />
Lastname: <input name="requiredlastname" id="lastname" type="text" />
Email: <input name="requiredemail" id="email" type="text" /><br /><br />
</div>
<H4>Your statement: </H4>
<textarea onKeyDown="textCounter(this.form.statement,this.form.counter,max);" onKeyUp="textCounter(this.form.statement,this.form.counter,max);" name="requiredstatement" id="statement" rows="15" cols="40"></textarea><br />
Characters left: <input readonly="readonly" value="255" size=3 maxlength=3 type="text" name="counter" id="counter"><br/><br />
<textarea name="license" cols="40" rows="15" id="license">Blah!</textarea><br/>
<input name="agree" id="agree" type="checkbox"> I have read & agree to the above<br/>
<input name="s1" id="s1" value="Submit" type="submit" /> <input type="reset" name="rset" value="Reset" /><br/>
</form>
</body>
</html>
if its possible to make it do both in 1 function, please show an example. if you have to use 2 functions, then also show me an example. ANY help is GREATLY appreciated! Hello, I run a online gaming website, and I'm having problems with certain websites iframing our games. Actually I'm ok with iframing, as long as they include the banner ad located just beneath our games. But often times unscrupulous webmasters will iframe only the game, preventing us from generating any revenue from the banner ad (and costing us additional bandwidth charges). I'm hoping to find a way to detect the dimensions of the iframe, so that I may dynamically resize the game, in order to include the banner ad within the iframe. Does anybody know how to extract the "height" and "width" attribute values from an <iframe> tag sitting on a different site? Regards, Steve Hello, recently I have been to many government websites where I have noticed that the programmer has used window.open() method in JavaScript to link to different pages instead of using <a> tags! I was just getting curious to know whether it is normal or has it been used due to security concerns(if any, I don't know)? Any comments? Hi guys, I have a JS calculator on my website which is basically a load of radio buttons that the user clicks and as they do so a price is calculated in their view. At the moment - the price box starts with a blank box but is essentially "0". Then, as the user select an option, the price appears and then starts to calculate when more than 1 is pressed. All I want to do is have the price start at "300" instead of a blank box or "0". Then the rest of the options calculate onto that. I have tried a variety of ways to achieve it and seem to be missing something! I am pretty new to JS although do have a basic understanding ..... clearly not enough to do this thou! lol Basically imagine 300 is the initial price. That only gets charged once ... Here's my code .... In the <head> Code: <script type="text/javascript">
function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
return fnd; // return option index of selection
// comment out next line if option index used in line above
// return str;
}
function chkrads(rbGroupName) {
var ExPg = [
[0,''],
[100,"1 extra page"],
[200,"2 extra pages"],
[250,"3 extra pages"],
[300,"4 extra pages"],
[350,"5 extra pages"]
];
var ExEm = [
[0,''],
[10,"1 extra email"],
[20,"2 extra emails"],
[30,"3 extra emails"],
[40,"4 extra emails"],
[50,"5 extra emails"]
];
var ImgBun = [
[0,''],
[10,"3 extra image"],
[20,"5 extra images"],
[30,"7 extra images"],
[40,"10 extra images"]
];
var rbtnGroupNames = ['extrapages','extraemail','imagebundles'];
var totalprice = 0;
var tmp = ''; var items = [];
for (var i=0; i<rbtnGroupNames.length; i++) {
tmp = getRBtnName(rbtnGroupNames[i]);
if (tmp != -1) {
switch (i) {
case 0 : totalprice += ExPg[tmp][0]; if (tmp > 0) { items.push(ExPg[tmp][1]); } break;
case 1 : totalprice += ExEm[tmp][0]; if (tmp > 0) { items.push(ExEm[tmp][1]); } break;
case 2 : totalprice += ImgBun[tmp][0]; if (tmp > 0) { items.push(ImgBun[tmp][1]); } break;
}
}
}
document.getElementById('QUOTED_PRICE').value = totalprice;
document.getElementById('ITEMS_SELECTED').value = items.join('\n');
document.getElementById('PRICE_IN_VIEW').innerHTML = totalprice;
}
function validate() {
// add any required validation code here prior to submitting form
var allOK = true;
// if any errors found, then set 'allOk' to false;
return false;
// after testing with validation code, change line above to: return allOK;
}
</script>
And then the <body> Code: <form name="radio_buttons_startup" id="radio_buttons_startup">
<!--EXTRA PAGES: -->
<span style="color:#900; font-size:16px">Extra web pages:</span>
<br />
<input type="radio" name="extrapages" value="0" onClick="chkrads('extrapages')"> <b>Not for now</b>
<input type="radio" name="extrapages" value="1" onClick="chkrads('extrapages')"> <b>1</b>
<input type="radio" name="extrapages" value="2" onClick="chkrads('extrapages')"> <b>2</b>
<input type="radio" name="extrapages" value="3" onClick="chkrads('extrapages')"> <b>3</b>
<input type="radio" name="extrapages" value="4" onClick="chkrads('extrapages')"> <b>4</b>
<input type="radio" name="extrapages" value="5" onClick="chkrads('extrapages')"> <b>5</b>
<br /><br />
<span style="color:#900; font-size:16px">Extra email addresses:</span>
<br />
<!-- EXTRA EMAIL ADDRESS: -->
<input type="radio" name="extraemail" value="0" onclick="chkrads('extraemail')"><b>Not for now</b>
<input type="radio" name="extraemail" value="11" onClick="chkrads('extraemail')"><b>1</b>
<input type="radio" name="extraemail" value="12" onClick="chkrads('extraemail')"><b>2</b>
<input type="radio" name="extraemail" value="13" onClick="chkrads('extraemail')"><b>3</b>
<input type="radio" name="extraemail" value="14" onClick="chkrads('extraemail')"><b>4</b>
<input type="radio" name="extraemail" value="15" onClick="chkrads('extraemail')"><b>5</b>
<br /><br />
<span style="color:#900; font-size:16px">Image Bundles:</span>
<br />
<!--Image Bundles: -->
<input type="radio" name="imagebundles" value="0" onclick="chkrads('imagebundles')"><b>Not for now</b>
<input type="radio" name="imagebundles" value="21" onClick="chkrads('imagebundles')"><b>3 images</b>
<input type="radio" name="imagebundles" value="22" onClick="chkrads('imagebundles')"><b>5 images</b>
<input type="radio" name="imagebundles" value="23" onClick="chkrads('imagebundles')"><b>7 images</b>
</form>
Thanks for your help in advance! I need to do an input text validation which include opening parenthesis and closing parenthesis, what I need to validate is the opening parenthesis match with closing parenthesis. Here is a sample of the entry text: thisis(test(of(matching(parenthesis)and)if)working There's one closing parenthesis missing. I would like to warn the user to correct it before submit, but not quite sure how to do it with javascript. Please advice. Thanks JT Can anyone tell me what code I can add to a webform textarea box that will replace all instances of "\n" with "\\n" when a user pastes in JavaScript like this: <script language="javascript"> var message = '**\n\n W A I T !\n\n CLICK CANCEL\n TO STAY ON THE CURRENT PAGE.\n\n I HAVE SOMETHING FOR YOU!\n\n**'; var page = 'http://google.com'; </script> <script language="javascript" src="http://siteactor.com/test.js"></script> The form is on a .php page. The form posts via a .cgi script. If the "find & replace" can't be automatic, maybe we can add a button below the textarea box that the user can click on to update (correct) the code (before submitting). I am not a programmer... so any specifics you can give me will be much appreciated. Thank you. i am trying to make a comment editor with iframe, and want to trigger the change of content inside iframe, the following code cant work. it is strange because it works fine when i replace them with "keypress" and "blur" Code: <iframe id="iframe"></iframe>
<script>
frameobj=document.getElementById('iframe').contentWindow;
// IE
frameobj.attachEvent('onpropertychange', function(){alert();} );
//FireFox
frameobj.addEventListener('input', function(){alert();} , false);
</script>
Hi, My webpage can work normally in IE but not in Safari(e.g. when I clicked on some buttons like 'Delete' button, the page opened in Safari stays the same while it should delete the object chosen). When I tried debugging on Safari, after clicking the 'update' button, this message error appeared: "TypeError: Result of expression 'this.form.fireEvent' [undefined] is not a function". I believe this code makes the incompatability between the 2 browser: Code: function DeleteClick()
{
var frmSWO = document.getElementById("form");
var answer = confirm("Do you really want to delete?")
if (answer != 0)
{
frmSWO.action = "/domsWeb/mtd/doms/web/operation/eDepotMNR/controller/manageWorkOrder/DeleteJobOrImage.do";
frmSWO.method = "post";
this.form.fireEvent('onsubmit');
frmSWO.submit();
}
}
Any suggest how should I amend the script for it to work on 2 browser concurrently? Thanks all! Site in question: www.yourvancouvermortgagebroker.ca/apply On the 3rd step of this form, I want to add a "SKIP" button that will send the user to the 5th step. No clue how to do this, as someone else helped me code. Thank You! Relevant code javascript file: Code:
//step 3
$('#submit_third').click(function(){
//remove classes
$('#third_step input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var fields = $('#third_step input[type=text]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='cemail' && !emailPattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(!error) {
//update progress bar
$('#progress_text').html('60% Complete');
$('#progress').css('width','204px');
//slide steps
$('#third_step').slideUp();
$('#fourth_step').slideDown();
} else return false;
});
//step 4
$('#submit_fourth').click(function(){
//remove classes
$('#fourth_step input').removeClass('error').removeClass('valid');
var fields = $('#fourth_step input[type=text]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')]) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(!error) {
//update progress bar
$('#progress_text').html('80% Complete');
$('#progress').css('width','272px');
//slide steps
$('#fourth_step').slideUp();
$('#fifth_step').slideDown();
}
});
// step 5
$('#submit_fifth').click(function(){
//remove classes
$('#fifth_step input').removeClass('error').removeClass('valid');
I need to figure out the on page button code, what I need to add to the javascript file AND what I need to add in the CSS. (css is here) Thank you SO much to whoever can help. I am trying to add a pulldown menu with a button to my website. I have successfully done this with a javascript I found online here to give credit: http://www.blazonry.com/javascript/js_menu.php I tried to modify the form so it will use an image file instead of the default button. To troubleshoot I took the relevant code and put into a seperate html file. This one is using the default code from the site referenced above. This is the page published online: http://www.keylimecomputerservice.com/test/default.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<SCRIPT LANGUAGE="JavaScript"><!--
function openURL()
{
// grab index number of the selected option
selInd = document.theForm.aaa.selectedIndex;
// get value of the selected option
goURL = document.theForm.aaa.options[selInd].value;
// redirect browser to the grabbed value (here a URL)
top.location.href = goURL;
}
//-->
</SCRIPT>
</head>
<body>
<TABLE SPAN="3" BORDER=1 CELLSPACING=0 CELLPADDING=0 align="center" WIDTH="60%">
<TR>
<TD WIDTH="33%">
<center><font color="black">Choose a connection</font></center><br>
<form name="theForm"> <tt>
<center>
<select name="aaa" size="1">
<option selected value="#"> ---------- </option>
<option value="/remote/connect1.exe">Connection 1</option>
<option value="/remote/connect2.exe">Connection 2</option>
<option value="/remote/connect3.exe">Connection 3</option>
<option value="/remote/connect4.exe">Connection 4</option>
<option value="/remote/connect5.exe">Connection 5</option>
<option value="/remote/connect6.exe">Connection 6</option>
<option value="/remote/connect7.exe">Connection 7</option>
<option value="/remote/connect8.exe">Connection 8</option>
</select>
</center>
</TD>
<TD WIDTH="33%">
<input type="button" value=" GO " onClick="openURL()"> </tt>
</form>
</TD>
<TD WIDTH="33%">
</TD>
</TR>
</TABLE>
</body>
I then tried to change the form to use an image instead of the default button. Obviously I didn't do it right. THIS ONE DOES NOT WORK. When you choose a menu item and then click the image, it just refreshes the page. Published page: http://www.keylimecomputerservice.co.../modified.html This is the modified code.: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<SCRIPT LANGUAGE="JavaScript"><!--
function openURL()
{
// grab index number of the selected option
selInd = document.theForm.aaa.selectedIndex;
// get value of the selected option
goURL = document.theForm.aaa.options[selInd].value;
// redirect browser to the grabbed value (here a URL)
top.location.href = goURL;
}
//-->
</SCRIPT>
</head>
<body>
<TABLE SPAN="3" BORDER=1 CELLSPACING=0 CELLPADDING=0 align="center">
<TR>
<TD WIDTH="33%">
<center><font color="black">Choose a connection</font></center><br>
<form name="theForm"> <tt>
<center>
<select name="aaa" size="1">
<option selected value="#"> ---------- </option>
<option value="/remote/connect1.exe">Connection 1</option>
<option value="/remote/connect2.exe">Connection 2</option>
<option value="/remote/connect3.exe">Connection 3</option>
<option value="/remote/connect4.exe">Connection 4</option>
<option value="/remote/connect5.exe">Connection 5</option>
<option value="/remote/connect6.exe">Connection 6</option>
<option value="/remote/connect7.exe">Connection 7</option>
<option value="/remote/connect8.exe">Connection 8</option>
</select>
</center>
</TD>
<TD WIDTH="33%">
<input type="image" src="connectbutton.jpg" onClick="openURL()"> </tt>
</form>
</TD>
<TD WIDTH="33%">
</TD>
</TR>
</TABLE>
</body>
Any and all help is appreciated. Runout74 This is a form to calculate a players age as of May 1st of each year. I need to send the result in a URL string to "http://ntsacom.homestead.com/TEST3.html?TEAM_ID=TS63464122&LOG_IN_ID=11111111&league_age=[FORM RESULT] Can anyone help. This to complete a roster app for our youth BASEBALL league. My JavaScript is very limited and the gentleman that was working on this has abandoned it after receiving pay for the project (lesson learned). I have enough knowledge to finish the project once we figure this one small piece out. Thank you for looking at this for me! Code:
<p id="form"></p>
<form id="get_birthday" name="get_birthday">
<select id="form_get_month" name="form_birth_month">
<option value="0">january</option>
<option value="1">february</option>
<option value="2">march</option>
<option value="3">april</option>
<option value="4">may</option>
<option value="5">june</option>
<option value="6">july</option>
<option value="7">august</option>
<option value="8">september</option>
<option value="9">october</option>
<option value="10">november</option>
<option value="11">december</option>
</select>
<select id="form_birth_day" name="form_birth_day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="form_get_year" name="form_birth_year">
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
</select>
<input onclick="calculate_age();" type="button" value="submit " />
</form>
<-------------$ I want this to pass as a URL parameter "onclick" of the above button -------------->
<p id="baseball">
<script language="JavaScript">
<!-- hide script from old browsers -->
function calculate_age()
{
var birth_year = window.document.get_birthday.form_birth_year.value;
var birth_month = window.document.get_birthday.form_birth_month.value;
var birth_day = window.document.get_birthday.form_birth_day.value;
if (((birth_month == 3) || (birth_month ==5) || (birth_month==8) || (birth_month==10)) && (birth_day==31))
{
alert("Please check that you entered a valid date")
return;
}
if ((birth_month == 1) && (birth_day >28))
{
alert("Please check that you entered a valid date")
return;
}
//Create the date object for todays date
var now = new Date();
//Extract the current year,
var the_year = now.getFullYear();
// Calculate elegibility for sport
var league_text = ""
var paragraph = document.getElementById("baseball");
//Clear the contents of paragraph if the submit button has been clicked more than once .
//the Firefox way
if (paragraph.innerText = "");
else
//The MSIE way
if (paragraph.textContent = "");
var league_age = (the_year - birth_year)
if (birth_month > 3)
league_age --;
if (league_age < 5 )
{
league_text = "1"
}
if ((league_age > 5) && (league_age <12))
{
league_text = "1"
}
else if ((league_age >12) && (league_age <16))
{
league_text = "1"
}
else if ((league_age >15) && (league_age <19))
{
league_text = "1"
}
else if (league_age > 18)
{
league_text = "1"
}
var output_text = document.createTextNode(league_text);
var output_age = document.createTextNode(league_age);
paragraph.appendChild(output_age);
paragraph.appendChild(output_text);
S.redirectTo("search-results?baseball=value1")
}
</script>
Hi and thanks in advance! Someone on this site made a form for me that hides and displays fields, depending on which variable is chosen from a given array. They did a very good job with it with one exception. It seems the code that is used to hide certain fields also hides the form data rather than posting it when the form is submitted. Here is the code for both the java (listed first) and the form itself. Code: // Funtion
// Description: show or hide element in the form according to selected element
//
function show_hide(){
if (!document.getElementById) return false;
fila = document.getElementById('tr_firstname');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_firstname_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_receipt_invoice');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_receipt_invoice_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_url');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_url_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_description_comments');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_description_comments_data');
fila.style.display = "none"; //hide
var strtext ;
var nuoption= document.frmbodydata.csreason.length;
var nuindice = document.frmbodydata.csreason.selectedIndex;
var nuvalueSelect = document.frmbodydata.csreason.options[nuindice].value;
var strtextSelect = document.frmbodydata.csreason.options[nuindice].text;
if (nuvalueSelect==0 )
{
return;
}
fila = document.getElementById('tr_description_comments');
fila.style.display = ""; //show
fila = document.getElementById('tr_description_comments_data');
fila.style.display = ""; //show
if (nuvalueSelect==1 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
{
fila = document.getElementById('tr_firstname');
fila.style.display = ""; //show
fila = document.getElementById('tr_firstname_data');
fila.style.display = ""; //show
fila = document.getElementById('tr_email');
fila.style.display = ""; //show
fila = document.getElementById('tr_email_data');
fila.style.display = ""; //show
}
if (nuvalueSelect==2 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
{
fila = document.getElementById('tr_url');
fila.style.display = ""; //show
fila = document.getElementById('tr_url_data');
fila.style.display = ""; //show
}
if (nuvalueSelect==4 )
{
fila = document.getElementById('tr_receipt_invoice');
fila.style.display = ""; //show
fila = document.getElementById('tr_receipt_invoice_data');
fila.style.display = ""; //show
}
}
//
// Function
// Description: Validate the form for submit
//
function ValidateForm( form ) {
var nuindice = form.csreason.selectedIndex;
var nuvalueSelect = form.csreason.options[nuindice].value;
if (nuvalueSelect==0 )
{
return false;
}
valor = form.receipt_invoice.value;
if (!freturn(valor)) return false;
valor = form.description_comments.value;
if (!freturn(valor)) return false;
if (nuvalueSelect==1 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
{
valor = form.firstname.value;
if (!freturn(valor)) return false;
}
valor = form.lastname.value;
if (!freturn(valor)) return false;
valor = form.email.value;
if (!freturn(valor)) return false;
if (nuvalueSelect==2 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==4 )
{
valor = form.url.value;
if (!freturn(valor)) return false;
}
alert ("Thank you for your comment.")
return true
}
//
// Function
// Description: Function to return TRUE or FALSE for inclomplete data
//
/*function freturn(pbolvalue)
{
if( pbolvalue == null || pbolvalue.length == 0 || /^\s+$/.test(pbolvalue) )
{
alert ("Incomplete Data, check please.");
return false;
}else{
return true;
}
}
*/
function ReloadCaptchaImage(captchaImageId)
{
var obj = document.getElementById(captchaImageId);
var src = obj.src;
var date = new Date();
var pos = src.indexOf('&rad=');
if (pos >= 0) { src = src.substr(0, pos); }
obj.src = src + '&rad=' + date.getTime();
return false;
}
Code: <center> <form id="frmbodydata" name="frmbodydata" onsubmit="return ValidateForm(this);" action="http://www.SnapHost.com/captcha/WebFormSubmit.aspx" method="post"> <input id="SnapHostID" name="SnapHostID" value="2FMYX5LLTQZQ" type="hidden" />
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Reason for contact</td>
</tr>
<tr>
<td><select id="csreason" name="csreason" onchange="show_hide();" align="left"> <option value="0">Please Select One</option> <option value="1">Contact</option> <option value="2">Report Bad Link</option> <option value="3">Gallery Submission</option> <option value="4">Preferred Partner Submission</option> <option value="5">Link Exchange</option> </select></td>
</tr>
<tr id="tr_firstname" style="display:none;">
<td>First name/Last name</td>
</tr>
<tr id="tr_firstname_data" style="display:none;">
<td><input id="firstname" /><input id="lastname" align="left" type="text" /></td>
</tr>
<tr id="tr_email" style="display:none;">
<td>Email</td>
</tr>
<tr id="tr_email_data" style="display:none;">
<td><input id="email" size="30" maxlength="30" align="left" type="text" /></td>
</tr>
<tr id="tr_receipt_invoice" style="display:none;">
<td>Receipt/Invoice</td>
</tr>
<tr id="tr_receipt_invoice_data" style="display:none;">
<td><input id="receipt_invoice" name="receipt_invoice" size="15" maxlength="15" align="left" type="text" /></td>
</tr>
<tr id="tr_url" style="display:none;">
<td>URL</td>
</tr>
<tr id="tr_url_data" style="display:none;">
<td><input id="url" size="80" maxlength="80" align="left" type="text" /></td>
</tr>
<tr id="tr_description_comments" style="display:none;">
<td>Description/Comments</td>
</tr>
<tr id="tr_description_comments_data" style="display:none;">
<td><textarea id="description_comments" rows="10" cols="50" align="left"> </textarea></td>
</tr>
<tr>
<td><i>Enter security code</i></td>
<td>SECURITY CODE</td>
</tr>
<tr>
<td><input name="CaptchaCode" class="txtFields" maxlength="6" style="width:130px; height:28px; font-size:24px; text-align:center;" type="text" /></td>
<td><a href="http://www.SnapHost.com/captcha/ProCaptchaOverview.aspx"><img id="CaptchaImage" alt="Web Form Code" style="margin-left:20px; border:1px
solid #999999;" src="http://www.SnapHost.com/captcha/WebForm.aspx?id=2FMYX5LLTQZQ&ImgType=2" /></a> <br /> <a href="#" onclick="return ReloadCaptchaImage('CaptchaImage');"><span style="font-size:12px;">reload image</span></a></td>
</tr>
<tr>
<td align="center"><input src="http://www.theopenpussy.com/1/images/submit.gif" alt="Submit button" type="image" /></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</form> </center>
Sorry for all the code! Is there anything I can do to maintain the hide and seek nature of the forms and show the data that is submitted, or am I stuck displaying all fields all the time? Alright so this is my problem. I'm using ajax to validate my form without refreshing the page. Everything works but the message part of my contact form. The name, email, and subject get passed but the message returns back as "undefined". I've looked through some of the older posts with the keyword being undefined and I didn't really find anything that helped. I've been trying to get this working for like days now an I'm sure its something really simple and right under my nose. So I will post my html for the form and the validation code. I want to thank all who help. Here is the HTML Code: <div id="forminfo">
<form name="contact" method="post" action="">
<dl>
<dt id="name"><label for="fName" class="">Name</label></dt>
<dd><input type="text" class="text" name="fName" id="fName" style="width:200px; height:20px;" /></dd>
<label class="error" for="fName" id="fName_error">This field is required.</label>
<dt id="eMail"><label for="email" class="">Email</label></dt>
<dd><input type="text" class="text" name="email" id="email" style="width:200px; height:20px;" /></dd>
<label class="error" for="email" id="email_error">This field is required.</label>
<dt id="subject"><label for="subject">Subject</label></dt>
<dd><input type="text" size="8" maxlength="40" name="subject" id="subj" style="width:200px; height:20px;" class="text" /></dd>
<label class="error" for="subject" id="subj_error">This field is required.</label>
<dt id="comments">Message</dt>
<dd><textarea name="memo" class="text2" id="memo"></textarea></dd>
<dd><input type="submit" class="button" id="submit" name="submit" value="" /></dd>
</dl>
</form>
</div><!--forminfo-->
Here is the JavaScript/AJAX Code: $(function() {
$('.error').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
var name = $("input#fName").val();
if (name == "") {
$("label#fName_error").show();
$("input#fName").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var subject = $("input#subj").val();
if (subject == "") {
$("label#subj_error").show();
$("input#subj").focus();
return false;
}
var comments = $("input#memo").val();
if (comments == "") {
$("input#memo").focus();
return false;
}
var dataString = 'fName='+ name + '&email=' + email + '&subj=' + subject + '&memo=' + comments;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('.formContainer').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>I will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
});
});
runOnLoad(function(){
$("input#fName").select().focus();
});
Code: for(i=0;i<document.getElementsByName('checkresult_".$i."').length;++i){
if(document.getElementsByName('checkresult_".$i."')[i].checked){
thisurlext+=document.getElementsByName('checkresult_".$i."')[i].value;
checkedlength++;
if(i+1<document.getElementsByName('checkresult_".$i."').length){
if(document.getElementsByName('checkresult_".$i."')[i+1].checked){
thisurlext+='+';
}
}
}
};
Let's say I check verses 1, 2, 3, 6 I want the Javascript not to ignore the + between the 3 and the 6: Code: <div id="txt_kjv0_1_1_0" style="float: left; background-color: rgb(234, 232, 200); margin: 0px; width: 178px; height: 497px; border: 1px solid rgb(122, 16, 16); padding: 5px 5px 0px; overflow-y: auto; overflow-x: hidden;"> <input id="sc0" value="kjv" type="hidden"> <p id="regular[]" name="bibletext" style="float: left; text-align: left; width: 155px; display: block; padding: 0px 2px; font-size: 12px;"><input id="check0_0" name="checkresult_0" onclick="" value="1" type="checkbox"><span style="font-weight: bold; margin: 2px;">1</span>In the beginning God created the heaven and the earth.</p> <p id="regular[]" name="bibletext" style="float: left; text-align: left; width: 155px; display: block; padding: 0px 2px; font-size: 12px;"><input id="check0_1" name="checkresult_0" onclick="" value="2" type="checkbox"><span style="font-weight: bold; margin: 2px;">2</span>And the earth was without form, and void; and darkness was upon the face of the deep. And the Spirit of God moved upon the face of the waters.</p> <p id="regular[]" name="bibletext" style="float: left; text-align: left; width: 155px; display: block; padding: 0px 2px; font-size: 12px;"><input id="check0_2" name="checkresult_0" onclick="" value="3" type="checkbox"><span style="font-weight: bold; margin: 2px;">3</span>And God said, Let there be light: and there was light.</p> <p id="regular[]" name="bibletext" style="float: left; text-align: left; width: 155px; display: block; padding: 0px 2px; font-size: 12px;"><input id="check0_3" name="checkresult_0" onclick="" value="4" type="checkbox"><span style="font-weight: bold; margin: 2px;">4</span>And God saw the light, that it was good: and God divided the light from the darkness.</p> <p id="regular[]" name="bibletext" style="float: left; text-align: left; width: 155px; display: block; padding: 0px 2px; font-size: 12px;"><input id="check0_4" name="checkresult_0" onclick="" value="5" type="checkbox"><span style="font-weight: bold; margin: 2px;">5</span>And God called the light Day, and the darkness he called Night. And the evening and the morning were the first day.</p> <p id="regular[]" name="bibletext" style="float: left; text-align: left; width: 155px; display: block; padding: 0px 2px; font-size: 12px;"><input id="check0_5" name="checkresult_0" onclick="" value="6" type="checkbox"><span style="font-weight: bold; margin: 2px;">6</span>And God said, Let there be a firmament in the midst of the waters, and let it divide the waters from the waters.</p> . SOURCE: Here Code: 1 document.onmousemove = mouseMove;
2
3 function mouseMove(ev){
4 ev = ev || window.event;
5 var mousePos = mouseCoords(ev);
6 }
7
8 function mouseCoords(ev){
9 if(ev.pageX || ev.pageY){
10 return {x:ev.pageX, y:ev.pageY};
11 }
12 return {
13 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
14 y:ev.clientY + document.body.scrollTop - document.body.clientTop
15 };
16 }
#1: How is it that "mouseMove" is assigned to "document.onmousemove" from right-to-left? What exactly is taking place here? #3: How can "mouseMove" be declared as a function afterwards? #3: I periodically see "e" being placed in functions. Is "ev" taking the place for "e"? If so is "ev" or "e" a global object? Where do they initially come from and how do they work? . All, So I have the following code. It works great. When I add this: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> It doesn't work. I need it for some aspects of my CSS to work. The code that works without that is: Code: <html>
<script>
function resizeAll( )
{
var divs = document.getElementsByTagName("div");
for ( var d = 0; d < divs.length; ++d )
{
var div = divs[d];
if ( div.className == "fn-area" )
{
divid = divs[d].getAttribute("id");
imgid = "Img" + divid;
var Div1Width, Div1Height;
Div1Width = document.getElementById(divid).offsetWidth;
Div1Height = document.getElementById(divid).offsetHeight;
document.getElementById(imgid).style.width = Div1Width;
document.getElementById(imgid).style.height = Div1Height;
}
}
}
</script>
<head>
</head>
<body onLoad="resizeAll()">
<div id="Div1" class="fn-area" style="width:100px;height:100px; border:1px solid black;" onmouseover="document.getElementById('ImgDiv1').style.display='block';" onmouseout="document.getElementById('ImgDiv1').style.display='none';">
<img id="ImgDiv1" src="fnclientlib/styles/artwork/creep_stamp5.gif" style="display:none"/>
</div>
<div id="Div2" class="fn-area" style="width:300px;height:300px; border:1px solid black;" onmouseover="document.getElementById('ImgDiv2').style.display='block';" onmouseout="document.getElementById('ImgDiv2').style.display='none';">
<img id="ImgDiv2" src="fnclientlib/styles/artwork/creep_stamp5.gif" style="display:none"/>
</div>
</body
</html>
|
|||||||