We Keep Coding

how to get table input sum value depend on select box? [duplicate]

How can I get the ID of the upper <td>’s <input> on click, in the up function? I tried so many ways like parent ID and previous ID but can not get that id.
function up(id) {
var data = $(this).prev("input[type=text]").attr('id');
alert(data)
}
<table>
<tr>
<td class="row">
<input class="latest" id="old" type="text" name="">
</td>
<td class="second margin_t8">
up
</td>
<td class="first margin_t8">
<input class="latest" id="news" type="text" name="" value="data">
</td>
</tr>
</table>
In that case, I get undefined. I want to get the previous <input> id in the alert. I need to find the data by id not by class.

Firstly, this is not pointing to the button which is clicked in this case as you don't use jQuery to add the event handler. However, you can use event.target to get the clicked element. Also, .prev() will return the previous element to the i tag which is undefined as it does not have any siblings.
Updated:
function up(id){
var data = $(event.target).closest('td').prev().find('input[type="text"]').attr('id');
alert(data);
}

Try passing the sender (which element is calling the function) as an argument to the function like :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td class="row">
<input class="latest" id="old" type="text" name="" >
</td>
<td class="second margin_t8">
</td>
<td class="first margin_t8">
<input class="latest" id="news" type="text" name="" value="data">
</td>
</table>
<script>
function up(sender) {
var data = $(sender).prev("tr").find("input[type=text].latest").attr('id');
alert(data);
}
</script>
Hope this helps in getting the previous row's input's id!!

