What is the most effective way to save and access British pound symbols?

Every so often, I face this issue where I end up resorting to a messy workaround. There must be a correct way to handle it though, as it's common to work with UK pound symbols.

The dilemma is this: when the user inputs a UK pound symbol (£) into a textfield in the CMS and clicks 'save', the form field value gets escaped using the JavaScript escape() function and submitted via a jQuery AJAX POST request. However, somewhere along the process, the pound symbol turns into a question mark (possibly due to incorrect character encoding).

I can't simply convert the symbol to its HTML entity before saving to the database because when the values are fetched for display on the website's frontend, they are HTML encoded (resulting in the entity being displayed as is).

To finally resolve this confusion, what is the proper course of action here?

javascriptasp.netsql-serverajaxcharacter-encoding

Answer №1

Avoid using the escape function as jQuery automatically encodes data for you:

$.ajax({
    url: '/somepage',
    data: { param1: $('#textfield').val() },
    success: function() { }
});

Ensure that your application is configured for UTF-8 encoding:

<system.web>
    <globalization requestEncoding="utf-8" responseEncoding="utf-8" />
</system.web>

Don't forget to set UTF-8 encoding for HTML pages as well:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Answer №2

Using the escape() function to handle form field values may cause issues.

It's important to note that using escape is not the recommended method for creating URL parameter values. Instead, encodeURIComponent should be used as it handles encoding correctly, especially for non-ASCII characters like £.

If jQuery is being used, manual creation of POST data strings is not necessary. Simply pass in a lookup such as {x: '£'} and let jQuery handle the encoding process.

Issues may arise when storing and retrieving £ if Unicode is not handled properly in the application. Serving pages as UTF-8, utilizing UTF-8 IO, and using NATIONAL characters (NVARCHAR) in SQL Server are recommended practices.

Converting the symbol to its HTML entity before saving to the database is not ideal, as it results in HTML-encoded data upon retrieval for display on the front end of the website.

Storing HTML-encoded data in the database is not the correct approach to handling output escaping issues. All text should continue to be HTML-encoded before being displayed.

Answer №3

If you want to display the UK pound symbol in an HTML response, make sure to save it as &pound;.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

WebAPI provides a similar functionality to an array in JavaScript through the use of IQueryable

I have a WebAPI method that returns an IQueryable of a 'complex' object in the following format: [Route("api/INV_API/deptSelect")] public IQueryable<DEPTNAME_DESCR> GetDistinctDeptSelect([FromUri] string q) { if (q != null) ...

javascriptasp.netajaxasp.net-web-api2

Reorganizing Arrays in Javascript: A How-To Guide

I have an array in JavaScript called var rows. [ { email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f4f2e4f3b0c1e4f9e0ecf1ede4afe2eeec">[email protected]</a>' }, { email: '<a hre ...

javascriptarraysnode.js

Error message: Encountered JavaScript heap out-of-memory error during Azure DevOps React Container Production Build

I am facing challenges in building a React production Docker container with Azure DevOps pipelines. Despite upgrading my build environment and code, the pipeline failed to run successfully. After conducting some research, I attempted to add the "--node-fla ...

javascriptreactjsazure-devopsout-of-memorydocker-build

Tips for obtaining the iframe #document with cheeriojs?

I've been struggling to scrape the anime videos page [jkanime], specifically with extracting the mp4 video formats embedded in an iframe #document. Despite trying to use cheerio for querying, I've only managed to retrieve src links from Facebook ...

javascripttypescriptiframeweb-scrapingcheerio

Adjust the height of the list when including or excluding floated list items that are not in the final row

Within my ul are li elements with varying widths that wrap around inside a container into multiple rows. When removing an li element from the ul, I want the container's height to adjust dynamically in case a row is eliminated. If the removal happens ...

javascriptjqueryhtmlcss

It appears that React is not successfully transferring props to another component

Recently, I decided to follow a tutorial on creating a React application. However, I encountered a peculiar issue that has left me scratching my head. The problem arises when I attempt to pass data from one component to another. Despite successfully passi ...

javascriptreactjs

What is the alternative method of invoking a function within another function in React Native without utilizing a constructor?

Within my RegisterTaster function, I need to execute another function called endRegisterAlert. Since I'm not using a constructor and instead treating the class as a const in React Native, how can I achieve this? What is the best way to call the endRe ...

javascriptreactjsreact-nativefunction

When using jQuery and AJAX, the functions each, if, post, and .html work properly but occasionally erase data inexplicably

I have a PHP page containing FedEx and UPS tracking numbers stored in a MySQL database, which are displayed within DIVs with the class "trackingnumber". Using JavaScript, I loop through these divs to retrieve the ID and then send it to a PHP page that fetc ...

phpjqueryhtmlajax

Enable users to input their custom code and run it when the specified conditions are met

Currently, I am developing a Multi-tenant application that requires users to input their own code and run it under specific conditions. I have several ideas in mind, but I am unsure which approach would be most effective. All the proposed methods will ha ...

javascriptnode.jsexpressamazon-s3

What is the best method to display a component using a string in Vue 3?

I've been attempting to render a component from a string without success. Here are my codes: <template> <div v-html="beautifyNotification(notification)"></div> </template> <script> import { Link } from '@i ...

javascriptvue.js

Limit search to retrieve specific items based on pointer in JavaScript using Parse.com

BlogApp.Collections.Blogs = Parse.Collection.extend({ model: BlogApp.Models.Blog, query: (new Parse.Query(BlogApp.Models.Blog)).equalTo("author", "xMQR0A1Us6").descending('createdAt').limit(9) }); The code snippet above doesn't seem ...

javascriptparse-platformcollections

Why does IntelliJ IDEA 2016 show an error for using the [ngSwitch] attribute in this Angular2 template?

Every time I run precommit inspections, I receive a barrage of warnings even though everything seems to be functioning properly. The warnings include: Warning:(8, 58) Attribute [ngSwitch] is not allowed here Warning:(9, 42) Attribute [attr.for] is not all ...

javascriptintellij-ideaangular

Managing variables or properties that are not defined in ES6

Currently, I am utilizing Angular and Firebase Firestore in my project. However, the question posed could be relevant to Typescript and pure Javascript as well. The functionality of my application relies heavily on the data retrieved from Firestore. A sim ...

javascriptangularecmascript-6undefined

Is <form> tag causing code deletion after an ajax request?

I'm working on a form that looks like this: <form> <input class="form-control" id="searchField" type="text"> <button type="submit" id="searchUserButton">SEARCH BUTTON</button> </form> When I click on SEARCH BUT ...

javascriptjqueryhtmlajax

open a fresh modal by closing the existing modal using just one button

I am trying to implement a unique functionality in my bootstrap based project. I have one modal that I want to link to another modal, however, I am facing some challenges in achieving this. Currently, I am attempting to use the modal.close() and .modal(&ap ...

javascriptjquerytwitter-bootstrapmodal-dialog

Can you explain the functionality of that snippet of JavaScript code?

Can you figure out the value of r? How does it relate to Boolean operators and objects? var data = {x:123, y:456}; var r = data && data.x || 0; Update: Upon running the code snippet, I noticed that r consistently equals x. However, the reason behind thi ...

javascriptoop

What is the best method for combining ajax and php to perform a redirect?

I'm facing an issue with redirecting users from the login page to their profile page. I'm using ajax to validate the form, but upon successful login, the profile page is displayed on top of the index page. How can I ensure that the redirection ha ...

javascriptphpjqueryajax

How can we integrate the create.js.erb file into Spree_auth_devise?

I currently have a modal form for user sign-in: = form_for(Spree::User.new, :url => spree.create_new_session_path, :as => :spree_user, html:{id: 'log_in_user', :'data-type' => 'json'}, remote: true) do |f| = f.emai ...

ruby-on-railsajaxruby-on-rails-4spreespree-auth-devise

Click on a specific image in a table using Cypress with a specific source URL

I need help with a query for Cypress regarding a table of items, each item having active (blue) and not active (black) images. How can I set up this query? Below is an image of the table list: https://i.stack.imgur.com/74qzb.png And here is the HTML code ...

javascriptreactjscypresse2e-testing

Modifying webpage code

I am looking to develop a system where I can edit various elements such as the navbar, paragraphs, and images directly from a web page. I understand that this can be achieved with JavaScript, but I am facing the issue of my customizations reverting to defa ...

javascripthtmlcss