APIs & Integrations

Not applicable

Manipulating Form Script jQuery

Hi there! I’m using hbspt.forms.create to create my form using jQuery and follwing this documentation: http://developers.hubspot.com/manipulating-forms-with-jquery but I get a error when i use onFormReady

This is the error that i get:

v2.js:4 Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.

And i can’t submit the form when i use thar source! I tried to find the solution but I’m not sure what the problem is.

0 Upvotes
27 Replies 27
3PETE
HubSpot Employee
HubSpot Employee

Manipulating Form Script jQuery

@Braulio_Barrera I didn’t receive any errors when running this code but it didn’t seem to fully to your intended effect. Are you still hitting an error with that code? One interesting think i ran into was that it seemed you were trying to remove from an already empty array.

$('form.hs-form > div.recaptcha')//I added this to check it before the remove
[]
$('form.hs-form > div.recaptcha').remove()
[]
 $('form.hs-form > div.hs_submit').remove();
[]
$('form.hs-form > fieldset').remove();
[]
0 Upvotes
Not applicable

Manipulating Form Script jQuery

Yes i’m still having the same error on the console and the submit button is not working on my form!

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Manipulating Form Script jQuery

@Braulio_Barrera Have you tried building the form out in the console in chrome? That way you can test your code out to make sure it is doing what you want or expect before trying to run it all at once and hitting the catch all error. There seem to be some logic issues if you are trying to remove items that aren’t even there.

0 Upvotes
Not applicable

Manipulating Form Script jQuery

@pmanca I did it and the problem persist, the same error!

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Manipulating Form Script jQuery

@Braulio_Barrera build out your code using the Chrome console line by line. This will allow you to see what line of code is throwing the error as well as the status of all your divs that you are adding. Your code is to complicated to run everything all at once. Let me know if you are running into an issue on similar lines of code as me.

0 Upvotes
Not applicable

Manipulating Form Script jQuery

@pmanca I found the error and it was this lines:

$('section#test3').append($('div.hs_recaptcha'));
$('section#test3').append($('div.hs_submit'));

When i tried to move those elements in to my section the code breaks and the fieldset that i was trying to remove I did it from the HubSpot form creating tool and the problem was fixed!

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Manipulating Form Script jQuery

@Braulio_Barrera Progress!!! Is everything working now or are we on to the next step in the process?

0 Upvotes
Not applicable

Manipulating Form Script jQuery

@pmanca Everything is working great now! Thanks for the support!

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Manipulating Form Script jQuery

@Braulio_Barrera Great I am glad!

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Manipulating Form Script jQuery

@Braulio_Barrera The issue still exists. When you run your code one line at a time and get to

 $('div#test4 > fieldset')[0].remove(); 

There is no fieldset in div#test4. Running the command
$('div#test4')
Still produces an empty form tag

<div id=​"test4" class=​"form-group">​</div>​

Which will result in the error that it can’t remove something that doesn’t exist.

0 Upvotes
Not applicable

Manipulating Form Script jQuery

I eliminated that part of the code: https://jsfiddle.net/brulio93/u0Lmpde6/27/ check this code!

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Manipulating Form Script jQuery

@Braulio_Barrera are you loading the hubspot script before you make the hbst call? Also the hbspt.forms.create is leveraging just JavaScript. The JQuery is used to manipulate it once it is created.

Here is an example of the first script to load.

0 Upvotes
Not applicable

Manipulating Form Script jQuery

@pmanca yes i’m loading the script before the hbst call! Before I’ve been working with the normal form module and is working fine, but i need to add some features and jQuery is the only way to do it and reading the link that i posted on this topic that was the way to do it using the onFormReady but the problem is when i submit the form! Not working at all!

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Manipulating Form Script jQuery

@Braulio_Barrera can you post your code?

0 Upvotes
Not applicable

Manipulating Form Script jQuery

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<!--[endif]---->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>// <![CDATA[
hbspt.forms.create({    
    portalId: 'xxxx',
    formId: 'xxxx',
    onFormReady($form, ctx){
          myFunction(); //Here goes my function!
   	}
  });
// ]]></script>

This is the structure of my code and i’m using this version of jQuery: jquery-1.11.0

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Manipulating Form Script jQuery

@Braulio_Barrera what are you trying to accomplish in your function?

0 Upvotes
Not applicable

Manipulating Form Script jQuery

I’m trying to create the required structure to the form, taking all the fieldsets and wrap it into a new section html element that I create with jQuery! That’s the behavior that i want to do, everything works great the function meets the requirements but the problem is when I click on submit button not work at all!

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Manipulating Form Script jQuery

does it throw an error in the console when you hit the button? or just nothing happens?

0 Upvotes
Not applicable

Manipulating Form Script jQuery

Yes the error this is the error:

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Manipulating Form Script jQuery

any chance you can get the full error. Looks like you are running your files through a minified tool. Which is good for creating light weight source files but terrible for troubleshooting.

0 Upvotes