tags:

views:

30

answers:

4
+1  Q: 

Why Ajax Jquery form click not working vs div that works?

Hi,

Ajax Jquery form not working vs div why its happen and how can i fix my error?

view.html-Code with form

not working

<html>
    <head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
    </head>
    <body>
        <form id="parse-form" action="#" method="post">
            <button type="submit" id="submit-html">submit ajax request without parameters</button>
        </form>
        <div>array values: <div id="array-values"></div></div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#submit-html').click(function() {
                    $.ajax({
                        url: 'controller.php',
                        type: 'POST',
                        dataType:'json',
                        success: function(data) {
                            alert("response begin");
                            alert(data);
                            $.each(data, function (i, elem) {
                                $('#array-values').append('<div>'+elem+'</div>');
                            });
                        }
                    });
                });
            });
        </script>
    </body>
</html>

view.html -form replaced by div

working

<html>
    <head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
    </head>
    <body>
        <div id="parse-form">
            <button type="submit" id="submit-html">submit ajax request without parameters</button>
        </div>
        <div>array values: <div id="array-values"></div></div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#submit-html').click(function() {
                    $.ajax({
                        url: 'controller.php',
                        type: 'POST',
                        dataType:'json',
                        success: function(data) {
                            alert("response begin");
                            alert(data);
                            $.each(data, function (i, elem) {
                                $('#array-values').append('<div>'+elem+'</div>');
                            });
                        }
                    });
                });
            });
        </script>
    </body>
</html>

controller.php -simple php file that return json array:

<?php
$arr=array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);
?>

Thanks

+1  A: 

The form has a default action with a type="submit" button, which is submitting, so you'll need to stop that from happening by adding return false or event.preventDefault() , like this:

$(document).ready(function() {
    $('#submit-html').click(function(e) {
        $.ajax({
            url: 'controller.php',
            type: 'POST',
            dataType:'json',
            success: function(data) {
                alert("response begin");
                alert(data);
                $.each(data, function (i, elem) {
                    $('#array-values').append('<div>'+elem+'</div>');
                });
            }
        });
        return false;
        //or e.preventDefault();
    });
});

Without this, the form is submitting as it normally would with no JavaScript, leaving the page. So effectively it's doing a refresh, instead of AJAX submitting your form (which doesn't have time to complete...because you left :)

Nick Craver  2010-07-08 23:10:40
+1  A: 

My guess is that the form is submitting and refreshing the page before the ajax has a chance to respond.

Try putting return false; at the end of the click handler.

  $('#submit-html').click(function() {
        $.ajax({
            url: 'controller.php',
            type: 'POST',
            dataType:'json',
            success: function(data) {
                alert("response begin");
                alert(data);
                $.each(data, function (i, elem) {
                    $('#array-values').append('<div>'+elem+'</div>');
                });
            }
        });
        return false; 
    });

Of course you'll have the same issue if the user hits Enter in one of the fields. Unless you're preventing the Enter key from submitting the form, you may want to the handle the event using the submit() handler.

  $('#parse-form').submit(function() {
        $.ajax({
            url: 'controller.php',
            type: 'POST',
            dataType:'json',
            success: function(data) {
                alert("response begin");
                alert(data);
                $.each(data, function (i, elem) {
                    $('#array-values').append('<div>'+elem+'</div>');
                });
            }
        });
        return false; 
    });
patrick dw  2010-07-08 23:11:09
+1  A: 

An element of type=submit inside a <form> will perform the form request when clicked on.

You need to abort the default behavior by running event.preventDefault() inside the click callback.

Luca Matteis  2010-07-08 23:11:15
A: 

Try using submit() http://api.jquery.com/submit/ , this should work with keyboard events as well as clicks. You can use serialize() to get any form data into the ajax objects data variable.

Keyo  2010-07-08 23:17:30
its not works with submit, serialize() what? - I dont send any form data.
Yosef  2010-07-08 23:22:08

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?