CODEWITHSUNDEEP
javascript
tiamat
tiamat

Reputation: 971

retrieve special characters in an input form

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 ?

Upvotes: 1

Views: 119

Answers (2)

adeneo
adeneo

Reputation: 318302

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) {

});

Upvotes: 0

orhanhenrik
orhanhenrik

Reputation: 1415

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

Upvotes: 1

Related Questions