Home/ Questions/Q 908247
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T16:41:08+00:00

Ajax Jquery form not working vs div why its happen and how can i

  • 0

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"></script>
    </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"></script>
    </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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 🙂

    • 0