I am wanting to have a form that will let me add names to my database without refreshing the form. I have been working on it but it does not seem to work. I am quite new at this so any help is appreciated.
For my index.html I have:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var name = $("#firstname").val();
var username = $("#lastname").val();
var dataString = 'firstname='+ firstname + 'lastname=' + lastname
if(firstname=='' || lastname=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
<body>
<form method="post" name="form">
<ul><li>
<input id="firstname" name="firstname" type="text" />
</li><li>
<input id="lastname" name="lastname" type="text" />
</li></ul>
<div >
<input type="submit" value="Submit" class="submit"/>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
</div></form>
For join.php:
<?php
include("db.php");
if($_POST)
{
$firstname=$_POST['firstname'];
$lastname=$_POST['username'];
mysql_query("INSERT INTO persons (firstname,lastname) VALUES('$firstname','$lastname')");
}
?>
and db.php:
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "test";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>
there is mistake in code,
you have coded
var name = $("#firstname").val();
var username = $("#lastname").val();
var dataString = 'firstname='+ firstname + 'lastname=' + lastname
you have to used the variables name and username in dataString but you have written the id(s) of fields for first and last name. change either the variable name or variables used in dataString
corrected line is :
var dataString = 'firstname='+ name + 'lastname=' + username
And
$lastname=$_POST['username']; => $lastname=$_POST['lastname'];
Related
I am trying to upload a PDF file to Google Drive and insert the link to the file in Google Sheets. Here is the ajax:
$.ajax({
type: 'POST',
url: 'https://script.google.com/macros/s/AKfycbxyjjBv84uONFouZaiNeC2xwoMPP3p-3dzYxbQBCbJnEza0aPn-/exec',
data: serializedData,
success: function(result) {
var myMessage = $(document.activeElement).attr('id');
$('#sucessMessage2').html('<div class=\"successActive\">Your application has been successfully sent</div>');
document.getElementById("regform").reset();
},
error : function(error) {
alert('Error: Something went wrong. Please refresh the page and try again');
}
});
Here is the HTML:
<form id="regform">
<input id="FirstName" tabindex="1" name="FirstName" type="text" placeholder="First Name *" />
<input id="LastName" tabindex="2" name="LastName" type="text" placeholder="Last Name *" />
<input id="Occupation" tabindex="3" name="Occupation" type="text" placeholder="Occupation" />
<input name="Resume" type="file" tabindex="4" /><br/>
<div class="successMessage" id="sucessMessage2"></div>
<input class="btn-submit" id="submitFormTwo" tabindex="5" type="submit" value="Submit Application to Rent" />
</form>
And Code.gs:
var SHEET_NAME = "Sheet1";
var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property service
function doGet(e){
return handleResponse(e);
}
function doPost(e){
return handleResponse(e);
}
function handleResponse(e) {
var lock = LockService.getPublicLock();
lock.waitLock(30000); // wait 30 seconds before conceding defeat.
try {
var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
var sheet = doc.getSheetByName(SHEET_NAME);
var headRow = e.parameter.header_row || 1;
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1; // get next row
var row = [];
for (i in headers){
if (headers[i] == "Timestamp"){ // special case if you include a 'Timestamp' column
row.push(new Date());
} else { // else use header name to get data
row.push(e.parameter[headers[i]]);
}
}
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
return ContentService
.createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
.setMimeType(ContentService.MimeType.JSON);
} catch(e){
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": e}))
.setMimeType(ContentService.MimeType.JSON);
} finally { //release lock
lock.releaseLock();
}
}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty("key", doc.getId());
}
Everything is populating in the Google Sheet, but I have no idea how to get the Resume to upload to Google Drive and add the link to the Google Sheet.
You can upload a file to drive with a combination of FileReader and google.script.run as following:
Modify <input name="Resume" type="file" tabindex="4" /><br/>
to
<input id = "pdf" name="Resume" type="file" tabindex="4" /><br/>
Modify
<input class="btn-submit" id="submitFormTwo" tabindex="5" type="submit" value="Submit Application to Rent" />
to
<input class="btn-submit" id="submitFormTwo" tabindex="5" type="submit" onClick="formSubmit()" value="Submit Application to Rent" />
Write the javascript function:
function formSubmit() {
var pdf = document.getElementById("pdf").files[0];
var reader = new FileReader();
if (pdf) {
reader.readAsDataURL(pdf);
reader.onloadend = function () {
google.script.run.getResume(reader.result);
}
}
}
In Code.gs, add the function
function getResume(pdf){
var mimeType = pdf.substring(5,pdf.indexOf(';'));
var bytes = Utilities.base64Decode(pdf.substr(pdf.indexOf('base64,')+7));
var title='my_pdf';
var blob = Utilities.newBlob(bytes, mimeType, title);
var file=DriveApp.createFile(blob);
var link = file.getUrl();
Logger.log(link);
}
Integrate link into your existing code as desired, e.g. push it into row and into the spreadsheet.
Explanation: You convert with FileReader the content of the pdf file
into a data URL. Apps Script can use this data URL to read the file as
a blob and convert the blob into a file on your drive.
UPDATE
A sample how to pass the form data completely with google.script.run without Ajax:
Index.html:
<form id="regform">
<input id="FirstName" tabindex="1" name="FirstName" type="text" placeholder="First Name *" />
<input id="LastName" tabindex="2" name="LastName" type="text" placeholder="Last Name *" />
<input id="Occupation" tabindex="3" name="Occupation" type="text" placeholder="Occupation" />
<input id = "pdf" name="Resume" type="file" tabindex="4" /><br/>
<input class="btn-submit" id="submitFormTwo" tabindex="5" type="submit" onClick="formSubmit()" value="Submit Application to Rent" />
</form>
<script>
function formSubmit() {
var firstName = document.getElementById("FirstName").value;
var lastName = document.getElementById("LastName").value;
var occupation = document.getElementById("Occupation").value;
var pdf = document.getElementById("pdf").files[0];
var reader = new FileReader();
if (pdf) {
reader.readAsDataURL(pdf);
reader.onloadend = function () {
google.script.run.withSuccessHandler(success).withFailureHandler(error).getResume(firstName, lastName, occupation, reader.result);
}
}
}
function success(){
alert ("Your application has been successfully sent");
}
function error(){
alert ("There was an error");
}
</script>
Code.gs
function doGet(){
return HtmlService.createHtmlOutput("index.html");
}
function getResume(firstName, lastName, occupation, pdf){
var mimeType = pdf.substring(5,pdf.indexOf(';'));
var bytes = Utilities.base64Decode(pdf.substr(pdf.indexOf('base64,')+7));
var title='my_pdf';
var blob = Utilities.newBlob(bytes, mimeType, title);
var file=DriveApp.createFile(blob);
var link = file.getUrl();
var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
var sheet = doc.getSheetByName(SHEET_NAME);
var values = [firstName, lastName, occupation, link];
var nextRow = sheet.getLastRow()+1;
sheet.getRange(nextRow, 1, 1, values.length).setValues([values]);
}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty("key", doc.getId());
}
I'm using Codeigniter with Ckeditor. My problem is that when I submit the content, the data from the textarea is not stored in the database. But when I tried it again it finally did. So the situation is like I have to double click submit button to save it.
I stored the downloaded Ckeditor on a folder named ./Assests/Ckeditor(Sorry for the wrong spelling.I'll fix this later.)
Here's my form in my view folder:
ask_view.php:
<form id="form" enctype="multipart/data" method="post" onsubmit="createTextSnippet();">
<div class="form-group">
<label for="exampleInputEmail1">Title</label>
<input type="text" name ="title" class="form-control" id="title" placeholder="Title" required >
</div>
<input type="hidden" name="hidden_snippet" id="hidden_snippet" value="" />
<div class="form-group">
<label for="exampleInputEmail1">Editor</label>
<textarea name ="text" class="form-control" id="text" rows="3" placeholder="Textarea" required></textarea>
</div>
<input type="submit" class="btn " name="submit" value ="Submit" style="width: 100%;background: #f4a950;color:#161b21;">
</form>
<script src="<?php echo base_url('assests/js/editor.js')?>"></script>
<script type="text/javascript">
CKEDITOR.replace('text' ,{
filebrowserBrowseUrl : '<?php echo base_url('assests/filemanager/dialog.php?type=2&editor=ckeditor&fldr=')?>',
filebrowserUploadUrl : '<?php echo base_url('assests/filemanager/dialog.php?type=2&editor=ckeditor&fldr=')?>',
filebrowserImageBrowseUrl : '<?php echo base_url('assests/filemanager/dialog.php?type=1&editor=ckeditor&fldr=')?>'
}
);
</script>
<script type="text/javascript">
//code used to save content in textarea as plain text
function createTextSnippet() {
var html=CKEDITOR.instances.text.getSnapshot();
var dom=document.createElement("DIV");
dom.innerHTML=html;
var plain_text=(dom.textContent || dom.innerText);
var snippet=plain_text.substr(0,500);
document.getElementById("hidden_snippet").value=snippet;
//return true, ok to submit the form
return true;
}
</script>
<script type="text/javascript">
$('#form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '/knowmore2/index.php/ask_controller/book_add',
data: $('form').serialize(),
success: function (data) {
console.log(JSON.parse(data));
}
});
});
</script>
Ask_model.php:
public function book_add($data)
{
$query=$this->db->insert('article', $data);
return $query;
}
Ask_controller.php:
public function book_add(){
$data = $_POST;
$details = array();
$details['title'] = $data['title'];
$details['content'] = $data['text'];
$details['snippet'] = $data['hidden_snippet'];
$details['createdDate']=date('Y-m-d H:i:s');
$result=$this->ask_model->book_add($details);
echo json_encode($details);
}
The content with html tags should be save in a column named content in the database, but it didn't save in the first click. It only saves on the second one,but the other data are saved in the first like the title, etc. So I get 2 rows of data, one without the content and the other with one.
Database:
$(document).ready(function(){
$("#log").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var img = $("#img").val();
$.ajax({
url:"ajax.php",
type:"POST",
async:false,
data:{
"postD" :1,
"nameD" : name,
"emailD" : email,
"imgD" : img
},
success:function(data){
$("#name").val('');
$("#email").val('');
$("#img").val('');
}
});
});
});
function displaydata(){
$.ajax({
url:"ajax.php",
type:"POST",
async:false,
data:{
"displayP":1
},
success:function(data){
$("#datafromDb").html(data);
}
});
}
<?php
include("db.php");
$sql = "
CREATE TABLE IF NOT EXISTS temptable (
id INT NOT NULL AUTO_INCREMENT,
name VARCHAR(20) NOT NULL,
email VARCHAR(20) NOT NULL,
PRIMARY KEY(id)
);
";
mysqli_query($connect, $sql);
if (isset($_POST['postD'])){
if(!empty($_POST['nameD']) && !empty($_POST['emailD'])&& !empty($_FILES['imgD'])) {
$emailP = $_POST['emailD'];
$nameP = $_POST['nameD'];
$imgP = $_FILES['imgD']['name'];
$tmpname = $_FILES['imgD']['tmp_name'];
$folder = "upload/";
move_uploaded_file($tmpname, $folder.$imgP);
$insert = "INSERT INTO `inserteddata` (`name`, `email`,`img`)
VALUES('{$nameP}','{$emailP}','{$imgP}')";
$qry = mysqli_query($connect, $insert);
if($qry) {
echo "inserted";
}
}else {
echo "make sure all fields are filled";
}
}
if(isset($_POST['displayP'])){
$sel = "SELECT * FROM `inserteddata`";
$res = mysqli_query($connect, $sel);
while($row=mysqli_fetch_array($res)) {
echo "Name = ".$row['name']."<br><br><br>";
}
}
?>
<?php
$connect = mysqli_connect("localhost", "root", "", "ajaxinsert");
if(!$connect) {
echo "database connection error".mysqli_error();
}else {
echo "connected successfuly<br><br><br>";
}
?>
<!DOCTYPE html>
<html>
<head>
<title>ajax insert</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div id="datafromDb">
<script type="text/javascript">
document.write(displaydata());
</script>
</div>
<br>
<br>
<form enctype="multipart/form-data" action="" method="post">
<input type="text" id="name"><br><br>
<input type="email" id="email"><br><br>
<input type="file" id="img" name="img"><br><br>
<input type="submit" value="Login" >
<a href="" id="log" >add</a>
</body>
</html>
Am trying to upload image using ajax php and jquery what am i doing wrong here. the image should be uploaded without refreshing the page. i have tried the above code. if your see any prolem, help!!
The thing is i want to move the uploaded file to the upload folder and insert the image name to the database as a BLOB.
You can use FormData objects but you need to write the code in plain Javascript because I think JQuery doesn't support it yet. Please read this for more information https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
what i intend to do, is to use uploadify to upload a file, change its name in uploadify.php for the value of time() ,save it , and return the name of the saved file back to the HTML, im not sure how to do it, currently im using this as guide
http://www.uploadify.com/documentation/uploadify/customizing-the-server-side-upload-script/
and this is my code so far
index.php
'<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<style type="text/css">
body {
font: 13px Arial, Helvetica, Sans-serif;
}
</style>
</head>
<body>
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>
<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
$('#file_upload').uploadify({
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>',
'name' : 'somename'
},
'method' : 'post',
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php',
onUploadComplete : function(data, file , response){
alert('The file was saved to: ' + data);
alert(response);
}
});
});
$(document).ready(function() {
$("#FormSubmit").click(function (e) {
var img = 'localhost/uploads/'+ $("#hidden").val;
var cuenta_sap = $("#cuenta_sap").val();
var ubicacion = $("#ubicacion").val();
var codigo_centro_beneficio = $("#codigo_centro_beneficio").val();
var nombre = $("#nombre").val();
var proyecto = $ ("#proyecto").val();
var departamento = $ ("#departamento").val();
var tipo_activo = $("#tipo_activo").val();
var proveedor = $("#proveedor").val();
var modelo = $("#modelo").val();
var numero_serie = $("#numero_serie").val();
var marca = $ ("#marca").val();
var numero_remision = $("#numero_remision").val();
var myData ='cuenta_sap='+ cuenta_sap + '&ubicacion='+ ubicacion +
'&codigo_centro_beneficio='+ codigo_centro_beneficio + '&nombre=' + nombre + '&proyecto='
+ proyecto + '&departamento='+ departamento + '&tipo_activo=' + tipo_activo
+'&proveedor='+ proveedor +'&modelo=' + modelo + '&numero_serie=' + numero_serie +'&marca='
+ marca + '&numero_remision='+ numero_remision;
e.preventDefault();
if(cuenta_sap==''||ubicacion==''||codigo_centro_beneficio==''
||nombre==''||proyecto==''||departamento
==''||tipo_activo==''||proveedor==''||modelo==''
||numero_serie==''||marca==''||numero_remision=='')
{
alert("Formato incompleto!");
return false;
}
$("#FormSubmit").hide(); //hide submit button
$("#LoadingImage").show(); //show loading image
$.ajax({
type: "POST", // HTTP method POST or GET
url: "response.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //
success:function(result){
$("#responds").delay(10000).fadeIn();
$("#responds").append("<li class='res'>"+result+"</li>");
$('.res').remove();
$("#proyecto").val(''); //empty text field on successful
$("#departamento").val(''); //empty text field on successful
$("#tipo_activo").val(''); //empty text field on successful
$("#modelo").val(''); //empty text field on successful
$("#numero_serie").val(''); //empty text field on successful
$("#marca").val(''); //empty text field on successful
$("#numero_remision").val(''); //empty text field on successful
$("#cuenta_sap").val(''); //empty text field on successful
$("#ubicacion").val(''); //empty text field on successful
$("#nombre").val(''); //empty text field on successful
$("#codigo_centro_beneficio").val(''); //empty text field on successful
$("#FormSubmit").show(); //show submit button
$("#LoadingImage").hide(); //hide loading image
},
error:function (xhr, ajaxOptions, thrownError){
$("#FormSubmit").show(); //show submit button
$("#LoadingImage").hide(); //hide loading image
alert(thrownError);
}
});
});
$("body").on("click", "#responds .del_button", function(e) {
e.preventDefault();
var clickedID = this.id.split('-'); //Split ID string (Split works as PHP explode)
var DbNumberID = clickedID[1]; //and get number from array
var myData = 'recordToDelete='+ DbNumberID; //build a post data structure
$('#item_'+DbNumberID).addClass( "sel" ); //change background of this element by adding class
$(this).hide(); //hide currently clicked delete button
$.ajax({
type: "POST", // HTTP method POST or GET
url: "response.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(response){
//on success, hide element user wants to delete.
$('#item_'+DbNumberID).fadeOut();
},
error:function (xhr, ajaxOptions, thrownError){
//On error, we alert user
alert(thrownError);
}
});
});
});
</script>
<div class="content_wrapper" id="wrapepr">
<div class="form_style">
<input name="hidden" id="hidden" type="text"></input>
<br>
<a>Datos</a>
<br>
<input name="cuenta_sap" id="cuenta_sap" placeholder="cuenta sap" class="input"></input>
<select name="departamento" class="input" id="departamento">
<option value = "">seleccione departamento</option>
<?php
include("db.php");
$stmt = $db->prepare("SELECT `id`, `departamento` FROM `departamentos`");
$stmt->execute();
$stmt->bind_result($id,$departamento);
while ($stmt->fetch()){
echo "<option value='$id'>$departamento</option>";
}
?>
</select>
<select name="proyecto" class="input" id="proyecto" >
<option value = "" >seleccione proyecto</option>
<?php
$stmt = $db->prepare("SELECT `id` ,`proyecto` FROM `proyectos`");
$stmt->execute();
$stmt->bind_result($id,$proyecto);
while ($stmt->fetch()){
echo "<option value='$id'>$proyecto</option>";
}
?>
</select>
<select name="tipo" class="input" id="tipo_activo">
<option value = "" class="input" >tipo de activo</option>
<?php
$stmt = $db->prepare("SELECT `id` ,`tipo` FROM `tipo_activo`");
$stmt->execute();
$stmt->bind_result($id,$tipo_activo);
while ($stmt->fetch()){
echo "<option value='$id' class='input'>$tipo_activo</option>";
}
?>
</select>
<select name="proveedor" class="input" id="proveedor">
<option value = "" class="input" >seleccione proveedor</option>
<?php
$stmt = $db->prepare("SELECT `id` ,`nombre` FROM `proveedores`");
$stmt->execute();
$stmt->bind_result($id,$nombre);
while ($stmt->fetch()){
echo "<option value='$id' class='input'>$nombre</option>";
}
?>
</select>
<input name="codigo_centro_beneficio" id="codigo_centro_beneficio" placeholder="codigo centro
beneficio" class="input"></input>
<input name="nombre" id="nombre" placeholder="nombre" class="input"></input>
<input name="modelo" id="modelo" placeholder="modelo" class="input"></input>
<input name="numero_serie" id="numero_serie" placeholder="numero_serie" class="input">
</input>
<input name="marca" id="marca" placeholder="marca" class="input"></input>
<input name="numero_remision" id="numero_remision" placeholder="numero remision" class="input">
</input>
<input name="upload" id="upload" class="input" type="file"></input>
<button id="FormSubmit">registrar</button>
<img src="images/loading.gif" id="LoadingImage" style="display:none" />
</div>
<ul id="responds" >
</ul>
</div>
</body>
</html>'
and uploadify.php
'
$targetFolder = '/uploads'; // Relative to the root
$verifyToken = md5('unique_salt' . $_POST['timestamp']);
if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
$now = time();
$name = $_POST('name')FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
// Validate the file type
$fileTypes = array('jpg','jpeg','gif','png'); // File extensions
$fileParts = pathinfo($_FILES['Filedata']['name']);
$targetFile = rtrim($targetPath,'/') . '/' . $now .'.'. $fileParts['extension'];
echo rtrim($targetPath,'/') . '/' . $now .'.'. $fileParts['extension'];
if(file_exists($targetFile)){
++$now;
$targetFile = rtrim($targetPath,'/') . '/' . $now .'.'. $fileParts['extension'];
$name $targetPath,'/') . '/' . $now .'.'. $fileParts['extension'];
echo $name;
}
if (in_array($fileParts['extension'],$fileTypes)) {
move_uploaded_file($tempFile,$targetFile);
}
else {
echo 'Invalid file type.';
}
?>'
I found the answer to this, after a while of searching and reading uploadify manuals, it turns out if you use onUploadComplete, and you just upload one single fine, the method will never excecute, and it will keep waiting for more files, instead for one file only, you have to use onUploadSuccess, and read the data returned by it using file,data,response as parameters.
For some reason the newsletter sign-up form bar I'm creating is not working as it should in IE. In fact, it's not working at all. If you visit the link below in Chrome or Firefox it works like it should, but in any version of IE it doesn't.
Anyone have any leads to fix this?
Here's the code, summarized:
$(function() {
$('#name').textboxhint({
hint: 'First Name'
});
$('#email').textboxhint({
hint: 'Email Address'
});
$("#submitButton").click(function() {
// VALIDATE AND PROCESS FORM
var name = $("#name").val();
var email = $("#email").val();
var dataString = 'name='+ name + '&email=' + email;
// HANDLE DATA: SHOW ERROR IF FIELDS ARE BLANK
if (name=='' || name=='First Name' ){
$('.errorIconName').show();
return false;
}
if (email=='' || email=='Email Address'){
$('.errorIconEmail').show();
return false;
}
else {
$.ajax({
type: "POST",
url: "#",
data: dataString,
success: function(){
$('#signupWidget').fadeOut(400).hide();
$('#thankyouText').fadeIn(700).show();
$('.errorIcon').fadeOut(200).hide();
$('#signupWrap').delay(3000).fadeOut(800);
}
});
}
return false;
});
});
and...
<form action="" method="post">
<span id="sprytextfield1" class="pr20">
<input name="name" id="name" type="text"/>
<div class="errorIconName" style="display:none"></div>
</span>
<span id="sprytextfield2" class="pr20">
<input name="email" id="email" type="text"/>
<div class="errorIconEmail" style="display:none"></div>
</span>
<span>
<input type="submit" name="widgetButton" id="submitButton" value="SUBMIT"/>
</span>
</form>