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
Related
I have a dropdown list that has a nice select using bootstrap 3.4.1.
The issue that i have is that: the drop down remain open after select and never close unless i click outside the list.
HTML code:
<div id="countrysd" class="row option-box">
<div class="option-box-header">
<h3 style="color:#164680">Number <span style="color:#C32952">of Users</span> </h3>
<p>Select the users country and move the range slider to set how many users </p>
</div>
<div class="col-md-6 col-sm-6">
<input type="hidden" id="option100Title" name="option100Title" value="Select" />
<input type="hidden" id="option100Price" name="option100Price" value="0" />
<select id="countryList" class="wide price-list" name="countryList" onchange="showChange()">
<option value="">Select</option>
<option value="egypt">Egypt User</option>
<option value="uae">UAE User</option>
<option value="usa">USA User</option>
</select>
</div>
</div>
JavaScript code that casuing the issue
!function(e){e.fn.niceSelect=function(t){function s(t){t.after(e("<div></div>").addClass("nice-select").addClass(t.attr("class")||"").addClass(t.attr("disabled")?"disabled":"").attr("tabindex",t.attr("disabled")?null:"0").html('<span class="current"></span><ul class="list"></ul>'));var s=t.next(),n=t.find("option"),i=t.find("option:selected");s.find(".current").html(i.data("display")||i.text()),n.each(function(t){var n=e(this),i=n.data("display");s.find("ul").append(e("<li></li>").attr("data-value",n.val()).attr("data-display",i||null).addClass("option"+(n.is(":selected")?" selected":"")+(n.is(":disabled")?" disabled":"")).html(n.text()))})}if("string"==typeof t)return"update"==t?this.each(function(){var t=e(this),n=e(this).next(".nice-select"),i=n.hasClass("open");n.length&&(n.remove(),s(t),i&&t.next().trigger("click"))}):"destroy"==t?(this.each(function(){var t=e(this),s=e(this).next(".nice-select");s.length&&(s.remove(),t.css("display",""))}),0==e(".nice-select").length&&e(document).off(".nice_select")):console.log('Method "'+t+'" does not exist.'),this;this.hide(),this.each(function(){var t=e(this);t.next().hasClass("nice-select")||s(t)}),e(document).off(".nice_select"),e(document).on("click.nice_select",".nice-select",function(t){var s=e(this);e(".nice-select").not(s).removeClass("open"),s.toggleClass("open"),s.hasClass("open")?(s.find(".option"),s.find(".focus").removeClass("focus"),s.find(".selected").addClass("focus")):s.focus()}),e(document).on("click.nice_select",function(t){0===e(t.target).closest(".nice-select").length&&e(".nice-select").removeClass("open").find(".option")}),e(document).on("click.nice_select",".nice-select .option:not(.disabled)",function(t){var s=e(this),n=s.closest(".nice-select");n.find(".selected").removeClass("selected"),s.addClass("selected");var i=s.data("display")||s.text();n.find(".current").text(i),n.prev("select").val(s.data("value")).trigger("change")}),e(document).on("keydown.nice_select",".nice-select",function(t){var s=e(this),n=e(s.find(".focus")||s.find(".list .option.selected"));if(32==t.keyCode||13==t.keyCode)return s.hasClass("open")?n.trigger("click"):s.trigger("click"),!1;if(40==t.keyCode){if(s.hasClass("open")){var i=n.nextAll(".option:not(.disabled)").first();i.length>0&&(s.find(".focus").removeClass("focus"),i.addClass("focus"))}else s.trigger("click");return!1}if(38==t.keyCode){if(s.hasClass("open")){var l=n.prevAll(".option:not(.disabled)").first();l.length>0&&(s.find(".focus").removeClass("focus"),l.addClass("focus"))}else s.trigger("click");return!1}if(27==t.keyCode)s.hasClass("open")&&s.trigger("click");else if(9==t.keyCode&&s.hasClass("open"))return!1});var n=document.createElement("a").style;return n.cssText="pointer-events:auto","auto"!==n.pointerEvents&&e("html").addClass("no-csspointerevents"),this}}(jQuery);
Please let me know if there is a solution for this
My issue was sorted when I removed onchange="showChange()".
I have page with multiple drop down menus for employees to select a sales package, these drop down menus are completely identical.
Now when a user selects a sales package say packageA, it prefills a field on the page with the default amount for that package say $100. In the next dropdown packageA is available for selection again. In this next dropdown if a user selects PackageB it prefills the amount with the previous dropdowns value of $100, which is not the correct package price? Basically the money value autofill is only working with the first dropdown selection box on the page. Whatever is selected in the first dropdown changes every other packages money field value on the page?
I understand that by getting the element by ID is not efficient in the case here, yet getting by className does not work at all.
This HTML dropdown select box is repeated a few times on the page.
<!-- this is the dropdown -->
<select id="package-dropdown" class="selectpicker pkg-class">
<option value="">Select</option>
<option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}.
<option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}.
<option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}.
</option>
</select>
<!-- where the monetary value gets prefilled -->
<div class="col-sm-5">
<input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
</div>
// JS on change function
$(document).on('change','#package-dropdown', function(e) {
let package = document.getElementById("package-dropdown");
// This is where the price gets prefilled based off of the package selected
$(".display-package-amount").val(package.options[package.selectedIndex].getAttribute('data-value'));
});
Im struggling pretty bad on how to make these actually independent from each other to where each select box truly has nothing to do with the previous/next one. Any tips would be greatly appreciated!
You can't repeat ID in a page so use classes instead.
To get the associated input , traverse to a common parent with closest() then find() what you need within that parent
$(document).on('change', '.selectpicker', function() {
$(this).closest('.row').find('.display-package-amount').val(this.value)
})
.row {
padding: 1em;
border: 2px solid #ccc;
margin: 1em
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<select class="selectpicker pkg-class">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<hr/>
<div class="col-sm-5">
<input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
</div>
</div>
<div class="row">
<select class="selectpicker pkg-class">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<hr/>
<div class="col-sm-5">
<input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
</div>
</div>
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
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 have seen examples of this using jquery or javascript, but I am not experienced with either of these at all so everything I try fails. I need all of the required fields hidden and 'unrequired' if that's a word, if someone chooses the option "PayPal".
<tr>
<td colspan="2"><h4>Please enter payment method.</h4></td>
</tr>
<tr>
<td class="required" colspan="2">
<label>
Card Type <span>*</span>
<select name="CardType" id="CardType">
<option value="" selected="selected">--Please Select--</option>
<option value="Amex">American Express</option>
<!--<option value="Discover">Discover</option>-->
<option value="MasterCard">MasterCard</option>
<option value="PayPal">PayPal</option>
<option value="Visa">Visa</option>
</select>
</label>
</td>
</tr>
<tr>
<td class="required" width="50%">
<label>
Card Number <span>*</span> <br />
<input type="text" name="CardNumber" id="CardNumber" class="text" maxlength="16" onkeypress="return isNumberKey(event)" />
<em> </em>
</label>
</td>
<td class="required" width="50%">
<label>
Security Code <span>*</span> <br />
<input type="text" name="CardCode" id="CardCode" class="text" maxlength="5" onkeypress="return isNumberKey(event)" />
<em>What's this?</em>
</label>
</td>
</tr>
<tr>
<td class="required">
<label>
Expiration Month <span>*</span>
<select name="CardMonth" id="CardMonth">
<option value="" selected="selected">--Month--</option>
<option value="01">January - (01)</option>
<option value="02">February - (02)</option>
<option value="03">March - (03)</option>
<option value="04">April - (04)</option>
<option value="05">May - (05)</option>
<option value="06">June - (06)</option>
<option value="07">July - (07)</option>
<option value="08">August - (08)</option>
<option value="09">September - (09)</option>
<option value="10">October - (10)</option>
<option value="11">November - (11)</option>
<option value="12">December - (12)</option>
</select>
</label>
</td>
<td class="required">
<label>
Expiration Year <span>*</span>
<select name="CardYear" id="CardYear">
<option value="" selected="selected">--Year--</option>
<?
$yToday = date("Y");
$yLimit = $yToday + 10;
for($y=$yToday; $y<$yLimit; $y++)
print "<option value='$y'>$y</option>\n";
?>
</select>
</label>
</td>
</tr>
I've looked at the following posts for guidance but they are just confusing me:
Show hide elements based on ID from select dropdown javascript and
jQuery show/hide text field based on a dropdown selection value and a radiobutton
Nothing that I look for seems to have the capability of removing required fields based on that selection. I still need them to be required if the user chooses any of the credit card options, just not for PayPal. Can someone please post a link that they think is the best course for this situation or some sample code I can look at?
First, you may be using the <label> tag incorrectly. In my jsFiddle demo, I wanted to check each label's text in order to not hide the Card Type cell. However, the label surrounds not only the text, but also the <select> element itself. This is not how the label tag should be used. In an updated demo, I will still NOT the Card Type cell, but you will see the kludge that must be used (.split method) to determine the name of the label.
Next, I suggest making the fields *required, and not the table cells.
When validating your code, it is more difficult to determine if a field is required if you must always look at the corresponding table cell attributes. Much simple just to look at the field's own attributes. However, here is something that addresses your question as it is:
jsFiddle Demo
$('#CardType').change(function() {
if ($(this).val() == 'PayPal'){
$('.required').each(function() {
$(this).removeClass('required');
$(this).hide();
});
}
});
Revised example to show hiding all cells except the Card Type cell:
jsFiddle Demo 2
var lbl;
$('#CardType').change(function() {
if ($(this).val() == 'PayPal'){
$('.required').each(function() {
lbl = $(this).find('label').text().split('*')[0];
if (lbl != 'Card Type '){
$(this).removeClass('required');
$(this).hide();
}
});
}
});
And one more example to demonstrate unhiding and restoring the required class when select is changed to something else. Note that it was necessary to add an additional class ("req_poss") to each <td> element for which the REQuired class may POSSibly need to be re-added:
jsFiddle Demo 3
var lbl;
$('#CardType').change(function() {
if ($(this).val() == 'PayPal'){
$('.required').each(function() {
lbl = $(this).find('label').text().split('*')[0];
if (lbl != 'Card Type '){
$(this).removeClass('required');
$(this).hide();
}
});
}else{
$('.req_poss').each(function() {
$(this).addClass('required').show();
});
}
});
add event $('#CardType').on('change',function() {});
and in this function get all the inputs and with the function $.each() if the value of select is paypal removeAttr() 'required' for all or just hide() it or whatever You want.
Sorry, I'm barely following what you're saying, the only things required are what you make required by not allowing other things to happen until there is input in them, that's easily taken care of by changing the attributes to remove "required" at the same time you hide other things
$("#CardType").change(function(){
if ($("#CardType).value()=="PayPal"){
$("fieldYouWantToHide).hide();
}
});