jQuery - how to escape unicode character from checkbox value selector?

Question

I found a plenty of examples on how to escape characters that in css mean something else. However I couldn't find a way to escape or ignore characters from other languages.

This is the code I have:

$("input[value='aaabbbcccż uuuąaaę']").change(function() {
  console.log('change event fired');
  if (this.checked) {
    $('#text-block').fadeIn('slow');
  } else {
    $('#text-block').fadeOut('slow');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first">
        <input type="checkbox"
                name="choose-what-pl[]" value="aaabbbcccż uuuąaaę">
                <span class="wpcf7-list-item-label">Option A</span></span>
<span class="wpcf7-list-item"><input type="checkbox"
                name="choose-what-pl[]" value="aaaa bbb  ę dsfsd jiojuoi sdfds lłdsóą">
                <span
                class="wpcf7-list-item-label">option X</span></span>
<span class="wpcf7-list-item last">
            <input type="checkbox" name="choose-what-pl[]"
                value="safas łsdfs xc óxzc ż">
                <span class="wpcf7-list-item-label">Option Y</span></span>
</span>ł

This code is not working. However if I change the html and I give a value of aaabbbcccz uuuaaae then the following code works:

    $("input[value='aaabbbcccz uuuaaae']").change(function(){
    if (this.checked) {
        $('#text-block').fadeIn('slow');
    }
    else {
        $('#text-block').fadeOut('slow');
    }                   
});

Here is the sample HTML:

The problem is that I cannot change the HTML and I have to reach to the checkboxes only via value because it's the only changing element among a huge number of checkboxes.

I've also checked the different selectors * ~ ^, etc. But I couldn't find any that could help.

The website where the form and .js file are hosted do have in the head:

<meta charset="UTF-8" />

Please suggest how I can resolve that.

I think this could help you: https://stackoverflow.com/questions/4618434/how-to-convert-non-english-characters-to-english-using-javascript — Diogenis Siganos, Feb 07 '20 at 19:05
I'm a bit confused why CSS is mentioned in the question since you're using jQuery, but nonetheless, please provide a sample of the HTML on which the given code does not work. — Heretic Monkey, Feb 07 '20 at 19:06
@Bonfire this seems to change the values, but then if it changes them, the comparison with the DOM wouldn't work, because in the DOM there are such characters. — Pikk, Feb 07 '20 at 19:12
Is it failing to select the checkbox or you are not able to fadein/fadeout? Instead of .checked you should use .prop('checked') — Nawed Khan, Feb 07 '20 at 19:15
@NawedKhan No, `.checked` is appropriate on `this`. `.prop('checked')` would be appropriate on `$(this)`, but there is no reason to make a jQuery object just to check a simple Boolean property. — Heretic Monkey, Feb 07 '20 at 19:16
There is no element with an ID of "text-block" in your sample HTML, but if there were, the code would work. I suspect there is a mismatch between the encoding of your JavaScript file and your HTML file. — Heretic Monkey, Feb 07 '20 at 19:18
The "text-block" is much below in a huge form. It is absolutely unnecessary for the sake of this problem. The problem is that it doesn't find the checkbox with value `aaabbbcccż uuuąaaę`. The rest of the code is working perfectly. — Pikk, Feb 07 '20 at 19:22
I edited your code to add a `console.log` in the event handler. As you can see, it fires when the checkbox is checked, showing that it does indeed find the checkbox with that value. — Heretic Monkey, Feb 07 '20 at 20:35

score 1 · Answer 1 · answered Feb 07 '20 at 20:19

The selection with special character is not an issue. Here is the working code using your sample. You can see/verify I am selecting the checkbox with their values, as you wanted, and showing appropriate message. Hence the selection is not the issue.

$(function() {


  $("input[value='aaabbbcccż uuuąaaę']").on('change', function() {    
    $('#output').text('1st Checked: ' + $(this).prop('checked'));
  });
  
  $("input[value='aaaa bbb  ę dsfsd jiojuoi sdfds lłdsóą']").on('change', function() {    
    $('#output').text('2nd Checked: ' + $(this).prop('checked'));
  });
  
  $("input[value='safas łsdfs xc óxzc ż']").on('change', function() {    
    $('#output').text('3rd Checked: ' + $(this).prop('checked'));
  });
  
});

#output{margin-top:20px;padding-top:10px;border-top:1px solid #ccc;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first">
    <input type="checkbox" name="choose-what-pl[]" value="aaabbbcccż uuuąaaę">
    <span class="wpcf7-list-item-label">Masaz
      tantryczny</span></span>
  <span class="wpcf7-list-item"><input type="checkbox" name="choose-what-pl[]" value="aaaa bbb  ę dsfsd jiojuoi sdfds lłdsóą">
    <span class="wpcf7-list-item-label">Warsztat masażu tantrycznego 2-dniowy</span></span>
  <span class="wpcf7-list-item last">
    <input type="checkbox" name="choose-what-pl[]" value="safas łsdfs xc óxzc ż">
    <span class="wpcf7-list-item-label">Voucher na masaż jako
      prezent</span></span>
</span>
<div id="output"></div>

I see here it works. But in my site it does not. If I open the js file in the browser I see the word "aaabbbcccż" changed to "aaabbbcccÅ¼" — Pikk, Feb 07 '20 at 20:36

score 0 · Accepted Answer · answered Feb 07 '20 at 20:43

0

I found the solution. I had:

<script src="../skrypty.js"></script>

and I had to change it to:

<script src="../skrypty.js" charset="UTF-8"></script>

answered Feb 07 '20 at 20:43

Pikk

2,343
6
25
41

jQuery - how to escape unicode character from checkbox value selector?

2 Answers2