Form API twice submission


#1

Hello dear Hubspotters!
I am trying to use the forms api. Everything is pretty much ok. I am able to submit the form however every time I do a submission in the form analytics I see double submission with the first one being empty, the second one being the submission with the info I provided. What’s your opinion on this? Why does this happen?

Here are my codes

$('.sec2_s8_cta a').click(function() {
            window.Hayk.name = $('.persona_name').val()
            window.Hayk.email = $('.customer_email').val()
            window.Hayk.company = $('.persona_company_name').val()
            window.Hayk.website = $('.website_name').val()
            $('.question').each(function(index) {
                window.Hayk.answers.push($(this).find('.answer.act .text').text())
            })
            console.log(window.Hayk)
            var data = {
                hs_context: {
                    hutk: window.Hayk.utk
                },
                email: window.Hayk.email,
                firstname: window.Hayk.name,
                'how_much_are_you_willing_to_spend_to_improve_your_online_marketing_': window.Hayk.answers[0],
                'what_is_your_average_gross_profit_per_new_customer_': window.Hayk.answers[1],
                'how_much_of_your_business_is_from_new_customers_vs_existing_customers_': window.Hayk.answers[2],
                'how_well_do_you': window.Hayk.answers[3],
                'how_many_online_advertising_experts_do_you_currently_employ_': window.Hayk.answers[4],
                'what_is_the_current_conversion_rate_on_your_website_': window.Hayk.answers[5],
                company: window.Hayk.company,
                website: window.Hayk.website,
                score: window.Hayk.score
            }
            console.log('data to send', data)
            $.ajax({
                    method: 'POST',
                    contentType: 'application/json',
                    url: 'myphpurl',
                    data: data
                }).success(function(response) {
                    console.log('sendtophp ajax response', response)
                })
                .error(function(error) {
                    console.error('sendtophp ajax error', error)
                })

    })

I send my data to a php file on my server which then submits the form. Here is the php

<?php
  header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
  header("Access-Control-Allow-Origin: *");
  $json = file_get_contents('php://input');
  sleep(2);
  $endpoint = 'https://forms.hubspot.com/uploads/form/v2/463211/4f9574d5-a64d-4705-be24-42416f4b2bb9';

  $ch = @curl_init();
  @curl_setopt($ch, CURLOPT_POST, true);
  @curl_setopt($ch, CURLOPT_POSTFIELDS, $json);
  @curl_setopt($ch, CURLOPT_URL, $endpoint);
  @curl_setopt($ch, CURLOPT_HTTPHEADER, array(
      'Content-Type: application/x-www-form-urlencoded'
  ));
  @curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  $response    = @curl_exec($ch); //Log the response from HubSpot as needed.
  $status_code = @curl_getinfo($ch, CURLINFO_HTTP_CODE); //Log the response status code
  @curl_close($ch);
  echo $status_code . " " . $response;
?>

#2

@Hayk Nothing in your code jumps out at me at the moment. Can you log your network traffic in the browser and see if there are any requests being sent out from there? Maybe you can determine if you are calling your PHP script twice.


#3

Hi Peter, the problem was that when I clicked on my submission button the ajax request was sent twice (because of CORS it sends a preflight request with empty data) I just changed my php to check $json to not be empty.


#4

@Hayk Perfect so are we all set then? That is a good find thanks for posting about the preflight request. Our APIs don’t allow CORS requests as well for the record.