Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

form validating a text field on submit

Posted on 2005-04-08
16
Medium Priority
?
1,267 Views
Last Modified: 2008-02-01
Hi

I've got a little DW generated code with standard DW validation but I want to check the text field called 'skipper' has had the correct value entered in it before it is submitted. The correct value is 'John'.

I also want the tables - tAboard, tSea, tShore, tPassing - to be hidden when the form first loads

Cheers

Luigi

Here is the 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">
<style type="text/css">
<!--
.style3 {color: #000000}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}
//-->
function showTable(tableId) {
  //first hide all the tables so that only one table is visible at any time
  document.getElementById("tAboard").style.display="none";
  document.getElementById("tSea").style.display="none";
  document.getElementById("tShore").style.display="none";
  document.getElementById("tPassing").style.display="none";
  document.getElementById(tableId).style.display="block";
}

</script>
</head>

<body>
<form action="/cgi/formmail" method="post" name="FormBooking" id="FormBooking" onSubmit="MM_validateForm('Name','','R','Email','','RisEmail','Phone','','RisNum');return document.MM_returnValue">
  <table width="402" border="0" cellspacing="5" cellpadding="0">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>Personal Details </strong></div></td>
    </tr>
    <tr>
      <td width="150"><div align="right" class="style3">Contact Name </div></td>
      <td width="237"><input name="Name" type="text" id="Name"></td>
    </tr>
    <tr>
      <td><div align="right">Number of guests</div></td>
      <td><input name="Number" type="text" id="Number"></td>
    </tr>
    <tr>
      <td><div align="right">Partner's Name (if any) </div></td>
      <td><input name="Partner" type="text" id="Partner"></td>
    </tr>
    <tr>
      <td><div align="right" class="style3">Email</div></td>
      <td><input name="email" type="text" id="email" onBlur="MM_validateForm('Name','','R','Number','','NisNum','Email','','RisEmail','Nights','','NisNum');return document.MM_returnValue"></td>
    </tr>
    <tr>
      <td><div align="right">Phone</div></td>
      <td><input name="Phone" type="text" id="Phone"></td>
    </tr>
    <tr>
      <td align="right" valign="top">What is the skipper's real name? </td>
      <td><input name="skipper" type="text" id="skipper"></td>
    </tr>
    <tr>
      <td align="right" valign="top">Are you: </td>
      <td><p>
          <label>
          <input name="r1" type="radio" onclick='showTable("tAboard")' value="On_Board">
              Staying on board</label>
          <br>
          <label>
          <input name="r1" type="radio" onclick='showTable("tShore")'>
          Staying on shore and day</label>
          visiting<br>
          <label>
          <input name="r1" type="radio"  onclick='showTable("tSea")'>
          </label>
          Arriving by Sea<br>
          <label>
                  <input type="radio" name="r1"  onClick='showTable("tPassing")'>          
                  Just passing through </label>
          <br>
      </p></td>
    </tr>
  </table>
   <br>
   <table id="tAboard">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>Staying on Board </strong></div></td>
    </tr>
    <tr>
      <td><div align="right">Nights on Board </div></td>
      <td><input name="Nights" type="text" id="Nights"></td>
    </tr>
    <tr>
      <td><div align="right">Dates</div></td>
      <td><input name="datesOnBoard" type="text" id="datesOnBoard" onBlur="MM_validateForm('Name','','R','Number','','RisNum','Email','','NisEmail','Nights','','NinRange1:5');return document.MM_returnValue"></td>
    </tr>
  </table>
    <br>
   <table id="tShore">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>
          <label>Staying on shore and day</label>
          visiting</strong></div></td>
    </tr>
    <tr>
      <td><div align="right" class="style3">Accomodation</div></td>
      <td><input name="Accomodation" type="text" id="Accomodation"></td>
    </tr>
    <tr>
      <td><div align="right">Dates</div></td>
      <td><input name="datesAccom" type="text" id="datesAccom"></td>
    </tr>
  </table>
      <br>
      <table id="tSea">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center">
          <label><strong>Arriving by Sea </strong></label>
      </div></td>
    </tr>
    <tr>
      <td><div align="right" class="style3">Name of Vessel </div></td>
      <td><input name="Vessel" type="text" id="Vessel"></td>
    </tr>
    <tr>
      <td><div align="right">Approximate Date</div></td>
      <td><input name="datesBySea" type="text" id="datesBySea"></td>
    </tr>
  </table>
      <br>
      <table id="tPassing">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>Just passing through </strong></div></td>
    </tr>
    <tr>
      <td><div align="right">Dates</div></td>
      <td><input name="datesPassing" type="text" id="datesPassing"></td>
    </tr>
  </table>
    <br>
      <table>
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>Any other Information? </strong></div></td>
    </tr>
    <tr>
      <td colspan="2"><div align="center">
          <textarea name="Information" cols="50" rows="5" id="Information"></textarea>
      </div></td>
    </tr>
    <tr>
      <td colspan="2"><div align="center">
          <input type="submit" name="Submit" value="Submit">
          <input name="Reset" type="reset" id="Reset" value="Reset">
          <input name="recipient" type="hidden" id="recipient" value="luigic@xtra.co.nz">
          <input name="subject" type="hidden" id="subject" value="Booking">
          <input name="title" type="hidden" id="title" value="Thank You for completing this form. We look forward to your company aboard">
      </div></td>
    </tr>
  </table>
</form>
</body>
</html>


0
Comment
Question by:LuigiC
  • 8
  • 6
  • 2
16 Comments
 
LVL 2

Expert Comment

by:craigofcapetown
ID: 13734475
Dreamweaver uses Javascript for the form validation...You can use Javascript too!

Simply change the form (opening) tag to the following :

<form action="/cgi/formmail" method="post" name="FormBooking" id="FormBooking" onSubmit="MM_validateForm('Name','','R','Email','','RisEmail','Phone','','RisNum');return document.MM_returnValue; document.getElementById=='John'?return true:return false; ">

C
0
 
LVL 2

Expert Comment

by:craigofcapetown
ID: 13734484
sorry...

this

<form action="/cgi/formmail" method="post" name="FormBooking" id="FormBooking" onSubmit="MM_validateForm('Name','','R','Email','','RisEmail','Phone','','RisNum');return document.MM_returnValue; document.getElementById('skipper').value=='John'?return true:return false; ">

C
0
 

Author Comment

by:LuigiC
ID: 13734535
Hi

Thanks for this but I'm getting a syntax error somewhere

???

 <form action="/cgi/formmail" method="post" name="FormBooking" id="FormBooking" onSubmit="MM_validateForm('Name','','R','Email','','RisEmail','Phone','','RisNum');return document.MM_returnValue; document.getElementById('skipper').value=='John'?return true:return false; ">
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:msato
ID: 13737552
You don't have to validate value for all text boxes each time text changes form email. You only need to check the values for all when the form is submitted, for example. If you haven't been able to fix syntax error yet, here is the code I wrote in dreamweaver. notice i took out form validatation from email text box and moved the validation to submit button.



<!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">
<style type="text/css">
<!--
.style3 {color: #000000}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}


function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      }  if (test.indexOf('isSkipper')!=-1) {
                  if (val !='John') errors+='- wrong name for Skipper.\n';
              } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}


 
