Search code examples
javascripthtmlcssfrontendmarkup

Change presentation of <input> field

I have an <input> field in a form as below:

<input
    class="form-control"
    data-filter="M"
    id="id_options_price"
    name="options_price"
    tabindex="141"
    type="text"
    value="121000.00">

How can I change the presentation of the input, that allow to display this field on some page as 121 000,00 (with space between digit group) keeping the value and type attributes as they are.

Is there a way to do it with JS?

Solution

  • "Is there are some way to do it with JavaScript?"

    Supposing it's refering to the object duplication method, yes, i can show you in JQuery.

    We only need to insert a new element just after our input : 

    $( "#id_options_price" ).after( "<div class='price'>"+$("#id_options_price").val()+"</div>" );

    and to hide the original input : 

    $( "#id_options_price" ).hide();

    Of course, theses line should be called after the page is loaded, i. e. :

    $( document ).ready(function() {
     $( "#id_options_price" ).after( "<div class='price'>"+$("#id_options_price").val()+"</div>" );
    $( "#id_options_price" ).hide();
});