Learn VBA & Macros in 1 Week!

JavaScript - Display Form Result In Same Div

Full Excel VBA Course - Beginner to Expert

Display Form Result In Same Div	View Content

Good day to you all,
I'm working on a form which would display the result in the same div that the form is.

Here is my code so far:

PHP Code:

      <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
         <textarea name="html"></textarea><br />
         <input type="submit" onclick="load('<?php echo $_SERVER['PHP_SELF']; ?>','page');"/><br />
      </form>

      Preview:<br />
      <?php if(isset($_POST['html'])) echo stripslashes($_POST['html']); ?>

<script type="text/javascript">
function ahah(url, target) {
  document.getElementById(target).innerHTML = ' Fetching data...';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
}

function ahahDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function load(name, div) {
    ahah(name,div);
    return false;
}

</script>

My problem is when I click on the button , the text in my text area don't show.

Can somebody help me.

Thanks!

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Display Form Result In Iframe On Different Page

Display Result On Same Page??

Need Help Getting Result To Display Under Textbox

Js Help: How To I Display My Function's Result With Getelementbyid?

Display The Result Of A Variable Without Using Alerts

Retrieve Result From Form.submit()

Page Result After Submitting Form Opening In New Window

How Do I Autofill 1 Field In An Html Form With A Result From A Javascript Calculator

Values Form A Order Form To Display On A Diffirent Page

"result Of Expression 'this.form.fireevent' [undefined] Is Not A Function". Help!

How To Send A Form Result As A Url Parameter "onclick"??

Getting Data From Form And Display

Style.display To Hide A Form Button

Best Javascript Form Validation Display Technique

Using Javascript To Optionally Display A Form Command

2 Select Boxes In 1 Form With Onchange Display

Form To Display Automatically 3 Calculated Values

Using A Search Form To Display Hidden Divs On A New Page

Hide Or Display Form Field When Page Loaded

Using Javascript Form/function To Hide And Display <divs>

Learn VBA & Macros for Excel in 1 Week!

Display Form Result In Iframe On Different Page

Similar Tutorials

Hi,
i will try to be as brief as possible.
I have a page A with form:

Code:

<form id="search" action="find.html"  method="get">
... (some select options) ...
<input type="submit" class="submit" value="search">

this form look up some holiday destination which appears on this page with url:
(example)
Code:

www.domain.com/find.html?destination=italy&price=500

Now, I dont want to display result on this page, but on page B, in iframe.
I found a way how to redirect output as a link to properly show in iframe on page B.

Page A contains:
Code:

<a href="pageb.html?http://www.domain.com/find.html?destination=italy&price=500">show on page B</a><br>

Page B contains:

Code:

<script type="text/javascript">
<!--

function loadIframe(){
if (location.search.length > 0){
url = unescape(location.search.substring(1))

window.frames["iframe"].location=url
}
}

onload=loadIframe
//-->
</script>

<iframe src="" name="iframe"  id="iframe"</iframe>

In this case page B will properly load requested link in iframe.
Problem is it is just a static link...

I want to display search result from the form.

Thanks a lot for your help...

Display Result On Same Page??

Similar Tutorials

When I hit the submit button, the result are display on a new page. how do I force it to stay on the same page, here's my code.

Code:

<HTML>
<HEAD>
<TITLE>Test Input</TITLE>

<script type="text/javascript">
function addtext() {
   var newtext = document.myform.inputbox.value;
   document.writeln(newtext);
}
</script>

</HEAD>

<BODY>

<FORM NAME="myform">Enter something in the box: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE="">
<INPUT TYPE="button" NAME="button" Value="Check" onClick="addtext()">
</FORM>


</BODY>
</HTML>

any comments or suggestions would be greatly appreciated.

Need Help Getting Result To Display Under Textbox

Similar Tutorials

Hello ! I am trying to create an auto suggest drop down.

I have some ASP and Javascript code that I am using as an Autosuggest. Trouble is, the result displays on the main page, not under the text box like a drop down menu. I need help in getting the results to display correctly underneath the textbox. I have trawlled the internet and have loads and loads of code samples but I cant see the wood for the trees and I am really struggling with editing this code so that it displays correctly.

clienthint.asp

Code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<%
'this displays the value of the textbox after the form is submitted
If trim(Request("txt1")) <> "" Then
	Response.Write "You entered:"
	Response.Write "<b>" & Request("txt1") & "</b><br /><br />"
End If
%>
<form name="form1" action="clienthint.asp" method="post">
Enter Word:
<input type="text" name="txt1" id="txt1" onKeyUp="showHint(this.value,'txt1','form1',true)">
<input type="submit" name="submit" value="submit">
</form>
<p>Suggestions: <span id="txtHint"></span></p> 
</body>
</html>

clienthint.js

Code:

var xmlHttp

function showHint(str, box, thisForm, autoSubmit)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="gethint.asp";
url=url+"?q="+str;
url=url+"&b="+box;
url=url+"&f="+thisForm;
url=url+"&a="+autoSubmit;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

