JavaScript Experts, is this possible??

**needhelp** · Jul 16, 2001 18:41

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!

**Anarchos** · Jul 16, 2001 20:59

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>

**needhelp** · Jul 17, 2001 09:26

THANK YOU! THANK YOU! THANK YOU!

**needhelp** · Jul 17, 2001 10:18

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!

User Tag List

Thread: JavaScript Experts, is this possible??

Thread Tools

Display

JavaScript Experts, is this possible??

Bookmarks

Bookmarks

Posting Permissions