jquery/ajax doesnot work

Question

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>';

Show us your code, not the code you are attempting to copy/paste from. — Quentin
– Quentin, Commented Jan 14, 2010 at 9:05
Show us YOUR code. the jQuery Form plugin works fine for thousand of users, so you might want to consider that the error might be on your side. — pixeline
– pixeline, Commented Jan 14, 2010 at 9:08
Not just a fragment of your code. Odds are you've put the wrong URL in the src attribute of a script element or something. We can't tell if we can only see bits of code copy/pasted from somewhere else. — Quentin
– Quentin, Commented Jan 14, 2010 at 9:10
You should always provide as much information as possible and as less information as necessary if you want someone to help you. — Felix Kling
– Felix Kling, Commented Jan 14, 2010 at 9:13
@lutz: Actually he did this. From the link and code we can see that he wants to submit a form via ajax and update a div with its response. The problem is that this does not work and the form is submitted in the normal way i.e. displaying the target PHP page (his second sentence). — Felix Kling
– Felix Kling, Commented Jan 14, 2010 at 9:20

Quentin · Accepted Answer · 2010-01-14 09:22:34Z

2

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).

edited Jan 14, 2010 at 9:22

answered Jan 14, 2010 at 9:15

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

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

3 Comments

dave Over a year ago

I have 2 files the submit_form.php is the second one, and contains the return parameters.

Felix Kling Over a year ago

@dave: You can see such things easier if you use a debugger like Firebug for Firefox. I bet, you would have seen at the Firebug console that the method ajaxForm cannot be called.

dave Over a year ago

@felix: actually i have not used firebug...never used firebug.

Collectives™ on Stack Overflow

jquery/ajax doesnot work

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related