Изменение значения скрытого поля на значение флажка при отправке с использованием JavaScript внутри контактной формы 7 Плагин Wordpress - PullRequest
Новая
       10

Изменение значения скрытого поля на значение флажка при отправке с использованием JavaScript внутри контактной формы 7 Плагин Wordpress

0 голосов
/ 31 мая 2018

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

У меня есть следующие поля-флажки в моей контактной форме 7 на странице Wordpress.У меня есть Mailchimp for Wordpress, обновляющая группу, которая отражает интересы посетителей.Я пытаюсь получить значение группы, назначенной скрытому полю ввода, чтобы встроенная функция почты и другие интеграции Zapier могли использовать значения процентов.В большинстве этих приложений отсутствует поддержка групповых функций внутри Mailchimp.

Форма html выглядит следующим образом: 

<p>
    <label>Which Are You Most Interested In?</label></br>
    <label>
        <input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox" 
value="ac2ed8233d" 
        required=""><span>Interest 1</span>
    </label>
    <label>
        <input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox" 
value="s3g2c99k0x"
        required=""> <span>Interest 2</span>
    </label>
    <label>
        <input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox" 
value="k9n6xp3s26"
        required=""> <span>Interest 3</span>
    </label>
</p>

<input type="hidden" id="int-in" name="int-in"</input>

-

Я пробовал нескольковарианты этого, включая некоторые встроенные вещи, помещая код в верхнюю или нижнюю часть страницы, помещая его в дополнительный раздел контактной формы 7, помещая его в плагин сценариев в WordPress, пытаясь понять, является ли он массивом, и пытаяськод для выталкивания из массива (больше по моей голове) и многое другое.Вот что я в основном пытаюсь сделать, хотя и неправильно через этот код, потому что, очевидно, он не работает ...

JS: 

    $('form').submit(function() {
    $('input[name="#mc4wp-INTERESTS[gs8o25e9bc] . 
    []"]').change(function(){ 
    $('#int-in').val($('input[name="#mc4wp-INTERESTS[gs8o25e9bc] . 
    []"]').val());
    });

-

В сети не так много поддержки групп Mailchimp, и я подозреваю, что функции групп большинства приложений контактов, даже с функцией платных плагинов.Mailchimp for Wordpress имеет наибольшую поддержку, какую я только мог найти, и вам все еще нужно немного поработать, чтобы заставить его работать.Я так готова узнать, что, черт возьми, работает вместо всего, что я пробовала!Заранее спасибо.Я очень ценю это!

1 Ответ

0 голосов
/ 31 мая 2018

Wordpress отключает ярлык $, поэтому вам нужно либо заменить $ на jQuery, либо обернуть свой код: 

(function($){
  // your code here
})(jQuery);

Плюс, name этих флажков несодержит хэштегЯ также понятия не имею, что вы делаете с этими точками и переносами строк.Кроме того, вы назначаете обработчик onchange только при отправке формы, но вы хотите, чтобы он работал с самого начала.

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

var selector = 'form input[name="mc4wp-INTERESTS[gs8o25e9bc][]"]';

(function($) {
  $(selector).change(function() {
    var interests = Array.from(document.querySelectorAll(selector))
      .filter(e => e.checked).map(e => e.value).join(",");
    $('#int-in').val(interests);
    console.log("set to", interests);
  });
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <label>Which Are You Most Interested In?</label><br/>
    <label>
        <input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox" 
value="ac2ed8233d"><span>Interest 1</span>
    </label>
    <label>
        <input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox" 
value="s3g2c99k0x"> <span>Interest 2</span>
    </label>
    <label>
        <input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox" 
value="k9n6xp3s26"> <span>Interest 3</span>
    </label>
  </p>

  <input type="hidden" id="int-in" name="int-in">
  <input type="submit">
</form>
...