Web Analytics Made Easy -
StatCounter Form button/image - CodingForum

Announcement

Collapse
No announcement yet.

Form button/image

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Form button/image

    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

  • #2
    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:

    Code:
    <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

    Comment


    • #3
      I'll have to try it. Thanks...Dennis

      Comment

      Working...
      X