//this function allows for Clickable suggestions
function setTextBox(thisText,thisBox,thisForm,autoSubmit){
	document.getElementById(thisBox).value = thisText
	//this autoSubmits the form after a suggestion is clicked - it is not working :(
	//if(autoSubmit=='true'){
	//	alert(thisForm);
	//	document.getElementById(thisForm).submit();
	//}
}

gethint.asp

Code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
response.expires=-1
Dim rsWords
Dim rsWords_numRows
Dim q
Dim b
Dim hint
q=ucase(request.querystring("q"))
b=(request.querystring("b"))
f=(request.querystring("f"))
a=(request.querystring("a"))
hint=""
Set rsWords = Server.CreateObject("ADODB.Recordset")
rsWords.ActiveConnection = "Provider=SQLOLEDB; Data Source=JAGUAR\SQLEXPRESS; Initial Catalog=67625252; User ID=SFSDFSDF; Password=KJHSDHFJHDF"
rsWords.Source = "SELECT * FROM Rmatable WHERE (RMA_ID LIKE'" + q + "%') ORDER BY RMA_ID"
rsWords.CursorType = 2
rsWords.CursorLocation = 2
rsWords.LockType = 3
rsWords.Open()
rsWords_numRows = 0

If Not rsWords.EOF Then
	Do While Not rsWords.EOF
		If trim(hint) = "" Then
			hint = "<a href=""javascript:setTextBox('" & rsWords("RMA_ID") & "','" & b & "','" & f & "','" & a & "');"">" & rsWords("RMA_ID") & "</a>"
		Else
			hint = hint & " , <a href=""javascript:setTextBox('" & rsWords("RMA_ID") & "','" & b & "','" & f & "','" & a & "');"">" & rsWords("RMA_ID") & "</a>"
		End If
		rsWords.MoveNext()
	Loop
End If
if trim(hint)="" then 
  response.write("no suggestion")
else
  response.write(hint)
end if

rsWords.Close()
Set rsWords = Nothing
%>

Js Help: How To I Display My Function's Result With Getelementbyid?

Similar Tutorials

Hello!

I am working on creating a basic calorie calculator with Javascript and my code is not showing the results after the user makes their selections. I've created a simple function to obtain the user's weight, activity and duration info but when I use the GetElementById to retrieve the result, it does not show up. Any help would be much appreciated to make this work. Thanks.

Code:

<head>
<script type="text/javascript">
var myActivity = new Array();
myActivity[100] = "6.670";
myActivity[200] = "3.811";
myActivity[300] = "3.343";
myActivity[400] = "3.343";
myActivity[500] = "3.343";
myActivity[600] = "4.765";
myActivity[700] = "4.765"

function CalorieBurner() {
	//user prompt
	var caloriesBurned;
	var myForm = document.form;
	
	//processing
	var caloriesBurned = (myForm.duration[formElement.value] * (myActivity[formElement.value] * 3.5 * myForm.weight[formElement.value])/200);
	
	FormElement = myForm.activity[myForm.activity.selectedIndex];

	document.getElementById("caloriesBurned").innerHTML = "You will burn " + caloriesBurned + "calories doing " + myForm.duration[formElement.value] + "minutes of " + FormElement.text;
}
</script>
</head>



<body>


<form name="form">
Enter your weight: <input type="text" name="weight" />
<br /><br />

Select an activity:
<br />
<select name="activity">
<option value="100"> Backpacking, Hiking with pack </option>
<option value="200"> Bagging grass, leaves </option>
<option value="300"> Bathing dog </option>
<option value="400"> Carpentry, general</option>
<option value="500"> Carrying infant, level ground </option>
<option value="600"> Carrying infant, upstairs </option>
<option value="700"> Children's games, hopscotch... </option>
</select>
<br /><br /><br />

Enter the duration of your activity (in minutes): <input type="text" name="duration" />
</form>
<br /><br /><br />

<input type="button" value="Results" name="btnUpdate" onClick="CalorieBurner()"/>
<br /><br /><br />

<div id="caloriesBurned"></div>


</body>
</html>

Display The Result Of A Variable Without Using Alerts

Similar Tutorials

Retrieve Result From Form.submit()

Similar Tutorials

Hi guys,

I'm new to the forum, and new to JavaScipt. Here's my problem.

I create a form dynamically with Java Script dependin on certail actions a user choose. The end result is a form asking the user to confirm sending one or more SMS message via a mesage gateway outside of my system. Confirmation will then trigger a funtion with one or more statements like this:

[CODE]
document.frmSMS.action ="http://www.infobip.com/Addon/SMSService/SendSMS.aspx?user=User&password=Password&sender=Sender&SMSText=Friendly Reminder from Joe Bloggs Pty Ltd: You have an outstanding amount of R 4,534.00 that is 135 days ovedue. Please settle to as soon possible.&IsFlash=0&GSM=27826555959";
document.frmSMS.submit();
[ICODE]

