I create an Invoice. Where I put 3 fields: Quantity, Rate and Total Amount. Total amount calculate following this format (Quantity*Rate). All total Amount Sum Show on Sub_total div. Here is my code:
<html>
<head>
<title>Invoice</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".qty").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
$(".rate").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var qty = 1;
$(".qty").each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
qty = parseFloat(this.value);
}
});
var rate = 0;
$(".rate").each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
rate = parseFloat(this.value);
}
});
$('input[name=total_amount]').val(qty.toFixed(2)*rate.toFixed(2));
}
</script>
<style type="text/css">
table
{
border: 1px solid black;
border-bottom: none;
width: 600px;
}
td
{
border-left: 1px solid black;
border-bottom: 1px solid black;
padding:5px 5px 5px 5px;
}
#first
{
border-left: none;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td id="first">Quantity</td>
<td>Rate</td>
<td>Total Amount</td>
</tr>
<?php
$num=4;
for ($i=0; $i<$num; $i++)
{
echo "
<tr>
<td id='first'><input class='qty' type='text' name='qty[]'/></td>
<td><input class='rate' type='text' name='rate[]'/></td>
<td><input class='total_amount' type='text' name='total_amount[]'/></td>
</tr>";
}
?>
<tr>
<td id="first" colspan="2" align="right">Sub Total:</td>
<td><span id="sub_total">0</span></td>
</tr>
</table>
</body>
</html>
I want to show each Total amount following this way
total_amount[1]=(qty[1]*rate[1])
total_amount[2]=(qty[1]*rate[1])
total_amount[3]=(qty[1]*rate[1])
total_amount[4]=(qty[1]*rate[1])
I am trying so hard but my codes don’t work properly. So pls pls pls some one help me to solve this problem.
$(document).ready(function(){
$(".qty, .rate").keyup(function(){
calculateSum();
});
});
function calculateSum() {
var qty = [];
$(".qty").each(function() {
var num = parseFloat(this.value) || 1;
qty.push(num);
});
var rate = [];
$(".rate").each(function() {
var num = parseFloat(this.value) || 0;
rate.push(num);
});
var sub_total = 0;
$('input[name=total_amount]').each(function(i){
var amount = qty[i].toFixed(2)*rate[i].toFixed(2);
total += amount;
$(this).val(amount);
}
$("#sub_total").text(total);
}
You don't need to assign the events using $.each in the first place..
$('.qty , .rate').keyup(function() {
calculateSum($(this).closest('tr'));
});
function calculateSum($tr) {
var $qty = $tr.find('.qty').val();
var $rate = $tr.find('.rate').val();
$tr.find('.total_amount').val( parseFloat($qty).toFixed(2)* parseFloat($rate).toFixed(2) )
}
This should be sufficient
Related
At the core, I am trying to generate a table with links that can be clicked on a reload of a PartialView. Everything is working except I cannot get the page to stop refreshing. What I would like to do is only load the PartialView inside of the researchDiv. I do have <add key="UnobtrusiveJavaScriptEnabled" value="true" /> in the web.config.
I've changed the view and partialview to now use ajax, but the same issue is occurring and I'm not entirely sure of what to do. If I click a link the entire page refreshes instead of just the htmlContainer.
In my _LayoutDashboard I do have the unobtrusive jscripts, and when the page renders there are 0 Console errors.
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript">
This is the view
#model Stocks.BLL.ExecutingTrades.Model.WatchList.ExeTradesWatchList
#{
ViewBag.Title = "WatchList";
Layout = "~/Views/Shared/_LayoutDashboard.cshtml";
}
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 20%;
border: 1px solid black;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-childsmall {
float: left;
}
.float-child {
width: 80%;
float: left;
height: 1000px;
}
</style>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<p>Last Update: #Html.Label(DateTime.UtcNow.ToString()) - Time in UTC</p>
<div class="float-container">
<div class="float-childsmall">
#foreach (var watchList in Model.ViewExecutingTradesUserWatchListFollowShort)
{
<table id="customers">
<caption class="text-center"><h2>#watchList.WatchListName</h2></caption>
<caption class="text-center"><p style="font:10px;">#watchList.WatchListDescription</p></caption>
<tr>
<th>Ticker</th>
</tr>
#foreach (var ticker in Model.ViewUserWatchListTickerModel.Where(y => y.UserWatchListId == watchList.UserWatchListId).ToList())
{
<tr>
<td><a target="_blank" href="https://finviz.com/quote.ashx?t=#ticker.Ticker">#ticker.Ticker </a></td>
<!--<td>
#{
<button type="button" class="btn" id='wlButton_#watchList.WatchListName+#watchList.UserWatchListId+#ticker.Ticker'>
#Html.DisplayFor(modelItem => #ticker.Ticker)
</button>
}
</td>-->
<div class="btnB" id='div_#watchList.WatchListName+#watchList.UserWatchListId+#ticker.Ticker'>
<p class="category-title">#ticker.Ticker</p>
</div>
</tr>
}
</table>
}
</div>
<div class="float-child" id="researchDiv">
<div id="htmlContainer">
#Html.Partial("_Research", new ExecutingTrades.Models.TickerInMem() { Ticker = "META" });
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".btnB").click(function () {
$.ajax({
url: '#Url.Action("_Research", "Dashboard")',
type: "GET",
data: { ticker: this.id.substring(this.id.lastIndexOf('+')) },
cache: false,
async: true,
success: function (data) {
$("#htmlContainer").html(data);
}
});
});
})
</script>
_Research which is the partialview
#model ExecutingTrades.Models.TickerInMem
<!-- TradingView Widget BEGIN -->
<style>
.tradingview-widget-container {
border: 3px solid #fff;
padding: 20px;
height: 650px;
}
</style>
<div class="tradingview-widget-container">
<div class="tradingview-widget-copyright"><span class="blue-text">#Model.Ticker</span> by TradingView</div>
<script type="text/javascript">
alert(#Model.Ticker);
</script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "NASDAQ:#Model.Ticker",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_37810"
}
);
</script>
</div>
And the Controller
public ActionResult _Research(string ticker)
{
if (string.IsNullOrWhiteSpace(ticker))
return View();
var model = new TickerInMem();
model.Ticker = ticker.Split('+').Last();
model.Exchange = "NASDAQ";
return PartialView("_Research", model);
}
When I debug - everything works, i can hit the partial view being called and the model is correct.
When the page loads:
When clicking on a link:
All I really want to do is load the 2nd graph which I click it to where the partial view in rendered on the view.
So my MVC and Ajax are correct, the real issue was inside of the tradingview control, I had removed the div it was referencing in the container.
"container_id": "tradingview_37810"
So i have an ESP8266 (ESP-01) on AP mode and is working fairly good enough. I can receive data from the client and have used AJAX to handle the data. When connected to a single client, if i send data from the serial it shows up on the client webpage and is working as expected. But when i connect multiple clients, only the last connected client gets the data and the older ones remain static. Is there a way to send the data to multiple clients at once?
Here's the code.
#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
const byte DNS_PORT = 53;
IPAddress apIP(172, 217, 28, 1);
DNSServer dnsServer;
ESP8266WebServer webServer(80);
void handleRoot() {
String html ="<!DOCTYPE html> <html style=\"text-align: center; background-color: #000000; border-style: solid; border-width: 5px; border-color: #FFFFFF;\"> <head> <title>EDNCS</title> <meta name=\"viewport\" content=\"width=device-width, minimumscale=1.0, maximum-scale=1.0, initial-scale=1\" /> </head> <body> <h1 style=\"color: #ff6600;\">Emergency Distributed Network Communication Service</h1> <p style=\"text-align: right; color: #ffff00;\">-Owned and maintained by Wolf Lusana.</p> <div style=\"color: #339966\"> <div> <strong><span style=\"color: #ff0000;\">Name: </span><input type=\"text\" id=\"name\"> <h2 span style=\"color: #ff6600;\">IMPORTANT BROADCASTS</h2> <div id=\"chatRoomDiv\" style=\"border:2px solid #ccc; width:300px; height: 300px; overflow-y: scroll; overscroll-behavior-x:unset; color:#FFFFFF; margin: 0 auto; display: flex; flex-direction: column-reverse;\"> <ul id=\"chatRoomList\" style=\"list-style-type: none; text-align: left;font-size: 14px; padding-left: 3px;\"></ul> </div> <br> <strong><span style=\"color: #ff0000;\">Message: </span> <input type=\"text\" id=\"message\"> <br><br> <button type=\"button\" onclick=\"sendData()\">CHAT</button> <button type=\"button\" >BROADCAST</button> <br> <script> function sendData() { var inputDataCH = document.getElementById(\"message\").value; var nameDataCH = document.getElementById(\"name\").value; var showDataCH = nameDataCH+\": \"+inputDataCH; if(nameDataCH==null||nameDataCH==\" \"||nameDataCH==\"\"||inputDataCH==null||inputDataCH==\" \"||inputDataCH==\"\"){ alert(\"Please enter your name and message. Thank you.\");} else{ var xhttpCH = new XMLHttpRequest(); xhttpCH.open(\"GET\", \"catchData?data=!\"+showDataCH, true); xhttpCH.send(); document.getElementById(\"message\").value = ''} } setInterval(function() { getData(); }, 500); function getData() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { updateChatRoom(this.responseText); } }; xhttp.open(\"GET\", \"throwData\", true); xhttp.send(); } function updateChatRoom(needData){ var ulCH = document.getElementById(\"chatRoomList\"); var liCH = document.createElement(\"li\"); var objDivCH = document.getElementById(\"chatRoomDiv\"); objDivCH.scrollTop = objDivCH.scrollHeight; liCH.appendChild(document.createTextNode(needData)); ulCH.appendChild(liCH); } </script> </html>";
webServer.send(200, "text/html", html);
}
void handleData() {
String dataChat = webServer.arg("data");
if(dataChat[0]=='!'){
dataChat[0] = '%';
Serial.println(dataChat);
}
}
void handleThrow() {
String throwData;
if (Serial.available() > 0) {
throwData = Serial.readString();
}
webServer.send(200, "text/plane", throwData);
}
void setup() {
Serial.begin(115200);
WiFi.mode(WIFI_AP);
WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
WiFi.softAP("Emergency Network Service");
dnsServer.start(DNS_PORT, "*", apIP);
webServer.onNotFound([]() {
handleRoot();
});
webServer.on("/",handleRoot);
webServer.on("/catchData", handleData);
webServer.on("/throwData", handleThrow);
webServer.begin();
}
void loop() {
dnsServer.processNextRequest();
webServer.handleClient();
}
And here is the HTML code
<!DOCTYPE html>
<html style="text-align: center; background-color: #000000; border-style: solid; border-width: 5px; border-color: #FFFFFF;">
<head>
<title>EDNCS</title>
<meta name="viewport" content="width=device-width, minimumscale=1.0, maximum-scale=1.0, initial-scale=1" />
</head>
<body>
<h1 style="color: #ff6600;">Emergency Distributed Network Communication Service</h1>
<p style="text-align: right; color: #ffff00;">-Owned and maintained by Wolf Lusana.</p>
<div style="color: #339966">
<p>Please enter your name before sending your message on the network.</p>
<div>
<strong><span style="color: #ff0000;">Name: </span><input type="text" id="name">
<h2 span style="color: #ff6600;">IMPORTANT BROADCASTS</h2>
<div id="chatRoomDiv" style="border:2px solid #ccc; width:300px; height: 300px; overflow-y: scroll; overscroll-behavior-x:unset; color:#FFFFFF; margin: 0 auto; display: flex;
flex-direction: column-reverse;">
<ul id="chatRoomList" style="list-style-type: none; text-align: left;font-size: 14px; padding-left: 3px;"></ul>
</div>
<br>
<strong><span style="color: #ff0000;">Message: </span> <input type="text" id="message">
<br><br>
<button type="button" onclick="sendData()">CHAT</button> <button type="button" >BROADCAST</button>
<br>
<script>
function sendData() {
var inputDataCH = document.getElementById("message").value;
var nameDataCH = document.getElementById("name").value;
var showDataCH = nameDataCH+": "+inputDataCH;
if(nameDataCH==null||nameDataCH==" "||nameDataCH==""||inputDataCH==null||inputDataCH==" "||inputDataCH==""){
alert("Please enter your name and message. Thank you.");}
else{
var xhttpCH = new XMLHttpRequest();
xhttpCH.open("GET", "catchData?data=!"+showDataCH, true);
xhttpCH.send();
document.getElementById("message").value = ''}
}
setInterval(function() {
getData();
}, 500);
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
updateChatRoom(this.responseText);
}
};
xhttp.open("GET", "throwData", true);
xhttp.send();
}
function updateChatRoom(needData){
var ulCH = document.getElementById("chatRoomList");
var liCH = document.createElement("li");
var objDivCH = document.getElementById("chatRoomDiv");
objDivCH.scrollTop = objDivCH.scrollHeight;
liCH.appendChild(document.createTextNode(needData));
ulCH.appendChild(liCH);
}
</script>
</html>
Thanks.
There aren't any vanilla examples on creating a datatable for Svelte. I've found a couple examples that I'm trying to learn from, but still a no go. Right now I'm trying to build it on the REPL tab and in the results tab I get my two rows but all three fields are the same, instead unique like I'm expecting.
I've tried [], slice, concating, each per row, and probably some others I can't think of right now.
<script>
import { beforeUpdate, createEventDispatcher, onMount } from 'svelte';
export let faketable = [{Color:'BLUE', Car:'Camaro', Brand:'Chevy'},{Color:'RED', Car:'Pinto', Brand:'Ford'}];
export let columns = ["Color", "Car", "Brand"];
export let rows = ['blue','Camaro','Chevy'];
//export let try1 = JSON.parse(faketable);
export let clickable = true
const dispatch = createEventDispatcher();
export function click(row) {
if (!clickable) {
return;
}
if (getSelection().toString()) {
// Return if some text is selected instead of firing the row-click event.
return;
}
dispatch('row-click', row);
// console.log('click', row);
}
</script>
<div>
<h3 class="panel-title">Please work!</h3>
<table ref="table" class="table table-striped table-hover" style="width:100%">
<thead>
<tr>
{#each columns as column, x}
<th style="width: { column.width ? column.width : 'auto' }" align="center">
{column}
</th>
{/each}
</tr>
</thead>
<tbody>
{#each faketable as row, y}
<tr class="{ clickable ? 'clickable' : '' }" on:click="{() => click(row)}">
{#each columns as column, x}
<td align="center">
{row.Color}
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
</div>
<style>
tr.clickable {
cursor: pointer;
}
table {
table-layout: fixed;
}
table tr td {
padding: 0 0 0 56px;
height: 48px;
font-size: 13px;
color: rgba(0, 0, 0, 0.87);
border-bottom: solid 1px #DDDDDD;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
table th {
border-radius: 0;
}
table tbody tr:hover {
background-color: #EEE;
}
</style>
The headers look like I want them to be Color, Car, & Brand. But each row I expect faketable to return Blue Camaro Chevy then Red Pinto Ford, respectively.
You have {row.Color} where you should have {row[column]}. Fix that, and it works
I am trying to build a .net core project that will use the google places api to autocomplete an address. To test the process I copied the demo code from google and put it in the .net core template generated by visual studio 2017. The autocomplete doesn't work, but if I change the .cshtml to .html and navigate to it manually it works fine.
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<style>
#locationField, #controls {
position: relative;
width: 480px;
}
#autocomplete {
position: absolute;
top: 0px;
left: 0px;
width: 99%;
}
.label {
text-align: right;
font-weight: bold;
width: 100px;
color: #303030;
}
#address {
border: 1px solid #000090;
background-color: #f0f0ff;
width: 480px;
padding-right: 2px;
}
#address td {
font-size: 10pt;
}
.field {
width: 99%;
}
.slimField {
width: 80px;
}
.wideField {
width: 200px;
}
#locationField {
height: 20px;
margin-bottom: 2px;
}
</style>
</head>
<body>
<br />
<br />
<br />
<br />
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField">
<input class="field" id="street_number"
disabled="true"></input>
</td>
<td class="wideField" colspan="2">
<input class="field" id="route"
disabled="true"></input>
</td>
</tr>
<tr>
<td class="label">City</td>
<!-- Note: Selection of address components in this example is typical.
You may need to adjust it for the locations relevant to your app. See
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
-->
<td class="wideField" colspan="3">
<input class="field" id="locality"
disabled="true"></input>
</td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField">
<input class="field"
id="administrative_area_level_1" disabled="true"></input>
</td>
<td class="label">Zip code</td>
<td class="wideField">
<input class="field" id="postal_code"
disabled="true"></input>
</td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3">
<input class="field"
id="country" disabled="true"></input>
</td>
</tr>
</table>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKeythat works in html&libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>
This issue was that the wrong API was activated on google. I enabled it in google and it works in the project now. I have no idea why it worked in the plain html.
Below is the code that I am using to try to submit a form.. I am getting the following error in firebug:
$("#submit").ajaxForm is not a function
However, the form will submit but go to the test.php page and does not show the success div..
Any help is very much appreciated.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#submit').ajaxForm(function() {
$('form#submit').fadeOut(function(){$('div.success').fadeIn();});
});
});
</script>
<script src="jquery.uniform.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="uniform.default.css" type="text/css" media="screen">
<style>
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:360px;
padding:12px;
}
.error{
margin:0 auto;
width:360px;
padding:12px;
}
.success{
margin:0 auto;
width:360px;
padding:12px;
}
/* ----------- stylized ----------- */
#errored{
border:solid 2px #FAB6C2;
background:#FDE4E1;
font-weight: bold;
}
#successStyle{
border:solid 2px #C0D27B;
background:#E6EFC2;
font-weight: bold;
}
#stylized{
border:solid 2px #EE901F;
background:#FAB766;
}
.LV_valid {
color:#00CC00;
}
.LV_invalid {
color:#CC0000;
}
.LV_validation_message{
font-weight:bold;
margin:0 0 0 5px;
}
.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active,
.fieldWithErrors input.LV_valid_field,
.fieldWithErrors textarea.LV_valid_field {
border: 1px solid #00CC00;
}
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active,
.fieldWithErrors input.LV_invalid_field,
.fieldWithErrors textarea.LV_invalid_field {
border: 1px solid #CC0000;
}
</style>
<style type="text/css" media="screen">
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #000;
padding: 40px;
}
h1 {
margin-top: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 20px;
clear: both;
}
label {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
display: block;
margin-bottom: 3px;
clear: both;
}
</style>
</head>
<body>
<form id="submit" method="post" action="test.php">
<br>
<div id="stylized" class="myform">
<ul>
<li><label>Name:</label><input type="text" id="name" name="name" size="40"/></li>
<script type='text/javascript'>
var name = new LiveValidation('name');
name.add(Validate.Presence, { failureMessage: ' Name required!' });
name.add( Validate.Length, { minimum: 2 } );
</script>
<li><label>Email:</label><input type="text" id="email" name="email" size="40"/></li>
<script type='text/javascript'>
var email = new LiveValidation('email');
email.add(Validate.Presence, { failureMessage: ' Email required!' });
email.add( Validate.Email );
</script>
<li><label>Password:</label><input type="text" id="password" name="password" size="40"/></li>
<script type='text/javascript'>
var password = new LiveValidation('password');
password.add(Validate.Presence, { failureMessage: ' Password required!' });
password.add( Validate.Length, { minimum: 6 } );
</script>
<li><label>Verify Password:</label><input type="text" id="verifypassword" name="verifypassword" size="40"/></li>
<script type='text/javascript'>
var verifypassword = new LiveValidation('verifypassword');
verifypassword.add(Validate.Presence, { failureMessage: ' Password required!' });
verifypassword.add( Validate.Length, { minimum: 6 } );
verifypassword.add( Validate.Confirmation, { match: 'password' } );
</script>
<li><label>Company:</label><input type="text" id="custom1" name="custom1" size="40"/></li>
<script type='text/javascript'>
var custom1 = new LiveValidation('custom1');
custom1.add(Validate.Presence, { failureMessage: ' Company required!' });
</script>
<li><label>Country:</label><input type="text" id="custom2" name="custom2" size="40"/></li>
<script type='text/javascript'>
var custom2 = new LiveValidation('custom2');
custom2.add(Validate.Presence, { failureMessage: ' Country required!' });
</script>
<li><label>Job Title:</label><input type="text" id="custom3" name="custom3" size="40"/></li>
<script type='text/javascript'>
var custom3 = new LiveValidation('custom3');
custom3.add(Validate.Presence, { failureMessage: ' Job Title required!' });
</script>
<li><label>Telephone:</label><input type="text" id="custom4" name="custom4" size="40"/></li>
<script type='text/javascript'>
var custom4 = new LiveValidation('custom4');
custom4.add(Validate.Presence, { failureMessage: ' Telephone required!' });
</script>
<li><label>Address:</label><input type="text" id="custom5" name="custom5" size="40"/></li>
<script type='text/javascript'>
var custom5 = new LiveValidation('custom5');
custom5.add(Validate.Presence, { failureMessage: ' Address required!' });
</script>
<li><label>City:</label><input type="text" id="custom6" name="custom6" size="40"/></li>
<script type='text/javascript'>
var custom6 = new LiveValidation('custom6');
custom6.add(Validate.Presence, { failureMessage: ' City required!' });
</script>
<li><label>State:</label><input type="text" id="custom7" name="custom7" size="40"/></li>
<script type='text/javascript'>
var custom7 = new LiveValidation('custom7');
custom7.add(Validate.Presence, { failureMessage: ' State required!' });
</script>
<li><label>Postal Code:</label><input type="text" id="custom8" name="custom8" size="40"/></li>
<script type='text/javascript'>
var custom8 = new LiveValidation('custom8');
custom8.add(Validate.Presence, { failureMessage: ' Postal Code required!' });
</script>
<li><label>What programs and genres are you interested in?</label><input type="text" id="custom9" name="custom9" size="40"/></li>
<script type='text/javascript'>
var custom9 = new LiveValidation('custom9');
custom9.add(Validate.Presence, { failureMessage: ' Interest required!' });
</script>
<li>
<label>Terms and Conditions:</label><textarea name="terms" readonly='readonly' cols='40' rows='6'>Terms of Use</textarea>
</li>
<li>
<label> I have read and agree to the terms and conditions.</label><input name="custom10" id="custom10" type="checkbox" />
</li>
<li>
<button type="submit">Register</button>
</li>
</ul>
</div>
</form>
<div class="success" style="display: none;">
<div id="successStyle">
Thank you for submitting your request.<br><br>It will be reviewed shortly and a confirmation e-mail sent to you.
</div>
</body>
</html>
The form will submit as non-ajax if the ajax submit doesn't work.
Make sure that you have included the necessary jquery.js and any plugins needed for the function.
Also, triple check the following code for syntax errors and such:
$('#submit').ajaxForm(function() {
$('form#submit').fadeOut(function(){$('div.success').fadeIn();});
});
I would comment out the $('form#submit')... part first.