Forums

cupaball

I am trying to create a form that uses ajax to submit. I created a insert_email.php script which looks like this:

<?php require_once('Connections/connect.php'); ?>
 
<?php
 
mysql_select_db($database_connUser);
 
$sql=\"INSERT INTO mail_list (id,email)
VALUES('','$_POST[email]')\";
 
if (!mysql_query($sql,$connUser))
  {
  die('Error: ' . mysql_error());
  }
echo \"1 record added\";
 
 
?>

And I have my page which is a text box that asked for the e-mail address, which looks like this:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Mail List Test</title>
 
<script type=\"text/javascript\" src=\"jquery/jquery-1.2.6.min.js\"></script>
<script type=\"text/javascript\" src=\"jquery/jquery.form.js\"></script>
    <script type=\"text/javascript\"> 
// prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
        target:        '#output2',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse,// post-submit callback 
        url:            'insert_email.php'  
 
        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 
 
    // bind to the form's submit event 
    $('#emailform').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options); 
 
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    }); 
}); 
 
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    // formData is an array; here we use $.param to convert it to a string to display it 
    // but the form plugin does this for you automatically when it submits the data 
    var queryString = $.param(formData); 
 
    // jqForm is a jQuery object encapsulating the form element.  To access the 
    // DOM element for the form do this: 
    // var formElement = jqForm[0]; 
 
    alert('About to submit: \n\n' + queryString); 
 
    // here we could return false to prevent the form from being submitted; 
    // returning anything other than false will allow the form submit to continue 
    return true; 
} 
 
// post-submit callback 
function showResponse(responseText, statusText)  { 
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 
 
    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 
 
    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 
 
    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
        '\n\nThe output div should have already been updated with the responseText.'); 
} 
    </script> 
</head>
 
<body>
 
<form action=\"insert_email.php\" method=\"POST\" name=\"mail_list\" id=\"emailform\">
        <fieldset id=\"email\">
                <legend>Get Notified</legend>
                <label>E-Mail</label>
                <input type=\"text\" name=\"email\" id=\"emailbox\" />
                <input name=\"submit\" type=\"submit\" value=\"send\" />
        </fieldset>
</form>
 
<div id=\"output2\">
Yes Sir!!
</div>
</body>
</html>

When I click submit I get the beforeSubmit alert but I never get the success callback response. However, the address does get insereted into the database but no update to div #output2. Note: I have tried locally and on the server.

It can be all be found right here.

cupaball

NEVER MIND....it was already working FF3 and ad muncher did not get along with the script.

treehouse : what would you like to learn today?

Forums

jquery form plugin HELP!!!