Question

I have an e-commerce store that is being plagued with users selecting a shipping method that allows them to provide their own account number, then not providing an account number upon checkout.

FORM PART 1:

<dt>
<span class="Required FormFieldRequired" style="visibility: hidden">*</span>
<span class="FormFieldLabel">Shipping Account Number:</span>
</dt>
<dd>
<input class="FormFieldId" type="hidden" value="25">
<input class="FormFieldFormId" type="hidden" value="2">
<input class="FormFieldType" type="hidden" value="singleline">
<input class="FormFieldPrivateId" type="hidden" value="">
<input id="FormField_25" class="Textbox Field200 FormField" type="text" value="Fill This If Using Your Own Shipping Account" name="FormField[2][25]">
</dd>

FORM PART 2:

<span class="FormFieldLabel">Shipping Account Number:</span>
<dd>
<input class="FormFieldId" type="hidden" value="26">
<input class="FormFieldFormId" type="hidden" value="3">
<input class="FormFieldType" type="hidden" value="singleline">
<input class="FormFieldPrivateId" type="hidden" value="">
<input id="FormField_26" class="Textbox Field200 FormField" type="text" value="Fill This If Using Your Own Shipping Account" name="FormField[3][26]">
</dd>

Both of these are in 2 seperate divs on a PHP-generated page (PHP we have no control over), that each div they are in gets hidden as you press the "next" button, showing the div below.

Shipping is then selected via the following radio button:

<ul class="ShippingProviderList">
<li>
<label id="shippingMethod_500d6aa9a300e_1">
<input id="shippingCheck_500d6aa9a300e" type="radio" value="1" name="selectedShippingMethod[500d6aa9a300e]">
<span class="ShipperName">My Own Shipping Account (Please make sure that account number is specified within your account page or item will not ship!)</span>
<em class="ShipperPrice ProductPrice">$0.00</em>
</label>
</li>

The 500d6 snippet for the id’s are dynamically generated.

I need help designing a Javascript piece of code to put on this page so that if that radio circle is selected, and if neither of the shipping account number form fields have a shipping value, it simply hides the

<input type="submit" value="Continue">

button, if possible, replacing it with text saying whatever (I can customize).

Answer 1

change <input type="submit" value="Continue"> to <input type="submit" id="btn" value="Continue" hidden > we will hide it by default (unless you are populating the form with php in which case you can do the check there to see if this is needed).

var radio = document.getElementById('shippingCheck_500d6aa9a300e'),
    input1 = document.getElementById('FormField_25'),
    input2 = document.getElementById('FormField_26'),
    btn = document.getElementById('btn'); // yes you will need to add an identifier to the button itself. name or id would work. if name you would document.forms[frmName or 0 for the first form].elements[buttonName]

document.forms[0].onchange = function() { // this assumes you have only one form. change the 0 to a name or proper index if need be.
    if( radio.checked && input1.value.length > 0 && input2.value.length > 0 ) {
        btn.hidden = false;
    } else {
        btn.hidden = true;
    }
};

I realize you do not control what the id values are… well then you will have to select by name or generate some of the js with php to hold these values.

Hope this helps.