Jquery form Ajax Submit

Question

I want to submit a form using ajax in the background. I tried:

<div class="form-horizontal" id="form">
    <label for="name" class="control-label">Username</label>
    <div class="controls">
        <span id="name_input"><input type="text" name="name" id="medium" class='input-medium input-square'></span>
        <span class="help-inline" id = "ajax_load"></span>
    </div>
    <div class="form-actions">
        <button class="btn btn-red5" onclick="resolve()">Login</button>
        <input type="reset" class='btn btn-danger' value="Reset">
    </div>                                                  
</div>

And the Javascript:

<script type="text/javascript">
    var resolve = function () {
            jAlert('test', 'test');
                $('#ajax_load').html('<a href="#" class="btn btn-mini btn-square tip" title="Reloading"><img src="templates/img/ajax-loader.gif" alt=""></a>');
                $.ajax( {
                    url : 'plugin.php?plugin=test',
                    type : 'post',          
                    data: $("#form").serialize(),
                    success : function( resp ) {
                        if(resp.ajax_success == false) {

                        } else {
                            jAlert('test', 'test');
                        }
                    }
                });     
    };
</script>

I get an alert, but there is no form submit. I checked that with Live http headers.

Why does it not submit the form?

Thats the problem. If i change it to form it submit it directly in the browser. I dont know why. — user1766080
– user1766080, Commented Nov 18, 2012 at 20:26

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

If it doesn't submit the form, because, the `#form` is not a form.

Change:

<div class="form-horizontal" id="form">

To:

<form class="form-horizontal" id="form">

You need to replace the resp.ajax_success with resp. Let us also know the response of the plugin.php?plugin=test URL.

If you don't want the <form> to get submitted on clicking on the Submit button, add a return false; at the end of the resolve function this way:

var resolve = function () {
    jAlert('test', 'test');
    $('#ajax_load').html('<a href="#" class="btn btn-mini btn-square tip" title="Reloading"><img src="templates/img/ajax-loader.gif" alt=""></a>');
    $.ajax( {
        url: 'plugin.php?plugin=test',
        type: 'post',          
        data: $("#form").serialize(),
        success: function( resp ) {
            if(resp.ajax_success == false) {

            } else {
                jAlert('test', 'test');
            }
        }
    });
    return false;
};

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 18, 2012 at 16:54

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

2 Comments

user1766080 Over a year ago

Thats the problem. If i change it to form it submit it directly in the browser. I dont know why..

Praveen Kumar Purushothaman Over a year ago

@user1766080 In the end of the resolve function, please add return false;, so that the form doesn't get submitted.

Mayank K. Swami · Accepted Answer · 2012-11-18 16:55:46Z

1

its because you haven't used the form you are serializing the data from div

<div class="form-horizontal" id="form">

not form the form

should be

<form class="form-horizontal" id="form">

answered Nov 18, 2012 at 16:55

Mayank K. Swami

57.3k23 gold badges130 silver badges148 bronze badges

2 Comments

user1766080 Over a year ago

Thats the problem. If i change it to form it submit it directly in the browser. I dont know why..

Mayank K. Swami Over a year ago

@user1766080 yo not subnmit directly use either return false; or preventdefault()

Collectives™ on Stack Overflow

Jquery form Ajax Submit

2 Answers 2

If it doesn't submit the form, because, the `#form` is not a form.

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

If it doesn't submit the form, because, the #form is not a form.

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

If it doesn't submit the form, because, the `#form` is not a form.