выпадающее меню, которое требует выбора

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

Вы просто должны добавить функцию проверки формы и дать элементы некоторые идентификаторы так что ваша функция проверки знает, что для проверки.

Сначала добавьте эту функцию под свой тег <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> 

Наконец, дать Dropdowns некоторые идентификаторы, и добавить действительные значения к «Пожалуйста, выберите» Настройки.

Для первого раскрывающегося списка:

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