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

时间:2010-12-20 01:51:52

标签: javascript forms select

http://www.greekforme.com/999-apron-01.html,有几个Drop Down框。

如果用户没有更改“选择下面的选项”下拉菜单,则称为“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;
}

目前,当您点击添加到购物车按钮 -

时,我可以显示弹出框

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

如果用户没有更改“选择下面的选项”下拉菜单,我希望脚本阻止将项目添加到购物车

1 个答案:

答案 0 :(得分:0)

你从哪里调用这个功能?如果它在onsubmit处理程序中,则处理程序应返回false。所以,你应该在你的代码中的某处:

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

或者,在html中:

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

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