javascript - JQuery and Dynamic Table rows -


i trying build of shopping cart jquery , having heck of time figuring out how go making work.

i have place buy ad spaces on website. there table 5 columns(zip code column(input), service column(select box), ad size(select box), ad price(input readonly), , options column adding or removing rows. had working correctly until wanted add option large or small ads , charge different price according ad size.

        <table style='width: 100%;' id='adstable'>             <tr class='addedrow'>                 <td>zip</td>                 <td>service</td>                 <td>ad size</td>                 <td>price</td>                 <td>options</td>             </tr>             <tr>                 <td><input type='text' maxlength='5' class='zip' /></td>                 <td>                     <select name='servicetype' class='servicetype rounded'>                         <option value="">choose one...</option>                         <option>plumbing</option>                         <option>roofing</option>                         <option>hvac</option>                         <option>appliance repair</option>                         <option>flooring</option>                         <option>electrical</option>                         <option>doors/windows</option>                         <option>siding</option>                         <option>other</option>                     </select>                 </td>                 <td>                     <select name='' class='ad_size'>                         <option value='4.99' class='ad_lg'>large</option>                         <option value='1.99' class='ad_sm'>small</option>                     </select>                 </td>                 <td>                     <div class="input-prepend">                         <span class="add-on"><i class="icon-usd"></i></span>                         <input class='addprice' value='4.99' type='text' readonly='readonly' />                     </div>                 </td>                     <td class='options'>                      </td>             </tr>          </table> 

i stripped jquery out , started on few times try , figure out keep getting stuck on how add inputs after selection of ad size. heres jquery ended before came here

    //varible stores table row     var $adtablerow = "<tr class='addedrow'><td><input type='text' maxlength='5' /></td><td><select name='servicetype' id='servicetype' class='rounded'><option value=''>choose one...</option><option>plumbing</option>    <option>drain cleaning</option><option>roofing</option><option>hvac</option><option>appliance repair</option><option>flooring</option>  <option>electrical</option><option>doors/windows</option><option>siding</option><option>other</option></select></td><td><select name='' class='ad_size'><option value='4.99' class='ad_lg'>large</option><option value='1.99' class='ad_sm'>small</option></select></td><td><div class='input-prepend'><span class='add-on'><i class='icon-usd'></i></span><input class='addprice' value='4.99' type='text' readonly='readonly' /></div></td><td class='options'><i class='icon-remove removead' title='remove ad'></i></td></tr>";      $(document).ready(function() {           $('#addtotalbox').val("4.99");         //assign right price amount according users selection         $(".ad_size").on('change', function() {             //grab value of select box , store in variable             var ad_cost = $(this).val();             //insert value pricing box                          $(this).parent().next().children().find('.addprice').val(ad_cost);             //set total box right price according ad size             $('input').each(function(index,data) {                 var value = $(this).val();             });         });          $('.addrow').on('click', function() {             $("#adstable").append($adtablerow);             firstrow = false;               //var addedadprice = $(this).parent().prev().children().find('.addprice').val();          });                 }); 

thanks in advance

as per comments above, need put logic function, , re-initialize function whenever add new row.

function reinit(){     $(".ad_size").on('change', function() {         console.log('test');         //grab value of select box , store in variable         var ad_cost = $(this).val();         //insert value pricing box                      $(this).parent().next().children().find('.addprice').val(ad_cost);         //set total box right price according ad size         $('input').each(function(index,data) {             var value = $(this).val();         });     }); } 

then, call it:

$('.addrow').on('click', function() {     $("#adstable").append($adtablerow);     firstrow = false;      reinit();     //var addedadprice = $(this).parent().prev().children().find('.addprice').val();  }); 

here's working fiddle http://jsfiddle.net/qwnur/2/


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -