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; padd开发者_高级运维ing:20px">' . $_POST['message'] . '</div>';
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).
精彩评论