Manipulating Form Script jQuery


#1

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.


#2

@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.


#3

@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!


#4

@Braulio_Barrera can you post your code?


#5
<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


#6

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


#7

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!


#8

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


#9

Yes the error this is the error:


#10

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.


#11

This is the full error:

That’s minified by HubSpot when I publish the new file with the source!


#12

@Braulio_Barrera is there any chance you can post the contents of your myFunction? That way I can read through it and see if I can reproduce it on my end?.


#13

I create this fiddle: https://jsfiddle.net/brulio93/u0Lmpde6/9/

You can check there!


#14

@Braulio_Barrera I am starting to get lost around the code below that you posted for me. When are you making a tech div or where are you pulling it from. I hit my first error from trying to remove the first field from it. Also your comment says you are removing it from test4 section yet the code you posted only creates section1,2,3 and not a section 4. Please help me understand.

 $('div#tech > fieldset')[0].remove(); //Remove the first fieldset child on the test4 section

  $('#tech').append('<span class="col-md-6 col-sm-6"><legend class="hs-field-desc">*Check at least one thecnology</legend></span>');
  
  $('form.hs-form > div.hs_recaptcha').remove();
  $('form.hs-form > div.hs_submit').remove();
  $('form.hs-form > fieldset').remove();
  $('div#tech > span > div > div > select').removeClass('hs-input');
  $('div#tech > span > div > div > select').addClass('form-control');
  $('div#tech > span > div > div > select').addClass('combobox');

#15

The section 4 is inside the section 3 is a div and it’s created in this line:

 $('<section id="test" class="item"></section>' +
    '<section id="test2" class="item" style="display: none;"></section>' +
    '<section id="test3" class="item" style="display: none;"><div class="container"><div class="col-md-10 col-sm-12 well well-sm tech-section"><div id="test4"  class="form-group"></div></div></div></section>').prependTo('.hs-form');

The third section has 3 divs in it and the lastone it’s the section4!

And in this line:
$('div#tech > fieldset')[0].remove();

Instead of div#tech is a div#test4


#16

@Braulio_Barrera I still hit an error at that line running $(‘div#test4 > fieldset’)[0].remove(); I updated it to test4 as you mentioned above. If I run your code line by line at that point $(‘div#test4’) spits out

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

There doesn’t appear to be anything inside the div which makes sense as the error I am receiving is

VM86:1 Uncaught TypeError: Cannot read property ‘remove’ of undefined(…)

Can you make sure you are actually inserting form elements into test 4 in order to remove them. What exactly are you trying to remove from test 4?


#17

@pmanca I update the fiddle: https://jsfiddle.net/brulio93/u0Lmpde6/20/ can you check it?


#18

@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.


#19

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


#20

@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();
[]