//-->
function showTable(tableId) {
  //first hide all the tables so that only one table is visible at any time
  document.getElementById("tAboard").style.display="none";
  document.getElementById("tSea").style.display="none";
  document.getElementById("tShore").style.display="none";
  document.getElementById("tPassing").style.display="none";
  document.getElementById(tableId).style.display="block";
}

</script>
</head>

<body>
<form action="/cgi/formmail" method="post" name="FormBooking" id="FormBooking">
  <table width="402" border="0" cellspacing="5" cellpadding="0">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>Personal Details </strong></div></td>
    </tr>
    <tr>
      <td width="150"><div align="right" class="style3">Contact Name </div></td>
      <td width="237"><input name="Name" type="text" id="Name"></td>
    </tr>
    <tr>
      <td><div align="right">Number of guests</div></td>
      <td><input name="Number" type="text" id="Number"></td>
    </tr>
    <tr>
      <td><div align="right">Partner's Name (if any) </div></td>
      <td><input name="Partner" type="text" id="Partner"></td>
    </tr>
    <tr>
      <td><div align="right" class="style3">Email</div></td>
      <td><input name="email" type="text" id="email"></td>
    </tr>
    <tr>
      <td><div align="right">Phone</div></td>
      <td><input name="Phone" type="text" id="Phone"></td>
    </tr>
    <tr>
      <td align="right" valign="top">What is the skipper's real name? </td>
      <td><input name="skipper" type="text" id="skipper"></td>
    </tr>
    <tr>
      <td align="right" valign="top">Are you: </td>
      <td><p>
          <label>
          <input name="r1" type="radio" onclick='showTable("tAboard")' value="On_Board">
            Staying on board</label>
          <br>
          <label>
          <input name="r1" type="radio" onclick='showTable("tShore")'>
          Staying on shore and day</label>
          visiting<br>
          <label>
          <input name="r1" type="radio"  onclick='showTable("tSea")'>
          </label>
          Arriving by Sea<br>
          <label>
               <input type="radio" name="r1"  onClick='showTable("tPassing")'>          
               Just passing through </label>
          <br>
      </p></td>
    </tr>
  </table>
   <br>
   <table id="tAboard">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>Staying on Board </strong></div></td>
    </tr>
    <tr>
      <td><div align="right">Nights on Board </div></td>
      <td><input name="Nights" type="text" id="Nights"></td>
    </tr>
    <tr>
      <td><div align="right">Dates</div></td>
      <td><input name="datesOnBoard" type="text" id="datesOnBoard" onBlur="MM_validateForm('Name','','R','Number','','RisNum','Email','','NisEmail','Nights','','NinRange1:5');return document.MM_returnValue"></td>
    </tr>
  </table>
    <br>
   <table id="tShore">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>
          <label>Staying on shore and day</label>
          visiting</strong></div></td>
    </tr>
    <tr>
      <td><div align="right" class="style3">Accomodation</div></td>
      <td><input name="Accomodation" type="text" id="Accomodation"></td>
    </tr>
    <tr>
      <td><div align="right">Dates</div></td>
      <td><input name="datesAccom" type="text" id="datesAccom"></td>
    </tr>
  </table>
     <br>
     <table id="tSea">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center">
          <label><strong>Arriving by Sea </strong></label>
      </div></td>
    </tr>
    <tr>
      <td><div align="right" class="style3">Name of Vessel </div></td>
      <td><input name="Vessel" type="text" id="Vessel"></td>
    </tr>
    <tr>
      <td><div align="right">Approximate Date</div></td>
      <td><input name="datesBySea" type="text" id="datesBySea"></td>
    </tr>
  </table>
     <br>
     <table id="tPassing">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>Just passing through </strong></div></td>
    </tr>
    <tr>
      <td><div align="right">Dates</div></td>
      <td><input name="datesPassing" type="text" id="datesPassing"></td>
    </tr>
  </table>
    <br>
     <table>
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>Any other Information? </strong></div></td>
    </tr>
    <tr>
      <td colspan="2"><div align="center">
          <textarea name="Information" cols="50" rows="5" id="Information"></textarea>
      </div></td>
    </tr>
    <tr>
      <td colspan="2"><div align="center">
          <input name="Submit" type="submit" onClick="MM_validateForm('Name','','R','Number','','NisNum','email','','NisEmail','skipper','','RisSkipper','Nights','','NisNum');return document.MM_returnValue" value="Submit">
          <input name="Reset" type="reset" id="Reset" value="Reset">
          <input name="recipient" type="hidden" id="recipient" value="luigic@xtra.co.nz">
          <input name="subject" type="hidden" id="subject" value="Booking">
          <input name="title" type="hidden" id="title" value="Thank You for completing this form. We look forward to your company aboard">
      </div></td>
    </tr>
  </table>
