Using jquery POST method to send form

Question

I'm making a chrome extension for users on the site ROBLOX to allow users to search items through the extension and to then buy them through the extension. The format for buying items on this site is that you can request a page similar to " http://m.roblox.com/Catalog/VerifyTransfer?userAssetOptionId=1641474&expectedPrice=500 " in a new tab and click the buy button. Instead of having to open a new tab for the user to have to click the "buy" button, id like to be able to send a POST request with the form in order to buy the item (Thus avoiding having to open a new tab).

The problem that i'm facing is that I really have no clue as to how to send information with the POST request nor what to send. I have a feeling that the __RequestVerificationToken input value is what to send but i'm not entirely sure.

Because you need an account to view that VerifyTransfer page above, here's the html for the form on the page:

<form action="/Catalog/ProcessTransfer" method="post">
<div class="ui-block-a">
    <input name="__RequestVerificationToken" type="hidden" value="xMOEGwHMBW8FKJNOMcb7aG1PgIYgmHFYf3WpXXu3deDCNoL_jMwy0odXkz65pNSPkvRAfrmBH6i8vpJb33q9bs2aM2ybu0fDOMeFJJX3bs-NXaut9SmFBRK360tPQ6JBXLQFYxnqQVskNJevP0ukZQVY1no1">
    <input data-val="true" data-val-number="The field CurrencyType must be a number." data-val-required="The CurrencyType field is required." id="CurrencyType" name="CurrencyType" type="hidden" value="1">
    <input data-val="true" data-val-number="The field AssetID must be a number." data-val-required="The AssetID field is required." id="AssetID" name="AssetID" type="hidden" value="0">
    <input data-val="true" data-val-number="The field UserAssetOptionID must be a number." data-val-required="The UserAssetOptionID field is required." id="UserAssetOptionID" name="UserAssetOptionID" type="hidden" value="1641474">
    <input data-val="true" data-val-number="The field ExpectedPrice must be a number." data-val-required="The ExpectedPrice field is required." id="ExpectedPrice" name="ExpectedPrice" type="hidden" value="500">
    <input type="submit" value="Buy Now" data-theme="d">
</div>
</form>

An example on how to send the request would be much appreciated!

EDIT-

This is what I'm trying (which doesnt seem to work):

$.ajax({
  type: "POST",
  url: "http://m.roblox.com/Catalog/ProcessTransfer",
  data: //the value held in '__RequestVerificationToken'
});

Answer 1

Rename your form <form name="form"> , then add the following function:

$('form[name="form"]').on('submit', function() {

    var formData = $(this).serializeArray();

    $.post({
                url: "http://m.roblox.com/Catalog/ProcessTransfer",
                data: formData

    }).success( console.log('data has been sent')

      .error( console.log('there was an error');
});

This should do the trick.

Answer 2

Try This

$('input#submitButton').click( function() {
    $.ajax({
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: datatopass,
        success: function(data) {
                   alert(data); //... do something with the data...
                 }
    });
});

Answer 3

You have to capture the event Submit() on the form then post the data using Ajax and after the data is sent to cancel the event or the form will still submit:

$('form[name="form"]').submit(function( event ) {
    // Post the data using Ajax
    $.ajax({
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: datatopass,
        success: function(data) {
                   alert(data); //... do something with the data...
                 }
    });
    // Prevent the defautl submit
    event.preventDefault();
});