function up(element) {
var data = $(element).parent().prev().find("input[type=text]").attr('id');
alert(data)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td class="row">
<input class="latest" id="old" type="text" name="" >
</td>
<td class="second margin_t8">
ss
</td>
<td class="first margin_t8">
<input class="latest" id="news" type="text" name="" value="data">
</td>
</table>

Try this out (not tested)
var data=$(this).closest('.form-grid-view-row').first().children("input[type=text]").attr('id');

How to modify cloned field form value and id inside table row?

I have 2 fields in my form that I want to clone using jQuery, but the selecting html table structure got me confused on how to change the id and the value of my form field and also the label text. Here's the form field structure
<table>
<tbody>
<tr id="attribute-name">
<td class="label"><label for="listing_qty">quantity</label></td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>

You will need to clone the entire element and then update the id's, values, and text in the cloned element before inserting.
function appendClonedFormInput(el,
newId,
newInputId,
newLabelText,
newName,
newValue) {
// Clone and update id
var $cloned = $(el)
.clone()
.attr('id', newId);
// Update label
$cloned.find('label')
.attr('for', newInputId)
.text(newLabelText);
// Update input
$cloned.find('input')
.attr('id', newInputId)
.attr('name', newName)
.val(newValue);
return $cloned.insertAfter(
$('input').last().parents('tr'));
}
appendClonedFormInput('#attribute-name',
'new-attribute-id',
'new-inp-id',
'New Label',
'new_field',
'new value');
appendClonedFormInput('#attribute-custom',
'new-custom-id',
'new-custom-inp-id',
'New Custom',
'new_custom',
'new custom value');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="attribute-name">
<td class="label">
<label for="listing_qty">quantity</label>
</td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>

You can clone the HTML element using .clone() jquery function and on the cloned HTML element perform all the jquery operation as we can perform on normal jquery selector.
Please check below working snippet. In snippet I have changed the label name and ids.
$(function(){
var _counter = 1;
$("#cloned_html").on("click",function(){
var $button = $('#attribute-name').clone().prop("id","attribute-name-"+_counter);
$button.find('#listing_qty').prop("id","listing_qty_"+_counter).val("quantity-"+_counter);
$button.find("label").html("Quantity-"+_counter);
var selector = '#attribute-name'
if(_counter>1){
selector = '#attribute-name-'+(_counter-1)
}
$($button).insertAfter(selector);
_counter++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="attribute-name">
<td class="label"><label for="listing_qty">quantity</label></td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
<button id="cloned_html">Clone</button>

You should separate the final render from the template. Another important part of your feature would be assign an unique number to compose ids and names.
I would suggest you to implement a solution like https://github.com/BorisMoore/jquery-tmpl
Put the template inside a script node with an Id then copy it's content and replace {} occurrences as you need.

Syntax error, unrecognized expression: !checked in jQuery selector

I use this script in a Website with jquery 1.7.
$('input:radio[name=article-info]:!checked').parent().parent().removeClass('highlight')
I move this script in a bootstrap template but the chrome console report me this error:
Uncaught Error: Syntax error, unrecognized expression: input:radio[name=article-info]:!checked
Bootstrap use a update version of jQuery .
What should I use syntax for this version?
The complete code:
// Select input radio button
$('input[type=radio][name=article-info]').change(function() {
$('input:radio[name=article-info]:not(:checked)').parent().parent().removeClass('highlight');
$(this).parent().parent().addClass('highlight');
// Price
$price = $('label[for="'+ $(this).attr('id') +'"] .tr-price').text();
$('#price-total').text($price);
// Url btn
$new_url = $(this).parent().siblings('.format').children().children('input').val();
$('#btn-personalizar').attr("href", $new_url);
});
//Select tr
$(".data-click-tr").click(function(){
$(".data-click-tr").removeClass('highlight')
$(this).addClass('highlight').find('input:radio[name=article-info]').attr('checked', true);
$get_input_id = $(this).find('input:radio[name=article-info]').val();
// Precio
$price = $('label[for="'+ $get_input_id +'"] .tr-price').text();
$('#price-total').text($price);
// Url btn personalizar
$new_url = $(this).find('.format').children().children('input').val();
$('#btn-personalizar').attr("href", $new_url);
});
The HTML:
<table id="select-size">
<thead class="size-and-price">
<tr class="header-table">
<th colspan="2">Tamaño</th>
<th class="">Precio</th>
</tr>
</thead>
<tbody>
<tr class="data-click-tr highlight" data-click-tr="1426">
<td class="input">
<input id="1426" type="radio" name="article-info" value="1426" checked="checked">
</td>
<td class="format">
<label for="">720X1080 mm (ver ficha)
<input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-75x100/1426">
</label>
</td>
<td class="price">
<label for="1426">
<span class="tr-price"> 39 €</span>
</label>
</td>
</tr>
<tr class="data-click-tr" data-click-tr="6685">
<td class="input">
<input id="6685" type="radio" name="article-info" value="6685">
</td>
<td class="format">
<label for="">950X1400 mm (ver ficha)
<input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-95x140/6685">
</label>
</td>
<td class="price">
<label for="6685">
<span class="tr-price"> 49 €</span>
</label>
</td>
</tr>
<tr class="data-click-tr" data-click-tr="710">
<td class="input">
<input id="710" type="radio" name="article-info" value="710">
</td>
<td class="format">
<label for="">1200X1900 mm (ver ficha)
<input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-120x190/710">
</label>
</td>
<td class="price">
<label for="710">
<span class="tr-price"> 69 €</span>
</label>
</td>
</tr>
<tr class="data-click-tr" data-click-tr="2259">
<td class="input">
<input id="2259" type="radio" name="article-info" value="2259">
</td>
<td class="format">
<label for="">2400X1600 mm (ver ficha)
<input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-160x240-queen/2259">
</label>
</td>
<td class="price">
<label for="2259">
<span class="tr-price"> 89 €</span>
</label>
</td>
</tr>
</tbody>
</table>
This is a Screenshot:

The ! operator cannot be used in the selectors.
You can use :not() selector to invert the selector.
$(':radio[name="article-info"]:not(:checked)')...
^^^^^^^^^^^^^^
The :not(:checked) part in the selector will select the radio buttons which are unchecked.

To add a negative control, you must use :not()
$('input:radio[name=article-info]:not(:checked)').parent().parent().removeClass('highlight')

AngularJs : How to get ng-repeat input/checkbox values on form submit?

In my form there is input fields and check boxes that repeat as below.
<form class="form-horizontal popupform" novalidate>
<input type="text" data-ng-model="returns.altCity">
<input type="text" data-ng-model="returns.altZip">
<input type="text" data-ng-model="returns.altName">
<table class="table table-striped">
<thead>
</thead>
<tbody>
<tr data-ng-repeat="item in order_items">
<td>{{item.id}}</td>
<td>{{item.price}}</td>
<td>
<input name="quantity-item.id" type="number"
data-ng-model="item.quantity"
value="returns.id">
</td>
<td align="center">
<input type="checkbox" checklist-model="item.checkOrder"
checklist-value="returns.id" checked="checked">
<label> </label>
</td>
</tr>
</tbody>
</table>
<button type="button" data-ng-click="saveReturnCases(returns)">Submit</button>
</form>
I want to get number input fields and check box values in button click. How can I get repeated field values?

You can store the values in an array, use the $index value increameted by ngRepeat, and then, submit this array ($scope.quantities and $scope.checksOrder).
<tr data-ng-repeat="returns in item.order_items">
<td>{{item.id}}</td>
<td>{{item.price}}</td>
<td>
<input name="quantity-item.id" type="number"
data-ng-model="quantities[$index]"
value="returns.id">
</td>
<td align="center">
<input type="checkbox" checklist-model="checksOrder[$index]"
checklist-value="returns.id" checked="checked">
<label> </label>
</td>
</tr>
</tbody>
</table>
<button type="button" data-ng-click="saveReturnCases()">Submit</button>

Set the checkbox to checked for input fields in the first 2 table rows

I want to set the checkbox to checked for input fields in the first 2 table rows of a table.
markup
<tbody>
<tr>
<td>
<input type="checkbox" id="" class="checkinput financeOption"><!--want this checked on page load-->
</td>
<td class="datatd">
<label id="">Option 1</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="" class="checkinput financeOption"><!--want this checked on page load-->
</td>
</td>
<td class="datatd"><label id="">Option 2 </label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="" class="checkinput financeOption">
</td>
<td class="datatd"><label id="">Option 3</label>
</td>
</tr>
I know I can use $( "").prop('checked', true); to set the property but struggling with figureing out how to target the first 2.
Thanks

You can use for example nth-child(-n+2) selector:
$('table tr:nth-child(-n+2) :checkbox').prop('checked', true);
http://jsfiddle.net/B8h7N/

Just slice them:
$("[type=checkbox]").slice(0,2).prop('checked', true);