|
JavaScript - Problem With Disappearing Text, And Tabbing Over
I have a form with multiple text entry fields. Some are input fields, and one is a textarea. I have the script (below) for a textarea in a form, to ensure that there is a max of 1500 characters. I am having two problems.
1) If there is an error on the form (for whatever reason), all of the text that was entered in the texarea, gets lost when the page reloads (this only happens for the textarea, the other input fields reprint the text). 2) When ever I try to press the "Tab" button on my keyboard, to tab out of the textarea to the next text box, it does not tab to the "next" text box, but instead it tabs "back" to the previous text box in the form. Here's what I have: Code: <head>
<script type="text/javascript">
function ismaxlength(obj){
var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
if (obj.getAttribute && obj.value.length>mlength)
obj.value=obj.value.substring(0,mlength)
}
</script>
</head>
<form>
<tr>
<td colspan="2"><textarea maxlength="1500" onkeyup="return ismaxlength(this)"
name="blah_post" tabindex="1" style="display: block; width: 340px; height: 150px;"
cols="60" rows="10" value="<?php print $blah_post;?>"></textarea></td>
</tr>
</form>
Don't remember where I found the script but, I'm open to more simpler javascript suggestions as well.... Similar TutorialsI have a page with a lot of textual elements, textbox/radiobutton/checkbox prompts and a couple of buttons. I used the tabIndex property of the prompts to set a tabbing order, but unfortunately further tabbing also cycles through the static textual elements present on the page. How do I prevent that? How can I make tabbing cycle through my prompts and the cancel/finish buttons only? I am using (and targeting) IE8 if it matters. Thanks! On my home page i have a form which accepts data and on clicking the accept 'button' executes a javascript routine that process' the data, sets a cookie, and sends the user to an appropriate page. the set cookie data is as follows: Code: var expire=(new Date(2099, 1, 1)).toGMTString(); document.cookie = "cookie=privg; expires="+expire; window.location = "vip-skincare-online-shopping.html"; so far so good - i can hop about the pages on the website no problem but.... if i return to the home page that contains the original form, the cookie is deleted. This happens immediately i arrive at the page - i don't use the form. Can anyone suggest why this might be happening? I don't access the cookie anywhere else on that page, and the only other javascript on the page is google analytics stuff. How do I prevent my Link from disappearing?? When I click on the link, "Click Here" It display, "Look At Me!!" but the link, "Click Here" is GONE Is there a way to keep my link, "Click Here" from disappearing? So when I click on the link, "Click Here" the content, "Look At Me!!"should display as well. thanks Here are my codes Code: <html>
<head>
<script type="text/javascript">
function display() {
document.writeln("Look At Me!!");
}
</script>
</head>
<body>
<a href="google.com" onClick="display()">Click Here</a>
</body>
</html>
Hi, The following code is supposed to display and hide fields when clicking on radio buttons which is does correctly, it also gives the fields that are hidden a value so that it passes validation. T The problem is that when the user moves from one field to the next, it deletes the value that they have just entered. :S Any ideas why this might occur? Thanks! Code: <script language="javascript" type="text/javascript">
function showHideDivs(){
var category = '';
for(i=0; i < oRadBtns.length; i++){
if(oRadBtns[i].checked){
category = oRadBtns[i].value;
}
}
switch (category){
case 'empresa':
document.getElementById("empresa_nombre").value = "";
document.getElementById("contacto").value = "";
document.getElementById("nombre").style.display = "none";
document.getElementById("apellido").style.display = "none";
document.getElementById("company").style.display = "block";
document.getElementById("contact").style.display = "block";
document.getElementById("firstname").value = "nombre";
document.getElementById("lastname").value = "apellido";
break;
case 'particular':
document.getElementById("firstname").value = "";
document.getElementById("lastname").value = "";
document.getElementById("nombre").style.display = "block";
document.getElementById("apellido").style.display = "block";
document.getElementById("company").style.display = "none";
document.getElementById("contact").style.display = "none";
document.getElementById("empresa_nombre").value = "empresa";
document.getElementById("contacto").value = "contacto";
break;
}
}
window.onload=function(){
oRadBtns = document.getElementById('dmsfrm').getElementsByTagName('input');
for(i=0; i < oRadBtns.length; i++){
oRadBtns[i].onclick = showHideDivs;
}
showHideDivs();
}
</script>
Code: <div class="radio_element">
<input type="radio" value="empresa" class="radio" id="empresa" name="categoria" <?php echo ($leadsEngine->getElementValue('categoria')!='particular')?'checked="checked"':'' ?> />
<span class="<?PHP if($leadsEngine->hasError('categoria')){echo 'error';} ?> ">Empresa</span>
</div>
<div class="radio_element">
<input type="radio" value="particular" class="radio" id="particular" name="categoria" <?php echo ($leadsEngine->getElementValue('categoria')=='particular')?'checked="checked"':'' ?> />
<span class="<?PHP if($leadsEngine->hasError('categoria')){echo 'error';} ?> ">Particular</span>
</div>
</div>
I'm using two simple CSS rollovers for a prev/next arrow nav, combined with a JS script that lets the user manually tab/flip/swap through a few testimonials. You roll over the "next" button, it's highlighted, you click it, a new testimonial appears in place of the old one. Problem: the prev/next buttons are appearing and disappearing on click, seemingly randomly. I can't make any sense of it. Image: http://img3.imageshack.us/img3/8924/jsproblem.jpg I've tried adjusting the CSS container sizes, tried changing the positioning and even adding z-indexes in case the divs are accidentally overlapping. Gave items background colors to try to see the structure more clearly, for flaws. Nothing has worked. Any help much appreciated. I'm using this JS script for the tabs: Code:
last_tab = 'tabTest1';
function show(layerName) {
document.getElementById(layerName).style.display = '';}
function hide(layerName) {
document.getElementById(layerName).style.display = 'none';}
function show_next(tab_name) {
document.getElementById(last_tab).className = '';
var curr = document.getElementById(tab_name);
curr.className='';
hide(last_tab+'_data');
show(tab_name+'_data');
last_tab=tab_name;}
and this HTML: Code:
<!-- start: testimonials -->
<div id="tabTest1_data">
<div class="silo1">
<div class="spotlightnav-content-header-container">
<p class="spotlightnav-content-title">Testimonials</p>
<a href="#" class="spotlightnav-content-more">View All</a>
</div>
<div class="content-container">
<p class="spotlightnav-testimonials">
<span class="color1">"</span>Excellent staff very courteous, friendly and professional, excellent stay, excellent meal.<span class="color1">"</span>
</p>
<p class="spotlightnav-testimonials-credit">Janice, Georgia</p>
</div>
<div class="spolightnav-btns-container">
<a href="#" onClick="javascript:show_next('tabTest6'); return false;" id="tabTest6" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
<a href="#" onClick="javascript:show_next('tabTest2'); return false;" id="tabTest2" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>
</div>
</div>
</div>
<div id="tabTest2_data" style="display: none;">
<div class="silo1">
<div class="spotlightnav-content-header-container">
<a href="#" class="spotlightnav-content-title">Testimonials</a>
<a href="#" class="spotlightnav-content-more">View All</a>
</div>
<div class="content-container">
<p class="spotlightnav-testimonials">
<span class="color1">"</span>Absolutely marvelous. No problems.<span class="color1">"</span>
</p>
<p class="spotlightnav-testimonials-credit">Christine, Taiwan</p>
</div>
<div class="spolightnav-btns-container">
<a href="#" onClick="javascript:show_next('tabTest1'); return false;" id="tabTest1" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" style="height: 24px; width: 24px;" /></a>
<a href="#" onClick="javascript:show_next('tabTest3'); return false;" id="tabTest3" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" style="height: 24px; width: 24px;" /></a> </div>
</div>
</div>
<div id="tabTest3_data" style="display: none;">
<div class="silo1">
<div class="spotlightnav-content-header-container">
<a href="#" class="spotlightnav-content-title">Testimonials</a>
<a href="#" class="spotlightnav-content-more">View All</a>
</div>
<div class="content-container">
<p class="spotlightnav-testimonials">
<span class="color1">"</span>Absolutely marvelous. No problems.<span class="color1">"</span>
</p>
<p class="spotlightnav-testimonials-credit">Belle, Taiwan</p>
</div>
<div class="spolightnav-btns-container">
<a href="#" onClick="javascript:show_next('tabTest2'); return false;" id="tabTest2" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
<a href="#" onClick="javascript:show_next('tabTest4'); return false;" id="tabTest4" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a> </div>
</div>
</div>
<div id="tabTest4_data" style="display: none;">
<div class="silo1">
<div class="spotlightnav-content-header-container">
<a href="#" class="spotlightnav-content-title">Testimonials</a>
<a href="#" class="spotlightnav-content-more">View All</a>
</div>
<div class="content-container">
<p class="spotlightnav-testimonials">
<span class="color1">"</span>Vaguely not-terrible. Acceptable in a somewhat amazing way. ffffffffuuuuuuuuu<span class="color1">"</span>
</p>
<p class="spotlightnav-testimonials-credit">Grace, Texas</p>
</div>
<div class="spolightnav-btns-container">
<a href="#" onClick="javascript:show_next('tabTest3'); return false;" id="tabTest3" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
<a href="#" onClick="javascript:show_next('tabTest5'); return false;" id="tabTest5" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a> </div>
</div>
</div>
<div id="tabTest5_data" style="display: none;">
<div class="silo1">
<div class="spotlightnav-content-header-container">
<a href="#" class="spotlightnav-content-title">Testimonials</a>
<a href="#" class="spotlightnav-content-more">View All</a>
</div>
<div class="content-container">
<p class="spotlightnav-testimonials">
<span class="color1">"</span>Damn fine place, yo.<span class="color1">"</span>
</p>
<p class="spotlightnav-testimonials-credit">Slim, Bacon</p>
</div>
<div class="spolightnav-btns-container">
<a href="#" onClick="javascript:show_next('tabTest4'); return false;" id="tabTest4" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
<a href="#" onClick="javascript:show_next('tabTest6'); return false;" id="tabTest6" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a> </div>
</div>
</div>
<div id="tabTest6_data" style="display: none;">
<div class="silo1">
<div class="spotlightnav-content-header-container">
<a href="#" class="spotlightnav-content-title">Testimonials</a>
<a href="#" class="spotlightnav-content-more">View All</a>
</div>
<div class="content-container">
<p class="spotlightnav-testimonials">
<span class="color1">"</span>Blurry. But good.<span class="color1">"</span>
</p>
<p class="spotlightnav-testimonials-credit">Bob, California</p>
</div>
<div class="spolightnav-btns-container">
<a href="#" onClick="javascript:show_next('tabTest5'); return false;" id="tabTest5" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
<a href="#" onClick="javascript:show_next('tabTest1'); return false;" id="tabTest1" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a> </div>
</div>
</div>
I'm assuming this is primarily a JS problem, but if taking a look at the CSS is necessary, let me know and I'll post it. THANKS!!!!! http://vietnamthereandback.com/mainpage.html The arrows next to the songs previews are randomly appearing/disappearing on page refresh. There are always 8 arrows, but each refresh shows the arrows in different places. This has really got me stumped. If anyone has any thoughts, I'd really appreciate hearing them. The basic button/arrow code is below. The only thing that changes in the MP3 file name. <code> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="30" height="30"> <PARAM NAME=movie VALUE="http://www.vietnamthereandback.com/Clips/audioplay.swf?file=http://www.vietnamthereandback.com/Clips/reflections.mp3&auto=no&sendstop=yes&repeat=1&buttondir=http://www.vietnamthereandback.com/Clips/buttons/negative_small&bgcolor=0xffffff&mode=playpause"> <PARAM NAME=quality VALUE=high> <PARAM NAME=wmode VALUE=transparent> <embed src="http://www.vietnamthereandback.com/Clips/audioplay.swf?file=http://www.vietnamthereandback.com/Clips/reflections.mp3&auto=no&sendstop=yes&repeat=1&buttondir=http://www.vietnamthereandback.com/Clips/buttons/negative_small&bgcolor=0xffffff&mode=playpause" quality=high wmode=transparent width="30" height="30" align="" TYPE="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object> </code> I'm trying to understand how forms, data, php, javascript all work together. So 1) I hardcoded some html form fields with values using php using "echo", then 2) I dynamically created some more html form fields with values using javascript using "createElement" and appending to the html form element. When I click on the submit form, the php created form fields still show on the webpage, but the javascript dynamically created form fields disappear. Can anyone shed some light for me? Why are the javascript created form fields disappearing when I click on submit and not the PHP created form fields? Thank you! Code: <form method="post" id="commentform" action="<?php echo $PHP_SELF?>"> Hi, This must be a 1st. It works ok in IE...But not in Firefox? I need to use white text over a dark bg color or if possible over an image. The problem is in FF the white text distorts on fade The black text works ok when adding the white bg. See my test code below. (It can be copied straight in to test) If anyone could please take a quick look and give some pointers. Code: <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML DIR="LTR" LANG="en">
<head>
<title>Working-Test-Banner</title>
<style type="text/css">
#welcomebanner img {border: none;}
#wrapper{position:relative;}
#welcomebanner {margin: 0; padding: 0; position:relative;background-color:color:#fff;}
#welcomebanner ul, #welcomebanner li {margin: 0; padding: 0; list-style: none;}
#welcomebanner li {display: none;}
p{font-size:30px;background-color:purple;color:#fff;}
h2{font-size:30px;background-color:#fff;color:#000;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
var $j = jQuery;
var welcomeBannerTimer;
function nextSlide(){
var el = $j('#welcomebanner');
var slides = el.data('slides');
var c = el.data('slideIndex');
var n = ((c+1) >= slides.length)? 0 : c+1;
el.data('slideIndex', n);
$j(slides[c]).fadeOut(null, function(){
$j(slides[n]).fadeIn();
});
}
function over(){
clearInterval(welcomeBannerTimer);
}
function out(){
welcomeBannerTimer = setInterval(nextSlide, 3000);
}
$j(window).load(function() {
var el = $j('#welcomebanner');
var slides = $j('#welcomebanner>li');
if (slides.length < 2){
$j(slides[0]).show();
return;
}
el.data('slides', slides);
el.data('slideIndex', 0);
welcomeBannerTimer = setInterval(nextSlide, 3000);
el.bind('mouseenter', over).bind('mouseleave', out);
$j(slides[0]).show();
});
</script>
</head>
<body>
<div id="wrapper">
<ul id="welcomebanner">
<li>
<h2>testing the text fade</h2>
<p>testing the text fade</p>
</li>
<li>
<h2>Firefox and IE problems</h2>
<p>Firefox and IE problems</p>
</li>
</ul>
</div>
</body>
</html>
Hi, I'm a student learning web design and having a problem with some javascript code, I'm validating a text area, i dont have a problem limiting how many characters can be typed in the textarea, but I cant get it to give an error if there is no text in the text area. In the code below the validateMes() function is not working, the other functions work fine Javascript code: Code:
function validateLimit(fld){
var error ="";
if(fld.value.length > 300){
error = "Cannot exceed 300 characters.\n"
fld.style.background = 'Yellow';
}else{
fld.style.background = 'White';
}
return error;
}
function validateMes(fld) { //this function not working
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'Yellow';
error = "The Message field has not been filled in.\n"
} else {
fld.style.background = 'White';
}
return error;
}
function validateFormOnSubmit(form1) { //master validating function
var reason = "";
reason += validateLimit(form1.mess);
reason += validateMes(form1.mess);
if (reason != "") {
alert("Some fields need correction:\n" + reason);
return false;
}else{
alert("Message has been submitted");
return true;
}
}
Html form code: Code:
<form name="form1" id="form1" onsubmit="return validateFormOnSubmit(this)" >
<div class="box">
<h1>CONTACT FORM :</h1>
<label>
<span>Full name</span>
<input type="text" class="input_text" name="name" id="name" value=""/>
</label>
<label>
<span>Email</span>
<input type="text" class="input_text" name="emailbox" id="emailbox" value=""/>
</label>
<label>
<span>Subject</span>
<input type="text" class="input_text" name="subject" id="subject" value=""/>
</label>
<label>
<span>Message</span>
<textarea class="message" name="mess" id="mess" ></textarea> <span>*Message limited to 300 characters</span>
<input type="submit" class="button" value="Submit Form" />
</label>
</div>
</form>
I can't see what I'm doing wrong, would really appreciate some help Thanks I'm coding a simple random sentence generator & this is the beginning part of what I'm trying to accomplish. I created 3 different functions with 3 separate buttons & 3 separate text areas to display the noun, verb, or article once the button is pressed. However, when I press a button, nothing shows up in the text area! Can someone please tell me what I'm doing wrong & give me a fix? It has to be a simple problem, but I am very very new to this & need help. Thanks in advance! Code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
<script language="JavaScript">
function noun()
// Assumes: nothing
// Returns: a random noun
{
return RandomOneOf(["man", "woman", "ball"]);
}
</script>
<script language="JavaScript">
function verb()
// Assumes: nothing
// Returns: a random noun
{
return RandomOneOf(["hit", "liked", "smelled"]);
}
</script>
<script language="JavaScript">
function article()
// Assumes: nothing
// Returns: a random noun
{
return RandomOneOf(["the", "a", "some"]);
}
</script>
</head>
<body>
<input type="button" value="Noun"
onclick="document.getElementById('OutNoun').value = noun();" />
<TEXTAREA ID="OutNoun" ROWS=1 COLS=15 WRAP VALUE=""></TEXTAREA>
<input type="button" value="Verb"
onclick="document.getElementById('OutVerb').value = verb();" />
<TEXTAREA ID="OutVerb" ROWS=1 COLS=15 WRAP VALUE=""></TEXTAREA>
<input type="button" value="Article"
onclick="document.getElementById('OutArticle').value = article();" />
<TEXTAREA ID="OutArticle" ROWS=1 COLS=15 WRAP VALUE=""></TEXTAREA>
</body>
</html>
Hi, I'm having a problem trying to get my html web form to work. I have a list of 8 radio button options for people to choose one option with the last option being other - and then I want if the user clicks other that the text field box next to it becomes a required field and the form will not submit until this text field is filled in. If the user selects one of the other radio button options then the text field is not compulsory. I am using a linked javascript validation file which checks that all fields on the form which I have stated as required - become required, but I am having problems getting this "Other" button and text field to work with it all and not have the submit continue without this text field being completed! any help would really be appreciated! Thanks in advance! As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page. For Example: Input- 512 Output - Austin, TX The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks! Hi, I have a form with 9 text fields and a text area. What I want to do is replace the text in the text area depending on how many fields contain text. For example my text boxes are named 1 to 9, if the user enters text in the first five boxes I want the text area to auto fill with 'you have selected boxes 1 to 5' if the user selects all nine it will say 'you have selected 1 to 9', therefore, the user must complete the text boxes in order. I have it working with an onchange event but i have a button on the form to also auto fill the text boxes and it does not work if this is clicked. Any help would be appreciated! Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. Hi, I have a form setup so that selecting a radio button opens a specific text field. The problem is if the user starts to enter information, then switches to a different radio button (perhaps they chose the wrong radio to start), the text they already started to enter on the previous textfield doesn't get cleared. This will be a problem later when inserting to sql. Here is a summary of the code: Code: <head>
<script type="text/javascript">
function doClick(objRad){
if (objRad.value=="0"){
document.getElementById("textbox").style.display='block';
}
else{
document.getElementById("textbox").style.display='none';
}
if (objRad.value=="1"){
document.getElementById("textbox1").style.display='block';
}
else{
document.getElementById("textbox1").style.display='none';
}
if (objRad.value=="2"){
document.getElementById("textbox2").style.display='block';
}
else{
document.getElementById("textbox2").style.display='none';
}
}
</script>
</head>
<body>
<form action="insert.php" method="post">
<p>Please choose the business type:
<input type="radio" name="rad" value="0" onclick="doClick(this)">
Sole Proprietorship
<input type="radio" name="rad" value="1" onclick="doClick(this)">
Partnership
<input type="radio" name="rad" value="2" onclick="doClick(this)">
Corporation
<div id="textbox" style="display:none">
<input type="text" name="txt">
This is my sole proprietorship info.</div>
<div id="textbox1" style="display:none">
<input type="text" name="txt">
This is my partnership info.</div>
<div id="textbox2" style="display:none">
<input type="text" name="txt">This is my corporation info.
</div>
</form>
</body>
Any help is appreciated, Thanks in advance! Hello. I have a textarea where user can select a text then copy to clipboard (using EditArea script for highlighting) I need append additional information to the selected text so it won't be visible in the textarea, but only appear after copied to clipboard. For example: Code: text line one text line two text line three user selected word "two", hit CTRL+C to copy into clipboard (or used browser's context menu), but in clipboard it should be saved as: "selected word 'two'" What would be the approach? Thank you. Hi, Here's a sample form: Code: <form action="#" method="post"> Name:<br /> <input type="text" name="name" value="your name" /><br /> E-mail:<br /> <input type="text" name="mail" value="your email" /><br /> <input type="submit" value="Send"> </form> When you tab to a text input, the value gets highlighted. How can it be disabled? Any help is appreciated! Mike Hello there, this is my first post on this forum. I have learned a good bit of PHP and have implemented it for use in my work as a math tutor. My kids are telling me, however, that it is too inconvenient to hit tab or click on the next text box and would prefer to use the old style pencil and paper. I thought of a good idea: Javascript would be able to automatically focus the curser on the next text box if some condition was met. For example: 6+7. If the textbox reads 13, it will focus on the next text box. Otherwise, nothing happens. This kills three birds with one stone; the user will know if they got the question right or wrong and it will move automatically if they got it correct. The problem is I lack any real JavaScript wisdom. I would guess this would be quite simple. The closest thing I have found upon searching was this from the user requestcode, but this has to do with once the user has typed in 4 characters it moves automatically. Code: <SCRIPT LANGUAGE="JavaScript">
function nextbox(fldobj,nbox)
{
if(fldobj.value.length>3)
{document.forms[0].elements[nbox].focus()}
}
</SCRIPT>
</head>
<body onLoad="document.myform.txt1.focus()">
<CENTER>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="txt1" SIZE="4" MAXLENGTH="4" onKeyUp="nextbox(this,1)">
Thank you for the help. im clueless when it comes to javascript, but this is what im trying to find: i have a page that has multiple text areas, i also have 4 links that when clicked i want to add some predefined text into the active text area the one with the text cursor in? The Hyperlinks: Code: <a href="#sc">Shift Changed</a> | <a href="#ol">On Leave</a> | <a href="#ot">OverTime</a> | <a href="#ss">ShiftSwap</a> The textareas: PHP Code: <td><textarea name=details$i rows=4 align=absmiddle cols=16 value="$details[$i]\">$details[$i]</textarea></td> as you can see the textareas are created on the fly based on a php array. would anyone be willing to put some code together for this? or even give me the basics on how i can get the active textarea's name so i can pass that to a script that inserts into a given field? Hi, I'm hoping this will be an easy one for you experts out there. I am working on a convention registration form. What I'm trying to do is have the text "50.00" pop into the COST field when any text (even if it's only one character) is entered into the NAME field. If the text in the NAME field is deleted, the "50.00" should also be deleted. Does anyone have a script that does this? Thanks! |
|||||||