jquery/ajax doesnot work

Question

Hello,

For some reason this does not work. I have copy/paste the code, but it goes to the html-echo.php rather than displaying the result in the htmlExampleTarget

What am I doing wrong here.

Thanks

Dave

edit: sorry guys - here is the url - http://jquery.malsup.com/form/#html

    <script src="js/jquery-1.3.2.js" type="text/javascript" language="javascript"></script>

<script type="text/javascript">
// prepare the form when the DOM is ready 
$(document).ready(function() { 
    // bind form using ajaxForm 
    $('#htmlForm').ajaxForm({ 
        // target identifies the element(s) to update with the server response 
        target: '#htmlExampleTarget', 

        // success identifies the function to invoke when the server response 
        // has been received; here we apply a fade-in effect to the new content 
        success: function() { 
            $('#htmlExampleTarget').fadeIn('slow'); 
        } 
    }); 
});
</script>



<div style="position:absolute; top:129px; left: 400px; width:500px; border:#000000 thin solid;">
      <form id="htmlForm" action="submit_form.php" method="post"> 
    Message: <input type="text" name="message" value="Hello HTML" /> 
    <input type="submit" value="Echo as HTML" /> 
</form>
Reply: <div id="htmlExampleTarget"></div>
    </div>

and on the submit-form.php page

echo '<div style="background-color:#ffa; padding:20px">' . $_POST['message'] . '</div>'; 

Answer 1

You have two <script> elements. One of them loads jQuery, the other runs ajaxForm. You haven't loaded the .js file that contains the ajaxForm code.

See the documentation:

Include jQuery and the Form Plugin external script files and a short script to initialize the form

Since you haven't, the script errors when trying to run the function, so it doesn't prevent the default action. The code to make the Ajax request is missing (so that doesn't happen), and the default action runs (for the browser goes to the URI in the action attribute).