add html+text to input of type submit using javascript

Question

I am using a smartsearchbox webpart, and I am adding the text value of its submit input using javascript, like this:

$("#p_lt_ctl02_pageplaceholder_p_lt_ctl03_SmartSearchBox1_btnSearch").val('{%GetResourceString("search")%}');

now I want to append to the value a search icon using fontawesome library, how can I achieve that with javascript?

You can't. Text input values are plain text. You will have to use a background image. — BenM, Feb 19 '18 at 17:05

score 0 · Answer 1 · answered Mar 19 '18 at 08:53

0

you can use the value property to set the button text as the following

$("#p_lt_ctl02_pageplaceholder_p_lt_ctl03_SmartSearchBox1_btnSearch").value = '{%GetResourceString("search")%}';

answered Mar 19 '18 at 08:53

Binary

112
4

score 0 · Accepted Answer · answered Mar 22 '18 at 17:58

You could do it using the unicode version of the icon. You would also need to add the "fa" class unless you have already applied the fontawesome font family via another style/class or method:

$("#p_lt_ctl02_pageplaceholder_p_lt_ctl03_SmartSearchBox1_btnSearch").addClass("fa").val("\uf002 {%GetResourceString("search")%}");

Solution based on Font-awesome, input type 'submit'

See this answer for potentially adding a custom class instead of using "fa" that would prevent your site font from being overridden for the button text https://stackoverflow.com/a/11703274/1435302

add html+text to input of type submit using javascript

2 Answers2