Question

我的电子商务商店一直困扰着用户选择一种运送方式，允许他们提供自己的帐号，然后在结账时不提供帐号。

表格第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>

表格第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>

这两个在PHP生成的页面上都是2个单独的div（PHP我们无法控制），当你按下“下一步”按钮时，它们所在的每个div都会被隐藏，显示下面的div。

然后通过以下单选按钮选择送货：

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

动态生成id的500d6片段。

我需要帮助设计一段Javascript代码放在这个页面上，这样如果选择了这个无线电圈，并且如果这两个运费账号表单字段都没有运费值，它只是隐藏

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

按钮，如果可能的话，用文字替换它（我可以自定义） - 不幸的是，我知道没有javascript，只有一些PHP，当然还有HTML / CSS。如果有人愿意帮助提供资源或链接来帮助我走上正轨，那将非常有帮助。谢谢！

Answer 1

将<input type="submit" value="Continue">更改为<input type="submit" id="btn" value="Continue" hidden >我们会默认隐藏它（除非您使用php填充表单，在这种情况下您可以在那里检查是否需要）。

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;
    }
};

我意识到你没有控制id值是什么......那么你必须通过名称选择或用php生成一些j来保存这些值。

希望这会有所帮助。

Javascript根据2个IF语句更改页面内容

1 个答案: