javascript - Disable next form field on dynamically inserted form elements -


i know has been asked many times before none of solutions seem work in situation.

i need checkbox on each row disable next text field. each table row created on fly (js clone). first row static. each subsequent row, name , id appended new number (formfield1, formfield2, etc) , happen after page has loaded.

html

    <div class="add_rec_container" id="fuel_stop" style="display:block;"><!--open #fuel_stop-->     <p class="label">enter fuel stop:</p>     <table width="100%" border="0" cellspacing="0" cellpadding="0" id="fuel_stop_table" class="fuel_data">       <tbody>         <tr>           <td><select name="data_fuel_state1" id="data_fuel_state1" class="state_menu">             <option value="az">az</option>             <option value="ca" selected="selected">ca</option>             <option value="nm">nm</option>             <option value="nv">nv</option>             <option value="or">or</option>             <option value="ut">ut</option>             </select>             </td>           <td><input type="tel" name="data_total_gal1" id="data_total_gal1" class="help total_gal_field" title="gallons"/></td>           <td><input type="checkbox" name="data_yard1" id="data_yard1" class="enableppg" value="yes" onclick="disableppg(this);"/> yard           </td>           <td>$ <input type="tel" name="data_price1" id="data_price1" class="help price_field" title="ppg" /></td>           </tr>         </tbody>     </table>     <a id="add_fuel_row" class="add_btn">+ state</a>     </div><!--close #fuel_stop-->    <input type="submit" name="submit" class="send_button" value="send"/> </form>​ </div><!--close .record_entry_container-->

js (not working think should)

function disableppg() {   $(this).click(function() {     if ($(this).is(':checked')){         $(this).next('.price_field').prop('disabled', true);       } else {         $(this).next('.price_field').prop('disabled', false);       }   }); }

the following js works on first row of form elements, not solution multiple rows when added.

function disableppg() {   $(this).click(function() {     if ($('#data_yard1').is(':checked')) {       $('#data_price1').prop('disabled', true);     } else {       $('#data_price1').prop('disabled', false);           }   }); }

any appreciated.

$(".enableppg").on("click", function() {     if($(this).is(":checked") == true)         $(this).parent().next().children().attr("disabled", "disabled");     else         $(this).parent().next().children().removeattr("disabled"); });

Comments

Post a Comment

Popular posts from this blog

php - get table cell data from and place a copy in another table -

two-part question: have 2 tables: 1 table items , other table selected items copied when add button clicked. after, when items wanted selected, there 'finished' button post items selected db. i started javascript didn't far @ because jquery seems better suited i'm not familiar it function addto() { var div = document.getelementbyid('fixeddiv','inside'); div.innerhtml = div.innerhtml + 'item added'; } <div id='fixeddiv'> <table align="center" id="tradee"> <th rowspan="2"> other item</th> <?php while($rowi =$item->fetch_assoc()) {?> <tr> <td> <?php echo $rowi['item_name']; ?> </td> <td><?php echo $rowi['item_description'];?></td> </tr> <?php } ?> </table> <br> <table align="center" id="tradetable"
Read more

javascript - Mootools wait with Fx.Morph start -

i trying var effect = new fx.morph(testmorph, { wait/delay 2 seconds before starting. ( fiddle here ) but when try .wait(2000) or .delay(2000) , or .wait(2000, effect) uncaught typeerror: object [object object] has no method 'delay' any ideas how working? code i'm using: var testmorph = document.id('testmorph'); var effect = new fx.morph(testmorph, { transition: 'back:out', duration: 900, link: 'chain' }).start({ 'top': 20, 'opacity': 1 }).start({ 'border-color': '#a80025', 'color': '#a80025' }); effect.delay(2000); you can use combination of chain() , delay() achieve desired effect. new fx.morph(testmorph, { transition: 'back:out', duration: 900, link: 'chain' }).start().chain(function(){ this.start.delay(2000,effect,{ //first }); }).chain(function(){ this.start({ //second }); }); the
Read more

php - Navigate throught databse rows -

i run image hosting site, , ive run problem. want make 2 buttons beside pic "next image" , "prev image". im new php/mysql , haveing troubles. check out got. use id (numbers) find correct row, have image name build next link. how make below query next , prev image names + ids? $query_next = ("select imageid, image_name images image_name = '$image_main' order imageid desc limit 1"); $query_prev = ("select imageid, image_name images image_name = '$image_main' order imageid asc limit 1"); // next $next = mysql_query($query_next); // prev $prev = mysql_query($query_prev); while ($row = mysql_fetch_assoc($next)) { $next = $row['image_name']; } while ($row = mysql_fetch_assoc($prev)) { $prev = $row['image_name']; } the html = > simple stuff. <a href="http://mysite.com/view_image/<?=$next?>">next image</a> <a href="http://mysite.com/view_image/<?=$pr
Read more