Need help implementing jQuery Form plug-in

Question

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

You'll probably have better luck in getting folks to answer if you provide a specific/problem or question. You've posted an awful lot of code to sort through and not much in the way of details of your problem. — brettkelly
– brettkelly, Commented Jun 27, 2011 at 17:28
Point well taken, inkedmn. I know it's a lot of code to look at. I thought as much when I posted it, but I'm at a loss where to start or how to figure out what's causing the setup not to work. Though it's buried in the first paragraph of my post, I'll reiterate what the code is currently doing: the file gets uploaded and the info written to the database, as desired, but the page refreshes. What I'm expecting with the existing code is the alerts to show and the page won't refresh. If anyone could suggest how to strip down what I have to more easily troubleshoot, that'd be great. — marky
– marky, Commented Jun 27, 2011 at 17:43
If you're just getting a blank page I would guess there is a problem with your PHP script. I would recommend trimming down your PHP to something very basic and easy to scan for errors, see if that works, and build your PHP script up from there. — jsonnull
– jsonnull, Commented Jun 27, 2011 at 19:47

Chris Serra · Accepted Answer · 2011-06-27 20:38:36Z

1

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.

answered Jun 27, 2011 at 20:38

Chris Serra

13.6k3 gold badges28 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

marky Over a year ago

That's straight off the examples page, and I did try that - along with moving the url and type attributes into the options object and then using "$('#myForm').ajaxForm(options);", but that ended up not even calling or passing data to the php script!

Chris Serra Over a year ago

Did you try using exactly what the example provides? Is your jQuery code loaded in the "$(document).ready()" function? How you set it up now, the JS works, but when you used the options--maybe you didn't have them set up correctly...Try copying exactly how they present on the examples page.

marky Over a year ago

Chris, I re-did (again) the html page, copy/pasting the javascript and form and made bloody-well sure it was correct. I then added a comment.php file, which simply logged the posted data. SAME RESULT :( The browser loaded the comment.php file with a blank page. Why isn't the alert showing?!? This is getting frustrating - I must be missing something simple - I've put the files in my public folder - feel free to take a look at them here. You can see the php script at .../testUpload/comment.txt

Chris Serra Over a year ago

When I viewed the source, your "alert" looks like this: a lert("Thank you for your comment!"); Try removing the space in between a and l. If you're on a Mac, and you don't see it, try going in between the two letters and hitting backspace.

marky Over a year ago

That was it! - It's always the simple things that completely break the whole thing! Thanks!

|

jsonnull · Accepted Answer · 2011-06-27 20:34:24Z

0

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.

answered Jun 27, 2011 at 20:34

jsonnull

4153 silver badges12 bronze badges

2 Comments

marky Over a year ago

Though I'm by no means an expert, I'm not sure I agree with your reasoning for removing the type attribute because I have that attribute for submit buttons all over the site I'm working on and they are all using ajax. Also, when I removed the type attribute from the button, it just became a plain box with the value attribute displayed and was unclickable.

jsonnull Over a year ago

Then change it to a button tag. The fact is your browser automatically loads a new page with a submit button, so if you're clicking it and it is taking you to the actual php page instead of loading it asynchronously, then this is what is happening.

Collectives™ on Stack Overflow

Need help implementing jQuery Form plug-in

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related