I have this html:
<tr id="Estuches_1">
<td>
<div class="group">
<input name="VariableDataList[0].VariableDataForLevel[0].ProductionOrderId" id="VariableDataList_0__VariableDataForLevel_0__ProductionOrderId" >
<input name="VariableDataList[0].VariableDataForLevel[0].AggregationLevelConfigurationId" id="VariableDataList_0__VariableDataForLevel_0__AggregationLevelConfigurationId">
<select name="VariableDataList[0].VariableDataForLevel[0].VariableDataId" disabled="disabled" id="VariableDataList_0__VariableDataForLevel_0__VariableDataId">
<option value="00">Serial Shipping Container Code(SSCC-18)</option>
<option value="01" selected="">Global Trade Item Number</option>
<option value="10">Batch or lot number</option>
<option value="11">Production date(YYMMDD)</option>
<option value="17">Expiration date(YYMMDD)</option>
<option value="21">Serial number</option>
</select>
</div>
</td>
<td>
<div class="group">
<input name="VariableDataList[0].VariableDataForLevel[0].Value" disabled="disabled" id="VariableDataList_0__VariableDataForLevel_0__Value">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="VariableDataList[0].VariableDataForLevel[0].Value"></span>
</div>
</td>
</tr>
In Javascript, I have a var named clone that create with the above html.
I want to remove the attribute disabled in all of the elements in the html (one in the select, and another one in the input text).
I have tried this:
var clone = $($.parseHTML(html));
clone.removeAttribute("disabled");
But it doesn't remove any of them. Maybe, because it is trying to remove the disabled attribute in the tr.
How can I remove the disabled attribute in all of the elements?
The id and the name of the elements will change.
You need to target disabled element using .find() and then use .removeAttr() method
clone
.find('[disabled]') //Target all disabled descendants
.removeAttr('disabled') //Remove disabled
Related
I have a table that has some inputs and angular models.
<td>
<select class="form-control" id="">
<option ng-model="mfrNo" ng-repeat="manufacturer in manufacturers" value="mfrNo">{{manufacturer.SUPP_NAME}} [{{manufacturer.SUPP_NO}}]</option>
</select>
</td>
<td>
<input type="text" ng-model="newCon" class="form-control" name="new_contract_number" value="" maxlength="500"/>
</td>
<button type="button" class="btn btn-default" data-dismiss="modal" data-ng-click="reassignContract()">Reassign</button>
In my controller I want to retrieve the values that are selected/inputted.
$scope.reassignContract = function () {
console.log($scope.newCon);
console.log($scope.mfrNo);
};
The first model newCon passes the text input fine. But the 2nd, mfrNo outputs undefined/null.
Why is this model/object not passing? What am I doing wrong and how do I fix it?
ngModel should go on the <select> not the <option>. You should also consider using ngOptions.
So:
<td>
<!-- ngModel should go here -->
<select ng-model="mfrNo" class="form-control" id="">
<!-- Instead of here -->
<option ng-repeat="manufacturer in manufacturers" value="mfrNo">{{manufacturer.SUPP_NAME}} [{{manufacturer.SUPP_NO}}]</option>
</select>
</td>
Additionally, you are setting the value of your only <option> to "mfrNo". I don't know if that is intentional or not, but that means that the value of $scope.mfrNo will be "mfrNo". I think you mean to set it to some other value from the $scope. Use {{some_scope_var}} interpolation.
I'm trying to get the selected item's data-price to set on the next column's input field. It's working for first row but not working for each row.
How do I get this done?
<td>
<select class="clientType" name="type[]">
<option value="" disabled selected>Type</option>
<option data-price="3" value="3">R</option>
<option data-price="10" value="10">EB</option>
<option data-price="3" value="3">ND</option>
<option data-price="" value="">Special</option>
</select>
</td>
<td>
<input class="clientAmt" type="number" name="amount[]">
</td>
jQuery:
$('.clientType').change(function () {
$(this).each(function() {
$('.clientAmt').val($('option:selected', this).data('price'));
})
})
remove the each and go to the closest row to find the .clientAmt
$('.clientType').change(function() {
$(this).closest('tr').find('.clientAmt').val($('option:selected', this).data('price'));
});
DEMO
$('.clientType').change(function() {
$(this).closest('tr').find('.clientAmt').val($('option:selected', this).data('price'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select class="clientType" name="type[]">
<option value="" disabled selected>Type</option>
<option data-price="3" value="3">R</option>
<option data-price="10" value="10">EB</option>
<option data-price="3" value="3">ND</option>
<option data-price="" value="">Special</option>
</select>
</td>
<td>
<input class="clientAmt" type="number" name="amount[]">
</td>
</tr>
<tr>
<td>
<select class="clientType" name="type[]">
<option value="" disabled selected>Type</option>
<option data-price="3" value="3">R</option>
<option data-price="10" value="10">EB</option>
<option data-price="3" value="3">ND</option>
<option data-price="" value="">Special</option>
</select>
</td>
<td>
<input class="clientAmt" type="number" name="amount[]">
</td>
</tr>
</table>
Problem : The problem in your code is
$(this).each(function() {
$('.clientAmt').val($('option:selected', this).data('price'));
})
Here $(this) is just one select element, so your loop will be executed only once anyways. The main problem is this $('.clientAmt').val(...) Here you are selecting all the input elements with the class clientAmt, The selector returns you array of elements, And when you set any attribute on this array of elements it will be applied only for the first element in the array. Hence it always applies to your first input. You have to select the appropriate input and assign the value to only this one.
Solution :
So you have two options to resolve this
1) Using parent().next() : use parent() on the select tag which will give you the td of this select tag and then do next on this td which will take you to the next td that has the input in it. Now set the value of this input
$('.clientType').change(function() {
$(this).parent().next().find('.clientAmt').val($('option:selected', this).data('price'));
});
2) Using closest('tr').find('.clientAmt'): use closest() to find the closest tr which wraps this entire row, that is the tr which wraps this td and other td which holds the input. Now from this tr find the input with class clientAmt with in it
$('.clientType').change(function() {
$(this).closest('tr').find('.clientAmt').val($('option:selected', this).data('price'));
});
$(document).on('change', 'select', function () {
let next_select = $(this);
// console.log(next_select.toArray())
if (!next_select.parent().parent().next().find('select').length) {
next_select.parent().parent().parent().next().find('input[type="text"]').click()
console.log(next_select.parent().parent().parent().next());
} else if (next_select.parent().parent().next().find('select').prop("disabled")) {
setTimeout(function () {
next_select.parent().parent().next().find('select').select2('open')
}, 1000)
console.log('b');
} else if (next_select.parent().parent().next().find('select').length) {
next_select.parent().parent().next().find('select').select2('open')
console.log('c');
}
});
I want to get the selected value of the inputs.
Only if the ascendent class is a specific one - Q01.
Assume there is no "name" or "ID" on the select menu as i dont know it at run time.
JSFiddle Here
<table>
<TR>
<td class="Q01" valign="MIDDLE"> <b>01.1 </b>Question 01 </td>
<TD>
<SELECT CLASS="selectMenu" ID="" NAME="">
<OPTION VALUE=""><None></OPTION>
<OPTION VALUE="2" SELECTED>2</OPTION>
<OPTION VALUE="1">1</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<td class="Q01" valign="MIDDLE"> <b>01.1 </b>Question 02 </td>
<TD NOWRAP>
<SELECT CLASS="selectMenu" ID="" NAME="">
<OPTION VALUE=""><None></OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="1">1</OPTION>
</SELECT>
</TD>
</TR>
</table>
I have tried $(".Q01:first").next('select').val(); but it returns undefined
EDIT - I changed "input" to "select", my mistake.
ANSWER EDIT - thanks to Hello Cynogenic, i further narrowed it down to what I was after, using "alert($('.Q01:first').next('td').find('select option:selected').val()) i was returned the selected option from the first select menu.
alert($(".Q01:first" ).next('td').children().val());
Check below link :-)
JSFiddle
First off, you have a spare </TD> tag that means your markup is broken.
Assuming you remove the errant tag, this will give you the select element:
$('.q1').next('td').find('select');
You have to traverse the document step by step.
next() means "find the next element within this container, at this level, if it matches the specified selector"
find() means "search the current element for children matching the specified selector"
I am facing some issue in assigning id to two elements present in a single column. One element is dropdown and other is a text element. Actually I achieved this in first scenario but i am facing some issues in second scenario. Please help me guys..
Scenario 1:
<td>
<select name="fmeaEntityForm[0].subSystem.id" id="subSystem0" onchange="getsubSystemFunction(this)">
<option value="-1">
<spring:message code="label.fmea.select.subSystem" />
</option>
<c:forEach items="${subSystemList}" var="ss">
<option value="${ss.id}">${ss.subSystem}</option>
</c:forEach>
<option value="0">
<spring:message code="label.fmea.select.other" /></option>
</select>
<input type="text" name="fmeaEntityForm[0].subSystem.subSystem" id="subSystemText0" placeholder="Enter Sub-system if selected other"/>
</td>
In scenario one i can easily access first element by : table.rows[rowCount].cells[cellNumber].childNodes[0] and second element by table.rows[rowCount].cells[cellNumber].lastChild .
Scenario 2: I need to align this dropdown and text box so i used two classes to align both of the elements parallel. Now both elements are aligned properly but I am not able to access both these elements
<td>
<div class="element1">
<select name="fmeaEntityForm[0].subSystem.id" id="subSystem0" onchange="getsubSystemFunction(this)">
<option value="-1">
<spring:message code="label.fmea.select.subSystem" />
</option>
<c:forEach items="${subSystemList}" var="ss">
<option value="${ss.id}">${ss.subSystem}</option>
</c:forEach>
<option value="0">
<spring:message code="label.fmea.select.other" />
</option>
</select>
</div>
<div class="element2">
<input type="text" name="fmeaEntityForm[0].subSystem.subSystem" id="subSystemText0" placeholder="Enter Sub-system if selected other"/>
</div>
</td>
css
.element1
{
display:in-line;
float:left;
}
.element2
{
margin-left:5px;
display:in-line;
float:left;
}
in "scenario 2" use..
table.rows[rowCount].cells[cellNumber].childNodes[0].childNodes[0] to get the select element, and
table.rows[rowCount].cells[cellNumber].lastChild.childNodes[0] to get the input element
in a html form I have an input with text type, and select menu with a few options!
I want to change the value of input to that options value I select it from Select menu
I think I can do it with jQuery or js
example:
<input type="text" name="title" value="some text">
<select onchange="onCategoryChange(this)" name="catlist[]">
<option value="1" style="color: black">text1</option>
<option value="2" style="color: black">text2</option>
<option value="3" style="color: black">text3</option>
<option value="4" style="color: black">text4</option>
</select>
I think you understand that the input is the title and options are the categories!
If someone select option with value=1 then the value of input would be "text1"
I want that the value of title and category be same!
$("select[name='catlist[]']").change(function () {
$("#inputID").val($(this).find("option:selected").text());
});
DEMO HERE
F.Y.I.
From the :checked Selector API Docs
The :checked selector works for checkboxes and radio buttons.
For select elements, use the :selected selector.
$("select").change(function(){
$("input").val($(this).find("option:checked").text());
});
http://jsfiddle.net/DerekL/QMXEn/