I think, you made typo in id
name. That is id
will have name as field_21_42
instead of input_21_42
.
$( '#field_21_42' ).on( 'click', '.add_list_item', function(){ ..
Pergunta
I think this is a jquery specific question, but I am using wordpress with the gravity forms plugin. I have a list type with three columns and repeatable rows with class .add_list_item
to add a row and .delete_list_item
to delete a row. Field code is:
<li id='field_21_42' class='gfield conest' >
<label class='gfield_label' for='input_21_42'>Three Column List</label>
<div class='ginput_container ginput_list'>
<table class='gfield_list'>
<colgroup><col id='gfield_list_42_col1' class='gfield_list_col_odd'></col><col id='gfield_list_42_col2' class='gfield_list_col_even'></col><col id='gfield_list_42_col3' class='gfield_list_col_odd'></col></colgroup>
<thead><tr><th>Option</th><th>Value</th><th>Notes</th><th> </th></tr></thead>
<tbody>
<tr class='gfield_list_row_odd'>
<td class='gfield_list_cell gfield_list_42_cell1'>
<select name='input_42[]' tabindex='25' >
<option value='' >Select Option</option>
<option value='Option 1' >Option 1</option>
<option value='Option 2' >Option 2</option>
<option value='Option 3' >Option 3</option>
<option value='Option 4' >Option 4</option>
</select>
</td>
<td class='gfield_list_cell gfield_list_42_cell2'>
<input type='text' name='input_42[]' value='' tabindex='26'/>
</td>
<td class='gfield_list_cell gfield_list_42_cell3'>
<input type='text' name='input_42[]' value='' tabindex='27'/>
</td>
<td class='gfield_list_icons'>
<img src='/wp-content/plugins/gravityforms/images/add.png' class='add_list_item ' title='Add a row' alt='Add a row' onclick='gformAddListItem(this, 0)' style='cursor:pointer; margin:0 3px;' />
<img src='/wp-content/plugins/gravityforms/images/remove.png' title='Remove this row' alt='Remove this row' class='delete_list_item' style='cursor:pointer; visibility:hidden;' onclick='gformDeleteListItem(this, 0)' />
</td>
</tr>
</tbody>
</table>
</div>
</li>
I used some javascript to populate another field with id=input_21_41. The javascript code I used was:
<script type="text/javascript">
jQuery(document).ready(function ($) {
var values = $("input[type='text'][name='input_42[]']").change(function() {
var sum = 0;
values.each(function() { // Step through each one
var value = parseInt($(this).val(), 10); // Retrieve its numeric value
sum += (isNaN(value) ? 0 : value); // Add to the total
});
$('#input_21_41').val(sum); // And show the average
});
});
</script>
It works great, but only copies the first row of column 2 into #input_21_41. I was told that I need to use .on to add/remove additional values:
$( '#input_21_42' ).on( 'click', '.add_list_item', function(){
// do stuff here
});
I'm having trouble figuring out how to properly write this out, so I can account for adding and removing, and then the sum .onchange
. Can anyone help me out?
Solução
I think, you made typo in id
name. That is id
will have name as field_21_42
instead of input_21_42
.
$( '#field_21_42' ).on( 'click', '.add_list_item', function(){ ..