问题描述
我试图弄清楚这个，但我需要一些帮助。 一个带有添加到购物车按钮的下拉菜单，如果没有选择任何选项就不提交，我希望有一个弹出窗口提示从每个下拉选项中选择一个（必需）。 这就是我要做的事情 ，问题是如何实现这个到我的代码谢谢你非常喜欢
<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'; 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"> </p> <p class="main"> dropdown1</p> <p class="heading"> </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"> </p> <p class="main"> dropdown2</p> <p class="heading"> </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"> </p> <p class="main"> Price</p> <p class="main"> </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>
1楼
Em Seven
2
已采纳
2015-07-25 13:23:31
您只需添加表单验证功能并为元素提供一些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'; 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>
而已。
2楼
cssyphus
1
2015-07-25 14:10:10
这是一个示例，其中包含一些可能有用的不同想法：
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;}