javascript - modifying a multiple selects validation with jquery -

-

what i've got far:jsfiddle

what want is:

  1. add class "invalid" <select> if not selected in it's row
  2. remove class if 3 selects in row selected
  3. if <select>s in 1 row selected submit form
  4. if 1 <select> selected add "invalid" class other 2 selects in same row

this html , js included in fiddle link above :

 <form id="productoptions" name="product-options">   <div class="selects s1">     <select name="selectss1" id="size1" class="product-select-options-size">       <option>-size</option>       <option>small</option>       <option>medium</option>       <option>large</option>       <option>x-large</option>     </select>     <select name="selectsc1" id="color1" class="product-select-options-color">       <option>-color</option>       <option>green</option>       <option>pink</option>       <option>white</option>       <option>yellow</option>     </select>     <select name="selectsq1" id="qty1" class="product-select-options-qty">       <option>-qty</option>       <option>1</option>       <option>2</option>       <option>3</option>       <option>4</option>     </select>   </div>   <div class="selects s2">     <select name="selectss2" id="size2" class="product-select-options-size">       <option>-size</option>       <option>small</option>       <option>medium</option>       <option>large</option>       <option>x-large</option>     </select>     <select name="selectsc2" id="color2" class="product-select-options-color">       <option>-color</option>       <option>green</option>       <option>pink</option>       <option>white</option>       <option>yellow</option>     </select>     <select name="selectsq2" id="qty2" class="product-select-options-qty">       <option>-qty</option>       <option>1</option>       <option>2</option>       <option>3</option>       <option>4</option>     </select>   </div>   <div class="selects s3">     <select name="selectss3" id="size3" class="product-select-options-size">       <option>-size</option>       <option>small</option>       <option>medium</option>       <option>large</option>       <option>x-large</option>     </select>     <select name="selectsc3" id="color3" class="product-select-options-color">       <option>-color</option>       <option>green</option>       <option>pink</option>       <option>white</option>       <option>yellow</option>     </select>     <select name="selectsq3" id="qty3" class="product-select-options-qty">       <option>-qty</option>       <option>1</option>       <option>2</option>       <option>3</option>       <option>4</option>     </select>   </div>   <p><a href="#" class="add-more">+ add more @ 1 time</a></p>   <!-- end select options -->   <input type="image" name="product-options" src="/media/blackheart/images/blackheart/add-to-cart.png"  />   </form>

kindly advise

you posted obscure question. instance, did not on event "invalid" class has added/removed. suppose 'submit'.

also gave 4 conditions , #1, 2, 4 ones redundant cause mutually exclusive degree. i.e. if add class "invalid" if not selected in it's row sense of remove class if 3 selects in row selected ? have simply remove class if selected. again, #4 condition in essence same #1.

your js-code works well, must add several lines manipulate css-classes note: did not use jsfiddle, checked code in real browser (including ie7) , worked, whereas didn't @ jsfiddle. 

$(function(){     $('#frm_productorder').on('submit', function(e){         e.preventdefault();         var f=$(this);             var invalid=false, selected=0;         $('.selects').each(function(){             var row=$(this);             var items=0;             $('select', row).each(function(){                 var t=$(this);                 var selectedindex=t.prop("selectedindex");                 if(selectedindex)                 {                     items++;                     t.removeclass('invalid'); //this line added                 }                 else t.addclass('invalid');    //this line added             });             if(items==3) selected++;             if(items>0 && items<3) invalid=true;             items=0;         });         if(selected>0 && !invalid) f[0].submit();         else alert('please fill form correctly');            }); });

Comments

Post a Comment

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

-
i trying reposotries using c# code process svncommand = null; var psi = new processstartinfo("svnadmin"); psi.redirectstandardoutput = true; psi.redirectstandarderror = true; psi.useshellexecute = false; psi.arguments= @"dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump"; using (svncommand = process.start(psi)) { var myoutput = svncommand.standardoutput; var myerror = svncommand.standarderror; debug.write("output :" + environment.newline + environment.newline + myoutput.readtoend() + environment.newline + "error :" + environment.newline + environment.newline + myerror.readtoend()); svncommand.close(); } when use dump command commandline svnadmin dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump it works fine when try ...
Read more

c# - Copy ObservableCollection to another ObservableCollection -

-
how copy observablecollection item observablecollection without reference of first collection? here observablecollection item value changes affecting both collections. code private observablecollection<ratemodel> _allmetalrate = new observablecollection<ratemodel>(); private observablecollection<ratemodel> _metalrateondate = new observablecollection<ratemodel>(); public observablecollection<ratemodel> allmetalrate { { return this._allmetalrate; } set { this._allmetalrate = value; notifypropertychanged("metalrate"); } } public observablecollection<ratemodel> metalrateondate { { return this._metalrateondate; } set { this._metalrateondate = value; notifypropertychanged("metalrateondate"); } } foreach (var item in metalrateondate) allmetalrate.add(item); what causing , how can solve it? you need clone object referenced item before it's a...
Read more

All overlapping substrings matching a java regex -

-
is there api method returns (possibly overlapping) substrings match regular expression? for example, have text string: string t = 04/31 412-555-1235; , , have pattern: pattern p = new pattern("\\d\\d+"); matches strings of 2 or more characters. the matches are: 04, 31, 412, 555, 1235. how overlapping matches? i want code return: 04, 31, 41, 412, 12, 55, 555, 55, 12, 123, 1235, 23, 235, 35. theoretically should possible -- there obvious o(n^2) algorithm enumerates , checks substrings against pattern. edit rather enumerating substrings, safer use region(int start, int end) method in matcher . checking pattern against separate, extracted substring might change result of match (e.g. if there non-capturing group or word boundary check @ start/end of pattern). edit 2 actually, it's unclear whether region() expect zero-width matches. specification vague, , experiments yield disappointing results. for example: string line = "xx90xx"; strin...
Read more