The target site then responds with either an error code (i.e. -10) or a reference number. The question is - How do I retrieve the error code??

Your assistance will be appreciated.

NicOos

Page Result After Submitting Form Opening In New Window

Similar Tutorials

Hi,

I am using Javascript to display options in a form with 2 dropdown lists. However, despite using the rel="nofollow" target='_self', the result opens in a new window. Help would be much appreciated.

Code:

// JavaScript Document
function setOptions(chosen) {
var selbox = document.ChronoContact_course_finder.opttwo;
 
selbox.options.length = 0;
if (chosen == ' ') {
  selbox.options[selbox.options.length] = new Option('Choose Option',' ');
 
}
if (chosen == '85') {
  selbox.options[selbox.options.length] = new Option('ITEC Beauty Specialist Diploma','index.php?option=com_content&view=article&id=49&Itemid=68',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('ITEC Professional Makeup','index.php?option=com_content&view=article&id=57&Itemid=76',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('Fashion Catwalk & Photographic Makeup Course','index.php?option=com_content&view=article&id=67&Itemid=91',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('Bridal Makeup Course','index.php?option=com_content&view=article&id=68&Itemid=92',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('Special Effects Makeup','index.php?option=com_content&view=article&id=56&Itemid=77',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('Gel Nails Course','index.php?option=com_content&view=article&id=65&Itemid=88',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('Acrylic Nails Course','index.php?option=com_content&view=article&id=66&Itemid=89',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('Spray Tanning Course','index.php?option=com_content&view=article&id=55&Itemid=73',rel="nofollow" target='_self');  
}
if (chosen == '69') {
  selbox.options[selbox.options.length] = new Option('ITEC Holistic Massage Course','index.php?option=com_content&view=article&id=51&Itemid=2',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('ITEC Sports Massage Diploma','index.php?option=com_content&view=article&id=59&Itemid=78',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('Indian Head Massage Course','index.php?option=com_content&view=article&id=60&Itemid=79',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('ITEC Reflexology Diploma','index.php?option=com_content&view=article&id=64&Itemid=87',rel="nofollow" target='_self');
}
if (chosen == '80') {
  selbox.options[selbox.options.length] = new Option('ITEC Teaching Diploma','index.php?option=com_content&view=article&id=61&Itemid=81',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('FETAC Train The Trainer Level 6','index.php?option=com_content&view=article&id=63&Itemid=86',rel="nofollow" target='_self');
}
if (chosen == '83') {
  selbox.options[selbox.options.length] = new Option('ITEC Sports Massage Diploma','index.php?option=com_content&view=article&id=59&Itemid=90',rel="nofollow" target='_self');

}
}

And the HTML...

Code:

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">course finder</h1>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 200px;">Step 1: Choose type of course</label>
    <select name="optone" class="cf_inputbox" size="1" onchange="setOptions(document.ChronoContact_course_finder.optone.options[document.ChronoContact_course_finder.optone.selectedIndex].value);">
      <option value=" " selected="selected">Choose Option</option>
      <option value="85">Beauty courses</option>
	  <option value="69">Complimentary courses</option>
	  <option value="80">Teaching courses</option>
	  <option value="83">Fitness courses</option>	  

    </select>
    
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 200px;">Step 2: Choose a subject</label>
    <select size="1" name="opttwo" class="cf_inputbox" >
    <option value=" " selected="selected">Choose Option</option>
      
    </select>
    <!--<input type="button" name="go" value="Value Selected" onclick="window.open(document.ChronoContact_course_finder.opttwo.options[document.ChronoContact_course_finder.opttwo.selectedIndex].value);">-->
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input type="submit" name="go" value="search" onclick="window.open(document.ChronoContact_course_finder.opttwo.options[document.ChronoContact_course_finder.opttwo.selectedIndex].value);">
  </div>
  <div class="cfclear">&nbsp;</div>
    
</div>

Many thanks,
Paul

How Do I Autofill 1 Field In An Html Form With A Result From A Javascript Calculator

Similar Tutorials

Hi guys,

I have a simple calculator on my website which has a few options selectable by radio buttons. When the user adds selections - the total price of their order is automatically calculated and displayed in a <div> for them to see. The client then can deselect options or add according to their budget.

The code which deals with this is as follows (just sections of it but you get the point ....)

In the <HEAD>

Code:

<script type = "text/javascript">

var allprices = [];
var index = 0;

function chkrads(frmName,rbGroupName) {
var chosen = "";
var radios = document[frmName].elements[rbGroupName]; 
for (var i=0; i <radios.length; i++) { 
if (radios[i].checked) { 
chosen = radios[i].value;
} 
}



if (chosen == 0) {printprice = 0}

if (chosen == 1) {printprice = 99}
if (chosen == 2) {printprice = 150}
if (chosen == 3) {printprice = 250}

if (chosen == 21) {printprice = 200}
if (chosen == 22) {printprice = 300}

if (chosen == 30) {printprice = 50}

if (chosen == 41) {printprice = 50}
if (chosen == 42) {printprice = 70}
if (chosen == 43) {printprice = 90}


if (rbGroupName == "size") {index = 0}
if (rbGroupName == "colour") {index = 1}
if (rbGroupName == "frame") {index = 2}
if (rbGroupName == "glass") {index = 3}
if (rbGroupName == "hook") {index = 4}
if (rbGroupName == "delivery") {index = 5}

allprices[index] = printprice;

var totalprice = 0;
for (var i =0; i <allprices.length; i++) {
if (!isNaN(allprices[i])) {
totalprice = totalprice + allprices[i];
}
}

document.getElementById("result").style.display = "block";
document.getElementById("result").innerHTML = totalprice;


}
</script>

Then in the <BODY>

Code:

 <form name= "myform" style="font-size:11px; font-family:Arial, Helvetica, sans-serif;">

<input type = "radio" name = "size" value = "0" onclick = "chkrads('myform', 'size')"> <b>0</b>
<input type = "radio" name = "size" value = "1" onclick = "chkrads('myform', 'size')"> <b>1</b>
<input type = "radio" name = "size" value = "2" onclick = "chkrads('myform', 'size')"> <b>2</b>
<input type = "radio" name = "size" value = "3" onclick = "chkrads('myform', 'size')"> <b>3</b>

<br /><br /><br /><br />

<input type = "radio" name = "colour" value = "0" onclick = "chkrads('myform', 'colour')"><b>No</b>
<input type = "radio" name = "colour" value = "21" onclick = "chkrads('myform', 'colour')"><b>black</b>
<input type = "radio" name = "colour" value = "22" onclick = "chkrads('myform', 'colour')"><b>Multi Colour</b>

<br /><br /><br /><br />

<input type = "radio" name = "frame" value = "0" onclick = "chkrads('myform', 'logo')"><b>No</b>
<input type = "radio" name = "frame" value = "30" onclick = "chkrads('myform', 'logo')"><b>Yes</b>


<br /><br /><br /><br />

<input type = "radio" name = "glass" value = "0" onclick = "chkrads('myform', 'glass')"><b>No</b>
<input type = "radio" name = "glass" value = "51" onclick = "chkrads('myform', 'glass')"><b>Yes</b>

<br /><br /><br /><br />

<input type = "radio" name = "hook" value = "0" onclick = "chkrads('myform', 'hook')"><b>0</b>
<input type = "radio" name = "hook" value = "41" onclick = "chkrads('myform', 'hook')"><b>1</b>
<input type = "radio" name = "hook" value = "42" onclick = "chkrads('myform', 'hook')"><b>2</b>
<input type = "radio" name = "hook" value = "43" onclick = "chkrads('myform', 'hook')"><b>3</b>

<br /><br /><br /><br />

<input type = "radio" name = "delivery" value = "0" onclick = "chkrads('myform', 'delivery')"><b>No</b>
<input type = "radio" name = "delivery" value = "61" onclick = "chkrads('myform', 'delivery')"><b>Yes</b>

</form>

This all calculates the cost and then supplies the answer into this code:

Code:

<div id="result" style="display:none;"><strong></strong> <span id="totalprice"></span> </div>

This all works exactly as I want - my question is this ....

I have added an HTML contact form at the bottom of the page which goes off to a Form2Email PHP script. (All working fine)

I really want to autofill one of the sections of this form "QUOTED PRICE" with the value calculated by my earlier product calculator.

The form looks like so:

Code:

<form id="ContactForm" method="post" action="FormToEmail.php"  class="input2">

<label>Name: <input name="name" type="text" id="name" value="" size="" maxlength="80" class="input"/></label>

<br /><br />

<label>QUOTED PRICE: <input name="QUOTED PRICE" type="text" id="QUOTED PRICE" value="" size="" maxlength="80" class="input"/></label>

<br /><br />

<label>
<input type="submit" class="submit" name="submit" id="submit" value="submit"/>
</label>
</form>

Does anyone know how to achieve this?! It would be a massive help!

Values Form A Order Form To Display On A Diffirent Page

Similar Tutorials

I have a order form page and on submitting it opens a new web page that displays the order totals. Below is my code and most probably wrong but for me it seems logic. Please assist.

Order Form:
Code:

<td colspan="1" height="120" align="left"> 
<select style="margin-left: 60px; background-color: #00FF77;" name="prod_bed_359"  onchange="calculateValue(this.form)">
<option value="0">0</option>
<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>
</select> R359</td></tr>

New page I called a unction to print:
Code:

function itemsOrdered() {
var beds = document.forms[2].prod_bed_359.value;
document.write("<pre><strong>Description\t\tQuantity\tPrice</strong></pre>");
document.write("<pre>Doggie Bed\t\t" + beds + "</pre>");	
}

This is still basic as I need to get this right before adding the prices and totals which is also extracted from the order page.

"result Of Expression 'this.form.fireevent' [undefined] Is Not A Function". Help!

Similar Tutorials

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!

How To Send A Form Result As A Url Parameter "onclick"??

Similar Tutorials

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>

Getting Data From Form And Display

Similar Tutorials

I am working on my form. Once user put data in the form, I want to save it as cookie and display it in another page as form processor.
In my html file therefore, I have

Code:

<form id="frmBuyer" method="get" action="FormProcessor_Cookies.html" 
        enctype="application/x-www-form-urlencoded"
        onsubmit="return validate();" onreset="location.reload();">

which is basically validate all the data and once it meets the requirement, it goes to FormProcessor_Cookies.html. So, i put a function in my js file to get all the data as cookie as following.
Code:

function createCookie(){
	document.cookie = first + "=" + encodeURIComponent(document.forms[0].FirstName.value);
	document.cookie = last + "=" + encodeURIComponent(document.forms[0].LastName.value);
	document.cookie = phone1 + "=" + encodeURIComponent(document.forms[0].PhoneA.value);
	document.cookie = phone2 + "=" + encodeURIComponent(document.forms[0].PhoneB.value);
	document.cookie = phone3 + "=" + encodeURIComponent(document.forms[0].PhoneC.value);
	document.cookie = email + "=" + encodeURIComponent(document.forms[0].Email.value);
	location.href = "cookie.html";
}

and I called this function after it validates.

Code:

function validate(){
	
	var blnError = false;
	var zip = document.getElementById("Zip").value;
	var textBoxthree = document.getElementById("third");
	var textLengththree = textBoxthree.value.length;
	var textBoxtwo = document.getElementById("second");
	var textLengthtwo = textBoxtwo.value.length;
	var textBoxone = document.getElementById("first");
	var textLengthone = textBoxone.value.length;

	var patternZip = new RegExp("^([0-9]){5}(([ ]|[-])?([0-9]){4})?$");
	if (document.forms[0].Zip.value == ""||!patternZip.test(document.forms[0].Zip.value)){
	document.getElementById('E_Zip').style.display="inline";
	document.forms[0].Zip.focus();
	document.forms[0].Zip.style.backgroundColor="lemonchiffon"
	blnError = true;
	}
	else{
	document.getElementById('E_Zip').style.display="none";
	document.forms[0].Zip.style.backgroundColor="white"
	}
	
	var patternCity = new RegExp("^(?:[a-zA-Z]+(?:[.'\-,])?\s?)+$");
	if (document.forms[0].City.value == ""||!patternCity.test(document.forms[0].City.value)){
	document.getElementById('E_City').style.display="inline";
	document.forms[0].City.focus();
	document.forms[0].City.style.backgroundColor="lemonchiffon"
	blnError = true;
	}
	else{
	document.getElementById('E_City').style.display="none";
	document.forms[0].City.style.backgroundColor="white"
	}

	var patternAddress = new RegExp("^[a-zA-Z]+.*|.*[a-zA-Z]+|.*[a-zA-Z]+.*$");
	if (document.forms[0].Address1.value == ""||!patternAddress.test(document.forms[0].Address1.value)){
	document.getElementById('E_Address1').style.display="inline";
	document.forms[0].Address1.focus();
	document.forms[0].Address1.style.backgroundColor="lemonchiffon"
	blnError = true;
	}
	else{
	document.getElementById('E_Address1').style.display="none";
	document.forms[0].Address1.style.backgroundColor="white"
	}

	var patternConfirm = new RegExp("^[_a-zA-Z0-9\\-]+(\.[_a-zA-Z0-9\\-]+)*@[a-zA-Z0-9\\-]+(\.[a-aZ-Z0-9\\-]+)*(\.[a-z]{2,3})$");
	if (document.forms[0].ConfirmEmail.value == "" 
	||!patternConfirm.test(document.forms[0].ConfirmEmail.value)
	||document.forms[0].ConfirmEmail.value != document.forms[0].Email.value){
	document.getElementById('E_ConfirmEmail').style.display="inline";
	document.forms[0].ConfirmEmail.focus();
	document.forms[0].ConfirmEmail.style.backgroundColor="lemonchiffon"
	blnError = true;
	}
	else{
	document.getElementById('E_ConfirmEmail').style.display="none";
	document.forms[0].ConfirmEmail.style.backgroundColor="white"
	}

	var patternEmail = new RegExp("^[_a-zA-Z0-9\\-]+(\.[_a-zA-Z0-9\\-]+)*@[a-zA-Z0-9\\-]+(\.[a-aZ-Z0-9\\-]+)*(\.[a-z]{2,3})$");
	if (document.forms[0].Email.value == ""||!patternEmail.test(document.forms[0].Email.value)){
	document.getElementById('E_Email').style.display="inline";
	document.forms[0].Email.focus();
	document.forms[0].Email.style.backgroundColor="lemonchiffon"
	blnError = true;
	}
	else{
	document.getElementById('E_Email').style.display="none";
	document.forms[0].Email.style.backgroundColor="white"
	}
	var patternPhoneA = new RegExp("^\\d{3}$");
	var patternPhoneB = new RegExp("^\\d{3}$");
	var patternPhoneC = new RegExp("^\\d{4}$");

	if(patternPhoneC.test(document.forms[0].PhoneC.value)
	&&patternPhoneB.test(document.forms[0].PhoneB.value)
	&&patternPhoneA.test(document.forms[0].PhoneA.value)){
	
	document.getElementById('E_Phone').style.display="none";
	}

	if(patternPhoneC.test(document.forms[0].PhoneC.value)){
	document.forms[0].PhoneC.style.backgroundColor="white"}

	if(patternPhoneB.test(document.forms[0].PhoneB.value)){
	document.forms[0].PhoneB.style.backgroundColor="white"}

	if(patternPhoneA.test(document.forms[0].PhoneA.value)){
	document.forms[0].PhoneA.style.backgroundColor="white"}

	if (!patternPhoneC.test(document.forms[0].PhoneC.value)){
	document.getElementById('E_Phone').style.display="inline";
	document.forms[0].PhoneC.focus();
	document.forms[0].PhoneC.style.backgroundColor="lemonchiffon"
	}
	if (!patternPhoneB.test(document.forms[0].PhoneB.value)){
	document.getElementById('E_Phone').style.display="inline";
	document.forms[0].PhoneB.focus();
	document.forms[0].PhoneB.style.backgroundColor="lemonchiffon"
	}
	if (!patternPhoneA.test(document.forms[0].PhoneA.value)){
	document.getElementById('E_Phone').style.display="inline";
	document.forms[0].PhoneA.focus();
	document.forms[0].PhoneA.style.backgroundColor="lemonchiffon"
	}

	
	var patternLast = new RegExp("^[a-zA-Z]+.*|.*[a-zA-Z]+|.*[a-zA-Z]+.*$");
	if (document.forms[0].LastName.value == ""||!patternLast.test(document.forms[0].LastName.value)){
	document.getElementById('E_LastName').style.display="inline";
	document.forms[0].LastName.style.backgroundColor="lemonchiffon"
	blnError = true;
	}
	else{
	document.getElementById('E_LastName').style.display="none";
	document.forms[0].LastName.style.backgroundColor="white"
	}

	var patternFirst = new RegExp("^[a-zA-Z]+.*|.*[a-zA-Z]+|.*[a-zA-Z]+.*$");
	if (document.forms[0].FirstName.value == ""||!patternFirst.test(document.forms[0].FirstName.value)){
	document.getElementById('E_FirstName').style.display="inline";
	document.forms[0].FirstName.style.backgroundColor="lemonchiffon"
	blnError = true;
	}
	else{
	document.getElementById('E_FirstName').style.display="none";
	document.forms[0].FirstName.style.backgroundColor="white"
	}
	
	if (blnError == true){
	document.getElementById('E_Alert').style.display="inline";
	return false;
	}  
	else {
	document.getElementById('E_Alert').style.display="none";
	 createCookie(); 
	return true;
	} 
	}

Lastly, I tried to display all the cookies in my "FormProcessor_Cookies.html" page

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>
	<meta name="author" content="" />
	<meta name="description" content="Home" />
	<meta name="keywords" content="Client Side Programming, JavaScript, CSS" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Language" content="en-us" />
	<link rel="stylesheet" href="javascript.css"/>
	<script type="text/javascript" src="shopping.js"></script>
   <title>Homepage::Seunghun Jun</title>
   </head>
   <body>
	<div id="container">
	   <!-- Begin web page -->
	   <div id="header"><!-- Header and Navigation -->
		<!-- Page Heading --><!-- Navigation -->  

	<script type="text/javascript">
	   displayHeader();
	</script> <br/><br/><br/><br/>
	   </div>

	   <div id="content">
	   <!-- Main Content --><div id="submited">
	   <script type="text/javascript">
	   /* <![CDATA[ */
	   document.write(documetn.cookie;);
	   /* ]]> */
	   </script></div>      
	   </div><br/><br/><br/><br/>
	   
	   <div id="footer">
	   <!-- Footer -->
	   <!-- Begin Footer Div-->
	   <script type="text/javascript">displayFooter();</script>
           <!-- End Footer Div -->
	   </div>
	   <!--End web page -->
	</div>
   </body>
</html>

And its not showing any messages...I know I am asking to much...but could any expert can help me what is wrong and how I can fix this?

Style.display To Hide A Form Button

Similar Tutorials

Hi all,

I'm trying to hide a form button in javascipt.
Within a function I have the following ...

Quote:
document.getElementById(button).display='none';
However it just errors and says button is undefined. button is the id and name of the form button btw.

Do I need to define which form it is part of or something else?

Many thanks for any pointers or help.

Sir P

Best Javascript Form Validation Display Technique

Similar Tutorials

Hey,

I'm looking for different JS form validation techniques. I've seen quite a few but nothing that really stands out. I'm particularly interested in finding design techniques...ie: how and where are the errors displayed inside a form?

I realize that I can't count on JS for validation, but I'm trying to add an assistive technology to make a web form feel more like a web application.

I'd love to see your favorite way of displaying form errors via JS. I've got a few of my own but if you've ever tried to do this you know it's a difficult problem to handle the general case.

Thanks!

Using Javascript To Optionally Display A Form Command

Similar Tutorials

Very naive coding question... i'm a novice coder and i think javascript is the solution i need but - maybe there's better ways...

Ok - my website accepts a login password to access certain pages.
Depending on the password entered i set a javascript variable to either 'true' or 'false'.
If the variable is set to 'true' then i want to give the user access to shopping cart buttons, if 'false' then the shopping cart buttons should be hidden.

My current solution is to wrap javascript around each shopping cart button and display only if the variable is set to 'true'.

The shopping cart button looks a bit like this:
Code:

<form method="post" action="http://www.shoppingcart.com">
<input type="hidden" name="product" value="product" />
<input type="hidden" name="price" 	value="9.99" />
<input type="hidden" name="return" value="http://www.home.com"/>
<input type="submit" value="add to basket" />
</form>

I've tried displaying this using document.write() - but it gets confused when it encounters the ":" in the web address.
Also i get the impression from trawling the forums that document.write is not flavour of the month these days.

And another thought - I accept the variable on one page - then move to multiple other pages to reference it.... will the variable still be there when i move to other pages or do i need to somehow pass it across each time?

Trying to keep my coding XHTML compliant...

Any pointers and idiot proof suggestions would be much appreciated.

2 Select Boxes In 1 Form With Onchange Display

Similar Tutorials

I'm using onchange display to hide/show form elements depending on the value of a select box. It works perfectly well (I actually really adore it) for one select box, but I have another select box which I'd like to act similarly.

Code:

<head>
 <script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
}
// ]]>
</script>
</head><body>

<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div>
</form>
</body>

But when I go to add a second select (obj,id1,id2,id3,id4,id5,id6) with new "ifs" and id's, etc and so forth, neither work.

Code:

<head>
 <script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4,id5,id6) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
document.getElementById(id5).style.display = 'none';
document.getElementById(id6).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
if ( txt.match(id5) ) {
document.getElementById(id5).style.display = 'block';
}
if ( txt.match(id6) ) {
document.getElementById(id6).style.display = 'block';
}
}
// ]]>
</script>
</head><body>

<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div>  <BR><BR><BR>

<select name="Atype" onchange="display(this,'romance','adventure');">
<option>Please select:</option>
<option value="romance">Romance</option>
<option value="adventure">Adventure</option>
</select><BR><BR>
<div id="romance" style="display: none;">Some new fields here</div>
<div id="adventure" style="display: none;">Some even newer fields here</div>
</form>
</body>

Is there any way to fuse them and get a second select to work the same?

Thanks in advance for the help!

Form To Display Automatically 3 Calculated Values

Similar Tutorials

Using A Search Form To Display Hidden Divs On A New Page

Similar Tutorials

Hello all, hope all is well. I have a search function that displays hidden divs based on what the user has searched for. I would like the "search results" to be opened onto a new page; I have a feeling the results page would contain all the hidden divs and a form of JS would need to be used to "pass" the search data to the new page and thus perform the search and display the corresponding div. - Any help is appreciated here code and demo site below.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<LINK rel="stylesheet" type="text/css" href="<?php
   $path = $_SERVER['DOCUMENT_ROOT'];
   $path .= "/php/fleet/includes/website.php";
   include_once($path);
?>/php/font.css"></style>
</head>
<body>
<script type="text/javascript">
var showndiv=false;
function show() {
document.getElementById('fleet1').innerHTML="";
if (showndiv){document.getElementById(showndiv).style.display = 'none';

}
theval=Number(document.getElementById('tb').value);
switch (theval){
case 120:
showndiv='fleet2'
break;
case 121:
showndiv='fleet3'
break;
case 122:
showndiv='fleet4'
break;
default:
document.getElementById('fleet1').innerHTML="Sorry, nothing found"
return;
	}
document.getElementById(showndiv).style.display = 'block';
}
	
</script>
<script type="text/javascript">
/////////////////////////////////////////////////////
// Between the quotation marks, list the id values of each div.

var IDvaluesOfEachDiv = "fleet2 fleet3 fleet4";

/////////////////////////////////////////////////////
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/  +/g," ");
var IDlist = IDvaluesOfEachDiv.split(" ");

function ShowAllDivs() {
for(var i=0; i<IDlist.length; i++) { 
   document.getElementById(IDlist[i]).style.display = "";
   }
}

function HideAllDivs() {
for(var i=0; i<IDlist.length; i++) { 
   document.getElementById(IDlist[i]).style.display = "none";
   }
}
</script>

<form name="myForm">
<input type="text" id="tb">
<input type="button" value="Search" onclick="show()">
</form>

<div id="fleet1" style="display:block">
</div>


<div id="fleet2" style="display:none" class="fleetdiv">	<br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
	<TR border="0" bordercolor="#FFFFFF">
	<TD valign="top">
         <TR>
        <TD>
         <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
         <TR>
           <TH class="titlebg" bgcolor="#336699" width="16%">

             <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
            </TH>
              <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
             </TH>
         </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
  <FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img 

src="http://www.nctfleetlist.co.uk/images/camera.png"  border="0"></a></FONT></TD> 
           <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
         <FONT class="font">W599 PTO</FONT> 
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">  
           <FONT class="font">M920</TD> 
           <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <FONT class="font">OPTARE</font>

    </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
         <FONT class="font">B33F</font>
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network 

Green</a></a></font> 
    </TD>  
</tr></table>
</td>
</tr>
</table>
<table align="right">
<TR>
<TD>
<a href="javascript:HideAllDivs()" class="font"><nobr>X Close</nobr></a></div></td></tr>
</table>



<div id="fleet3" style="display:none">	<br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
	<TR border="0" bordercolor="#FFFFFF">
	<TD valign="top">
         <TR>
        <TD>
         <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
         <TR>
           <TH class="titlebg" bgcolor="#336699" width="16%">

             <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
            </TH>
              <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
             </TH>
         </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
  <FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img 

src="http://www.nctfleetlist.co.uk/images/camera.png"  border="0"></a></FONT></TD> 
           <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
         <FONT class="font">W601 PTO</FONT> 
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">  
           <FONT class="font">M920</TD> 
           <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <FONT class="font">OPTARE</font>

    </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
         <FONT class="font">B33F</font>
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> 
    </TD>  
</tr></table>
</td>
</tr>
</table></div>

<div id="fleet4" style="display:none">	<br>

<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
	<TR border="0" bordercolor="#FFFFFF">
	<TD valign="top">
         <TR>
        <TD>
         <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
         <TR>
           <TH class="titlebg" bgcolor="#336699" width="16%">
             <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>

            </TH>
              <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">

                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>

             </TH>
         </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
  <FONT class="font">122</FONT></TD> 
           <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
         <FONT class="font">W602 PTO</FONT> 
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">  
           <FONT class="font">M920</TD> 
           <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <FONT class="font">OPTARE</font>

    </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
         <FONT class="font">B33F</font>
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> 
    </TD>  
</tr></table>
</td>
</tr>
</table></div>
</body>
</html>

http://nctfleetlist.co.uk/div3.php

Hide Or Display Form Field When Page Loaded

Similar Tutorials

I have a form with three fields. When the user changes the value of field1, the form displays either field2 or field3. This works fine for NEW records.

However, I'm running into a problem when trying to EDIT an existing record. When the form is loaded, I need to test the value of field1 and display either field2 or field3. I've tried using the form onload event, but do not know how to access the value of field1.

I'm using Javascript and div tags.

This is what I have so far.

<script type="text/javascript">

function hide(obj)
obj1 = document.getElementById(obj);
obj1.style.display = 'none';
}

function show(obj)
{
obj1 = document.getElementById(obj);
obj1.style.display = 'block';
}

function show_other(optionValue)
{
if(optionValue=='C') { show('divClass');} else{hide('divClass'); }
if(optionValue=='W') { show('divWorkshop');} else{hide('divWorkshop'); }
}
</script>

/* Field1 - is a drop down list */
<select name="ClassType" size="1" onchange="show_other(this.value)">
...
</select>

/* Field2 */
<div id="divClass">
...
</div>

/* Field 3 */
<div id="divWorkshop">
...
</div>

Appreciate any assistance.
Thanks
Peter

Using Javascript Form/function To Hide And Display <divs>

Similar Tutorials

Hi all - first post - I'm not too hot on javascript so I don't know if this can be done nor how to search for it in the forum because I don't know what keywords to use - but if I give an idea of what I want to do, perhaps someone can suggest an idea of how to proceed?

I have two left floated divs - in the left div I want a series of drop downs (possibly check boxes as well) about a series of products. When the user makes their decision and presses submit, I want the form to submit to a javascript function that says "Right, you will need, from your responses, product C" and in the right hand floated div, a series of hidden product info divs whose visibility is changed depending on which product the function determines is the one for you.

Broken down into parts I think I need to do the following:

a) Standard HTML form with drop downs etc and submit
b) Hidden divs
c) Submission process locally to javascript function to determine which product to show/hide
d) Javascript function that makes the decision
e) Javascript that hides/shows products

Unfortunately a server side option is not available; it has to be a client side solution and I only could think of javascript. I can probably handle all bar c) and d) - any pointers, help or suggestions would be great thanks!

cheers
frank