Replace + with %20 in URL generated

Question

I am using the below HTML code to connect a user to a chat, but I need any spaces in the URL generated to become %20 and not +, because + is a valid character in a nickname, so someone who enters Paul John in the input will become Paul+John instead in the chat, hence the %20 is needed as this is recognised as a space.

Is it possible to do this with JavaScript/jQuery and some example?

HTML

<form class="form-horizontal" role="form" action="client/htmlchat/123flashchat.html">
<fieldset>
  <input type="hidden" name="init_room" value="1">

  <!-- Text input-->
  <div class="form-group">
    <label class="col-sm-2 control-label" for="nickname">Nickname</label>
    <div class="col-sm-10">
      <input id="nickname" name="init_user" type="text" placeholder="Nickname" class="form-control" required="required">
    </div>
  </div>

  <!-- Multiple Radios -->
  <div class="form-group">
    <label class="col-sm-2 control-label" for="gender">Gender</label>
    <div class="col-sm-10">
    <label class="radio" for="gender-0">
      <input type="radio" name="init_gender" id="gender-0" value="2" required="required">
      Female
      </label>
    <label class="radio" for="gender-1">
      <input type="radio" name="init_gender" id="gender-1" value="1" required="required">
      Male
    </label>
    </div>
  </div>

  <!-- Button -->
  <div class="form-group">
    <label class="col-sm-2 control-label" for="button"></label>
    <div class="col-sm-offset-2 col-sm-10">
      <button id="button" class="btn btn-lg btn-primary" type="submit">Enter</button>
    </div>
  </div>

</fieldset>
</form>

Thanks in advance,

Paul

Georgi Bilyukov · Accepted Answer · 2014-08-21 08:54:30Z

2

Try using encodeURIComponent(str) function.

var test = "Paul John";
var result = encodeURIComponent(test );
//result: "Paul%20John"

To replace the content just before submitting the form use this jquery code:

$(document).ready(function(){
    $('.form-horizontal').submit(function(){
        var encoded = encodeURIComponent($('#nickname').val().trim());
        $('#nickname').val(encoded );
    });
});

edited Aug 21, 2014 at 8:54

answered Aug 21, 2014 at 8:04

Georgi Bilyukov

6274 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3932961 Over a year ago

Hi. Thanks for the answer. How can I use it with this form?

user3932961 Over a year ago

Hi. Thanks again. I put a space in the input and I end up with %2520?

Georgi Bilyukov Over a year ago

So then use the trim method when getting the value. I will update again.

user3932961 Over a year ago

Sorry I still don't understand, even now I am using trim() as your answer, I still get a URL generated like client/htmlchat/123flashchat.html?init_room=1&init_user=John%2520Doe&init_gender=1.

Georgi Bilyukov Over a year ago

so isn`t is what you want to be generated?

|

Code Uniquely · Accepted Answer · 2014-08-21 08:26:59Z

1

This happens because '+' indicates a space when using application/x-www-form-urlencoded content. As you are actually submitting a form and therefore sending form-urlendoded data, this is correct. If you enter a '+' in the data it should also get encoded (to '%2B') allowing you to distinguish this from any '+' character added as part of form encoding

answered Aug 21, 2014 at 8:26

Code Uniquely

6,3834 gold badges32 silver badges40 bronze badges

Collectives™ on Stack Overflow

Replace + with %20 in URL generated

HTML

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related