Conditional fields with jQuery and Semantic UI - javascript

I have a form built with semantic-ui and I need to make a few fields appear conditionally, in case a specified selection is made.
Here's the html code:
<div class="field">
<label>Pay Mode</label>
<div class="ui selection dropdown" id="paymode">
<input type='hidden' name='pay_mode'>
<i class="dropdown icon"></i>
<div class="default text">Pay Mode</div>
<div class="menu">
<div class="item" data-value="free">Free</div>
<div class="item" data-value="stand alone">Stand alone</div>
<div class="item" data-value="central system">Central System</div>
</div>
</div>
</div>
<div class="conditional">
<div class='three fields'>
<div class='field'>
<label>A1</label>
<input
type='text'
name='a1'
value=''
required
/>
</div>
<div class='field'>
<label>A2</label>
<input
type='text'
name='a2'
value=''
required
/>
...
So basically, the condition is the Pay Mode. The class "conditional" only has to show up if "Stand alone" is selected at Pay Mode.
Here's my js file:
$('.conditional').hide();
$('#paymode').change(function () {
var selected = $('#paymode item:selected').text();
$('.conditional').toggle(selected == "Stand alone");
});
This successful hides the conditional class, but the same class does not show up even if Stand alone is selected as an option.
What is wrong with this code? Many thanks!

I found a solution.
Slightly modify the Pay Mode dropdown field like this:
<div class="field">
<label>Pay Mode</label>
<select name="pay_mode" class="ui fluid dropdown" id="condition">
<option value="">Pay Mode</option>
<option value="free">Free</option>
<option value="stand alone">Stand alone</option>
<option value="central system">Central System</option>
</select>
</div>
And the js file like this:
$('.conditional').hide();
$('#condition').change(function () {
var selected = $('#condition option:selected').text();
$('.conditional').toggle(selected == "Stand alone");
});
it works like a charm!

Related

How to put material select and label in the same row side by side

I want to be seem that language label and select options in same row.But I couldn't make them in same row using bootstrap col-md-6.Whole form is seperated into same col-sm-6 columns inside row.
As you can see on the image language label and select doesnt look like on the same row, very far from each other and select field got shrinked.How to make them look well and normal on the same row?
Here's what I tried below:
<div class="row" style="margin-left:10px;">
<div class="col-sm-6">
<ul class="list-unstyled">
<li>
<div class="row">
<div class="col-md-6">
<h4>Language:</h4>
</div>
<div class="col-md-6" style="text-align:left">
<mat-form-field>
<select matNativeControl required>
<option value="english">English</option>
<option value="german">German</option>
</select>
</mat-form-field>
</div>
</div>
</li>
</ul>
<div class="col-sm-6">
...other form elements
</div>
</div>
Replace the following with your h4 tag
<h4 style="display:inline">Language:</h4>
Demo Stackblitz

Which dropdown item and checkbox are selected if button clicked?

I have a dropdown list like this:
<select name="product" id="product" class="ui fluid search dropdown" >
<option value="mp3">MP3 player</option>
<option value="camera">Camera</option>
<option value="mobile">Mobile</option>
<option value="dvd">DVD player</option>
</select>
when a client select each one, some related check-boxes will appear. each item has got its own check-boxes. for example when they select mp3, check-boxes appear like this
<div class="ui segment" id="mp3">
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Price</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Weight</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Storage</label>
</div>
</div>
And have a button at the end
<button class="ui blue basic button" id="search">Search</button>
what is the jquery code to check if the button is clicked, show an alert contains the name of the item in dropdown and check-boxes which are checked?
Need to say, that SO is not a free code-writing service, so you have to provide what did you try, but for the first time it's OK, just notice that.
Here is what you're trying to achieve:
function whichIsSelected() {
var checkedArr = [];
var dtopdownVal = $("#product").val();
$("input[type='checkbox']").each(function() {
if($(this).prop("checked")) {
checkedArr.push($(this).prop("name"));
}
});
alert(`Selected item from dropdown: ${dtopdownVal}. Checked checkboxes: ${checkedArr}`)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="product" id="product" class="ui fluid search dropdown" >
<option value="mp3">MP3 player</option>
<option value="camera">Camera</option>
<option value="mobile">Mobile</option>
<option value="dvd">DVD player</option>
</select>
<div class="ui segment" id="mp3">
<div class="ui toggle checkbox">
<input type="checkbox" name="Price">
<label>Price</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="Weight">
<label>Weight</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="Storage">
<label>Storage</label>
</div>
</div>
<button class="ui blue basic button" id="search" onclick="whichIsSelected()">Search</button>
<!-- what is the jquery code to check if the button is clicked, show an alert contains the name of the item in dropdown and check-boxes which are checked? -->
At first, I'm just getting the dropdown value via $("#product").val();. Then, I select all checkboxes via $("input[type='checkbox']"), then, I iterate through selected checkboxes via .each() and pushing name property of only checked checkboxes to checkedArr array. And finally I'm showing the info with simple alert.
You can see this solution https://jsfiddle.net/dpdvmh8x/1/
Read more:
https://api.jquery.com/click/
https://stackoverflow.com/a/1965137/6063698

How to set drop down value as blank using Angular.js

I need one help.I need to set drop down value as blank after finishing one action using Angular.js.I am explaining my code below.
<div style="height:270px; overflow-x:hidden; overflow-y:scroll;" ng-show="viewOrderTable">
<div class="table-responsive dashboard-demo-table">
<select class="form-control" id="status" ng-model="order_status" ng-change="changeOrderStatus(order_id,shipping_email,p.pro_data_id,order_status,p.days)">
<option value="">Select Status</option>
<option value="In-progress">IN-PROGRESS</option>
<option value="Dispatch">DISPATCH</option>
<option value="Delivered">DELIVERED</option>
<option value="canceled" ng-if="p.pro_status =='Ordered' && p.pro_status=='In-progress'">CANCELED</option>
<option value="Returned" ng-if="p.days <= 48 && p.pro_status=='Delivered'">RETURN</option>
</select>
</div>
</div>
from the above list when user is selecting DISPATCH the below form is opening.
<div class="" ng-show="viewDispatch">
<div style="padding-bottom:20px;">
<div class="col-md-6">
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth" style="width:120px; text-align:left;">Dispatched Date& Time :</span>
<div class="datepicker" date-format="dd-MM-y h:mm:ss" button-prev='<i class="fa fa-arrow-circle-left"></i>' button-next='<i class="fa fa-arrow-circle-right"></i>'>
<input type="text" name="dispatch_date" class="form-control" id="dispatch_date" ng-model="dispatch_date" placeholder="Add Dispatched Date& Time" ng-change="clearField('dispatch_date');" />
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="col-md-12 text-right">
<button type="button" class="btn btn-success" ng-click="addDispatchData();">Submit</button> <button type="button" class="btn btn-danger" ng-click="clearDispatchData();">Back</button>
</div>
</div>
</div>
The controller side code for this action is given below.
$scope.changeOrderStatus=function(orderid,email,prodataid,order_status,hour){
if(order_status=='Dispatch'){
$scope.viewOrderTable=false;
$scope.viewDispatch=true;
pro_dataId=prodataid;
order_Id=orderid;
dStatus=order_status;
email=email;
}
}
When user is clicking on back button its again coming to its original state but drop down DISPATCH option is displaying where i need to reset the drop down list again.
$scope.clearDispatchData=function(){
$scope.viewOrderTable=true;
$scope.viewDispatch=false;
$scope.order_status='';
}
I did like above but its not resetting .Please help me to resolve this issue.
You can use ng-init for this in your html file
<select class="form-control" id="status" ng-model="order_status" ng-change="changeOrderStatus(order_id,shipping_email,p.pro_data_id,order_status,p.days)" ng-init='order_status == 0'>
May be digest issue you can try using $timeout so you should inject $timeout in your controller before use.
$scope.clearDispatchData=function(){
$timeout(function() {
$scope.viewOrderTable=true;
$scope.viewDispatch=false;
$scope.order_status='';
});
}

Knockout js subscribe behaves differently

I am using subscribe in my application I use three subscribe the first two works good but the last observable that I add subscribe doesn't work as I want.
// Listen to likelihood so that everytime it change it will also change the RiskLevel
self.Likelihood.subscribe(function (newValue) {
self.RiskLevelName(GetRiskLevel(newValue, self.Consequence()));
});
self.Consequence.subscribe(function (newValue) {
self.RiskLevelName(GetRiskLevel(self.Likelihood(), newValue));
});
When I change the Likelihood or the Consequence it change the value of the RiskLevelName it's working great. I add a breakpoint in the
self.RiskLevelName(GetRiskLevel(newValue, self.Consequence()));
I noticed that it didn't heat the breakpoint when I change the value of Likelihood. The funny thing is that it change the value of self.RiskLevelName.
I add another code to subscribe to the Account but it's not working. I didn't get any error in the console
self.Account.subscribe(function (newValue) {
console.log(newValue);
});
Here is the way I bind them to my DOM elements
<div class="span6">
<div class="control-group" id="likelihoodModalControlGroup">
<label class="control">Likelihood</label>
<div class="controls">
<select id="likelihood" class="input-large custom" data-bind="value:Likelihood, options:$root.LikelihoodList, optionsValue:'Key', optionsText:'Value', optionsCaption:'Select Likelihood'">
<option value="0">Select Likelihood</option>
</select>
</div>
</div>
</div>
<div class="span6">
<div class="control-group" id="consequenceModalControlGroup">
<label class="controls">Consequence</label>
<div class="controls">
<select id="consequence" class="input-large custom" data-bind="value:Consequence, options:$root.ConsequenceList, optionsValue:'Key', optionsText:'Value', optionsCaption:'Select Consequence'">
<option value="0">Select Consequence</option>
</select>
</div>
</div>
</div>
<div class="span6">
<div class="control-group" id="AccountModalControlGroup" >
<label>Account</label>
<div class="controls">
<select class="input-large custom" data-bind="value:Account, options:$root.ProjectList, optionsValue:'Key', optionsText:'Value', optionsCaption:'Select Account'">
<option value="0">Select Account</option>
</select>
</div>
</div>
</div>

How to show an entire div on select

I need some help displaying a div with a form inside of it whenever someone selects a certain option from a tag. My code is this:
<script type="text/javascript">
$(function() {
$('#contactOptionSelect').change(function() {
$('.emailForm').hide();
$('#' + $(this).val()).show();
});
});
</script>
<div class="contactSelect" id="contactOptionSelect">
<label for="selectContact">Contact us: </label>
<select name="selectContact" class="selectContactType" style="width: 150px;"/>
<option class="opt" value="">Please select</option>
<option class="opt" id="helpOpt" value="">Help and Support</option>
<option class="opt" id="emailOpt" value="">Email</option>
<option class="opt" id="visitOpt" value="">Visit us!</option>
<option class="opt" id="phoneOpt" value="">Phone</option>
</select>
</div>
<div class="emailForm" id="emailFormId">
<form id="contactUsForm" method="post" action="">
<div class="formSubject">
<label for="inputSubject">Subject</label>
<input type="text" width="50px" id="inputSubject" />
</div>
<div class="formBody">
<label for="inputBody">Email</label>
<textarea rows="15" cols="50" id="inputBody"></textarea>
</div>
<div class="formSubmit">
<input type="submit" id="inputSubmit" value="Send!"/>
</div>
</form>
</div>
And I want to display the last form when the email option is selected. I kinda want it to work like this: http://www.apple.com/privacy/contact/ High standards I know but whatever haha Thanks in advance for any help!
Are you looking for something like this? http://jsbin.com/okakuy/edit#javascript,html
Whenever the select option is changed, we hide whichever div is visible, and show whichever div has the current select value as its id attribute.
$("#parts").on("change", function(o){
$(".panels")
.find("> div:visible")
.slideUp()
.end()
.find("#" + o.target.value)
.slideDown();
});
Coupled with this markup:
<select id="parts">
<option>foo1</option>
<option>foo2</option>
<option>foo3</option>
</select>
<div class="panels">
<div id="foo1">This is foo1</div>
<div id="foo2">This is foo2</div>
<div id="foo3">This is foo3</div>
</div>

Categories

Resources