0

I created a simple single page website with an input get method form without using a database connection

I'm having issues with the + and % symbols while creating the new url.

When a user enter a name like "Aravind Kumar", it creates a URL like example.com/?name=Aravind+kumar and also has the % symbol when sharing the link on facebook.

How can I remove the % and + symbols in the url?

My Form

<form action="" class="login-form" method="get" accept-charset="UTF-8">
<div class="form-group">
<input type="text" class="form-control" required id="name" name="name" class="form-control w-40 dis-ib" placeholder="Enter your name" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block btn-lg">Create Now</button>
</div>
</form>

When a user enters the name, it automatically creates a URL for them of this form: example.com/?name=user

xgord
  • 4,606
  • 6
  • 30
  • 51
Santhosh Veer
  • 83
  • 1
  • 3
  • 13
  • 2
    The characters are escaped for a reason. Don't just convert them you'll break functionality. http://stackoverflow.com/questions/4667942/why-should-i-use-urlencode for example if you decode `%26` to the `&` you will be starting a second parameter, not one value. – chris85 Dec 11 '16 at 06:08
  • any solution for this? – Santhosh Veer Dec 11 '16 at 06:11
  • 1
    You want the URLs to be encoded as they are. They wont (or may not depending on character) process on your server if you change them to there plain text characters. – chris85 Dec 11 '16 at 06:13

1 Answers1

0

The GET method embeds the variables (appends them) to the action URL. The POST method uses the entity body of the HTTP request and therefore they do not appear in the URL.

Change your form method from GET to POST: i.e. change the following:

<form action="" class="login-form" method="get" accept-charset="UTF-8">

to this:

<form action="" class="login-form" method="post" accept-charset="UTF-8">

You haven't shown your PHP, but I assume you are interpreting your form variables using $_GET. When you use the POST method, you will need to interpret your variables using the $_POST array. If you are posting to some other domain/site, you may find you must use one of the two methods depending on the site's requirements which may be beyond your control.

EDIT: If you want to dynamically alter the submitted value from spaces (which would get converted to + symbols) to hyphens, below is a sample form using javascript to implement the onsubmit() handler. Just before form is submitted, the spaces are changed to hyphens.

<html>
<head>
    <title>Test Page</title>
</head>
<script lang="javascript">
function getObj(id)
{
    if (document.getElementById)
    {
        //standard browsers
        return(document.getElementById(id));
    }
    else if (document.all)
    {
        //older browsers
        return(document.all[id]);
    }
    else if (document.layers)
    {
        return(document.layers[id]);
    }
}

function onSubmit(obj)
{
    var objName = getObj('name');
    objName.value = objName.value.replace(/ /i,'-'); //replace spaces with hyphens
    return true;
}
</script>
<body>
Hello
<form action="" class="login-form" method="get" accept-charset="UTF-8" onsubmit="return onSubmit(this)">
<div class="form-group">
<input type="text" class="form-control" required id="name" name="name" class="form-control w-40 dis-ib" placeholder="Enter your name"/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block btn-lg">Create Now</button>
</div>
</form>
</body>
</html>
byteptr
  • 1,275
  • 11
  • 15
  • Post method does not create the URL get method only create the URL :-( any solution? – Santhosh Veer Dec 11 '16 at 06:30
  • Please elaborate because I don't think I understood what you meant. If the "action" attribute is missing, either GET or POST will submit to the current URL (the URL with the form). With some server side PHP, your form can detect if variables have been posted by using a conditional statement such as: if (count($_POST)) //do something; else //show main form. – byteptr Dec 11 '16 at 06:41
  • When user Enter the Name like Aravind Kumar, it creates a URL Like example.com/?name=Aravind+kumar also it show % symbol While Sharing On Facebook and I use GET Method – Santhosh Veer Dec 11 '16 at 07:04
  • If you want the name to be embedded in the URL, I'd expect the behavior you are seeing. Urlencoding converts spaces to + characters and uses % characters to encode hex digits so the URL is still valid, but the data can be recovered from the URL by the script. What do you want the URL to look like, such as do you want the name hidden or obfuscated in some way? – byteptr Dec 11 '16 at 07:19
  • I want URL like this example.com/?name=aravind-kumar/ – Santhosh Veer Dec 11 '16 at 07:25
  • details on how one might implement what you describe have been added to answer – byteptr Dec 11 '16 at 07:51