Is there a better way of doing this?

Hi I have this code below, but it's a bit repetitive, so I wondered if anybody knew if there is an easier/shorter way of doing the same thing?

I would really appreciate any help

Here's the code:

<script type="text/javascript">
function change( txtBox )
{
var changer = document.getElementById('changer');

var htmlcode = document.getElementById('htmlcode').value;
var bbcode = document.getElementById('bbcode').value;
var ref2 = document.getElementById('ref2').value;
var bbcode3 = document.getElementById('bbcode3').value;

if(changer.value != "1"){

document.getElementById('change').innerHTML = '{$encode}';

document.getElementById('htmlcode').value = htmlcode.replace("{$signin_username}", "{$encode}");
document.getElementById('bbcode').value = bbcode.replace("{$signin_username}", "{$encode}");
document.getElementById('ref2').value = ref2.replace("{$signin_username}", "{$encode}");
document.getElementById('bbcode3').value = bbcode3.replace("{$signin_username}", "{$encode}");

}else{

document.getElementById('change').innerHTML = '{$signin_username}';

document.getElementById('htmlcode').value = htmlcode.replace("{$encode}", "{$signin_username}");
document.getElementById('bbcode').value = bbcode.replace("{$encode}", "{$signin_username}");
document.getElementById('ref2').value = ref2.replace("{$encode}", "{$signin_username}");
document.getElementById('bbcode3').value = bbcode3.replace("{$encode}", "{$signin_username}");

}
}
</script>

	

<h1>Referral Link</h1>

<p>Show my username as: <select id='changer' onchange="change(this);" >
<option value="1">{$signin_username}</option>
<option value="2">{$encode}</option>
</select></p>

<p><b>Link:</b> <span id='change'>{$signin_username}</span></p>

<input type="text" value="&lt;a href=&quot;{$signin_username}&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Sign!&lt;/a&gt;" id="htmlcode" onclick="document.getElementById('htmlcode').select();" />

<input type="text" value="[url={$signin_username}]Sign up to Gleebux today![/url]" id="bbcode" onclick="document.getElementById('bbcode').select();" /></p>

<input type="text" value="texthere&lt;a href=&quot;{$signin_username}&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;>&lt;img src=&quot;{$theme}/images/banner.jpg&quot; align=&quot;center&quot; /&gt;&lt;/a&gt;" id="ref2" onclick="document.getElementById('ref2').select();" /></p>

<input type="text" value="texthere3{$signin_username}][img]{$theme}/images/banner.jpg[/img][/url]" id="bbcode3" onclick="document.getElementById('bbcode3').select();" /></p>

HTML: