Вопрос или проблема
Я использую плагин Calculated Form Fields для сайта на WordPress. Я уже создал нужную форму, но теперь мне нужно динамически добавить рассчитанную цену из формы в качестве URL-параметра, когда нажимается кнопка под формой.
Сайт использует Visual Composer, и это HTML кнопки:
<a class="nectar-button medium accent-color has-icon regular-button" target="_blank" href="https://na2.docusign.net/member/PowerFormSigning.aspx?PowerFormId=df6fbf3d-6f5d-4c48-8965-f4fa810099f4&Institutional_Buyer_AnnualPrice=15000"><span>Купить Kuali Ready</span></a>
Я хочу изменить часть URL “Institutional_Buyer_AnnualPrice=15000”, чтобы она добавлялась/изменялась динамически в зависимости от цены в поле. Вот мой текущий JavaScript-код:
(function($) {
document.getElementsByClassName("nectar-button").onclick = function() {
var link = document.getElementsByClassName("nectar-button");
var price = $('#fieldname9_1').val();
link.setAttribute('href','https://na2.docusign.net/member/PowerFormSigning.aspx?PowerFormId=df6fbf3d-6f5d-4c48-8965-f4fa810099f4&Institutional_Buyer_AnnualPrice=" + price);
return false;
}
})(jQuery);
Вот ссылка на страницу: https://www.kuali.co/products/kuali-ready-online-purchasing/
Я уже пробовал решения из 3-4 вопросов на ту же тему, которые нашел на Stackoverflow, но ничего из этого не работает, поэтому я написал вопрос на wordpress.stackexchange.com
p.s. Пожалуйста, игнорируйте тот факт, что работающий js-код повлияет на все кнопки, созданные с помощью Visual Composer, на данный момент.
Попробуйте это (чистый JavaScript):
var allBtns = document.getElementsByClassName('nectar-button');
function preventDefaultOpenCustomUrl(event)
{
event.preventDefault();
var price = document.getElementById("fieldname9_1").value;
var url="https://na2.docusign.net/member/PowerFormSigning.aspx?PowerFormId=df6fbf3d-6f5d-4c48-8965-f4fa810099f4&Institutional_Buyer_AnnualPrice=" + price;
window.open(url);
}
;
for (i = 0; i < allBtns.length; i++) {
allBtns[i].addEventListener("click", preventDefaultOpenCustomUrl);
}
это добавляет событие ко всем кнопкам с этим classname,
с использованием Jquery:
(function ($) {
$('.nectar-button').on('click', function (e) {
e.preventDefault();
var price = $('#fieldname9_1').val();
var url="https://na2.docusign.net/member/PowerFormSigning.aspx?PowerFormId=df6fbf3d-6f5d-4c48-8965-f4fa810099f4&Institutional_Buyer_AnnualPrice=" + price;
window.open(url);
});
})(jQuery);
если у вас нет доступа к HTML, чтобы добавить ID, можете использовать больше тегов/классов в selector, чтобы выбрать эту конкретную кнопку.
Если вы загружаете это на $( document ).ready(), использование Visual Composer может приводить к слишком раннему выполнению JS. Можете попробовать выполнить ваш JS, используя $( window ).on( 'load', function() );?
Ответ или решение
Для динамического изменения атрибута href тега <a> в WordPress с использованием плагина Calculated Form Fields, вам нужно учесть несколько ключевых моментов. В этом ответе мы подробно обсудим, как изменить URL-адрес, добавив расчетную цену из вашей формы, когда пользователь нажимает на кнопку.
Шаг 1: Понимание вашего HTML-кода
Вы привели следующий код кнопки:
<a class="nectar-button medium accent-color has-icon regular-button" target="_blank" href="https://na2.docusign.net/member/PowerFormSigning.aspx?PowerFormId=df6fbf3d-6f5d-4c48-8965-f4fa810099f4&Institutional_Buyer_AnnualPrice=15000">
<span>Purchase Kuali Ready</span>
</a>Здесь вы хотите динамически изменять часть URL, соответствующую цене (Institutional_Buyer_AnnualPrice=15000), на базу отправленных запрашиваемых данных.
Шаг 2: Ваш существующий код JavaScript
Ваш текущий код имеет некоторые ошибки. Вот исправленная версия вашего JavaScript-кода, которая корректно изменяет ссылку динамически:
(function($) {
$(document).ready(function() {
$('.nectar-button').on('click', function(e) {
e.preventDefault(); // Предотвращает стандартное поведение кнопки
var price = $('#fieldname9_1').val(); // Получаем значение поля с ценой
var url = `https://na2.docusign.net/member/PowerFormSigning.aspx?PowerFormId=df6fbf3d-6f5d-4c48-8965-f4fa810099f4&Institutional_Buyer_AnnualPrice=${price}`; // Формируем новый URL
window.open(url); // Открываем новый URL
});
});
})(jQuery);Пояснения к коду
-
Предотвращение стандартного поведения: Используется
e.preventDefault()для предотвращения перехода по исходному URL-адресу. Это важно, чтобы избежать нежелательных переходов, пока мы не подготовили новый URL. -
Получение данных из формы: Используется
$('#fieldname9_1').val()для извлечения значения из поля формы. Убедитесь, что вы используете правильный идентификатор для вашего поля. -
Формирование нового URL: Мы создаем новый URL, подставляя цену в нужное место. Использование шаблонных строк (обрамленных обратными кавычками) позволяет легко вставлять переменные.
-
Открытие нового URL:
window.open(url)открывает новосформированный URL в новой вкладке.
Шаг 3: Обратите внимание на совместимость с Visual Composer
Поскольку вы используете Visual Composer, убедитесь, что ваш JavaScript-код выполняется после полной загрузки страницы. Если вы заметили, что ваш код не работает, попробуйте использовать:
$(window).on('load', function() {
// Ваш код тут
});Это гарантирует, что ваш скрипт будет выполнен только после полной загрузки всех элементов страницы.
Заключение
Произведенные изменения позволят динамически обновлять цену в URL при нажатии на кнопку. Убедитесь, что вы протестировали все возможные сценарии, чтобы гарантировать, что пользовательский опыт остаётся на высоком уровне. Если у вас возникли дополнительные вопросы или нужна помощь, не стесняйтесь задавать их.
Это решение не только исправляет вашу проблему, но и обеспечивает гибкость для будущих изменений, если структура вашей формы изменится.