CODEWITHSUNDEEP
javascriptjquery
Youssef Boudaya
Youssef Boudaya

Reputation: 133

How to escape single quote in input value?

I have an input whose value I want to get when it's checked. It has a single quote in the value.

When I run my JS I get this error in the console:

Uncaught Error: Syntax error, unrecognized expression: .Oiseaux d'eau"

$('.group_oiseau').on('change', function() {
  /*var group_oiseau = $('input[type=checkbox][name=group_oiseau]:checked').attr('value');*/

  $("." + $(this).find('input').val()).each(function() {
    if ($(this).hasClass('hidden')) {
      $(this).removeClass('hidden');
      console.log($(this).hasClass('hidden'));
    } else {
      $(this).addClass('hidden');
      console.log($(this).hasClass('hidden'));
    }
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="checkbox group_oiseau">
  <input type="checkbox"  class="grey checkbox" value="Oiseaux d'eau" name="group_oiseau[]" required>
  Oiseaux d'eau
  <div class="checkbox-cust"></div>
</label>

Upvotes: 0

Views: 1299

Answers (4)

Moob
Moob

Reputation: 16204

Based on the comments so far it seems that what you are trying to achieve is not really the escaping of an apostrophe but rather the showing and hiding of elements based on checkbox selection. If these dependent elements are children or siblings then you can do this with just CSS. No JS required: 

label {display:inline-block; border:1px dotted grey; vertical-align:top;}
.checkbox-cust {display:none;}
input[type='checkbox']:checked ~ .checkbox-cust {display:block;}
<label class="checkbox group_oiseau">
     <input type="checkbox"  class="grey checkbox" value="Oiseaux d'eau" name="group_oiseau[]" required>
        Oiseaux d'eau
     <div class="checkbox-cust">custom stuff 1</div>
 </label>
 <label class="checkbox group_2">
     <input type="checkbox"  class="grey checkbox" value="test" name="test" required>
        test
     <div class="checkbox-cust">custom stuff 2</div>
 </label>

Upvotes: 1

htmler
htmler

Reputation: 380

Fix your name attribute a little, remove subscript [] if not in use:

<input type="checkbox"  class="grey checkbox" value="Oiseaux d'eau" name="group_oiseau" required>

Then this JQuery code will work fine:

// Get value of radio which is checked
var value = $('input[name=group_oiseau]:checked').val();

// Print that value in the console
console.log(value);

Upvotes: 1

Tom Marienfeld
Tom Marienfeld

Reputation: 716

You could just use JQuery to look for all inputs with type checkbox and then run the each() function.

$('.group_oiseau').on('change', function() {
  /*var group_oiseau = $('input[type=checkbox][name=group_oiseau]:checked').attr('value');*/

$.each($('input[type=checkbox]'),function(){
    if ($(this).hasClass('hidden')) {
      $(this).removeClass('hidden');
      console.log($(this).hasClass('hidden'));
    } else {
      $(this).addClass('hidden');
      console.log($(this).hasClass('hidden'));
    }
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="checkbox group_oiseau">
  <input type="checkbox"  class="grey checkbox" value="Oiseaux d'eau" name="group_oiseau[]" required>
  Oiseaux d'eau
  <div class="checkbox-cust"></div>
</label>

Upvotes: 1

Klienblat Moshe
Klienblat Moshe

Reputation: 347

let value = "Oiseaux d'eau";
String(value).replace(/'/g,'&quot;');

when you convert the single quote to html entity the browser will show you a single quote

Upvotes: 1

Related Questions