CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcjson
user570715
user570715

Reputation: 639

submit JSON through form submit via jquery

I am trying to submit form through Jquery in MVC. If I remove form element, submit works. what is wrong with my code?

<form id="Send" method="POST">
    <fieldset>
        <button type="button"  id="test" />
    </fieldset>    
</form>
<script type="text/javascript">
    var data = {........}

    $(function () {
        $("#test").click(function() {
            $.ajax({
                type: "POST",
                url: "http://localhost:0000/api/test",
                data: JSON.stringify(data),
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',

            });
        });
    });

</script>

Upvotes: 2

Views: 2376

Answers (4)

Lu32
Lu32

Reputation: 840

If you dont want to remove the form tags change the button tag for an anchor with the looks of a button (css) and bind the click event:

<a id = "test" href = "#">test</a>

Upvotes: 0

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107508

Your page, for some reason not shown in your code, is probably behaving like it would when any form is submitting (by GETting or POSTing to its action attribute). You can, however, prevent this behavior. First, I would do your work when the form itself submits, not in a button click event. This will require two changes. (1): Change your button back to type="submit":

<button type="submit" id="test" />

And (2): Handle the "submit" event of the form instead of the "click" event of the button:

    $("#Send").submit(function(e) {
        // here's where you stop the default submit action of the form
        e.preventDefault();
        // Now execute your AJAX
        $.ajax({
            type: "POST",
            url: "http://localhost:0000/api/test",
            data: JSON.stringify(data),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8'
        }).done(function(response) {
            // handle a successful response
        }).fail(function(xhr, status, message) {
            // handle a failure response
        });
    });

Advantages of this approach:

  1. You correctly handle the submission process no matter how it was initiated (enter button, button click, programmatically, etc.
  2. You don't have to care what your button is called
  3. The logic would be bound to an event that you would expect it to be

Upvotes: 3

blue
blue

Reputation: 1949

Use serialize() on the form like:

var data = $("#Send").serialize();

Edit:

Or, if you're absolutely sure you have a server side script that would handle RAW POST you could turn your form data into object and stringify that instead, like:

var data = {
    'input_1': $("#Send_input_1").value(),
    'input_2': $("#Send_input_2").value(),
    ...
    'input_N': $("#Send_input_N").value()
};
data = JSON.stringify(data);

Upvotes: 0

Yogu
Yogu

Reputation: 9445

You need to cancel the default form submission, otherwise the browser will do a POST request to the current url with the form data.

$('#Send').submit(function(e) {
    e.preventDefault(); // prevents the default submission
    $.ajax(/* ... */);
]);

Upvotes: 0

Related Questions