PDA

View Full Version : Newbie needs help



TomKen
02-23-2009, 09:58 PM
I have a question. I tried to duplicate the "Product dropbox, quantity, price in USD and Total Amount" from the codes below, but nothing seems to be working. Could someone please tell me which part do I need to modify? Also, if I were to make this webpage a little more fancier, such as a table that will appear at the right side showing me what products and prices of such products that I have purchased, how can i do that?

Thanks





<html>
<head>

<Script Language="JavaScript">
function isValid()
{

var txtFname = document.form1.txtFname.value;
var txtlname = document.form1.txtlname.value;
var txtadd1 = document.form1.txtadd1.value;
var txtadd2 = document.form1.txtadd2.value;
var txtCity = document.form1.txtCity.value;
var selcountry = document.form1.selcountry.value;
var txttel = document.form1.txttel.value;
var txtfaxno = document.form1.txtfaxno.value;
var txtemail = document.form1.txtemail.value;
var txtproduct = document.form1.txtproduct.value;
var txtcredit = document.form1 .txtcredit.value;

if (document.form1.txtproduct.options[document.form1.txtproduct.selectedIndex].value == "0")
{
alert("Please Select your Products below");
document.form1.txtproduct.focus();
return false;

}
if (( txtcredit == "") || ( txtcredit == null))
{
alert("Please enter Credit Card number to continue.");
document.form1. txtcredit.focus();
return false;
}

var checkOK = "012345 6789";
var checkStr = txtcredit;
var allValid = true;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
}
if (!allValid)
{
alert("Please enter only numerics as Credit Card number.");
document.form1. txtcredit.focus();
return (false);
}



}
</Script>
<script language="javascript">
function fOnclick()
{

document.form1.txtprice.value = document.form1.txtproduct.value;
}
function fOnblur()
{
document.form1.txttotal.value = parseFloat(document.form1.txtqty.value) * parseFloat(document.form1.txtprice.value);
}

</script>





</head>

<body>

<p align="center"><b><font size="4" color="dimgray" face="Verdana"><u>
PLEASE FILL IN THE PARTICULARS &amp; SELECT THE PRODUCTS</u></font></b></p>
<table border="0" width="100%" height="141">
</table>
<form name=form1 action="mailto:abc@yahoo.com" method="post" onSubmit="return isValid()">
<table>

<tr>
<td width="50%" height="38"><b><font color="blue" size="3" face="Verdana">First name:</font></b></td>
<td width="50%" height="38"><p><b><font color="blue" size="3" face="Verdana"><input name="txtFname"></font></b></p></td>
</tr>
<tr>
<td width="50%" height="44"><b><font color="blue" size="3" face="Verdana">Last Name:</font></b></td>
<td width="50%" height="44"><b><font color="blue" size="3" face="Verdana"><input name="txtlname"></font></b></td>
</tr>


<tr>
<td width="50%" height="1"><b><font color="blue" size="3" face="Verdana">Address1:</font></b></td>
<td width="50%" height="1"><p><b><font color="blue" size="3" face="Verdana"><input name="txtadd1"></font></b></p></td>
</tr>
<tr>
<td width="50%" height="1"><b><font color="blue" size="3" face="Verdana">Address 2:</font></b></td>
<td width="50%" height="1"><p><b><font color="blue" size="3" face="Verdana"><input name="txtadd2"></font></b></p></td>
</tr>
<tr>
<td width="50%" height="19"><b><font color="blue" size="3" face="Verdana">City:</font></b></td>
<td width="50%" height="19"><p><b><font color="blue" size="3" face="Verdana"><input name="txtCity"></font></b></p></td>
</tr>
<tr>
<td width="50%" height="19"><b><font color="blue" size="3" face="Verdana">Country:</font></b></td>
<td width="50%" height="19"><p><b><font color="blue" size="3" face="Verdana"><select size="1" name="selcountry">