</form>
</body>
</html>
0
 

Author Comment

by:LuigiC
ID: 13739826
Hi

Thanks for this but I get a curious error msg:

'email must contain a number

Almost there

Cheers

Luigi
0
 
LVL 3

Expert Comment

by:msato
ID: 13740075
Sorry, replace this one:

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      }  if (test.indexOf('isSkipper')!=-1) {
               if (val !='John') errors+='- wrong name for Skipper.\n';
            } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}

To:

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      }  else if (test.indexOf('isSkipper')!=-1) {
               if (val !='John') errors+='- wrong name for Skipper.\n';
            } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}
0
 

Author Comment

by:LuigiC
ID: 13740378
Hi

Many thanks. Almost there

I've added two dropdowns to the form - val1 and val2

These are used to calculate the value in the 'answer' field

This code works fine in a separate form but when I add it to this one it refuses to work ie function calculate() doesn't appear to be working?

Any help appreciated

Cheers

Luigi

<!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">
<style type="text/css">
<!--
.style3 {color: #000000}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function calculate(){
    x = parseInt(document.calc.val1.value)
    y = parseInt(document.calc.val2.value)
      var amt = x * y * 60
      document.calc.answer.value="$" + amt.toFixed(2);
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      }  else if (test.indexOf('isSkipper')!=-1) {
               if (val !='John') errors+='- wrong name for Skipper.\n';
            } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}

