Develop Reference

Salesforce Web-to-Lead Form in Squarespace

I'm trying to insert a Web-to-Lead Form from Salesforce into a Code block of a Squarespace page. This is a slightly formatted version with tables, but even if I take the pure Web-to-Lead form it just doesn't create a Lead in the CRM.
The form itself submits and goes to the retURL, and this happens despite making the fields required and filling all of the fields. In Squarespace I've put the <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"> in the Code of the Settings.
Edit: I can't find any advice for how to use this with Squarespace except to use Zapier, which I now see has a free tier. This seems to work, but not ideally. I would be interested to see if there are other solutions, but Zapier seems to be the best one I can find.
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="OID">
<input type=hidden name="retURL" value="WEBSITE URL">
<table>
<tbody>
<tr>
<td><label for="salutation">Salutation*: </label></td>
<td><select id="salutation" name="salutation" required="true"><option value="">--None--</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option value="Mr.">Mr.</option>
<option value="Mx.">Mx.</option>
</select></td>
</tr>
<tr>
<td><label for="first_name">First Name*: </label></td>
<td><input id="first_name" maxlength="40" name="first_name" size="20" type="text" placeholder="Mandatory" required="true"/></td>
</tr>
<tr>
<td><label for="last_name">Surname*: </label></td>
<td><input id="last_name" maxlength="80" name="last_name" size="20" type="text" placeholder="Mandatory" required="true"/></td>
</tr>
<tr>
<td><label for="phone">Phone*</label></td>
<td><input id="phone" maxlength="40" name="phone" size="20" type="text" required="true"/></td>
</tr>
<tr>
<td><label for="email">E-Mail*: </label></td>
<td><input id="email" maxlength="80" name="email" size="20" type="text" placeholder="Mandatory" required="true"/></td>
</tr>
<tr>
<td><label for="company">Company*: </label></td>
<td><input id="company" maxlength="40" name="company" size="20" type="text" placeholder="Mandatory" required="true"/></td>
</tr>
<tr>
<td><label for="street">Street, Housenumber *: </label></td>
<td><textarea name="street" placeholder="Mandatory" required="true"></textarea></td>
</tr>
<tr>
<td><label for="zip">ZIP Code*: </label></td>
<td><input id="zip" maxlength="20" name="zip" size="20" type="text" placeholder="Mandatory" required="true"/></td>
</tr>
<tr>
<td><label for="city">City*: </label></td>
<td><input id="city" maxlength="40" name="city" size="20" type="text" placeholder="Mandatory" required="true"/></td>
</tr>
<tr>
<td> <label for="state">State/Province*</label></td>
<td><input id="state" maxlength="20" name="state" size="20" type="text" required="true"/></td>
</tr>
<tr>
<td><label for="country_code">Country*: </label></td>
<td><select id="country_code" name="country" required="true"/>
<option value="ZA">South Africa</option>
<option value="NA">Namibia</option></td>
</tr>
<tr>
<td>Contact Type:</td>
<td><select id="ID" name="ID" title="Contact Type" required="true">
<option value="CONTACT TYPE">CONTACT TYPE</option>
</select>
</td>
</tr>
</tbody>
</table>
<div>
<input type="checkbox" checked required="true"> Yes, I agree to the processing of my data.*
</div>
<div>
<input type="checkbox" > Yes, I have read the <u>data protection declaration</u> and agree.*
</div>
<input id="lead_source" name="lead_source" type="hidden" value="LEAD SOURCE">
<br>
<input type="submit" name ="submit" value="Register">
</form>

Setting attributes with jQuery in dynamic PHP form - Not Working

