验证是否已在下拉框中选择了选项

Question

在 http://www.greekforme.com/999-apron-01.html ，有几个下拉框。

如果用户不更改“选择下面的选项”的下拉列表，名为“verifyselection”的脚本应该显示一个弹出框。

function verifyselection(form) 
{
    // result function
    var blnResult = true;
    // temp name form control
    var nameControl = "";
    // array of name of radio form controls
    var arrNameControl = new Array();
    // array of value checked of radio form controls
    var arrValueControl = new Array();
    // flag existence form control in array
    var isExistOnArray = false;

    // loop on all elements of form
    for(i=0; i<form.elements.length; i++) {
        // check type form control
        if(form.elements[i].type=="radio") {
            // save name form control
            nameControl = form.elements[i].name;
            // reset flag existence form control in array
            isExistOnArray = false;
            // loop on all found radio form control
            for(j=0; j<arrNameControl.length; j++){
                // if giving form control is exist in array
                if(arrNameControl[j] == nameControl) {
                    // set flag
                    isExistOnArray = true;
                    // break loop
                    break;
                }
            }
            // if giving form control is not exist in array
            if(isExistOnArray == false){
                // set index of array
                j = arrNameControl.length;
                // add new element to arrays
                arrNameControl[j] = nameControl;
                arrValueControl[j] = 0;
            }
            // if giving radio form control is checked
            if(form.elements[i].checked == "1"){
                arrValueControl[j] = 1;
            }
        }
                    if ((form.elements[i].selectedIndex > -1)) {
                            if (form.elements[i].selectedIndex == 0) {
                                    var opttext = form.elements[i].value.toLowerCase();
                                    if (opttext.indexOf('optional') < 0) {        
                                            blnResult = false;
                                            alert('Please select one of the options from the list');
                                            break;
                                    }
                            }

                    }
    }
    // loop on all found radio form control
    if(blnResult==true) {
                    for(j=0; j<arrNameControl.length; j++){
                // if radio group form control is checked
                if(arrValueControl[j] != 1) {
                   // set result function
                   blnResult = false;
                   // show error message
                   alert('Please select one of the options from the list');
                   break;
                   }
           }
            }
    // return result function
    return blnResult;
}

目前，当您单击“添加到购物车”时，我可以显示弹出框按钮 -

但是...它仍然将商品添加到购物车。

如果用户不更改“选择下面的选项”的下拉菜单，我希望脚本阻止将商品添加到购物车

Answer 1

你从哪里调用这个函数？如果它位于 onsubmit 处理程序中，则处理程序应返回 false。因此，您应该在代码中的某个位置包含此内容：

form.onsubmit = function() {
    return verifyselection(this);
}

或者在 html 中：

<form onsubmit="return verifyselection(this);" ...>

这里重要的是 return 部分。当处理程序返回 false 时，将不会执行默认操作。在这种情况下，表单将不会提交。