Im trying to use Dropzone in my french laravel app (latest version) When I save my form I get the error
Call to a member function getClientOriginalName() on null
I try to see if my request sent something with dd() but I get null
This is my function on the controller
public function enregistrer(Request $request){
$photo = $request->file('file');
$imageName = $photo->getClientOriginalName();
$image->move(public_path('images'),$imageName);
$demande = new Demande();
$demande->filename = $imageName;
$demande->cin= $request('cin');
$demande->apoge=$request('apoge');
$demande->generatedCode= uniqid();
$demande->save();
return redirect('/demande');
}
And this is my view
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- All for dropzone -->
<meta name="_token" content="{{csrf_token()}}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
<title>Submission E-Docs</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<form role="form" action="{{url('demande/store')}}" method="POST" enctype="multipart/form-data" class="dropzone" id="dropzone">
#csrf
<label> Votre CIN:</label>
<input type="text" name="cin"/>
<label> Votre Apogée:</label>
<input type="text" name="apoge"/>
<!-- <input name="file" type="file" multiple /> -->
<br>
<input type="submit" class="btn btn-outline-primary btn-lx" style="font-family:'Quicksand', sans-serif; font-size:20px "value="Créer">
</form>
</div>
</div>
<script type="text/javascript">
Dropzone.options.dropzone =
{
maxFilesize: 10,
renameFile: function (file) {
var dt = new Date();
var time = dt.getTime();
return time + file.name;
},
acceptedFiles: ".jpeg,.jpg,.png,.gif",
addRemoveLinks: true,
timeout: 60000,
success: function (file, response) {
console.log(response);
},
error: function (file, response) {
return false;
}
};
</script>
</body>
</html>
I thought It was due the
You are renaming the user chosen file dropboxJS before sending it to the server
renameFile: function (file) {
var dt = new Date();
var time = dt.getTime();
return time + file.name; //<-- gets a unique name
},
This name is dynamic and cannot be predicted on the controller, but in controller you are using
$photo = $request->file('file');
Obviously this would fail as the name could be anything based on the time it was sent. So first option is to remove the renameFile, but if that's not possible you need some way to access the file without knowing the name it was uploaded as
Try this
//$photo = $request->file('file');
$fileBag = $data->files; //Symfony\Component\HttpFoundation\FileBag
$collFile = $fileBag->all(); //an array of Symfony\Component\HttpFoundation\File\UploadedFile
if(count($collFile)){
$photo = $collFile[0];
//.. other code
}
else{
echo 'No file was uploaded';
}
This basically tries to get all files from the FileBag into an array then attempts to pick the first one from it.
Related
New to Javascript and have spent hours on this problem :/
I want to implement a smooth scrolling effect to move to different sections of a webpage. I am using this piece of javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main')
.animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
This is the basic structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin-left: 30%; margin-right: 30%">
<main>
<div class="contactme-button">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: grey; display: block;"> </div>
<div class="contactme-button-2">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: blue; display: block;"> </div>
<div class="contactme-section" id="contactme" style="width: 100%; height: 100px; background-color: grey;">CONTACT ME</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: black; display: block;"> </div>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main').animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
</script>
</html>
(there is more content in there but that is the basic structure that is giving me grief)
I discovered that in
.main{
overflow-x: hidden;
}
is stopping the normal operation of the scrolling and cause the second link to scroll to a random spot
There's a CSS declaration that may help here:
.your-anchor-element-class {
scroll-margin-top: 36px; // <-- your value here
}
Browser support: Works natively in Chrome, FF, Edge, Opera. Supported in Safari with scroll-snap-margin-top.
MDN docs.
Credit to Josh Comeau for pointing this out.
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.
Its very simple but even after looking at so many examples I cannot seem to get it right! As you can see in this Code Pen, I have a image! Now when I hover the image i want to do various things on the elements with classes .headline .text .title .subtitle. for some reason i am only able to affect any change at all on the .title class! What am i doing wrong?
my html:
body {
}
.container {
.headline {
color: red;
}
.foto {
background-color: lightblue;
cursor: pointer;
}
.foto:hover + .headline {
color:green;
}
.foto:hover + .title {
color:maroon;
position: absolute;
top: 3em;
left: 10em;
}
//text not working
.foto:hover + .text {
color:maroon;
}
.title {
color: darkgreen;
font-weight: bold;
p {
font-size: 2em;
}
}
.text {
color: blue;
}
.subtitle {
color: darkred;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.scss">
</head>
<body>
<div class="container">
<h2 class="headline">Sonderausstellungen</h2>
<div class="foto"><img src="http://oi63.tinypic.com/ifr19y.jpg"/></div>
<div class="title">
<p>Land von Indien</p>
</div>
<div class="text">
<p>Lernen wir Indien Kennen</p>
</div>
<div class="subtitle">
<p>Der Text hier is länger als da oben</p>
</div>
</div>
</body>
</html>
The element+element applies to the next immediate element you identify following the first element. It does not search through the DOM looking for the element.
For instance....
.foo+.bar {color:#f00}
<div class="foo"></div>
<div class="bar"></div> --- This gets selected
<div class="foo"></div>
<div class="zanza"</div>
<div class="bar"></div> --- This does not
So, your CSS should look like this:
.foto:hover + .title {...}
.foto:hover + .title + .text {...}
.foto:hover + .title + .text + .subtitle {...}
Or to avoid stacking so many selectors, you could use ~ to select sibling elements at the same level in the DOM:
.foto:hover ~ .title {...}
.foto:hover ~ .text {...}
.foto:hover ~ .subtitle {...}
Remember, your HTML is being read from top to bottom, and you are not able to target previous sibling elements with CSS. So right now, the way you have your HTML structured, you cannot select the .headline element based on the image :hover because the .headline comes first.
at the moment i get in touch with laravel. i tried to create a page who scan qr codes.
i created a normal project with laravel (composer create-project laravel/laravel testqrinstascan) and tried to implement step by step instascan.
I wanna use this library instascan -> https://github.com/schmich/instascan
But i get everytime the error "Laden fehlgeschlagen für das mit der Quelle "http://localhost:8000/instascan.min.js"."
but the file is in the same directory
It means loading script with source .... not possible -> https://imgur.com/a/SKang
This is my welcome.blade.php------------------------------------------------------------------------
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<script type="text/javascript" src="instascan.min.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="content">
<div class="links">
<video id="preview"></video>
Hello World
<script type="text/javascript">
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
scanner.addListener('scan', function (content) {
console.log(content);
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
</script>
</div>
</div>
</div>
</body>
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.