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>
Related
I have a table with few column, all are disable except two fields.
Compare the value in the first Quanity column with the value in the second Quanity column.
If value in the second Quanity column is more that first Quanity column it should display alert.
When I tried comparison based on ID's it works fine with one row but when there are multiply row it does not work.
When I tried comparison based on classes it work on the first row but it not comparing 2nd row.
Thanks in Advance.
NOTE: All the Row are generated dynamically from the back end.
/*avaliable products valadations*/
function validateAvaliable(){
var aproducts = parseInt($( ".available-quanity" ).val());
var sproducts = parseInt($( ".send-quanity" ).val());
console.log(aproducts);
console.log(sproducts );
if (aproducts < sproducts) {
alert("send products are more");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form onsubmit="return validateAvaliable()" class="available-products-table" id="available-products-table" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" disabled value="1" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="123" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="50" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="black" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td><input type="text" name="available-sno" disabled value="2" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="456" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="30" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="red" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
$( ".available-quanity" ) and $( ".send-quanity" ) both return lists of elements, so you will have to use a loop to compare all values, Also use event.preventDefault() so that the form doesn't submit. something like this:
/*avaliable products valadations*/
function validateAvaliable(event){
event.preventDefault();
var aproducts = $( ".available-quanity" );
var sproducts = $( ".send-quanity" );
//console.log(aproducts);
//console.log(sproducts);
for(var i=0;i<aproducts.length;i++){
if (parseInt($(aproducts[i]).val()) < parseInt($(sproducts[i]).val())) {
alert("send products are more");
return false;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form onsubmit="return validateAvaliable(event)" class="available-products-table" id="available-products-table" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" disabled value="1" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="123" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="50" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="black" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td><input type="text" name="available-sno" disabled value="2" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="456" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="30" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="red" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
$( ".available-quanity" ) and $( ".send-quanity" ) gives you array of elements (one for each row). So you should iterate over these arrays with some loop:
var aproducts = $( ".available-quanity" );
var sproducts = $( ".send-quanity" );
for (var i = 0; i < aproducts.length; i++){
// Values per row:
var aproducts_val = parseInt($(aproducts[i]).val()); // Or just parseInt(aproducts[i].value)
var sproducts_val = parseInt($(sproducts[i]).val());
// ... Compare here ...
}
Multiple rows should be in loop to check the values. Please refer below code snippet..
function validateAvaliable(){
$("table tr").each(function(tr) {
if($(this).find('.available-quanity').length && $(this).find('.send-quanity').length) {
var aproducts = parseInt($(this).find('.available-quanity').val());
var sproducts = parseInt($(this).find('.send-quanity').val());
console.log('test',aproducts);
console.log('test1',sproducts );
if (aproducts < sproducts) {
alert("send products are more");
return false;
}
}
} );
}
/*avaliable products valadations*/
$('#submit').on('click',function(event){
$("table tr").each(function(tr) {
if($(this).find('.available-quanity').length && $(this).find('.send-quanity').length) {
var aproducts = parseInt($(this).find('.available-quanity').val());
var sproducts = parseInt($(this).find('.send-quanity').val());
console.log('test',aproducts);
console.log('test1',sproducts );
if (aproducts < sproducts) {
alert("send products are more");
event.preventDefault();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form class="available-products-table" id="available-products-table" method="POST" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" disabled value="1" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="123" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="50" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="black" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td><input type="text" name="available-sno" disabled value="2" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="456" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="30" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="red" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity" ></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" id="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
Please check this fiddle.
I have added class mytr for tr.
http://jsfiddle.net/pzphbnxb/42/
$(document).on('change', '.send-quanity', function(e){
var elem = $(this);
var changeVal = $(this).val();
var myval = elem.closest('.mytr').find('.available-quanity').val();
if(parseInt(changeVal) > parseInt(myval)){
alert('value greater');
}
});
I have a payment form and when someone selects the 'paypal' option, I want it to have the credit card details. I have taken some code from an existing from in which this function works and tried to adjust it for my edited form - but I can't seem to get it to work...
If someone could point out where I'm going wrong it would be gratingly appreciated! (I'm still very new to scripting)
The script i need help with is down the bottom of the form.
What I need it to do:
When you click on and off the 'paypal' checkbox, I want all the rows with the class of "hideCC" to toggle on and off.
<div class="checkoutForm-bg">
<div class="checkoutForm-wrapper">
<div class="shop-checkout shop-form">
<h1>Check Out</h1>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b2206.r502081-phase1"></script>
<form name="catwebformform2140" method="post" onsubmit="return checkWholeForm2140(this)" enctype="multipart/form-data" action="https://sklzaustralia.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=10850&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}&CC={module_urlcountrycode}&Referrer={module_siteurl,true,true}">
<span class="req">*</span> Required
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="Title">Title</label><br />
<select name="Title" id="Title" class="cat_dropdown_smaller">
<option value="1328222">DR</option>
<option value="1328221">MISS</option>
<option value="1328218" selected="selected">MR</option>
<option value="1328219">MRS</option>
<option value="1328220">MS</option>
</select></td>
</tr>
<tr>
<td><label for="FirstName">First Name <span class="req">*</span></label><br />
<input name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="LastName">Last Name <span class="req">*</span></label><br />
<input name="LastName" id="LastName" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="EmailAddress">Email Address <span class="req">*</span></label><br />
<input name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="CAT_Custom_20097767">Phone number <span class="req">*</span></label><br />
<input maxlength="255" name="CAT_Custom_20097767" id="CAT_Custom_20097767" class="cat_textbox" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingAddress">Shipping Address <span class="req">*</span></label><br />
<input name="ShippingAddress" id="ShippingAddress" class="cat_textbox" maxlength="500" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingCity">City <span class="req">*</span></label><br />
<input name="ShippingCity" id="ShippingCity" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingState">State <span class="req">*</span></label><br />
<input name="ShippingState" id="ShippingState" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input name="ShippingZip" id="ShippingZip" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingCountry">Country <span class="req">*</span></label><br />
<select name="ShippingCountry" id="ShippingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AU" selected="selected">AUSTRALIA</option>
</select></td>
</tr>
<tr>
<td><label for="Company">Company</label><br />
<input name="Company" id="Company" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingInstructions">Shipping Instructions</label><br />
<textarea name="ShippingInstructions" id="ShippingInstructions" cols="10" rows="4" class="cat_listbox"></textarea></td>
</tr>
<tr>
<td><label for="BillingAddress">Billing Address <span class="req">*</span></label><br />
<input name="BillingAddress" id="BillingAddress" class="cat_textbox" maxlength="500" type="text" /></td>
</tr>
<tr>
<td><label for="BillingCity">City <span class="req">*</span></label><br />
<input name="BillingCity" id="BillingCity" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingState">State <span class="req">*</span></label><br />
<input name="BillingState" id="BillingState" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input name="BillingZip" id="BillingZip" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingCountry">Country <span class="req">*</span></label><br />
<select name="BillingCountry" id="BillingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AU" selected="selected">AUSTRALIA</option>
</select></td>
</tr>
<tr>
<td><label>Payment Method <span class="req">*</span></label><br />
<input checked="checked" name="PaymentMethodType" id="PaymentMethodType_1" value="1" type="radio" />Credit Card<br />
<input name="PaymentMethodType" id="PaymentMethodType_5" value="5" type="radio" />PayPal<br />
<input name="PaymentMethodType" id="PaymentMethodType_9" value="9" type="radio" />Gift Voucher</td>
</tr>
<tr class="hideCC">
<td><label for="CardName">Name on Card <span class="req">*</span></label><br />
<input name="CardName" id="CardName" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr class="hideCC">
<td><label for="CardNumber">Card Number <span class="req">*</span></label><br />
<input name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr class="hideCC">
<td><label>Card Expiry <span class="req">*</span></label><br />
<select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select></td>
</tr>
<tr class="hideCC">
<td><label for="CardType">Card Type <span class="req">*</span></label><br />
<select name="CardType" id="CardType" class="cat_dropdown">
<option value="1">Visa</option>
<option value="2">Mastercard</option>
<option value="4">American Express</option>
</select></td>
</tr>
<tr class="hideCC">
<td><label for="CardCCV">CCV Number <span class="req">*</span></label><br />
<input name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr>
<td><label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span></label><br />
<input name="Amount" id="Amount" class="cat_textbox" type="text" /></td>
</tr>
<tr>
<td><input class="cat_button" value="Submit" id="catwebformbutton" type="submit" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount2140 = 0;function checkWholeForm2140(theForm){var why = "";if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name"); if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name"); if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value); if (theForm.ShippingAddress) why += isEmpty(theForm.ShippingAddress.value, "Shipping Address"); if (theForm.ShippingCity) why += isEmpty(theForm.ShippingCity.value, "Shipping City"); if (theForm.ShippingState) why += isEmpty(theForm.ShippingState.value, "Shipping State"); if (theForm.ShippingZip) why += isEmpty(theForm.ShippingZip.value, "Shipping Zipcode"); if (theForm.ShippingCountry) why += checkDropdown(theForm.ShippingCountry.value, "Shipping Country"); if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address"); if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City"); if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State"); if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, ""); if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country"); if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) { if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card"); if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number"); if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount"); } if (theForm.CAT_Custom_20097767) why += isCurrency(theForm.CAT_Custom_20097767.value, "Phone number");if(why != ""){alert(why);return false;}if(submitcount2140 == 0){submitcount2140++;theForm.submit();return false;}else{alert("Form submission is in progress.");return false;}}
// Credit Card info is not required if paying by PayPal, Hosted Credit Card, COD etc
function ShowCCFields(val) {
if (!document.getElementsByClassName("hideCC"))
return;
if (val != 1)
document.getElementsByClassName("hideCC").style.display = "none";
else
document.getElementsByClassName("hideCC").style.display = "inline";
}
//]]>
</script>
</form>
</div>
</div>
</div>
Since you are including jQuery why not try this:
$(document).ready(function() {
$('[name="PaymentMethodType"]').change(function () {
if ($(this).val() == 1) {
$('.hideCC').show();
} else {
$('.hideCC').hide();
}
});
});
<div class="checkoutForm-bg">
<div class="checkoutForm-wrapper">
<div class="shop-checkout shop-form">
<h1>Check Out</h1>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b2206.r502081-phase1"></script>
<form name="catwebformform2140" method="post" onsubmit="return checkWholeForm2140(this)" enctype="multipart/form-data" action="https://sklzaustralia.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=10850&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}&CC={module_urlcountrycode}&Referrer={module_siteurl,true,true}">
<span class="req">*</span> Required
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="Title">Title</label><br />
<select name="Title" id="Title" class="cat_dropdown_smaller">
<option value="1328222">DR</option>
<option value="1328221">MISS</option>
<option value="1328218" selected="selected">MR</option>
<option value="1328219">MRS</option>
<option value="1328220">MS</option>
</select></td>
</tr>
<tr>
<td><label for="FirstName">First Name <span class="req">*</span></label><br />
<input name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="LastName">Last Name <span class="req">*</span></label><br />
<input name="LastName" id="LastName" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="EmailAddress">Email Address <span class="req">*</span></label><br />
<input name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="CAT_Custom_20097767">Phone number <span class="req">*</span></label><br />
<input maxlength="255" name="CAT_Custom_20097767" id="CAT_Custom_20097767" class="cat_textbox" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingAddress">Shipping Address <span class="req">*</span></label><br />
<input name="ShippingAddress" id="ShippingAddress" class="cat_textbox" maxlength="500" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingCity">City <span class="req">*</span></label><br />
<input name="ShippingCity" id="ShippingCity" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingState">State <span class="req">*</span></label><br />
<input name="ShippingState" id="ShippingState" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input name="ShippingZip" id="ShippingZip" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingCountry">Country <span class="req">*</span></label><br />
<select name="ShippingCountry" id="ShippingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AU" selected="selected">AUSTRALIA</option>
</select></td>
</tr>
<tr>
<td><label for="Company">Company</label><br />
<input name="Company" id="Company" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingInstructions">Shipping Instructions</label><br />
<textarea name="ShippingInstructions" id="ShippingInstructions" cols="10" rows="4" class="cat_listbox"></textarea></td>
</tr>
<tr>
<td><label for="BillingAddress">Billing Address <span class="req">*</span></label><br />
<input name="BillingAddress" id="BillingAddress" class="cat_textbox" maxlength="500" type="text" /></td>
</tr>
<tr>
<td><label for="BillingCity">City <span class="req">*</span></label><br />
<input name="BillingCity" id="BillingCity" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingState">State <span class="req">*</span></label><br />
<input name="BillingState" id="BillingState" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input name="BillingZip" id="BillingZip" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingCountry">Country <span class="req">*</span></label><br />
<select name="BillingCountry" id="BillingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AU" selected="selected">AUSTRALIA</option>
</select></td>
</tr>
<tr>
<td><label>Payment Method <span class="req">*</span></label><br />
<input checked="checked" name="PaymentMethodType" id="PaymentMethodType_1" value="1" type="radio" />Credit Card<br />
<input name="PaymentMethodType" id="PaymentMethodType_5" value="5" type="radio" />PayPal<br />
<input name="PaymentMethodType" id="PaymentMethodType_9" value="9" type="radio" />Gift Voucher</td>
</tr>
<tr class="hideCC">
<td><label for="CardName">Name on Card <span class="req">*</span></label><br />
<input name="CardName" id="CardName" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr class="hideCC">
<td><label for="CardNumber">Card Number <span class="req">*</span></label><br />
<input name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr class="hideCC">
<td><label>Card Expiry <span class="req">*</span></label><br />
<select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select></td>
</tr>
<tr class="hideCC">
<td><label for="CardType">Card Type <span class="req">*</span></label><br />
<select name="CardType" id="CardType" class="cat_dropdown">
<option value="1">Visa</option>
<option value="2">Mastercard</option>
<option value="4">American Express</option>
</select></td>
</tr>
<tr class="hideCC">
<td><label for="CardCCV">CCV Number <span class="req">*</span></label><br />
<input name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr>
<td><label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span></label><br />
<input name="Amount" id="Amount" class="cat_textbox" type="text" /></td>
</tr>
<tr>
<td><input class="cat_button" value="Submit" id="catwebformbutton" type="submit" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount2140 = 0;function checkWholeForm2140(theForm){var why = "";if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name"); if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name"); if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value); if (theForm.ShippingAddress) why += isEmpty(theForm.ShippingAddress.value, "Shipping Address"); if (theForm.ShippingCity) why += isEmpty(theForm.ShippingCity.value, "Shipping City"); if (theForm.ShippingState) why += isEmpty(theForm.ShippingState.value, "Shipping State"); if (theForm.ShippingZip) why += isEmpty(theForm.ShippingZip.value, "Shipping Zipcode"); if (theForm.ShippingCountry) why += checkDropdown(theForm.ShippingCountry.value, "Shipping Country"); if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address"); if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City"); if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State"); if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, ""); if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country"); if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) { if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card"); if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number"); if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount"); } if (theForm.CAT_Custom_20097767) why += isCurrency(theForm.CAT_Custom_20097767.value, "Phone number");if(why != ""){alert(why);return false;}if(submitcount2140 == 0){submitcount2140++;theForm.submit();return false;}else{alert("Form submission is in progress.");return false;}}
// Credit Card info is not required if paying by PayPal, Hosted Credit Card, COD etc
$(document).ready(function() {
$('[name="PaymentMethodType"]').change(function () {
if ($(this).val() == 1) {
$('.hideCC').show();
} else {
$('.hideCC').hide();
}
});
});
//]]>
</script>
</form>
</div>
</div>
</div>
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 :)
I am trying to build a form which counts the total numbers of characters typed in it.My form contains fields like name,address and basic information about client.I want to get the total characters typed in all those fields.hw I should I do it.?`
HTML CODES
//
<form name="form_3" id="form_3" method="post" action="action_form_2.php">
<table border="1" width="1300" height="200" bordercolour="BLUE" >
<tr>
<td>Name and Address of Company:: <textarea name="name_address1" cols="30" rows="6" ></textarea><br>
Years In job::<input type="text" name="years_job">
Postion/Type of Business:: <input type="text" name="pos_type"> Years Employed in this profession::<input type="text" name="years_employed" id="years_emp">
Business Phone::<input type="text" name="phone_no" id="phone_no" >
<input type="checkbox" name="self_employed" id="self_employed" value="self">Self Employed<br>
</td>
<td>Name and Address of Company:: <textarea name="name_address2" cols="30" rows="6" ></textarea><br>
Years In job::<input type="text" name="years"> <br>
Postion/Type of Business:: <input type="text" name="type" > Years Employed in this profession::<input type="text" name="years_emp">
Business Phone::<input type="text" name="phone" id="phone" >
<input type="checkbox" name="self_employed" id="self_employed" value="self">Self Employed<br>
</td>
</tr>
</table>
<h4>iv.EMPLOYMENT INFORMATION</h4>
<table border="1" width="1300" height="200">
<tr>
<td>Name and Address of Company:: <textarea name="name_address3" cols="30" rows="6" ></textarea><br>
Years In job::<input type="text" name="years" > Position/Type of job::<input type="text" name="positions" ><br>
Date(frm-to):: <input type="text" name="date" > Monthly Income::<input type="text" name="date" >
Business Phone,inc area code::<input type="text" name="phone" >
<input type="checkbox" name="self_employed" id="self_employed" value="self" >Self Employed<br>
</td>
<td>Name and Address of Company:: <textarea name="name_address4" cols="30" rows="6" ></textarea><br>
Years In job::<input type="text" name="years"> Position/Type of job::<input type="text" name="positions"><br>
Date(frm-to):: <input type="text" name="date"> Monthly Income::<input type="text" name="date">
Business Phone,inc area code::<input type="text" name="phone" >
<input type="checkbox" name="self_employed" id="self_employed" value="self">Self Employed<br>
</td>
</tr>
<tr>
<td>Name and Address of Company:: <textarea name="name_address5" cols="30" rows="6" ></textarea><br>
Years In job::<input type="text" name="years"> Position/Type of job::<input type="text" name="positions"><br>
Date(frm-to):: <input type="text" name="date"> Monthly Income::<input type="text" name="date">
Business Phone,inc area code::<input type="text" name="phone">
<input type="checkbox" name="self_employed" id="self_employed" value="self">Self Employed<br>
</td>
<td>Name and Address of Company:: <textarea name="name_address" cols="30" rows="6" ></textarea><br>
Years In job::<input type="text" name="years"> Position/Type of job::<input type="text" name="positions"><br>
Date(frm-to):: <input type="text" name="date"> Monthly Income::<input type="text" name="date">
Business Phone,inc area code::<input type="text" name="phone">
<input type="checkbox" name="self_employed" id="self_employed" value="self">Self Employed<br>
</td>
</tr>
</table>
<h4>MONTHLY INCOME AND COMBINED HOUSING EXPENSE INFORMATION</h4>
<table border="1" width="1300" height="150">
<tr>
<td>Gross monthly income</td>
<td>Borrower</td>
<td>Co-borrower</td>
<td>Total</td>
<td>Combined Monthly Housing Exp.</td>
<td>Present</td>
<td>Proposed</td>
</tr>
<tr>
<td>Base EMPL income<</td>
<td>$::<input type="text" name="empl_income" id="empl_income"></td>
<td>$::<input type="text" name="co_borrower" ></td>
<td>$::<input type="text" name="base_empl_total"></td>
<td>Rent</td>
<td>$::<input type="text" name=""></td>
<td>$::<input type="text" name="years"></td>
</tr>
<tr>
<td>Overtime</td>
<td>$::<input type="text" name="overtime_borrower"></td>
<td>$::<input type="text" name="overtime_coborrower"></td>
<td>$::<input type="text" name="overtime_total"></td>
<td>Mortgaged</td>
<td>$::<input type="text" name="years"></td>
<td>$::<input type="text" name="years"></td>
</tr>
</table>
<br>
<br>
<input type="submit" name="submit" value="SUBMIT" onclick="return validateform();">
</body>
</html>
Just iterate through all the form fields that contain inputted text and count their lengths:
$('#yourform').on('submit', function(){
var count = 0;
$('input[type="text"], textarea', this).each(function(){
count += $(this).val().length;
});
// your total is in count variable
return false; // or true to submit form
});
I put this into a jsFiddle with your HTML: http://jsfiddle.net/MUs7s/
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>