2015-07-12 5 views
1

У нас есть сайт, размещенный в hubspot, мы используем свой собственный WYSIWYG для создания макетов, а затем создаем их с помощью css и js.Проблема с обработкой формы с помощью javascript

На домашней странице http://www.lspatents.com/ у него обычно была форма под заголовком «Начало работы здесь», у нее было около 10 вопросов и использовался javascript для разделения их на шаги, чтобы они могли поместиться в одной и той же области в текущем показанном пробеле коробка.

Он работал очень хорошо, пока два дня назад форма не исчезла и оставила ее с пустой областью, как вы можете видеть сейчас, и насколько я знаю, никто недавно не коснулся этого кода.

Вот код JS, который был использован для манипулирования формы

// 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(); 
      } 
     }); 

}); 

Насколько я мог сказать, разработчик использовал CSS, чтобы скрыть всю форму площади с дисплеем: нет; и использовал js выше, чтобы разделить вопросы на шаги и показать определенное число на каждом шаге.

Вы можете увидеть код, который вызывается в нижнем колонтитуле, поэтому нет никакой проблемы со ссылкой на файл .js, также если вы проверите элемент и отключите отображение: none; это объявлено для любого из div в форме героя, все вопросы отображаются, поэтому нет никакой проблемы с формой, так почему же она перестала работать?

бы признателен за любую помощь,

+0

Имеет ли форму, всегда используется Реагировать? Если нет, вам часто приходится обертывать элемент в содержащем div, чтобы иметь дело с тем, как реагировать может только один элемент верхнего уровня в блоке. Возможно, это смещение n-го типа или следующего().next() type navigation –

+0

Как я уже сказал, я не тот, кто создал это, поэтому я не могу точно сказать, но я думаю, что это было сделано с jquery, потому что это то, что Hubspot загружает по умолчанию, и я не могу найти звонок для библиотеки React где-то здесь – user2159384

+0

Его определенно используют React сейчас, потому что форма полна DIV с большим количеством таких вещей, как this data-reactid = ". 0.0: $ 2". Поэтому мой вопрос всегда был таким. Итак, что когда-либо генерирует форму, используется React. Как я уже сказал, порядок ионов, чтобы разместить два узла DOM на одном уровне в реакции, вам нужно обернуть их в контейнерный узел i (у реагирования может быть только один узел верхнего уровня для компонента. Возможно, это изменило разметку путем добавления дополнительных узлов. –

ответ

1

Эта линия больше не будет работать с наценкой ...

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

Там целый ряд дополнительных див, что обернуть наценку, размещенный там реагирует, React разместил серию DIV внутри формы, которые в настоящее время скрыты от существующего CSS (который я предполагаю, используемый, чтобы быть просто серия СТЭП)

CSS-что скрывает узлов:

.hero-form form>div, .hero-form form>.step { 
    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> 

Вашего JQuery добавит дисплей: блок в DIV с классом «шагом» битого обыкновением изменять родительский DIV (вставленный React), который по-прежнему препятствует вашему узлу от того, показано на рисунке.

Вам нужно изменить JQuery, чтобы вызвать show() на родительском(), который содержит «шаг» div, который вы хотите показать.

+0

Спасибо за подробный ответ, и я вроде получаю то, о чем вы сейчас говорите, но будьте любезны, чтобы предложить, как я могу это сделать с минимальными изменениями? Я не очень кодер, поэтому я понимаю, что вы говорите, я не знаю, как его применить. – user2159384

+0

Ну, когда вы получаете элемент, который хотите показать, например, $ ('. hero-form form .step: nth-of-type (2)').показать(); то вместо этого вы просто получите родительский элемент и покажете его, например, $ ('. hero-form form .step: nth-of-type (2)'). parent(). show(); –

0

Пожалуйста, проверьте консоль браузера анс см у вас есть проблемы при загрузке формы:

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

и это ошибка:

net::ERR_NAME_RESOLUTION_FAILED 

Это лучше вас измените свой DNS на что-то вроде 8.8.8.8 и посмотрите, существует ли проблема или нет.

+0

Вот что я получил {«status»: «error», «message»: «Требуется обратный вызов», «requestId»: «ff8351aa-9731-438e-ac9e-b25c5c476a7a»} – user2159384

+0

Я считаю, что у вас проблемы с 'https: // hubspot.com'. Пожалуйста, проверьте эту услугу. – Trix

+0

Уже сделали, и они не могли помочь, надеялись найти ответ здесь – user2159384

Смежные вопросы