CODEWITHSUNDEEP
jqueryformspluginsfile-upload
marky
marky

Reputation: 5068

Need help implementing jQuery Form plug-in

As noted by inkedmn below, I originally posted what amounted to a wall of code - too much for anyone to be able to help me. So, instead of creating a new question/thread, I decided to redo this one - the title still applies to the question.

I am trying to implement the jQuery Form plugin. My final goal will be to 1) validate the form prior to submission 2) upload the selected file, and 3) send the submitted form data to a processing script and write the file and form data to a database.

My first three attempts at doing this using some sort of ajax plug-in have all failed. So I'm starting from a simple ajax form that sends two form fields to a script that is supposed to return a successful run and then display a message saying so. Then once I get that working I'll work my way up to processing the data and then (hopefully) a file upload.

The following code was taken from the jQuery Form plug-in's example code.

Here's the form HTML:

<form id="myForm" action="testProcessAjaxUploadForm.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>

Here's the jQuery code:

// bind 'myForm' and provide a simple callback function 
$('#myForm').ajaxForm(function() { 
    alert("Thank you for your comment!"); 
});

And here's the php code that is supposed to process the retrieved form data and return something so the javascript alert displays:

<?php
    require_once ('../scripts/logging.php');
    $log = new Logging();

    if (isset($_POST['comment']) && isset($_POST['name'])) {
        $log->lwrite('name: ' . $_POST['name'] . ', comment: ' . $_POST['comment']);
    } else {
        $log->lwrite('Nothing passed to the script.');
    }

    //return true;
    return $_POST['name'];
    //echo $_POST['name'];

The first logging line does write to the log file, so I know the script is executing. When either return line is used, the browser just loads a blank page with the script file name in the address bar, when echo is used the name is displayed on the page, with the script's file name in the address bar. In any case the javascript Thank You message never shows.

What am I missing?

UPDATE

The PHP code works correctly for how I've written it. Meaning it can take the posted form fields and use them. The jQuery Form plug-in example page says about the sample code, "If the server returns a success status then the user will see a "Thank you" message." So I guess my question is, "what is the php script supposed to return that will cause the jQuery code to detect a successful response so that the Thank you message displays?

Link to testing page The php script contents can be viewed in the same folder as the web page in the file comment.txt

Upvotes: 0

Views: 598

Answers (2)

Chris Serra
Chris Serra

Reputation: 13546

Try something like this instead for your JavaScript:

// bind 'myForm' and provide a simple callback function 
$('#myForm').ajaxForm({ 
    success: function() { 
        alert("Thank you for your comment!"); 
    });
});

It doesn't matter what your PHP returns--it can be true, or echo a statement. The "success" is from the server--such that when the page loads successfully, it'll return a "success" status. If the page does not exist, or access is forbidden, it will return an error code.

Upvotes: 1

jsonnull
jsonnull

Reputation: 415

Your form element

<input type="submit" value="Submit Comment" />

is causing you to load the script into a new page with the posted variables. This means that your ajax function has no time to perform the return because the browser is loading the new php page directly for you. To prevent this, you need to remove type="submit" out of your submit button so that the browser does not automatically carry you to the php script.

This way, you stay on the page while the ajax is performed asynchronously and your callback function (in this case, a thank you alert) can be seen since you have not left the page.

Upvotes: 0

Related Questions