Ajax Post is not showing anything on the Firefox Console

JavaScript
1

Hi there when i use the following code to do a Ajax POST it seems to not give me a response on the console at all can anybody help.

<script type="text/javascript">
  $(function() {
        $(".submit").click(function() {
            $.ajax({
                url: 'https://apiuat.test.boipapaymentgateway.com/token?',
                type: 'POST',
                contentType: 'application/x-www-form-urlencoded',
                data: 'merchantId='. $('#merchantId').val(). '&format=json',
                success: function(result) {
                    console.log(result);
                },
                error: function(result) {
                    console.log('ERROR POSTING'. result);
                }
            });
        });
    });
  </script>
2

And what does your form look like?
Do you have an example online that can be seen?

3

@m_hutley the form is located at https://www.bgsolicitors.com/pay-online it needs to on submit post to that address with the form data and it returns a token I need to populate in the success function

4

Your code is spitting a syntax error at me on the line you omitted from this post.

Line 300 has a bad value for timestamp (namely, its missing a value entirely).

Fix your OTHER code, then try again.

5

Here is the fixed code i was passing in a php datetime variable by accident can you see it now?

<script type="text/javascript">
  $(function() {
        $(".submit").click(function() {
            var d = new Date($.now());
            var obj = { merchantId: "***", password: "***", action: "PURCHASE", timestamp: d, allowOriginURL: "*", amount: "500", channel: "*", currency: "*", country: "GB", merchantNotificationUrl: "*", rpPlanType: 4 }; 

            $.ajax({
                url: 'https://apiuat.test.boipapaymentgateway.com/token?',
                type: 'POST',
                contentType: 'application/x-www-form-urlencoded',
                data: JSON.stringify(obj),
                success: function(result) {
                    console.log(result);
                },
                error: function(result) {
                    console.log('ERROR POSTING'. result);
                }
            });
        });
    });
  </script>
6

You’re not seeing anything because you’re not suppressing the default behavior of the form submission, so you submit the form, the ajax fires, and then the page reloads because it’s submitted the form.

        $(".submit").click(function() {
            var d = new Date($.now());

=>

        $(".submit").click(function(e) {
            e.preventDefault();
            var d = new Date($.now());
1 Like
7

That makes sense to me although when adding that new section it seems to be still reloading the page and i am not seeing any post

8

Oh. Silly me, i didnt even notice the most glaring problem.

You’re binding to the wrong event.

Instead of binding to a Click event of the submit button, bind to a Submit event of the form.

9

so instead of (“.submit”).click to (“form”).submit?

10

Yup. Or “#PayOnlineForm” (in case you have multiple forms on the page, instead target the specific ID of the form you want.)

11

Wow thanks for that. It gave me the post but it is saying no parameters

12

@m_hutley When using console.log(JSON.stringify(obj)); it brings it back fine in the console log but when the post is happening the PARAMS section is empty and I am getting a 403 back.

13

In your other post, you were trying to send JSON. Here you’re sending urlencoded form data.

Which is the server expecting?

14

I believe its looking for a JSON. This url works and comes me a success so it could be both

15

Looks like it’s failing a CORS check. Your API doesn’t allow for cross site references. Which… sort of defeats the purpose of an API, really…

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.