Question

I’m basically trying to create a url friendly query string with user input. The variables replace spaces and @s and add it all together and then the function should display the url in the paragraph. This is making me feel really stupid because I know it’s something really simple I’m messing up. Please point out my mistake. And as a side note, is there a better way to do all this replacing without all the variables?

The following code should return a string similar to:
https://www.somewebsite.com/formhandler.php?&fname=gordie&address=123+main+street&email=something%40somewhere.com

<SCRIPT TYPE="TEXT/JAVASCRIPT">

var fnstr = document.getElementById("firstname").value; 
var fncutspace = fnstr.trim();
var fnrepspace = fncutspace.replace(/ /g,"+");
var fnfinal = fnrepspace.replace("@","%40");
var adstr = document.getElementById("address").value; 
var adcutspace = adstr.trim();
var adrepspace = adcutspace.replace(/ /g,"+");
var adfinal = adrepspace.replace("@","%40");
var emstr = emdocument.getElementById("firstname").value; 
var emcutspace = emstr.trim();
var emrepspace = emcutspace.replace(/ /g,"+");
var emfinal = emrepspace.replace("@","%40");
var domurl = "https://www.somewebsite.com/formhandler.php?&fname=";
var secondchunk = "&address=";
var thirdchunk = "&email=";
var url = domurl + fnfinal + secondchunk + adfinal + thirdchunk + emfinal;

function createurl() {
document.getElementById("demo").innerHTML = url;
}
</SCRIPT>

<FORM action="javascript:createurl()">
Fisrt Name:<INPUT id="firstname" TYPE="TEXT"><br>
street address:<INPUT id="address" TYPE="TEXT"><br>
email address:<INPUT id="email" TYPE="TEXT"><br>
<input type="submit" value="GO">
</FORM>

<p id="demo"></p>

Answer 1

If it’s supposed to be based on the user input, you should move the variables to be declared and set inside createurl:

function createurl() {
    var fnstr = document.getElementById("firstname").value; 
    var fncutspace = fnstr.trim();
    var fnrepspace = fncutspace.replace(/ /g,"+");
    var fnfinal = fnrepspace.replace("@","%40");
    // etc.
    var url = domurl + fnfinal + secondchunk + adfinal + thirdchunk + emfinal;

    document.getElementById("demo").innerHTML = url;
}

That way they’ll be set to the current input values at the time the function is called.

And as a side note, is there a better way to do all this replacing without all the variables?

You can chain the method calls:

var fnInput = document.getElementById('firstname');
var fnfinal = fnInput.value.trim().replace(/ /g,"+").replace("@","%40");