SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2001
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Experts, is this possible??

    Hi,
    I have an HTML form on my page.
    It has a radio box, allowing the user to select 'Credit Card Payment' or 'Check Payment'.

    Below that is a form to enter the client's credit card number, expiration date, etc.

    Now..
    if the user selects 'Check Payment', is it possible to have the form for the credit card info become faded, or inusable?

    And if so.. how does one do that??

    Tx!

  2. #2
    You talkin to me? Anarchos's Avatar
    Join Date
    Oct 2000
    Location
    Austin, TX
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got this to work in NS 4, 6, and IE 5:
    Code:
    <html>
    <body>
    <form name="process">
    <input type="hidden" name="payType" value="" />
    Check Payment <input type="radio" name="type" value="check" onClick="check(this);" />
    <br />
    Credit Card Payment
    <input type="radio" name="type" value="credit card" onClick="creditCard(this);" />
    <br />
    <br /><br /><br />
    <table width="500">
    <tr><td width="50%">
    <div id="creditCardDiv" style="position:relative">
    Credit Card Stuff
    </div>
    </td><td>
    <div id="checkDiv" style="position:relative">
    Check Stuff
    </div>
    </td></tr>
    </table>
    <script type="text/javascript">
    <!--
    
    function check(obj){
    	obj.form.payType.value = 'check';
    	showIt('checkDiv');
    	hideIt('creditCardDiv');
    	obj.blur();
    }
    
    function creditCard(obj){
    	obj.form.payType.value = 'creditCard';
    	showIt('creditCardDiv');
    	hideIt('checkDiv');
    	obj.blur();
    }
    
    function showIt(id){
    	var obj = getLayer(id);
    	if (!obj) return;
    	if (obj.style){
    		obj.style.visibility = "visible";
    		}
    	else if (document.layers){
    		obj.visibility = "show";
    		}
    }
    
    function hideIt(id){
    	var obj = getLayer(id);
    	if (!obj) return;
    	if (obj.style){
    		obj.style.visibility = "hidden";
    		}
    	else if (document.layers){
    		obj.visibility = "hide";
    		}
    
    }
    
    function getLayer(id){
    	var obj = null;
    	if (document.getElementById) obj = document.getElementById(id);
    	else if (document.all) obj = document.all[id];
    	else if (document.layers) obj = document.layers[id];
    	return obj;
    }
    
    //-->
    </script>
    </form>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2001
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THANK YOU! THANK YOU! THANK YOU!

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2001
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I seem to be having some problems with it. I placed the js code higher up on the page (not shown here).
    It doesn't seem to work inside a table.
    Here's the code:

    Code:
    <table>
    <input type="hidden" name="payType" value="">
     <tr>
          <td width="27%" height="23Payment
            Method:</font></td>
           <td width="73%" height="23">
                    <p><input type="radio" name="type" value="credit card" onClick="creditCard(this);" checked>Credit Card&nbsp;&nbsp;&nbsp;
    <input type="radio" name="type" value="check" onClick="check(this);">Check</font></p>
                 </td>
        </tr>
    
    <div id="creditCardDiv" style="position:relative">
    
        <tr>
          <td width="27%" height="23">Credit Card Type:</font></td>
          <td width="73%" height="23">
    <input type="radio" value="A" name="cctype">Amex &nbsp; <input type="radio" value="V" name="cctype">Visa &nbsp; <input type="radio" value="M" name="cctype">MC
        </td>
        </tr>
    
        <tr>
          <td width="27%" height="23">
    Name On Credit Card:</td>
          <td width="73%" height="23">&nbsp;<input name="cc_name" size="20"></td>
        </tr>
        <tr>
          <td width="27%" height="23">Credit
            Card Number:</td>
          <td width="73%" height="23">&nbsp;<input name="cc_num" size="20"></td>
        </tr>
        <tr>
          <td width="27%" height="23">Expiration
            Date:</td>
          <td width="73%" height="23">&nbsp;<select name="exp_month" size="1">
          <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
    		<option value="4">4</option>
    		<option value="5">5</option>
    		<option value="6">6</option>
    		<option value="7">7</option>
    		<option value="8">8</option>
    		<option value="9">9</option>
    		<option value="10">10</option>
    		<option value="11">11</option>
    		<option value="12">12</option>
            </select> / <select name="exp_year" size="1">
          <option value="00">00</option>
    	<option value="01">01</option>
    	<option value="02" selected>02</option>
    <option value="03">03</option>
    	<option value="04">04</option>
    	<option value="05">05</option>
    	<option value="06">06</option>
    	<option value="07">07</option>
    	<option value=08">08</option>
    
          </select></td>
        </tr>
    </div>
    <div id="checkDiv" style="position:relative">
    </div>
    </table>
    Any help is GREATLY accepted, and wanted!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •