Non-Hubspot form & onclick function

[Ventje]

Hi there,

I'm trying to implement a non-hubspot form into Hubspot. It works correctly, until I try to add a onclick function with a separate mail.js.

					    <div class="buttoncontainer" id="formcontainer">
					       <form id="myform" method="post" action="https://ventje.nl/bevestiging-kennismaking" class="myform">					        
					            <div class="buttonwrap">
					                <div class="summarybutton" id="label1">
					                    <p class="field">
					                        <label for="firstname" class="formlabel">
            							        
            						        </label>
            						        <input type="text" id="firstname" class="input" value="" name="firstname"
            							            data-required_mark="required" data-field_type="input" data-original_id="firstname" placeholder="Voornaam *" style="padding:5px;">
            							</p>
					                </div>
					            </div>
					            <div class="buttonwrap">
					                <div class="summarybutton" id="label2">
					                    <p class="field">
					                        <label for="lastname" class="formlabel">
            							        
            						        </label>
            						        <input type="text" id="lastname" class="input" value="" name="lastname"
            							            data-required_mark="required" data-field_type="input" data-original_id="lastname" placeholder="Achternaam *" style="padding:5px;">
            							</p>
					                </div>
					            </div>					            
					            <div class="buttonwrap">
					                <div class="summarybutton" id="label3">
					                    <p class="field">
					                        <label for="phone" class="formlabel">
            							        
            						        </label>
            						        <input type="text" id="phone" class="input" value="" name="phone"
            							            data-required_mark="required" data-field_type="input" data-original_id="phone" placeholder="Telefoonnummer" style="padding:5px;">
            							</p>
					                </div>
					            </div>
					            <div class="buttonwrap">
					                <div class="summarybutton" id="label4">
					                    <p class="field">
					                        <label for="email" class="formlabel">
            							        
            						        </label>
            						        <input type="email" id="email" class="input" value="" name="email"
            							            data-required_mark="required" data-field_type="input" data-original_id="email" placeholder="E-mail *" style="padding:5px;">
            							</p>
					                </div>
					            </div>
					    </div>
                    <div class="buttoncontainer formbutton">
                        <button onclick="dataLayer.push({'event': 'configurator-submit'});" id="submitButton" form="myform">AANVRAAG PRIJSINDICATIE</button>
					</div>

That is the form, the mail.js is called, and looks like this:

$(document).ready(function () {
    $(document).on('click', '.scroll-buttons>ul>li.buy, .formbutton', function (e) {

        var re = /\S+@\S+\.\S+/;
        if($('#firstname').val() != "" && $('#lastname').val() != "" && $('#phone').val() != "" && re.test($('#email').val())) {
            e.preventDefault();
            console.log("Prevent Default!");
        } else {
            return;
        }

        let product;
        // Product 1 or 2
        if ($('#product01_selection').hasClass('selected')) {
            product = "Woonkamer, keuken, stroom en buitenset";
        }
        if ($('#product02_selection').hasClass('selected')) {
            product = "Camperinrichting & Volkswagen Transporter";
        }

        var data = "Ventje inrichting:\n" + product + "\n"
        let summary_list = $(".overzicht-sum").children('li').not(':first');
        for (x of summary_list) {
            data += x.innerText;
            console.log(x.innerText);
        }
        

        $.ajax({
            url: 'mail.php',
            type: 'POST',
            dataType: 'json',
            data: {
                'data': data,
                'firstname': $('#firstname').val(),
                'lastname': $('#lastname').val(),
                'phone': $('#phone').val(),
                'email': $('#email').val(),
            },
            success: function(e) {
                if(e['success'] != undefined) {
                    if(e['success'] == "true") {
                        $('#myform').submit();
                    }
                }
            }
        });
    });
});

When I delete the ".formbutton" addition in the 2nd line, it does work. 

What am I doing wrong?

Regards,

Corné

[Kevin-C]

Hey @Ventje 

Are you getting any errors in the console on click of the button?

[Ventje]

@Kevin-C Nope! All works. Including the mail.php triggered with the ajax function. Only problem is that Hubspot doesn't pick up the entries, whereas it does work without the .formbutton onclick-function.