Question

我想弄清楚这个，但我需要一些帮助。一个带有添加到购物车按钮的下拉菜单，如果没有选择任何选项就不提交，我希望有一个弹出窗口提示从每个下拉选项中选择一个（必需）。这就是我要做的http://ccaples.com/index.php/basic-scripts/examples-i/dropdown-menus-that-require-selection，问题是如何在我的代码中实现这一点非常感谢。

<SCRIPT TYPE="text/javascript">
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}

function Dollar (val) {  // force to valid dollar amount
var str,pos,rnd=0;
  if (val < .995) rnd = 1;  // for old Netscape browsers
  str = escape (val*1.0 + 0.005001 + rnd);  // float, round, escape
  pos = str.indexOf (".");
  if (pos > 0) str = str.substring (rnd, pos + 3);
  return str;
}

function ReadForm (obj1) { // process un-named selects
var i,j,amt,des,obj,pos,tok,val;
var ary = new Array ();
  amt = obj1.baseamt.value*1.0;       // base amount
  des = obj1.basedes.value;           // base description
  for (i=0; i<obj1.length; i++) {     // run entire form
    obj = obj1.elements[i];           // a form element
    if (obj.type == "select-one" &&   // just get selects
        obj.name == "") {             // must be un-named
      pos = obj.selectedIndex;        // which option selected
      val = obj.options[pos].value;   // selected value
      ary = val.split (" ");          // break apart
      for (j=0; j<ary.length; j++) {  // look at all items
// first we do single character tokens...
        if (ary[j].length < 2) continue;
        tok = ary[j].substring (0,1); // first character
        val = ary[j].substring (1);   // get data
        if (tok == "@") amt = val * 1.0;
        if (tok == "+") amt = amt + val*1.0;
        if (tok == "%") amt = amt + (amt * val/100.0);
        if (tok == "#") {             // record item number
          if (obj1.item_number) obj1.item_number.value = val;
          ary[j] = "";                // zap this array element
        }
// Now we do 3-character tokens...
        if (ary[j].length < 4) continue;
        tok = ary[j].substring (0,3); // first 3 chars
        val = ary[j].substring (3);   // get data
        if (tok == "s1=") {           // value for shipping
          if (obj1.shipping)  obj1.shipping.value  = val;
          ary[j] = "";                // clear it out
        }
        if (tok == "s2=") {           // value for shipping2
          if (obj1.shipping2) obj1.shipping2.value = val;
          ary[j] = "";                // clear it out
        }
      }
      val = ary.join (" ");           // rebuild val with what's left
      if (des.length == 0) des = val; // 1st storage?
      else des = des + ", " + val;    // nope, accumulate value
    }
  }
  obj1.item_name.value = des;
  obj1.amount.value = Dollar (amt);
  if (obj1.tot) obj1.tot.value = "$" + Dollar (amt);
}

</SCRIPT>

<FORM id=viewcart name=viewcart action=https://www.paypal.com/cgi-bin/webscr 
method=post>
          </FORM>
          <FORM onSubmit="this.target = 'paypal';&#10;     ReadForm (this.form);" 
action=https://www.paypal.com/cgi-bin/webscr method=post>
            <P> 
              <INPUT type=hidden value=_cart name=cmd>
              <INPUT type=hidden value=1 name=add>
              <INPUT type=hidden value=my@email.com name=business>    
              <INPUT type=hidden name=item_name>
              <INPUT type=hidden name=item_number>
              <INPUT type=hidden name=amount>
              <INPUT type=hidden value=USD name=currency_code>    
              <INPUT type=hidden value=USD name=lc>   
              <INPUT type=hidden value=00 name=shipping>
              <INPUT type=hidden value=00.00 name=baseamt>
              <INPUT type=hidden VALUE="itemname" name=basedes>     
              <INPUT TYPE="hidden" NAME="on0" VALUE="Details">        
              <INPUT TYPE="hidden" NAME="os0" VALUE="moredetails" MAXLENGTH="800">   
            <BR>
            <BR>
            </P>
            <TABLE WIDTH="400px" BORDER="0" CELLPADDING="0" CELLSPACING="0" align="right">
              <TR> 
                <TD ALIGN="left">
                <p class="heading">&nbsp;</p>
                <p class="main">&nbsp;dropdown1</p>
                  <p class="heading">&nbsp;</p>
                </TD>
                <TD> 
                  <SELECT STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">         
                     <OPTION selected>Please select </OPTION>
                    <OPTION VALUE="option1 +125.00">option1</OPTION>
                    <OPTION VALUE="option2 +90.00">option2</OPTION>
                    <OPTION VALUE="option3 +40.00">option3</OPTION>
                  </SELECT>
                </TD>
              </TR>
              <TR> 
                <TD ALIGN="left">
                <p class="heading">&nbsp;</p>
                <p class="main">&nbsp;dropdown2</p>
                <p class="heading">&nbsp;</p> 
                </TD>
                <TD> 
                  <SELECT STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">
                    <OPTION selected>Please select </OPTION>
                    <OPTION VALUE="option1 +55.00">option1</OPTION>
                    <OPTION VALUE="option2 +99.00">option2</OPTION>
                    <OPTION VALUE="option3 +44.00">option3</OPTION>
                  </SELECT>
                </TD>
              </TR>  
              <tr>
               <TR> 
                <TD ALIGN="left">
                <p class="main">&nbsp;</p>
                <p class="main">&nbsp;Price</p>
                <p class="main">&nbsp;</p>
                </TD>
                <TD ALIGN="left"> 
                  <INPUT class=nbor size=8 value=00.00 name=tot>
                </TD>
              </TR>
              <TD align="left">
          <label for="submit"></label>
          <TD align="left">
           <input type="image" src="/addtocart2.png" name="submit" id="submit" value="submit" >
          </div>
        </div></td>
      </tr>
</table>
    </table>
  </form>
  </TABLE>
 </FORM>
</div>

Answer 1

您只需添加表单验证功能并为元素提供一些ID，以便验证函数知道要验证的内容。

首先，在<script>标记下添加此功能。

function validate_first() {
        var msg1 = "Please select from first dropdown\n";
        var msg2 = "Please select from second dropdown";

        var first = document.getElementById('select1').value;
        var second = document.getElementById('select2').value;
        if(first=="" || second=="") {
            alert(((first == "") ? msg1 : "") + ((second == "") ? msg2 : ""));
            return false;
        }

        return true;
}

然后从表单定义中更改onsubmit值，如下所示：

<FORM onSubmit="this.target = 'paypal';&#10;return validate_first();" action=https://www.paypal.com/cgi-bin/webscr method=post>

最后，给下拉菜单一些ID，并在“请选择”选项中添加实际值。

首次下拉：

        <SELECT id="select1" STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">
            <OPTION value="" selected>Please select </OPTION>
            <OPTION VALUE="option1 +125.00">option1</OPTION>
            <OPTION VALUE="option2 +90.00">option2</OPTION>
            <OPTION VALUE="option3 +40.00">option3</OPTION>
        </SELECT>

第二个：

        <SELECT id="select2" STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">
            <OPTION value="" selected>Please select </OPTION>
            <OPTION VALUE="option1 +55.00">option1</OPTION>
            <OPTION VALUE="option2 +99.00">option2</OPTION>
            <OPTION VALUE="option3 +44.00">option3</OPTION>
        </SELECT>

就是这样。

Answer 2

以下是一些示例，其中包含一些可能有用的不同想法：

jsFiddle Demo

<强> HTML：

<div id="msg">Please select from each of the following:</div>
Model:
<select id="car">
    <option value="">Select One</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
Color:
<select id="color">
    <option value="">Select One</option>
    <option value="white">White</option>
    <option value="black">Black</option>
</select>
Transmission:
<select id="tran">
    <option value="">Select One</option>
    <option value="manual">Manual</option>
    <option value="auto">Automatic</option>
</select>
<br />
<input type="button" id="mybutt" value="Submit" />

<强>的jQuery / JavaScript的：

var chkFld, arrAll = {'Vehicle Model':'car','Vehicle Color':'color','Transmission':'tran'};

$('select').change(function(){
    $('#msg').slideUp();
});

$('#mybutt').click(function() {
    var errMsg='', badFlds='', firstBad='';
    for(var key in arrAll){
        chkFld = '#'+arrAll[key];
        $(chkFld).removeClass('error');
        if ($(chkFld).val() ==''){
            $(chkFld).addClass('error');
            //alert('Please complete field ' + arrAll[key] );
            errMsg += '* ' + key + '\n';
            if (firstBad=='') firstBad=chkFld;
        }
    }
    if (errMsg != '') {
        $('#msg').slideDown();
        alert('Please complete: '+"\n"+errMsg);
        $(firstBad).focus();
    }
}); //END mybutt.click

<强> CSS：

#msg{background:wheat;padding:10px;text-align:center;color:darkcyan;margin-bottom:10px;}
.error{border:1px solid red;background:yellow;}
#mybutt{margin-top:10px;}

需要选择的下拉菜单

2 个答案: