PDA

View Full Version : Add commas to the price input field



Ivan Amador
July 2, 2015, 03:28 AM
Hello!

How can I add commas to the price input field while I am typing the price range in the search form? ie.: $10,000,000

Thanks!

Wei Hong
July 11, 2015, 12:23 PM
me too wanting to know this. Is this achievable

Ivan Amador
July 12, 2015, 01:12 AM
How can we implement something like this:

http://jsfiddle.net/2LAcj/

Or another method to accomplish the same result?

Wei Hong
August 19, 2015, 07:04 AM
so I guess its not possible then?

Wei Hong
August 19, 2015, 07:11 AM
I also found this code here it might give some idea how to implement this:
http://jsfiddle.net/yWTLk/348/

Viktor
August 19, 2015, 10:16 AM
Hello All,

Upload file price format to js files and connect it.

And also add this code:



<script type="text/javascript">
{literal}
$(document).ready(function(){
$('#field_id').priceFormat({
prefix: '',
thousandsSeparator: ',',
limit: false,
centsLimit: 0,
centsSeparator: ''
});
})
{/literal}
</script>


save and check it.

Wei Hong
August 19, 2015, 11:06 AM
Hi Viktor,

Thank you for getting back to us. I have uploaded the file and called it by adding the code in header.tpl of my template folder:


<script type="text/javascript" src="{$rlTplBase}js/price_format.js"></script>

I also added your code in footer.tpl of my template before the </body>


<script type="text/javascript">
{literal}
$(document).ready(function(){
$('#field_id').priceFormat({
prefix: '',
thousandsSeparator: ',',
limit: false,
centsLimit: 0,
centsSeparator: ''
});
})
{/literal}
</script>

I saved and check but nothing happened. Did i do something wrong?

Viktor
August 20, 2015, 03:09 AM
Because you should set original field id instead of: field_id

Wei Hong
August 20, 2015, 12:59 PM
Because you should set original field id instead of: field_id

Hi Viktor,

I have changed the following code in footer.tpl, but still no effect.


<script type="text/javascript">
{literal}
$(document).ready(function(){
$('price').priceFormat({
prefix: '',
thousandsSeparator: ',',
limit: false,
centsLimit: 0,
centsSeparator: ''
});
})
{/literal}
</script>

Also tried this:

<script type="text/javascript">
{literal}
$(document).ready(function(){
$('#price').priceFormat({
prefix: '',
thousandsSeparator: ',',
limit: false,
centsLimit: 0,
centsSeparator: ''
});
})
{/literal}
</script>

Viktor
August 21, 2015, 04:59 AM
Hello Wei Hong,

Are you sure with id for your price field? Is it 'price'?
try to use:


$('input[name="f[price][from]"]').priceFormat({

because your price field doesn't have any ids.

Wei Hong
August 21, 2015, 08:56 AM
I tried to replace with your suggest coded too but it still doesnt work. I check using inspect element and it shows the id of the price listing field is "sf_field_price" so I changed using the code


<script type="text/javascript">
{literal}
$(document).ready(function(){
$('#sf_field_price').priceFormat({
prefix: '',
thousandsSeparator: ',',
limit: false,
centsLimit: 0,
centsSeparator: ''
});
})
{/literal}
</script>

But it still doesnt work

Viktor
August 21, 2015, 09:26 AM
Would you please send me page where do you want it. I will check and try to solve it.

Wei Hong
August 21, 2015, 09:39 AM
Thanks Viktor, message sent

Viktor
August 22, 2015, 06:48 AM
Hello Wei Hong,

I found 2 errors with it:

1. You should move <script src="your_site/scripts/tiengViet.js"></script><script>tiengViet.method=4; tiengViet.displayMode = 1</script>
<script type="text/javascript" src="your_site/templates/FiLORSP/js/price_format.js"></script>
40 lines below.

Then use this code:



<script type="text/javascript">
{literal}
$(document).ready(function(){
$('div#sf_field_price input.numeric').priceFormat({
prefix: '',
thousandsSeparator: ',',
limit: false,
centsLimit: 0,
centsSeparator: ''
});
})
{/literal}
</script>


save and check again.

Wei Hong
August 22, 2015, 07:42 AM
thanks Viktor, it works great now. But I notice that I cant no longer input cent. For example: $1.99 or $2.50. Only $199 or $250. I then went back to the example that I posted earlier and they are also can't input cent. Is there anyway that I can fix it?

Wei Hong
August 22, 2015, 08:08 AM
Also is there anyway if I can add this effect to the search box in search page as well?

Viktor
August 22, 2015, 09:27 AM
Hello Wei Hong,

Please see in js code line: centsLimit: 0,
set 2 and try again.

Mousa Lotfi
May 6, 2018, 05:43 PM
Helloو

I have several fields of price type.
I used the codes as follows, but did not work.

1) Uploaded the price_format.js in js folder in my template
2) I added below code in footer.tpl of my template before the </body>


<script type="text/javascript">
{literal}
$(document).ready(function(){
$('input[name="f[price][from]"]').priceFormat({
prefix: '',
thousandsSeparator: ',',
limit: false,
centsLimit: 0,
centsSeparator: ''
});
})
{/literal}
</script>

3) And also adding this code in header.tpl of my template folder( in line 58 before {rlHook name='tplHeaderCommon'}):

<script type="text/javascript" src="{$rlTplBase}js/price_format.js"></script>

please guide me.

Ed
May 6, 2018, 08:55 PM
Hi Mousa,

let me see it here, please wait

Ed
May 6, 2018, 09:04 PM
First step:


Send the JavaScript file into the folder: /home/public_html/yoursite/templates/your_template/js/

Ed
May 6, 2018, 09:49 PM
I'm using jquery_number.js, do you want to use it? if the answer is yes I'll leave it here attached. I am waiting...

Ed
May 6, 2018, 10:07 PM
First step:


Send the JavaScript "jquery.number.js" file into the folder: /home/public_html/yoursite/templates/your_template/js/

Second step:


Locate and open the file: /home/yoursite/public_html/templates/your_template/controllers/add_listing/step_form.tpl

Below the line:


{addJS file=$rlTplBase|cat:'js/form.js'}

add the line:


{addJS file=$rlTplBase|cat:'js/jquery.number.js'}

Ed
May 6, 2018, 10:24 PM
Read the post above, in a while I am going to post the Third step (3), please wait ...

Ed
May 6, 2018, 10:43 PM
Third step:

With the "step_form.tpl" file opened, locate the code:


$(function(){
flForm.auth();
flForm.typeQTip();
flForm.fields();
flForm.accountFieldSimulation();
flForm.fileFieldAction();

// TODO
flynaxTpl.locationHandler();
flynaxTpl.realtyPropType();
flynax.qtip();
hashTabs();
});

Add below the line: hashTabs();


$('#price').number(true, '2', ',', '.');

The end result should be this:

$(function(){
flForm.auth();
flForm.typeQTip();
flForm.fields();
flForm.accountFieldSimulation();
flForm.fileFieldAction();

// TODO
flynaxTpl.locationHandler();
flynaxTpl.realtyPropType();
flynax.qtip();
hashTabs();
$('#price').number(true, '2', ',', '.');
});

Save and close.

I'm going to post Fourth step(4) in a moment ...

Ed
May 6, 2018, 11:09 PM
Fourth step:

On your site open the file:

/home/public_html/yoursite/templates/your_template/tpl/blocks/field.tpl

below the line:

{assign var='currency' value='currency'|df}

edit the line:

<input class="numeric" type="text" name="f[{$field.Key}][value]" size="8" maxlength="15" {if $fVal.$fKey.value}value="{$fVal.$fKey.value}"{/if} />

you just need to replace class="numeric"

per ...

id="price"

The end result is:

<input id="price" type="text" name="f[{$field.Key}][value]" size="8" maxlength="12" autocomplete="off" {if $fVal.$fKey.value}value="{$fVal.$fKey.value}"{/if} />

Save and clear your browser's cache and see if it's working.

Ed
May 6, 2018, 11:25 PM
Reread what I posted above because some things have been updated!

In my script the price setting looks like this:

5.000,00 (five thousand)
5.700,00 (five thousand and seven hundred)

but you can change the configuration through the line:


$('#price').number(true, '2', ',', '.');

Ed
May 7, 2018, 12:04 AM
Documentation, demos and download:

https://www.customd.com/articles/14/jquery-number-format-redux

https://github.com/customd/jquery-number

Thanks

Wei Hong
May 7, 2018, 06:35 AM
Thanks Ed, did it messup with your saved search criteria? I notice that when I look at my alert page, which show my saved search criteria, the price show two ',,' like 2,,000 or xx,,xxx, xx is just number. Everything else works fine.

Mousa Lotfi
May 7, 2018, 09:28 AM
Hello,
Thanks Ed very much for your complete description and guidance.

Your method worked, but I have two problems:
1) I do not need a cent separator, with the change this code

$('#price').number(true, '2', ',', '.');
to

$('#price').number(true, '0', '.', ',');
still separates two digits.
2) I have some type of price field that works only for the main case where the key is price, for other items that do not work the price1 key, price2, and so on.

I would like the price of 123456789 to be typed as 123,456,789 without cent separator.
Thanks, if these tips are resolved.

Viktor
May 7, 2018, 10:58 AM
Hello Mousa,

For other price fields try to use this code:


$('input[id*="price"]').number(true, '0', '.', ',');

Mousa Lotfi
May 7, 2018, 02:34 PM
Thanks Viktor,

It works well now
How to enable this feature for search boxes?
I did not work your code in the search files.

Ed
May 7, 2018, 03:46 PM
Hello Wei and Mousa,

Instead of "id" you can use "class" example:


$ ('.price').number(true, '0', '.', ',');
or

$ ('input.price').number(true, '0', '.', ',');
or

$('input[class*="price"]').number(true, '0', '.', ',');

if are class you should assign the class to the tag, example:

<input class="price" type="text" name="f[{$field.Key}][value]" size="8" maxlength="12" autocomplete="off" {if $fVal.$fKey.value}value="{$fVal.$fKey.value}"{/if} />

I suggest reading the script documentation:

https://www.customd.com/articles/14/jquery-number-format-redux
and
https://github.com/teamdf/jquery-number

I prefer use dropdown menu in price fields.

see on my website:

www.sitecar.com.br

Thanks

Mousa Lotfi
May 8, 2018, 08:25 AM
hello,

Thanks Ed,

Please guidance how to use the drop down menu in price fields (at the MAX and Min) same your site.

Wei Hong
May 8, 2018, 08:37 AM
Hello Wei and Mousa,

Instead of "id" you can use "class" example:


$ ('.price').number(true, '0', '.', ',');
or

$ ('input.price').number(true, '0', '.', ',');
or

$('input[class*="price"]').number(true, '0', '.', ',');

if are class you should assign the class to the tag, example:

<input class="price" type="text" name="f[{$field.Key}][value]" size="8" maxlength="12" autocomplete="off" {if $fVal.$fKey.value}value="{$fVal.$fKey.value}"{/if} />

I suggest reading the script documentation:

https://www.customd.com/articles/14/jquery-number-format-redux
and
https://github.com/teamdf/jquery-number

I prefer use dropdown menu in price fields.

see on my website:

www.sitecar.com.br

Thanks

Dear Ed,

I tried with class method, but it still doesnt work with search box, in search page php, in search box, advanced box, in horizontal box, etc. I guess I need to change in other file other than step_form.tpl right?

Ed
May 8, 2018, 03:46 PM
Hello Wei,

You need to repeat the procedure I posted, in the other pages, search, saved searches, etc ... to see if everything is right, check the source code of the page, see if the script is linked.

Ed
May 8, 2018, 04:03 PM
hello,

Thanks Ed,

Please guidance how to use the drop down menu in price fields (at the MAX and Min) same your site.

Hi Mousa,

I will explain how to change the price field from "Text" to "Dropdown", it is quite simple, it was the great Viktor who explained to me, I will post here in the forum shortly.

Wei Hong
May 8, 2018, 08:11 PM
Hello Wei,

You need to repeat the procedure I posted, in the other pages, search, saved searches, etc ... to see if everything is right, check the source code of the page, see if the script is linked.

Hi Ed,

I tried with field_search.tpl and field_search_box.tpl but the structure is different :( I tried to copy the code in step_form.tpl tried changing here and there and no luck :(

Ed
May 8, 2018, 09:37 PM
Hello Wei

I'm using Dropdown / Select for the price fields in search, I'll even explain here in the forum how to make that change.

But just find the correct file and load the JavaScript that will probably work, I'll try to do this here in my testings environment, however can take a while, can be?

Wei Hong
May 9, 2018, 06:42 AM
Hello Wei

I'm using Dropdown / Select for the price fields in search, I'll even explain here in the forum how to make that change.

But just find the correct file and load the JavaScript that will probably work, I'll try to do this here in my testings environment, however can take a while, can be?

I don't use the drop down. I very appreciate it if you have the time to look at it however the time you can. Thank you very much

Ed
May 9, 2018, 08:14 PM
hello,

Thanks Ed,

Please guidance how to use the drop down menu in price fields (at the MAX and Min) same your site.


Hi Mousa,

I posted an article showing how to change the price field for menu, see the links below:

http://forum.flynax.com/showthread.php?4808-Search-Price-in-DropDown-(4-6-2)
and
http://forum.flynax.com/showthread.php?1965-Modification-to-the-frontend-search-engine

Thanks