#html #forms #coldfusion #font-awesome
#HTML #формы #coldfusion #шрифт-awesome
Вопрос:
У меня есть кнопка ввода HTML в моем приложении ColdFusion, которая отправляет форму. Я пытаюсь включить значок Font Awesome вместе с текстом кнопки. Единственный способ, которым я могу указать Юникод без выдачи ошибки, — это удвоить символ хэша.
<input class="stylized_btn" tabindex="0" type="submit" name="save2"
id="save2" value=" amp;##xf0c7; Save This Ticket"
onclick="disableSaveButtonClick(event);" />
Однако вместо того, чтобы показывать значок, он просто показывает квадрат. 
Похоже, что это причуда, когда ColdFusion не распознает мой символ Юникода из-за двойного хэштега, но это всего лишь предположение. У меня есть другие элементы button на моей странице, которые правильно отображают значки Font Awesome, поэтому я знаю, что это не проблема с моим определением шрифта. Я не уверен, где именно я здесь ошибаюсь. Кто-нибудь может помочь пролить свет?
Обновлен код с использованием тега button.
Кнопка HTML
<button id="saveOnlyButton" name="save" class="stylized_btn">
<i class="fas fa-save"> </i> Update Ticket
</button>
JavaScript
window.onload=function(){
var SaveButton = document.getElementById("saveOnlyButton");
SaveButton.addEventListener("click", disableSaveButton);
}
//Save Button Logic
function disableSaveButton() {
console.log("Save button clicked");
document.getElementById("submitType").value = "save";
document.getElementById("saveOnlyButton").innerHTML = "Please Wait...";
document.getElementById("saveOnlyButton").disabled = true;
document.getElementById("autoSumForm").submit();
}
Ответ №1:
Вы пробовали использовать тег BUTTON? (Мы перестали использовать кнопки ввода: отправки.)
Обычно мы используем <button type =“submit”><i class=“fa fa-lg fa-my-icon”></i > Label Text</button> , но вы должны уметь использовать объект HTML.
Комментарии:
1. К вашему сведению: это стандартный шрифт Awesome, а не ColdFusion.
Ответ №2:
Вместо элемента ввода используйте кнопку. Поведение кнопки по умолчанию заключается в отправке формы.
<button class="stylized_btn btn-default" tabindex="0" id="save2" onclick="disableSaveButtonClick(event);"><i class="fa fa-save"></i> Save This Ticket</button>
(Я добавил btn-default на случай, если вы используете bootstrap)
Комментарии:
1. Я действительно думал об этом, так как это было бы проще. Но у меня есть скрипт, который отключает кнопку после нажатия, поэтому форма не может быть отправлена дважды. У меня возникли проблемы с воспроизведением этого для элемента button вместо традиционной отправки. Я могу опубликовать эту проблему в другом вопросе. Спасибо за ваш вклад.
2. Я думаю, это потому, что у вас есть встроенное событие, прикрепленное к элементу. Использование прослушивателей событий — лучший путь, но это означало бы внесение дополнительных обновлений в существующий JS-код. Мы устанавливаем значение disabled в true для кнопок при отправке формы, и это работает, поэтому должно быть что-то еще. (После отключения для элемента не должно выполняться никаких событий.)
3. Вы на 100% правы, использование кнопки намного проще и гибче. Я также смог выяснить, как отключить кнопку с помощью прослушивателя событий. Я обновил свой вопрос своими правками. Спасибо.
Ответ №3:
Это не причуда в ColdFusion, как вы предполагаете. ColdFusion ведет себя точно так, как задумано. Причина, по которой вам нужен двойной хэш ## , заключается в том, что всякий раз, когда вы находитесь в <cfoutput> теге, ColdFusion видит одиночный хэш # как начало переменной или вычисляемого выражения. Когда он не находит закрывающий хэш, он выдает ошибку.
Бывают случаи, когда вы намереваетесь использовать хэш для отображения, а не для вычисления переменной или выражения, как в вашем случае. Таким образом, решение состоит в том, чтобы использовать двойной хэш ## и escape-символ, чтобы сообщить CF, что вы хотите просто отобразить его как один хэш на отображаемой странице.
Если вы используете инструменты разработчика вашего браузера и проверяете элемент, он будет корректно отображаться в виде одного хэша. Другое решение вашей проблемы — убедиться, что вы удалили раздел кода с кнопкой ввода из <cfoutput> блока.
Самое главное, вы не должны выполнять отладку, просматривая исходный код CF, вы должны отлаживать это, просматривая отображаемую страницу, используя инструменты разработчика вашего браузера или опцию браузера «просмотр исходного кода». Если вы можете, пожалуйста, обновите свой первоначальный вопрос, предоставив скриншот элемента «проверить элемент» вашей кнопки отправки.