Forum Moderators: open
I've got a drop-down menu that calls a script when clicked. Here's the code for the menu:
<select name="Payment" id="Payment" onclick="setit()" onkeypress="setit()">
<option selected>-- Please Select a Payment Method --</option>
<option value="CC">Credit Card</option>
<option value="MoneyOrder">Money Order</option>
<option value="Cash">Cash</option>
</select>
The function 'setit()' is described in the following script:
<script>
function setit(){
if(document.forms.daform.Payment.value=='CC')
q2.insertAdjacentHTML("afterBegin",count + "<table><tr><td><p>Name on Card:</p></td><td><input type=text name=Cname></td></tr><tr><td><p>Credit Card Number:</p></td><td><input type=text name=Cnum maxlength=16></td></tr><tr><td><p>Expiration Date:</p></td><td><input type=text name=Edate></td></tr><tr><td><p>CVV2 Code:</p></td><td><input type=text name=CVV2 maxlength=4></td></tr></table>");
if(document.forms.daform.Payment.value!='CC')
q2.innerHTML="";
}
</script>
When called a <span id="q2"></span> displays the HTML inside .insertAdjacentHTML.
-----------------------------------------------
Here's the problem.
The drop-down options are:
* Select
* CC
* MoneyOrder
* Cash
When the user clicks on 'CC' the HTML in .insertAdjacentHTML pops up the way it should. But, if the user goes back to the menu and either clicks on the down arrow or hovers over another option and then goes back to 'CC' .insertAdjacentHTML keeps writing the HTML over. If the user selects (that is, clicks on, instead of hovering over) another option the HTML generated by .insertAdjacentHTML disappears as it should. The problem occurs only when 'CC' has been selected, and then the user clicks on the drop-down menu again and accidentally hovers over or clicks on 'CC' again.
I don't know much JS, and don't have a clear picture of a function's action process, especially when it relates to the 'onClick' event. But I went and tried a little code that might have stopped .inserAdjacentHTML from repeating itself. It went like this:
<script>
var count
function setit(){
if(document.forms.daform.Payment.value=='CC' && count==0){
q2.insertAdjacentHTML("afterBegin",count + "<table><tr><td><p>Name on Card:</p></td><td><input type=text name=Cname></td></tr><tr><td><p>Credit Card Number:</p></td><td><input type=text name=Cnum maxlength=16></td></tr><tr><td><p>Expiration Date:</p></td><td><input type=text name=Edate></td></tr><tr><td><p>CVV2 Code:</p></td><td><input type=text name=CVV2 maxlength=4></td></tr></table>");
count=1;
}
if(document.forms.daform.Payment.value!='CC')
q2.innerHTML="";
count=0;
}
</script>
I thought by declaring 'count' outside the fn I could preserve its value after 'CC' was called. Unfortunately, once a different menu option is selected 'count' is reset, helping me none. The reason I mention this is because if I could somehow preserve the 'count' value throughout the duration of the user's visit to the page, then hovering over or selecting 'CC' after it has been selected would not call .insertAdjacentHTML.
What do you guys think?
