-1

I'm trying to put a euro sign inside an input but despite everything, I can't get it to work.

It's a plugin that display a slider for a form, I tried to add a div to contain this input inside the plugin file, but it doesn't work either.

Here's what I tried, but I'm not sure if it can work this way with javascript

var input = $( "#input_1_30" );
input.val( input() + "€" );
<div class="ginput_container"><input name="input_30" id="input_1_30" type="number" step="500" min="0" max="250000" data-value-visibility="show" data-connect="lower" value="25000" class="slider large" data-min-relation="" data-max-relation="" data-value-format="decimal_dot">

Thanks

reades
  • 7
  • 3
  • Does this answer your question? [html5 input for money/currency](https://stackoverflow.com/questions/24163889/html5-input-for-money-currency) – Jess Sep 03 '22 at 17:08
  • `input.val( input.val() + "€" );` – Pointy Sep 03 '22 at 17:09
  • [HTML text input field with currency symbol](https://stackoverflow.com/questions/2913236/html-text-input-field-with-currency-symbol) shows how to put in a currency symbol – Jess Sep 03 '22 at 17:10
  • @Jess, thank you, but every time I try to add a html element directly, the form bugs like crazy. – reades Sep 03 '22 at 17:12
  • @Pointy doesn't work either :( – reades Sep 03 '22 at 17:12
  • What *exactly* do you want to do? The code you posted does not make that clear. The *simplest* thing to do would be to put the Euro symbol to the left of the `` element. Because your element has type "number", that leading Euro sign will invalidate the values anyway, because the browser will only accept plain numbers. – Pointy Sep 03 '22 at 17:17
  • Also, things like "doesn't work" and "bugs like crazy" do not help in any way in understanding what the problem is. If you get errors, post the actual error text. If something wrong happens on the screen, describe it and what you wanted instead. – Pointy Sep 03 '22 at 17:18
  • @pointy I want to add a permanent euro sign inside the input, just after the number that is set by a slider. "Bugs like crazy" means the multi-form doesn't get me to the actual question where this slider and the input are, I'm blocked 2 questions back just when I try to add a
    inside the plugin php file. And when I told you it doesn't work, well nothing happen in fact.
     – reades Sep 03 '22 at 17:23
  • 1
    You can't put a permanent € inside the input. This will cause various problems with reading the data from the input. As I said in my answer, you should put the sign next to the input and then CSS style it to your liking. – Jess Sep 03 '22 at 17:26
  • is the `€` relevant? It does not seem to be where the error is? Replace with an `a`, and nothing changes. – ctrl-alt-delor Sep 03 '22 at 18:29

2 Answers2

0

As I said in my comment, I used HTML text input field with currency symbol

<label>€
    <input name="input_30" id="input_1_30" type="number" step="500" min="0" max="250000" data-value-visibility="show" data-connect="lower" value="25000" class="slider large" data-min-relation="" data-max-relation="" data-value-format="decimal_dot">
</label>

This isn't a job for JS. Place the € next to the form input in html and style it accordingly using CSS.

Edit
The benefit of using a label here is that clicking the contents of the label brings the input into focus, which other methods wouldn't do by default.

Jess
  • 177
  • 5
  • Thanks Jess, I tried this, but changing the php file of the plugin managing this prevent my multistep form to go on the page where this input is displayed. I'll have to try something else, but thanks – reades Sep 03 '22 at 17:31
  • @jess maybe sprinkle some css on it? `#input_1_30:after { content: ' € '; display: inline; }` – Pankaj Phartiyal Sep 03 '22 at 17:39
  • @reades Try asking a question about the plugin. I've no idea what you're using but maybe someone has tried this before with your specific set up. – Jess Sep 03 '22 at 17:45
  • @Jess You can just add this snippet as html inside PHP plugin `` Not sure if you can change plugin contents. – Pankaj Phartiyal Sep 03 '22 at 17:48
  • @PankajPhartiyal If you can't change the HTML of the plugin your suggestion would work in a CSS file instead. However, since we want the symbol to be on the left, I'd recommend the `::before` pseudo-element. – Jess Sep 03 '22 at 18:12
  • 1
    Using a label is better than a pseudo-element where possible, I've edited my answer to explain – Jess Sep 03 '22 at 18:20
  • The plugin doesn't allow me to add any after or before, nor any label and it's not supported anymore. So, we can affirm we are in a dead end. But thanks for providing me guidance – reades Sep 03 '22 at 19:13
0

I am not entirely sure what you want to do but what you can do is add the euro sign as a placeholder in the input field but it will disappear after a user adds their earnings.

If you still want add it in the placeholder attribute, you can do this in the input tag

<input placeholder="€"/>

I hope this helped and if you want to know more about placeholders and input tags you can check INPUT Placeholder Attribute (MDN).

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
Tsebo Ramonyalioa
  • 11
  • 1
  • w3schools is still in 2022 one of the worst websites you could send someone to learn best practices and development in general. Edited to provide a better resource. – Roko C. Buljan Sep 03 '22 at 18:25