retrieve special characters in an input form

Question

I have an HTML form containing different input fields (most of them are text values) but as soon as an extra character is filled (% for instance) I'm not able to retrieve it.

here is the HTML form:

<form id="myform" class="form-horizontal" action="javascript:notif()" >
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="focusedInput">nom</label>
      <div class="controls">
        <input name="nom" class="input-xlarge focused" id="focusedInput" type="text" value="">
      </div>
    </div>

    <div class="control-group">
      <label class="control-label" for="date01">Date</label>
      <div class="controls">
        <input type="text" name="date" class="input-xlarge datepicker" id="date" value="">
      </div>
    </div>

    <div class="control-group">
      <label class="control-label" for="focusedInput">Titre</label>
      <div class="controls">
        <input name="page" class="input-xlarge focused" id="focusedInput" type="text" value="">
       </div>
    </div>  
...

and the Javascript to retrieve the fields:

var s_data = $('#myform').serializeArray();
            $.get("webAdd?nom="+s_data[0].value+"&date="+s_data[1].value+"&titre="+s_data[2].value+"&message="+s_data[3].value+"&page="+s_data[4].value+"&commentaires="+s_data[5].value,function(response) {});

my problem is quite simple but I'm not able to solve it: as soon as any of the s_data[x] field contains a text such as "25% discount" the text field retrieved is null.

I know that % character is used for other purpose but how can I retrieve the field with any special character ?

If your `webAdd` is processing data that was entered in this form (including just saving the data) you should really be using a `POST` instead of a GET. That would also give you more flexibility in the format of the POST body, avoiding some of the problems you have when you use GET url parameters. See [GET vs POST in Ajax](http://stackoverflow.com/q/715335/17300) for some very basic info. — Stephen P, Sep 27 '16 at 22:42

score 1 · Accepted Answer · answered Sep 27 '16 at 21:40

Since you are requesting a web url you need to encode the user input. Otherwise the url will be parsed incorrectly. To do this, wrap each s_data[0].value in encodeURIComponent like this encodeURIComponent(s_data[0].value). This will encode special characters so they can be part of a url without breaking it.

$.get("webAdd?nom="+encodeURIComponent(s_data[0].value)+"&date="+encodeURIComponent(s_data[1].value)+"&titre="+encodeURIComponent(s_data[2].value)+"&message="+encodeURIComponent(s_data[3].value)+"&page="+encodeURIComponent(s_data[4].value)+"&commentaires="+encodeURIComponent(s_data[5].value),function(response) {});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

score 0 · Answer 2 · answered Sep 27 '16 at 21:44

You have to encode the querystring passed to jQuery, but seeing as your form inputs have the names you're using in the querystring, this should be straight forward if you let jQuery do the work for you

$.get("webAdd", $('#myform').serialize()).then(function(response) {

});

retrieve special characters in an input form

2 Answers2