<OPTION value="0" selected >Please Select Country
<OPTION>Argentina</OPTION>
<OPTION>Africa</OPTION>
<OPTION>Australia</OPTION>
<OPTION>Austria</OPTION>
<OPTION>Belgium</OPTION>
<OPTION>Bolivia</OPTION>
<OPTION>Brazil</OPTION>
<OPTION>Bulgaria</OPTION>
<OPTION>Canada</OPTION>
<OPTION>Caribbean</OPTION>
<OPTION>Chile</OPTION>
<OPTION>China</OPTION>
<OPTION>Colombia</OPTION>
<OPTION>Costa Rica</OPTION>
<OPTION>Croatia</OPTION>
<OPTION>Czech Republic</OPTION>
<OPTION>Denmark</OPTION>
<OPTION>Dominican Rep.</OPTION>
<OPTION>Ecuador</OPTION>
<OPTION>El Salvador</OPTION>
<OPTION>Estonia</OPTION>
<OPTION>Europe</OPTION>
<OPTION>Finland</OPTION>
<OPTION>France</OPTION>
<OPTION>Germany</OPTION>
<OPTION>Greece</OPTION>
<OPTION>Guatemala</OPTION>
<OPTION>Hong Kong SAR</OPTION>
<OPTION>Hungary</OPTION>
<OPTION>India</OPTION>
<OPTION>Indonesia</OPTION>
<OPTION>Ireland</OPTION>
<OPTION>Israel</OPTION>
<OPTION>Italy</OPTION>
<OPTION>Japan</OPTION>
<OPTION>Korea</OPTION>
<OPTION>Latin America</OPTION>
<OPTION>Latvia</OPTION>
<OPTION>Lithuania</OPTION>
<OPTION>Luxembourg</OPTION>
<OPTION>Malaysia</OPTION>
<OPTION>Mexico</OPTION>
<OPTION>Middle East</OPTION>
<OPTION>Netherlands</OPTION>
<OPTION>New Zealand</OPTION>
<OPTION>North Africa</OPTION>
<OPTION>Norway</OPTION>
<OPTION>Panama</OPTION>
<OPTION>Paraguay</OPTION>
<OPTION>Peru</OPTION>
<OPTION>Philippines</OPTION>
<OPTION>Poland</OPTION>
<OPTION>Portugal</OPTION>
<OPTION>Puerto Rico</OPTION>
<OPTION>Romania</OPTION>
<OPTION>Russia</OPTION>
<OPTION>Singapore</OPTION>
<OPTION>Slovakia</OPTION>
<OPTION>Slovenia</OPTION>
<OPTION>South Africa</OPTION>
<OPTION>Spain</OPTION>
<OPTION>Sweden</OPTION>
<OPTION>Switzerland</OPTION>
<OPTION>Taiwan</OPTION>
<OPTION>Thailand</OPTION>
<OPTION>Turkey</OPTION>
<OPTION>United Kingdom</OPTION>
<OPTION>Ukraine</OPTION>
<OPTION>United States</OPTION>
<OPTION>Uruguay</OPTION>
<OPTION>Venezuela</OPTION>
<OPTION>Viet Nam </OPTION>
</select></font></b></p></td></tr>

<tr>
<td width="50%" height="19"><b><font color="blue" size="3" face="Verdana">Tel:</font></b></td>
<td width="50%" height="19"><p><b><font color="blue" size="3" face="Verdana">
<input name="txttel" maxlength="10"></font></b></p></td>
</tr>
<tr>
<td width="50%" height="19"><b><font color="blue" size="3" face="Verdana">Fax:</font></b></td>
<td width="50%" height="19"><b><font color="blue" size="3" face="Verdana"><input name="txtfaxno" maxlength="10" ></font></b></td></tr>
<tr>
<td width="50%" height="19"><b><font color="blue" size="3" face="Verdana">Email:</font></b></td>
<td width="50%" height="19"><p><b><font color="blue" size="3" face="Verdana"><input name="txtemail" size="27" ></font></b></p></td></tr>
</table>

<table border="0" width="100%">
<tr>
<td width="50%"><font face="Verdana" color="blue"><b>Product Name</b></font></td>
<td width="50%"><p><font face="Verdana" color="blue"><b><select size="1" name="txtproduct" onChange="fOnclick()">

<option value="0">Please Select Products</option>
<option value="30.95">Coffee Magic</option>
<option value="28.95">Cohas New England Maple Coffee</option>
<option value="29.95">Senseo Cappuccino Coffee</option>
<option value="31.45">Nonualco Coffee</option>
<option value="28.95">Koope Moken Coffee</option>
<option value="29.95">Old Town White Coffee</option>
</select></b></font></p></td></tr>

<tr>
<td width="50%"><font face="Verdana" color="blue"><b>Price of product/unit in USD</b></font></td>
<td width="50%"><p><font face="Verdana" color="blue"><b>

<input name="txtprice" maxlength="10"></b></font></p></td></tr>
<tr>
<td width="50%"><font face="Verdana" color="blue"><b>Qty</b></font></td>
<td width="50%"><p><font face="Verdana" color="blue"><b>
<input name="txtqty" size="11" maxlength="4" onBlur=fOnblur()></b></font></p></td></tr>
<tr>
<td width="50%"><font face="Verdana" color="blue"><b>Total Amount in USD</b></font></td>
<td width="50%"><p><font face="Verdana" color="blue"><b>
<input name="txttotal" maxlength="10"></b></font></p></td></tr>
<tr>
<tr>
<td width="50%" height="19"><b><font color="blue" size="3" face="Verdana">Credit Card No.:</font></b></td>
<td width="50%" height="19"><p><b><font color="blue" size="3" face="Verdana">
<input name="txtcredit" maxlength="10"></font></b></p></td>
</tr>
<td width="100%" colspan="2"><p><font face="Verdana" color="blue"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</b></font></p></td></tr>
<tr>
<td width="100%" colspan="2">
<p align="center"><font face="Verdana" color="blue"><b><input type="submit" value="Submit" name="B1" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="Reset" name="B2"></b></font></p></td>
</tr>
</table>
</form>
</BODY>

Falkon303
02-24-2009, 05:28 AM
first, I would heighten the td that the submit button is in, and use the valign property, instead of consistent "nbsp;". You might also want to consider linking the table rows and <td>'s into one table instead of 2.

Consistency and fluidity is one thing that is important. Try top valigning(vertically aligning) all of your text/labels of the items in this form, by using valign="top" as a <td> property.

Also, I recommend using a darker blue for the font color.

What did you mean by "duplicating"?