Form button/image

[dallen24]

Hi. On my web site I have a simple form. Depending on which radio button the user selects, I switch the text in the [submit] button. My form has a:
<input type="button" name="submit" value="Buy" title="Make payments fast!" onclick="user_submit(form)">

My radio buttons have a onclick="dues_submit(this)"

function dues_submit(frm) {
if (frm.dues[1-1].checked || frm.dues[2-1].checked) {
frm.submit.value="BuyNow"
frm.submit.title="Make payments fast!"
return true
}
frm.submit.value="Submit Email"
frm.submit.title="Submit Email for newsletter only"
return true
}

Now I want to go a step further. When I switch buttons, instead of a "Buy" text button I want to display a buy.gif image. I've tried frm.submit.image.src="buy.gif", but doesn't seem to work. I think I need to do something like a frm.type.value="image", but don't know how. Any advice is appreciated...Dennis

[Willy Duitt]

The only way I found to change an inputs type on the fly was to create another element append it to the document and remove the one you are replacing. Here is an example:

<script type="text/javascript">
function checkValue(){
var e,ne;
 e=document.getElementById('pwd');
 if(e.type == 'password' && e.value == 'password' || e.value == ''){
   alert('You must provide a password to login');
    ne = document.createElement('input');
    ne.id = 'pwd';
    ne.name = 'pwd'
    ne.type = 'text';
 e.parentNode.insertBefore(ne,e);
 e.parentNode.removeChild(e);
 ne.value = '';
 ne.focus();
 return false;
 }
 else{return true}
}
</script>


<form method="get" action="" onsubmit="return checkValue()">
Password:<input id="pwd" name="pwd" type="password" value="password" onfocus="this.value=''">
<input type="submit" value="Submit">
</form>

.....Willy

[dallen24]

I'll have to try it. Thanks...Dennis