Creating a url from a form text field

Java newbie

[HighPriestess]

Hi I'm looking for help with something I thought would be quite simple. All I really want to do is create a form that automatically creates a url from the input text. So for instance if you typed "yoursite" into the text field the form would generate the "http://www." before and ".com" after and link to it when you hit the submit button. The "http://www." and the ".com" don't have to appear in the text field. I've tried a couple of things but I can't get it to work. Any help would be greatly appreciated.

Thanks

[Dabrowski]

The best thing to do would be to have a hidden input field that would contain the full URL.

For example:

<script>
function convertURL() {
var url = document.getElementsByName( "url")[0];
var fullurl = document.getElementsByName( "fullurl")[0];

fullurl.value = "http://www"+ url.value +".com";
}
</script>

<form ... onSubmit='convertURL();'>
Your URL: <input name='url' type='text'><input name='fullurl' type='hidden'><br>
<input type='submit'>
</form>

Now when you hit submit that should expand the URL the user typed, and stick it into the hidden input field.

[HighPriestess]

Wow thanks! That worked. But how can I make it link to the url on submit? I've tried using "window.location=" with no luck.

Thanks again.

[Dabrowski]

Not sure what you mean, you want the form to submit to that URL? You'd need a page name to submit too also, for example:

You can't submit to http://www.example.com
You can submit to http://www.example.com/mypage.pl

To change the location of the form's target you could change the function to look like this:

function convertURL() { 
var url = document.getElementsByName( "url")[0]; 
var fullurl = document.getElementsByName( "fullurl")[0]; 

fullurl.value = "http://www"+ url.value +".com"; 
alert( "Old form target "+document.(name of form).action);
document.(name of form).action = fullurl.value;
alert( "New form target "+document.(name of form).action);
} 

Can't remember if that's the right way to do it but the alert's will tell you. Take them out if it's working!

[HighPriestess]

Ah I see! I'd also like to remove spaces from the text field on submit. I've been trying this:

function trim() {
document.text.value.replace(/ /g, "");
}

It's not working though. I've probably put it in the wrong place. How can I add this functionality to the existing form?

Thanks again!

[Dabrowski]

You're almost right, I can tell from the regexp that you normally use another language? Perl?

The syntax is slightly different in JavaScript, rather than modifying the calling string, it's a function that returns the new string.

Try:

document.(form name).(input name).value = document.(form name).(input name).value.replace( /\s/g, "");

\s means any whitespace, so better to use it just incase there's something unexpected in there.

[HighPriestess]

Hi this seems to be working quite nicely now. I've added a Confirm() but it still submits if you select Cancel or X. What am I missing?

<script>
function convertURL() {
document.go.url.value = document.go.url.value.replace( /\s/g, "");
var url = document.getElementsByName( "url")[0];
var fullurl = document.getElementsByName( "fullurl")[0];
fullurl.value = "http://www."+ url.value +".com";
msg = document.go.url.value +"?"
return confirm(msg);
}
</script>

<form name= "go" onsubmit='convertURL();location.href=fullurl.value;return false'>
<input name='url' type='text' /> <input name='fullurl' type='hidden' />
<input type='submit' value=" Go " />
</form>

Thanks so much for your help!

[edited by: HighPriestess at 10:27 pm (utc) on Oct. 25, 2007]