The Hindi text is appearing correctly on the webpage, however it was mistakenly inputted into the MySQL database

Question

The Hindi text is appearing correctly on the webpage, however it was mistakenly inputted into the MySQL database

My current issue involves using an ajax request to send a value from the client-side to the server-side in order to update a MySQL database. The specific challenge arises when dealing with text in Hindi language (हिन्दी मतलब जाने). When I alert the text on the client-side, it displays correctly as shown above, but after processing the server-side request, it gets inserted into the database like this: Ã Â¤Â¹Ã Â¤Â¿Ã Â¤ÂनÃ Â¥Ââ?¬ Ã Â¤Â®Ã Â¤Â¤... However, if I use JavaScript to alert request.responseText, it shows the correct text as हिन्दी मतलब जाने. Subsequently, upon reloading the page, the previously updated value appears incorrectly as ¤Â¹Ã Â¤Â¿Ã Â¤ÂनÃ Â¥Ââ?¬ Ã Â¤Â®Ã Â¤Âत..., while values that were not updated continue to display correctly as हिन्दी मतलब जाने.

In my client-side code, I have included:

var requestDatah = "values=" +
escape(valued) +"&texts=" +
encodeURIComponent(texted);
    request1h[k].setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8;");
    request1h[k].send(requestDatah);

And for the server-side handling, I'm setting the PHP header like this:

<?php header("Content-Type: text/html; charset=utf-8");
mysqli_set_charset($con,"utf8");

I am seeking assistance on how to rectify this issue and ensure proper storage and display of the Hindi text in the MySQL database.

javascript mysql ajax unicode utf-8

Answer 1

Answer №1

Be sure to select the utf8 character set and utf8_general_ci collation.

It's important that the collation of the field where Hindi text will be stored is set to utf8_general_ci.

If you need to alter a table field, use this command:

 ALTER TABLE `<table_name>` CHANGE `<field_name>` `<field_name>`   VARCHAR(100) 
 CHARSET utf8 COLLATE utf8_general_ci DEFAULT '' NOT NULL;

Make sure to run this statement when connecting to the database:

mysql_set_charset('utf8');

For example:

 //set character set
 mysql_set_charset('utf8');

 //insert Hindi text
 mysql_query("INSERT INTO ....");

When retrieving data:

 //set character set
 mysql_set_charset('utf8');

//select Hindi text
 mysql_query("SELECT * FROM ....");

Before displaying any Unicode text (like Hindi) on a webpage, remember to set the content type with a meta tag:

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

For instance:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Example Unicode</title>
   </head>

     <body>
    <?php echo $hindiText; ?>
    </body>
   </html>

Update:

  The function mysql_query("SET CHARACTER SET utf8") has been replaced by mysql_set_charset('utf8');

This is now recommended way to change the charset. Avoid using mysql_query() for setting it (e.g. SET NAMES utf8). Refer to http://php.net/manual/en/function.mysql-set-charset.php*

Answer 2

Be sure to select the utf8 character set and utf8_general_ci collation.

It's important that the collation of the field where Hindi text will be stored is set to utf8_general_ci.

If you need to alter a table field, use this command:

 ALTER TABLE `<table_name>` CHANGE `<field_name>` `<field_name>`   VARCHAR(100) 
 CHARSET utf8 COLLATE utf8_general_ci DEFAULT '' NOT NULL;

Make sure to run this statement when connecting to the database:

mysql_set_charset('utf8');

For example:

 //set character set
 mysql_set_charset('utf8');

 //insert Hindi text
 mysql_query("INSERT INTO ....");

When retrieving data:

 //set character set
 mysql_set_charset('utf8');

//select Hindi text
 mysql_query("SELECT * FROM ....");

Before displaying any Unicode text (like Hindi) on a webpage, remember to set the content type with a meta tag:

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

For instance:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Example Unicode</title>
   </head>

     <body>
    <?php echo $hindiText; ?>
    </body>
   </html>

Update:

  The function mysql_query("SET CHARACTER SET utf8") has been replaced by mysql_set_charset('utf8');

This is now recommended way to change the charset. Avoid using mysql_query() for setting it (e.g. SET NAMES utf8). Refer to http://php.net/manual/en/function.mysql-set-charset.php*

The Hindi text is appearing correctly on the webpage, however it was mistakenly inputted into the MySQL database

Answer №1

Similar questions

Sequencing asynchronous operations with node.js using sails.js

Creating a CLI TypeScript library capable of generating complete files similar to NestJS: A step-by-step guide

Utilizing AJAX Requests in Google Extensions: Understanding the Basics and Maximizing Performance

What is the best way to generate a cookie in svelte and retrieve it later on?

What is the best way for a parent component to establish communication with a child component in a Vue.js application

Select a specific date range from a form and export CSV file containing MySQL data within that range

Turn on Orientation in UIWebview during Javascript Evaluation

The edge is showcasing a .jpg image in the form of a square randomly colored

Error in Javascript: Attempted to save content of div element to text file, but encountered a TypeError as null is not recognized

What is the best way to toggle between tabs using a checkbox that is checked or unchecked?

Can a ng-click function be named as a string?

JavaScript loop not functioning properly to show modals when button is clicked

Learn the process of integrating VueJS with RequireJS

Enhance your web form with the Bootstrap 4 tags input feature that allows users to add tags exclusively

What is the best method for converting a variable with HTML content into a printable string?

Incorporate Voice Recognition into an HTML document

Troubleshooting the issue of React not properly loading dynamically fetched HTML data using dangerouslySetInnerHTML

Setting default values for route parameters in JavaScript

What is the process of instantiating a service constructor in Angular 2?

Enable seamless SCSS inclusion in Vue components through automatic importing