//-->
function showTable(tableId) {
  //first hide all the tables so that only one table is visible at any time
  document.getElementById("tAboard").style.display="none";
  document.getElementById("tSea").style.display="none";
  document.getElementById("tShore").style.display="none";
  document.getElementById("tPassing").style.display="none";
  document.getElementById(tableId).style.display="block";
}
function hideTable(tableIda,tableIdb,tableIdc,tableIdd) {
     var a = tableIda;
     var b = tableIdb;
     var c = tableIdc;
       var d = tableIdd;
     document.getElementById(a).style.display="none";
     document.getElementById(b).style.display="none";
     document.getElementById(c).style.display="none";
       document.getElementById(d).style.display="none";
}


</script>
</head>


<body onLoad=hideTable('tAboard','tSea','tShore','tPassing')>

 <form action="/cgi/formmail" method="post" name="FormBooking" id="FormBooking" onSubmit="MM_validateForm('Name','','R','Email','','RisEmail','Phone','','RisNum');return document.MM_returnValue">

  <table width="402" border="0" cellspacing="5" cellpadding="0">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>Personal Details </strong></div></td>
    </tr>
    <tr>
      <td width="150"><div align="right" class="style3">Contact Name </div></td>
      <td width="237"><input name="Name" type="text" id="Name"></td>
    </tr>
    <tr>
      <td><div align="right">Number of guests</div></td>
      <td><select name=val1 id="val1" onChange="calculate()">
        <option value=1 selected>1
        <option value=2>2
        <option value=3>3
        <option value=4>4
      </select></td>
    </tr>
    <tr>
      <td><div align="right">Nights on Board </div></td>
      <td><select name=val2 onChange="calculate()">
          <option value=1 selected>1
          <option value=2>2
          <option value=3>3
          <option value=4>4
          </select></td>
    </tr>
    <tr>
      <td><div align="right">Total Cost </div></td>
      <td><input name=answer type=text value="$60.00" size=10></td>
    </tr>
    <tr>
      <td><div align="right">Partner's Name (if any) </div></td>
      <td><input name="Partner" type="text" id="Partner"></td>
    </tr>
    <tr>
      <td><div align="right" class="style3">Email</div></td>
      <td><input name="email" type="text" id="email" onBlur="MM_validateForm('Name','','R');return document.MM_returnValue"></td>
    </tr>
    <tr>
      <td><div align="right">Phone</div></td>
      <td><input name="Phone" type="text" id="Phone"></td>
    </tr>
    <tr>
      <td align="right" valign="top">What is the skipper's real name? </td>
      <td><input name="skipper" type="text" id="skipper"></td>
    </tr>
    <tr>
      <td align="right" valign="top">Are you: </td>
      <td><p>
          <label>
          <input name="r1" type="radio" onclick='showTable("tAboard")' value="On_Board">
              Staying on board</label>
          <br>
          <label>
          <input name="r1" type="radio" onclick='showTable("tShore")' value="On_Shore">
          Staying on shore and day</label>
          visiting<br>
          <label>
          <input name="r1" type="radio"  onclick='showTable("tSea")' value="From_Sea">
          </label>
          Arriving by Sea<br>
          <label>
                  <input type="radio" name="r1"  onClick='showTable("tPassing")' value="Passing">          
                  Just passing through </label>
          <br>
      </p></td>
    </tr>
  </table>
   <br>
   <table id="tAboard">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>Staying on Board </strong></div></td>
    </tr>
    <tr>
      <td><div align="right">Dates</div></td>
      <td><input name="datesOnBoard" type="text" id="datesOnBoard" onBlur="MM_validateForm('Name','','R','Number','','RisNum','Email','','NisEmail','Nights','','NinRange1:5');return document.MM_returnValue"></td>
    </tr>
  </table>
    <br>
   <table id="tShore">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>
          <label>Staying on shore and day</label>
          visiting</strong></div></td>
    </tr>
    <tr>
      <td><div align="right" class="style3">Accomodation</div></td>
      <td><input name="Accomodation" type="text" id="Accomodation"></td>
    </tr>
    <tr>
      <td><div align="right">Dates</div></td>
      <td><input name="datesAccom" type="text" id="datesAccom"></td>
    </tr>
  </table>
      <br>
      <table id="tSea">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center">
          <label><strong>Arriving by Sea </strong></label>
      </div></td>
    </tr>
    <tr>
      <td><div align="right" class="style3">Name of Vessel </div></td>
      <td><input name="Vessel" type="text" id="Vessel"></td>
    </tr>
    <tr>
      <td><div align="right">Approximate Date</div></td>
      <td><input name="datesBySea" type="text" id="datesBySea"></td>
    </tr>
  </table>
      <br>
      <table id="tPassing">
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>Just passing through </strong></div></td>
    </tr>
    <tr>
      <td><div align="right">Dates</div></td>
      <td><input name="datesPassing" type="text" id="datesPassing"></td>
    </tr>
  </table>
    <br>
      <table>
    <tr bgcolor="#66FFFF">
      <td colspan="2"><div align="center"><strong>Any other Information? </strong></div></td>
    </tr>
    <tr>
      <td colspan="2"><div align="center">
          <textarea name="Information" cols="50" rows="5" id="Information"></textarea>
      </div></td>
    </tr>
    <tr>
      <td colspan="2"><div align="center">
                <input name="Submit" type="submit" onClick="MM_validateForm('Name','','R','Number','','NisNum','email','','NisEmail','skipper','','RisSkipper','Nights','','NisNum');return document.MM_returnValue" value="Submit">
          <input name="Reset" type="reset" id="Reset" value="Reset">
          <input name="recipient" type="hidden" id="recipient" value="luigic@dude.co.nz">
          <input name="subject" type="hidden" id="subject" value="Booking">
          <input name="title" type="hidden" id="title" value="Thank You for completing this form. We look forward to your company aboard">
        </div></td>
    </tr>
  </table>