I am stuck in setting up the attribute using jQuery The task is quite simple, I am setting the data-error attribute to field the required attribute is working perfectly fine, but data-error attribute is not working and not showing error where nothing is selected. tried many ways, but it is not working.
I want to show an error where it selects Yes and does not select priority dropdown. If it selects no then it show no error and let it submit anyway
$('input[name*=Suitability]').click(function() {
//check if radio is checked and value is Y
if ($(this).is(":checked") && $(this).val() == "Y") {
$(this).closest("tr").find(".ShowPriority").show(); //show
$(this).closest("tr").find(".Priority").attr('required', '');
$(this).closest("tr").find(".Priority").attr('data-error', 'This field is required.');
} else {
$(this).closest("tr").find('.ShowPriority').hide(); //hide
$(this).closest("tr").find(".Priority").removeAttr('required', '');
$(this).closest("tr").find(".Priority").removeAttr('data-error', 'This field is required.');
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<tr>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Sr.No</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Topic Name</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="2">Suitability of Business for Pre-Feasibility Study</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="3">Priority for Development of Pre-Feasibility Study</td>
</tr>
<tr>
<td style="min-width:50px;">
1
</td>
<td><input type="text" value="Topic 1" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 1" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[0]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[0]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]">
<option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
<tr>
<td style="min-width:50px;">
2
</td>
<td><input type="text" value="Topic 2" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 2" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[1]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[1]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]">
<option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
<tr>
<td style="min-width:50px;">
3
</td>
<td><input type="text" value="Topic 3" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 3" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[2]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[2]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]">
<option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
</table>

You need to have required on the select. Then you can remove it when you want
$(function() {
$('input[name*=Suitability]').click(function() {
//check if radio is checked and value is Y
const show = $(this).is(":checked") && $(this).val() == "Y";
$(this).closest("tr").find(".ShowPriority").toggle(show); //show
$(this).closest("tr").find(".Priority").attr('required', function() { return show });
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<form>
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<tr>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Sr.No</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Topic Name</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="2">Suitability of Business for Pre-Feasibility Study</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="3">Priority for Development of Pre-Feasibility Study</td>
</tr>
<tr>
<td style="min-width:50px;">
1
</td>
<td><input type="text" value="Topic 1" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 1" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[0]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[0]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]" required data-error="This field is required">
<option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
<tr>
<td style="min-width:50px;">
2
</td>
<td><input type="text" value="Topic 2" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 2" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[1]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[1]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]" required data-error="This field is required" <option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
<tr>
<td style="min-width:50px;">
3
</td>
<td><input type="text" value="Topic 3" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 3" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[2]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[2]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]" required data-error="This field is required" <option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
</table>
<input type="submit">
</form>

how do i show html select above the other elements

I have a registration page, in which I have a phone field, when I select that field the popup show underneath the other elements.
I want to know that why the phone field options are shown underneath the below options?
Please refer:
The code that I am using for:
sign-up.jsp
enter code here
<form action="Controller" method="GET" id="form">
<input type="hidden" name="command" value="registration"/>
<table class="sign-up-div-table">
<tr>
<td colspan="2"> <h3>Join us for free</h3> </td>
</tr>
<tr>
<td> <input type="text" name="firstname" class="form-control" placeholder="First name" required/> </td>
<td> <input type="text" name="lastname" class="form-control" pattern="^[A-Z][-a-zA-Z]+$" placeholder="Last name" required/> </td>
</tr>
<tr>
<td colspan="2"> <input type="email" name="email" class="form-control" placeholder="Email address" required onkeyup="check(this.value)"/> </td>
</tr>
<tr>
<td colspan="2"> <div id = "mydiv"></div> </td>
</tr>
<tr>
<td colspan="2"> <input type="password" name="password" class="form-control" placeholder="Password" required/> </td>
</tr>
<tr>
<td> <jsp:include page="demo.html"></jsp:include> </td>
</tr>
<tr>
<td colspan="2"> <div id = "numberdiv"></div> </td>
</tr>
<tr>
<td colspan="2">
<div class="input-group input-group-xs">
<span class="input-group-addon" style="width: 100px; background-color:#a2a587; color: white;" >Birthday</span>
<select name="date" class="form-control" style="background-color: #c7cca7;" required>
<option disabled selected value> select date </option>
<jsp:include page="dates.jsp"></jsp:include>
</select>
<select name="month" class="form-control" style="background-color: #c7cca7;" required>
<option disabled selected value> select month </option>
<jsp:include page="months.jsp"></jsp:include>
</select>
<select name="year" class="form-control" style="background-color: #c7cca7;" required>
<option disabled selected value> select year </option>
<jsp:include page="years.jsp"></jsp:include>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="input-group input-group-sm">
<span class="input-group-addon" style="width: 100px;">Gender</span>
<select class="form-control" name="gender" style="width: 300px;" required>
<option disabled selected value> select gender </option>
<option>male</option>
<option>female</option>
<option>other</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="input-group input-group-sm">
<span class="input-group-addon" style="width: 100px;">Position</span>
<select class="form-control" name="position" style="width: 300px;" required>
<option disabled selected value> select position </option>
<option>Writer</option>
<option>Author</option>
<option>Contributor</option>
<option>Teacher</option>
<option>Student</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="left"> <input type="submit" value="Get Started" class="btn btn-success btn-lg"/> </td>
<td></td>
</tr>
</table>
</form>

How can I make my error be posted within my reserved section?

In the reserved area I wish to show errors that will show up if something doesn't go right with input. One prerequisite I have is that there must be some value within first name. If there is no value, within reserved should show "Name must be filled out".
As of right now I have an alert that shows up if the name is not filled out.
How can I make my errors be posted within the "Reserved" section?
JS:
function validateForm()
{
var x = document.forms["application"]["fName"].value;
if (x == null || x == "")
{
alert("Name must be filled out");
return false;
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>int222_162d16 - Assignment 3 - Home Page</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" />
<script src='javascript/myscript.js' type='text/javascript'></script>
</head>
<body>
<form name="application" id="application" method="post" action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/cardApplication.cgi" onsubmit="return validateForm();">
<fieldset>
<legend class="t"><img src="https://zenit.senecac.on.ca/~emile.ohan/int222/bank-logo.png" alt="Assignment #3" />Seneca Bank - Credit Card Application</legend>
<div class="clearfix">
<aside class="l">
<fieldset>
<legend>Primary Applicant's Information</legend>
<table>
<tr>
<td>First Name*</td>
<td><input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus" ></td>
</tr>
<tr>
<td>Surname*</td>
<td><input type="text" name="sName" id="sName" size="20" maxlength="30"></td>
</tr>
<tr>
<td>Date of Birth*</td>
<td><input type="text" name="dob" id="dob" size="10" placeholder="MMMYYYY" maxlength="7"></td>
</tr>
<tr>
<td>Email Address*</td>
<td><input type="text" name="email" id="email" size="20" maxlength="60"></td>
</tr>
<tr>
<td>Phone No.*</td>
<td><input type="text" name="phone" id="phone" size="20" maxlength="12"></td>
</tr>
</table>
</fieldset>
</aside>
<section class="s">
<fieldset>
<legend>Primary Applicant's Address</legend>
<table>
<tr>
<td>Home Address*</td>
<td>Apt.</td>
</tr>
<tr>
<td><input type="text" name="address" id="address" size="30" maxlength="60"></td>
<td><input type="text" name="apt" id="apt" size="5" maxlength="4"></td>
</tr>
<tr>
<td><br />City* </td>
</tr>
<tr>
<td><input type="text" name="city" id="city" size="20" maxlength="40">
</tr>
<tr>
<td><br />Province*</td>
<td><br />Postal Code</td>
</tr>
<tr>
<td>
<select id="province" name="province" size="2">
<optgroup label="Province">
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland & Labrador">Newfoundland & Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">PE</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
</optgroup>
<optgroup label="Territory">
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</optgroup>
</select>
</td>
<td>
<input type="text" name="postal" id="postal" size="8" maxlength="7" placeholder="ANA NAN">
</td>
</tr>
</table>
</fieldset>
</section>
<aside class="r">
<fieldset>
<legend>Housing Status</legend>
<table>
<tr>
<td>Do you:</td>
<td>$Monthly Payment* </td>
</tr>
<tr>
<td><input type="checkbox" name="hStatus" id="s01" value="Own" />Own the property</td>
<td><input type="text" name="payment" id="payment" size="8" maxlength="6"></td>
</tr>
<tr>
<td><input type="checkbox" name="hStatus" id="s02" value="Rent" />Rent the property</td>
</tr>
<tr>
<td>Monthly Income*</td>
<td><input type="text" name="income" id="income" size="8" maxlength="6"></td>
</tr>
<tr>
<td>Years at current location*</td>
<td><input type="text" name="currYears" id="currYears" size="3" maxlength="2"></td>
</tr>
<tr>
<td>Pre-authorized Code*</td>
<td><input type="text" name="preCode" id="preCode" size="8"></td>
</tr>
</table>
</fieldset>
</aside>
</div>
<div class="clearfix">
<section class="s">
<fieldset>
<legend>Reserved - See below</legend>
<p><b>If you submit your application with errors and/or omissions, a list of errors and/or omissions will show here. Make the corrections and re-submit.</b></p>
<p><b>If you continue to have a problem submitting your application, make a note of the Reference No. and call us at 1-800-010-2000.</b></p>
<script>document.write</script>
</fieldset>
</section>
<aside class="l">
<fieldset>
<legend>Credit Check / Email Consent</legend>
<p><b>I consent to have a credit check performed</b></p>
<input type="checkbox" class="BoxCheck" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes
<input type="checkbox" class="BoxCheck" name="creditCheck" id="c02" value="No" onclick= "check(this);" />No
<br />
<p><b>I consent to have email messages sent to me</b></p>
<input type="radio" name="emailConsent" id="m01" value="Yes" />Yes
<input type="radio" name="emailConsent" id="m02" value="No" />No
<br />
Submitted on:
<script>
var d = new Date();
document.write(d.toDateString());
</script>
    Ref. # <input type="text" name="refNo" id="refNo" size="8" readonly="readonly"> <br />
<!--Submit Application--> <input type="submit" value="Submit Application">
<!--Start Over--> <input type="reset" value="Start Over">
<input type="hidden" name="hName" id="hName" value="Mahmood"> <br />
<input type="hidden" name="hId" id="hId" value="int222_162d16"> <br />
</fieldset>
</aside>
</div>
</fieldset>
</form>
<footer class=f>
My zenit Account My JavaScript My CSS My Honesty
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>
</body>
</html>

Option 1:
You can use the "required" property on your input.
Option 2:
1- Create a div with style="display:none" where ever you like in your dom and assign an ID to that div. IE:
<div id="err1" style="display:none"></div>
2- In your javascript, on error:
if (x == null || x == "")
{
var errDiv = document.getElementById("err1");
errDiv.innerHTML = "Please fill input";
errDiv.style.display = 'block';
return false;
}

If I understand you correctly, just add a <span> element to your <section class="s">. Give the span an id like 'err_log' or just 'err' and use this to output the error
function validateForm()
{
var x = document.forms["application"]["fName"].value;
if (x == null || x == "")
{
alert("Name must be filled out");
document.getElementById('youridofthespan').innerHTML='Name must be filled out';
return false;
}else{
document.getElementById('youridofthespan').innerHTML='';
}
}
If you want to show and delete multiple errors, you can simply create on span for every error and do above to use them.
Hope this helps :)

Calculate total price for dynamically generated row in form using javascript?

Actually i want to calculate total price for each row which genered daynamically using jquery.The row generated usnig dynamicForm("#plus", "#minus", {limit:20});. Please help me to calculate total price.
<form action="previewStock.jsp" method="post" onsubmit="return validateAddStock()">
<table align="center" style="width: 900px;">
<tr>
<td colspan="10" align="center">
Supplier Name : <select class="hoverr" name="supplierName">
<option value="unknown">Unknown</option>
</select>
<!--<td>
Supplier Mob.</td><td><select class="hoverr" name="supplierMob">
<option>Unknown</option>
</select></td>-->
<input type="text" name="invoiceId" placeholder="Enter Invioce Id" >
<input type="button" name="addSupplier" id="addSupplier" value="Add New Supplier">
</td>
</tr>
<tr><td colspan="10" align="center"><hr></td></tr>
<tr style="background: brown; color: #ffffff;">
<td>Item Name</td>
<td>Quantity</td>
<td>Unit</td>
<td>Price/Unit</td>
<td>Total Price</td>
<td>Purchase Date</td>
<td>Expiry Date</td>
<td>MRP</td>
<td>Category</td>
<td>Description</td></tr>
<input type="hidden" name="menuId" value="1"/>
<tr id="duplicate">
<td><input type="text" name="itemName" id="itemName" value="" required="true" placeholder="Item Name" class="hoverr"/></td>
<td><input type="text" name="quantity"id="quantity" value="" required="true" pattern="[0-9]" size="5" placeholder="Qty." class="hoverr"/></td>
<td>
<select id="unit" name="unit" required="true" class="hoverr">
<option value="0">Select</option>
<option value="Kg">Kg</option>
<option value="Packet">Packet</option>
<option value="Litre">Litre</option>
<option value="Meter">Meter</option>
</select></td>
<td><input type="textr" name="pricePerUnit" id="pricePerUnit" size="7" value="" required="true" placeholder="Price P/U." class="hoverr"/></td>
<td><input type="text" name="totalPrice" id="totalPrice" size="7" value="" placeholder="Tot. Price" class="hoverr"/></td>
<td><input type="date" name="purchgeDate" id="purchageDate" size="12" value="" placeholder="Pur. Date" onfocus="showCalendar('',this,this,'','holder1',0,30,1)"></td>
<td><input type="date" name="expiryDate" id="expiryDate" size="12" value="" placeholder="Exp. Date" onfocus="showCalendar('',this,this,'','holder1',0,30,1)"></td>
<td><input type="number" name="MRP" id="MRP" size="14" value="" placeholder="MRP" /></td>
<td><select name="category" class="hoverr" id="category"><option value="0">Select</option></select></td>
<td><textarea name="description" id="description" class="textareaItem" placeholder="Description Here" cols="15" rows="1" class="hoverr"/></textarea></td>
<td></td><td><img src="images/addItem.png" width="17" style=" float: right;" title="Add Row"></td>
</tr>
<tr><td><div style="display: none; margin-left: 680px;" id="total">Grand Total:<lable for="grandTotal" id="grandTotal"><img src="images/rupee.png" height="14"> <input type="text" name="grandTotal"></lable></div></td></tr><br><br>
<tr><td colspan="10" align="center"><hr></td></tr>
<tr><td colspan="10" align="center"><input type="submit" name="submit" value="Save"> <input type="reset" name="reset" value="Reset"></td></tr>
</table>