как изменить Слово на кнопке

[teragalaxy]

Есть форма ввода пароля и есть кнопка "Показывать пароль". Скрипт работает на ура, только вот не могу врубиться как решить вопрос:

Если произошёл клик по кнопке "Показывать пароль", то соответственно надпись должна смениться на "Скрыть пароль". И наоборот соответственно.

<fieldset>
<script>
function Show_HidePassword(id) {
element = document.getElementById(id);
if (element.type == 'password') {
var inp = document.createElement("input");
inp.id = id;	
inp.type = "text";
inp.value = element.value;
element.parentNode.replaceChild(inp, element);
}
else {
var inp = document.createElement("input");
inp.id = id;
inp.type = "password";
inp.value = element.value;
element.parentNode.replaceChild(inp, element);
}
}
</script>
<input placeholder="Пароль" type="password" name="password" id="passwordbox" />
<span><a href="#" onclick="Show_HidePassword('passwordbox')">Показывать пароль</a></span>
</fieldset>

[danik.js]

<fieldset>
<script>
function Show_HidePassword(id, button) {
var element = document.getElementById(id);
if (element.type == 'password') {
button.textContent = 'Скрывать пароль';
var inp = document.createElement("input");
inp.id = id;   
inp.type = "text";
inp.value = element.value;
element.parentNode.replaceChild(inp, element);
}
else {
button.textContent = 'Показывать пароль';
var inp = document.createElement("input");
inp.id = id;
inp.type = "password";
inp.value = element.value;
element.parentNode.replaceChild(inp, element);
}
inp.focus();
inp.selectionEnd = inp.value.length;
}
</script>
<input placeholder="Пароль" type="password" name="password" id="passwordbox" />
<span><a href="#" onclick="Show_HidePassword('passwordbox', this); return false;">Показывать пароль</a></span>
</fieldset>

[teragalaxy]

То что надо + в карму

[teragalaxy]

Появилась другая проблема.
Вобщем всё настроил как надо, только вот если сделать пароль видимым и нажать кнопку submit то никакого значения в глобальный массив не будет передано. Как исправить этот недочёт?

<script>
	function Show_HidePassword(id, button) {
var element = document.getElementById(id);
if (element.type == 'password') {
	button.textContent = 'Скрывать пароль';
	var inp = document.createElement("input");
	inp.id = id;   
	inp.type = "text";
	inp.value = element.value;
	inp.placeholder = "Пароль";
	element.parentNode.replaceChild(inp, element);
	}
else {
	button.textContent = 'Показывать пароль';
	var inp = document.createElement("input");
	inp.id = id;
	inp.type = "password";
	inp.value = element.value;
	inp.placeholder = "Пароль";
	element.parentNode.replaceChild(inp, element);
	}
inp.focus();
inp.selectionEnd = inp.value.length;
}
</script>

<form>
<input placeholder="Пароль" type="password" name="password" id="joinpasswordbox" />
<p><span><a href="#" onclick="Show_HidePassword('joinpasswordbox', this); return false;">Показывать пароль</a></span></p>
<p><input type="submit" value="Отправить"/></p>
</form>

[danik.js]

Атрибут name потерял

[teragalaxy]

Я перерыл мануалы по js и html, ну не может мой мозг догнать: Как сделать?

[teragalaxy]

Ну вот что-то вышло:

<script>
	function Show_HidePassword(id, button) {
var element = document.getElementById(id);
if (element.type == 'password') {
	button.textContent = 'Скрывать пароль';
	var inp = document.createElement("input");
	inp.id = id;   
	inp.type = "text";
	inp.name = "password";
	inp.value = element.value;
	inp.placeholder = "Пароль";
	element.parentNode.replaceChild(inp, element);
	}
else {
	button.textContent = 'Показывать пароль';
	var inp = document.createElement("input");
	inp.id = id;
	inp.type = "password";
	inp.name = "password";
	inp.value = element.value;
	inp.placeholder = "Пароль";
	element.parentNode.replaceChild(inp, element);
	}
inp.focus();
inp.selectionEnd = inp.value.length;
}
</script>

<form>
<input placeholder="Пароль" type="password" name="password" id="joinpasswordbox" />
<p><span><a href="#" onclick="Show_HidePassword('joinpasswordbox', this); return false;">Показывать пароль</a></span></p>
<p><input type="submit" value="Отправить"/></p>
</form>