Issue with handling a form using javascript

Question

We have a website hosted at hubspot, we use their native WYSIWYG to design layouts then style them with css and js.

On the homepage http://www.lspatents.com/ it used to have a form under the "Get started here" title, it had around 10 questions, and used javascript to split them to steps so they can fit in the same area on the currently shown blank box.

It was working just fine till two days ago the form disappeared and left it with a blank area as you can see now, and as far as i know no one has touched this code recently.

Here is the js code that was used to manipulate the form

 // Hero Form
$(window).load(function() {

        // disable autocomplete to fix bug
        $('.hero-form form').attr("autocomplete", "off");

        $('.hero-form .hs-richtext').each(function() {
          $(this).nextUntil('.hs-richtext').wrapAll('<div class="step" />');
        });

        // Hide Loading icon
        $('.hero-form form').css('background', 'none');
        $('.hero-form form .step:nth-of-type(2)').show();

        // First Step to Second Step
        $('.step').find('.hs-richtext').change(function() {
            $('.step:nth-of-type(2)').hide().next().next().fadeIn();
        });

        // Second Step to Third Step
        $('.step').find('.hs-input').change(function() {
            var names = {};
            $(':radio').each(function() {
                names[$(this).attr('name')] = true;
            });
            var count = 0;
            $.each(names, function() { 
                count++;
            });
            if ($(':radio:checked').length === count) {
                $('.step:nth-of-type(4)').hide().next().next().fadeIn();
            }
        });

});

As far as i was able to tell, the developer used css to hide the whole form area with display:none; and used the js above to split the questions to steps and show a certain number in each step.

You can see the code being called in the footer so there is no problem with the link to the .js file, also if you inspect the element and disable the display:none; that's declared for any of the divs within the hero-form all questions get displayed, so there is no problem with the form either, so why has it stopped working?

Would appreciate any help,

Has the form, always used React ? If not then you often have to wrap element in a containing div to deal with the way react can only have one top level element in a block. This may have shifted the nth of type or next().next() type navigation — Code Uniquely
– Code Uniquely, Commented Jul 12, 2015 at 21:18
Like i said I'm not the one who created this, so i can't tell for sure, but i think it was done with jquery because that's what Hubspot loads by default, and i can't find a call for the React library anywhere here — user2159384
– user2159384, Commented Jul 12, 2015 at 21:34
Its definitely using React now because the form is full of DIV's with lots of stuff like this data-reactid=".0.0:$2". Hence my question, has it always been this way. So what ever is generating the form is using React. Like i said ion order to place two DOM nodes at the same level in react you need to wrap them in a container node i(react can only have one top level node for a component. This may have altered the markup by adding additional nodes. — Code Uniquely
– Code Uniquely, Commented Jul 13, 2015 at 10:45

Code Uniquely · Accepted Answer · 2015-07-13 11:03:41Z

1

This line will no longer work with your mark-up...

$('.hero-form form .step:nth-of-type(2)').show();

There are a number of additional divs that wrap your mark-up, placed there by react, React has placed a series of div inside your form which are being hidden by your existing CSS (which I assume used to just be a series of STEP's)

The CSS that hides the nodes is :

.hero-form form>div, .hero-form form>.step {
  display: none;
}

The nodes that are being hidden with display:none

<div data-reactid=".0.0:$1">
  <div class="hs-richtext" data-reactid=".0.0:$1.0">
    <hr>
  </div>
  <div class="step">
    <div class="hs_patent field hs-form-field" data-reactid=".0.0:$1.$patent">
      <label placeholder="Enter your Do you have a patent?" for="patent-9fc8dd30-a174-43bd-be4a-34bd3a00437e_2496" data-reactid=".0.0:$1.$patent.0">
        <span data-reactid=".0.0:$1.$patent.0.0">Do you have a patent?</span>
        <span class="hs-form-required" data-reactid=".0.0:$1.$patent.0.1">*</span>
      </label>
    <div class="hs-field-desc" style="display:none;" data-reactid=".0.0:$1.$patent.1">
  </div>
</div>

Your JQuery will add display:block to the DIV with the class 'step' bit wont alter the parent DIV (inserted by React) which still prevents your node from being shown.

You need to alter you JQuery to call show() on the parent() that contains the "step" div you wish to show.

answered Jul 13, 2015 at 11:03

Code Uniquely

6,3834 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2159384 Over a year ago

Thanks for the detailed reply, and i kind of get what you're talking about now, but would you be kind enough to suggest how i can do this with minimal changes? I'm not much of a coder so although i understand what you're saying i don't know how to apply it

Code Uniquely Over a year ago

Well when you get an element that you want to show for example $('.hero-form form .step:nth-of-type(2)').show(); then you just get the parent element in addition instead and show it for example $('.hero-form form .step:nth-of-type(2)').parent().show();

Peyman Mohamadpour · Accepted Answer · 2015-07-12 22:03:17Z

0

Please check your browser console ans see you have problem loading this form:

https://forms.hubspot.com/embed/v3/form/457238/9fc8dd30-a174-43bd-be4a-34bd3a00437e

and this is the error:

net::ERR_NAME_RESOLUTION_FAILED

It's better you change your DNS to something like 8.8.8.8 and see if the problem still exists or not.

edited Jul 12, 2015 at 22:03

answered Jul 12, 2015 at 21:31

Peyman Mohamadpour

18k24 gold badges94 silver badges102 bronze badges

3 Comments

user2159384 Over a year ago

Here's what i got {"status":"error","message":"A callback is required","requestId":"ff8351aa-9731-438e-ac9e-b25c5c476a7a"}

Peyman Mohamadpour Over a year ago

I believe you have problems with https://hubspot.com. please check the service.

user2159384 Over a year ago

Already did and they couldn't help, was hoping to find an answer here

Collectives™ on Stack Overflow

Issue with handling a form using javascript

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related