</form>
</body>
</html>
0
 
LVL 3

Expert Comment

by:msato
ID: 13740504
It didn't work becuase your form's name is different. Try this one:

function calculate(){
    x = parseInt(document.FormBooking.val1.value)
    y = parseInt(document.FormBooking.val2.value)
     var amt = x * y * 60
     document.FormBooking.answer.value="$" + amt.toFixed(2);
}
0
 

Author Comment

by:LuigiC
ID: 13740546
Hey many thanks for this

Am I allowed to ask just one more question?

If any of the radio buttons are chosen, other than 'On_Board', can we clear the values in 'val2' and 'answer' so that these are not passed by the form?

I really appreciate your help

Cheers

Luigi
0
 
LVL 3

Expert Comment

by:msato
ID: 13740801
Ok, let me make sure if I got this right... If 'On_Board' is not selected, then you want to set answer value to $0? what do you mean by clear the value in 'answer'. You can add 0 to nights on board too. That way if they didn't select on_board, you can set the value to 0.
0
 

Author Comment

by:LuigiC
ID: 13741205
Hi

If the first (default) radio button (value = 'onBoard) is not selected, the table 'tAboard' is hidden and I don't want to pass any values from this table when the form is submitted. These include the text fields 'val2' and 'answer'.

Hope this is clear

Thanks for your help

Cheers

Luigi
0
 
LVL 3

Accepted Solution

by:
msato earned 2000 total points
ID: 13741521
You can clear the value when each radio button is clicked:

<input name="r1" type="radio" onclick='showTable("tShore");clearFields();' value="On_Shore">

 <input name="r1" type="radio"  onclick='showTable("tSea");clearFields();' value="From_Sea">

 <input type="radio" name="r1"  onClick='showTable("tPassing");clearFields();' value="Passing">

I'd also add 0 to nights on board:
<select name=val2 onChange="calculate()">
          <option value=0>0</option>
          <option value=1 selected>1</option>
          <option value=2>2</option>
          <option value=3>3</option>
          <option value=4>4</option>
          </select>

Here is the javascript function for clearing fields:
 function clearFields() {
   
        document.FormBooking.answer.value = ""
       document.FormBooking.val2.value = 0
   
 }


Also, you might want to reset the field when on_Board is clicked:

<input name="r1" type="radio" onclick='resetFields();showTable("tAboard");' value="On_Board">

Here is the javascript for resetting fields:

  function resetFields() {
           
        document.FormBooking.answer.value = '$60.00'
            document.FormBooking.val2.value = 1
   
 }
0
 

Author Comment

by:LuigiC
ID: 13742391
Thanks for this

It works well although if you enter contents of one of the tables and then click another radio option and enter the contents in the table that matches this option.

It would be best to blitz all the fields in a table once another radio option is checked and its table is opened, not just val2 and answer in tAboard.

Any ideas
0
 

Author Comment

by:LuigiC
ID: 13742619
Hey MSATO

Thanks for sticking with me on this. You really earnt your points.

I've got something that is not too elegant but it works now, not your fault, more to do with my specification.

Cheers

Luigi
0
 
LVL 3

Expert Comment

by:msato
ID: 13752038
You're welcome :)

>> It would be best to blitz all the fields in a table once another radio option is checked and its table is opened, not just val2 and answer in tAboard.

I thought that you wanted clear val2 and answer with radio button click. If you want to clear other options, you can do so by adding more fields into this function.

 function clearFields() {
   
        document.FormBooking.answer.value = ""
       document.FormBooking.val2.value = 0
   
 }

0
 

Author Comment

by:LuigiC
ID: 13755530
Thanks

This is what I finished up doing, but I had to create 4 functions, one for each radio button (and table) because the fields in them are different

Cheers

Luigi
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses
Course of the Month11 days, 20 hours left to enroll

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question