i am trying to pop a notification (alert) when i click on disable option.
First i have this component.html:
<div class="col-lg-6 col-md-6">
<div class="from-group">
<label for="vehicle"> Vehicle </label>
<select
type="text"
class="form-control"
formControlName="vehicle_index"
(click)="showAlert()"
>
<option value="">--Select a Vehicle--</option>
<option
*ngFor="let vehicle of vehicles; let i = index"
value="{{ i }}"
[disabled]="vehicle.id == 8"
>
{{vehicle.model}} - {{vehicle.plate_number}}
</option>
</select>
</div>
</div>
As we see i disable from option when id = 8.
function showAlert() :
showAlert(){
if (this.plannedRouteForm.get("vehicle_index").value.disabled == true) {
alert(" Disabled");
}
}
what i am thinking about is when i click on value in option i check if is disable? then show alert.
But unfortunately NOT WORK.
What i do wrong?
mat select item disabled can't clicked...
material.angular.io/components/select/overview
Try to add a custom CSS, you can change [disabled] with [class.nameyourclass]="vehicle.id ==8" try to add a background red only for test.
Related
I have following code
<div class="form-group">
<select class="form-control" name="persons">
<option value="1">{{Lang::get('user')}}</option>
<option value="0">{{Lang::get('admin')}}</option>
</select>
</div>
I want something like this if is selected the option with value = 1 to show an input like this
<div class="form-group">
{{ Form::text('name','',['required', 'class'=>'form-control', 'placeholder'=>Lang::get('user_name')]) }}
</div>
else if the value is 0
<div class="form-group">
{{ Form::text('admin','',['required', 'class'=>'form-control', 'placeholder'=>Lang::get('admin_name')]) }}
</div>
I'm new in Laravel and I don't know how to show inputs by value.
acually this is DOM issues
$('#persons').on('change', function(){
var value = $(this).val();
$('.form').find('div').addClass('hide');
if(value === 1){
$('.form').find('.one').remove('hide')
$('.form').find('.one').addClass('show')
}else{
$('.form').find('.two').remove('hide')
$('.form').find('.two').addClass('show')
}
});
enter code here
i made example . refer i update code
https://jsfiddle.net/channasmcs/5fmmLqax/
thanks
refre on change JQ
jQuery select change show/hide div event
I have a form in a webview. I'm able to detect button clicks and perform required tasks.But in the form, there is a option tag. Based on the selected item type, I should perform next task. But I'm unable to detect the option click event. I tried both with onClick and onChange. Both doesn't work. Any idea how to detect its click event?
I tried the below code in my html code:
<div class="label"><b>Type :</b></div>
<div class="field">
<select name="type" >
<option value="video" selected="selected" onchange="videos.performClick()">video</option>
<option value="image" onchange="images.performClick()">image</option>
</select>
</div>
</div>
You need to listen for onchange event on select field.
<div class="label"><b>Type :</b></div>
<div class="field">
<select name="type" onchange="onSelectFieldChange(this)">
<option value="video" selected="selected">video</option>
<option value="image">image</option>
</select>
</div>
</div>
Now you write onSelectFieldChange function which handles redirection based on the selected option.
function onSelectFieldChange(element) {
switch(element.value) {
case 'video':
videos.performClick()
break;
case 'image':
images.performClick()
break;
default:
break;
}
}
I have a bunch of fields that are required (not shown here) but then two that are optional. However, if either of these two gets input, the other IS required. So what I'm trying to accomplish is disabling the submit button as soon as one or the other has input, then re-enabling it once both have input. I ALSO need to re-enable if both clear back to empty.
I'm almost there it seems. One is a select, the other is a text input. I think one of my issues here is needing 'keyup' and 'onchange' in the same function (or maybe blur or something else entirely).
So here's my start. It may not be the right direction but it's half working, so hopefully this is an easy fix.
JSFiddle
HTML
<div id="createnewtask">
<h4>Create New Task</h4>
<div>
<label for="fassignedto" class="col-sm-3 control-label">Assign To</label>
<select class="form-control" name="fassignedto" id="fassignedto">
<option value="0"> </option>
<option value="12456">Chad</option>
<option value="12430" selected="">Jason</option>
</select>
</div>
<div>
<label for="ftasktypeid" class="col-sm-3 control-label">Task Type</label>
<select class="form-control" name="ftasktypeid" id="ftasktypeid">
<option value="0" selected> </option>
<option value="6">Appointment</option>
<option value="1">Call Back</option>
<option value="5">Campaign</option>
</select>
</div>
<div>
<label for="fduedate2">Due Date</label>
<input type="text" name="fduedate2" id="fduedate2" class="form-control" placeholder="Enter Date">
</div>
<button type="button" class="btn btn-success" id="notesave" name="notesave" onclick="return fnsavenote();">Submit</button>
</div>
JQuery:
$('#createnewtask').keyup(function () {
if ($('#ftasktypeid').val() != 0 && $('#fduedate2').val() != "") {
$('#notesave').removeAttr('disabled');
} else if ($('#ftasktypeid').val() == 0 && $('#fduedate2').val() == "") {
$('#notesave').removeAttr('disabled');
} else {
$('#notesave').attr('disabled', true);
}
});
Instead of
$('#notesave').attr('disabled', true) and
$('#notesave').removeAttr('disabled')
Try
$('#notesave').prop('disabled', true) and
$('#notesave').prop('disabled', false)
The disabled HTML attribute is only used by the browser to determine the initial value when it renders the page. The disabled DOM property is what actually stores the value of whether or not the input is disabled.
This works just like the checked attribute
I think I figured it out. Like I said, I needed to do both keyup and change in the same function. I believe this 'bind' is working as desired. Please correct me if I'm wrong...
$('#createnewtask').bind('keyup change', function () {
if ($('#ftasktypeid').val() != 0 && $('#fduedate2').val() != "") {
$('#notesave').prop('disabled', false);
} else if ($('#ftasktypeid').val() == 0 && $('#fduedate2').val() == "") {
$('#notesave').prop('disabled', false);
} else {
$('#notesave').prop('disabled', true);
}
});
I also edited to 'prop' as per #tomaroo's advice. Thanks!
I updated the JSFiddle.
I am trying to get a paragraph with some text and a textbox to show up when a certain option in the dropdown select menu on my form is clicked. Similar code worked for radio buttons, but doesn't seem to in this case. I would really appreciate any help that I can get on this. jsfiddle
HTML:
<select name="select1">
<option value="doctor" id="doctor1">Doctor</option>
<option value="nurse" id="nurse1">Nurse</option>
<option value="other" id="other1">Other</option>
</select>
<div class="otherprof">
<p>Please list your profession:
<input type="text" name="otherproftext" id="otherproftext" maxlength="20">
</p>
</div>
jQuery:
$(document).ready(function () {
$(".otherprof").hide();
$("#other1").click(function () {
$(".otherprof").show();
});
$("#doctor1").click(function () {
$(".otherprof").hide();
});
$("#nurse1").click(function () {
$(".otherprof").hide();
});
});
Idea is that the textbox stays hidden until users click on "Other" in the dropdown, which in turn is supposed to display the textbox immediately.
You need to use the onchange event on the select, not click on the options.
$("[name='select1']").on("change", function(){ //listen for change event on the select
$(".otherprof").toggle(this.value==="other"); //toggle show/hide based on selected value
}).change(); //trigger the change event so default value is checked
JSFiddle
Add the style attribute to the div otherprof and it will be hidden initially
<select name="select1">
<option value="doctor" id="doctor1">Doctor</option>
<option value="nurse" id="nurse1">Nurse</option>
<option value="other" id="other1">Other</option>
</select>
<div class="otherprof" style="display:none;">
<p>Please list your profession:
<input type="text" name="otherproftext" id="otherproftext" maxlength="20">
</p>
</div>
I have a small form.
Two select box elements and a submit button.
The select box elements collectively when selections are chosen, fire off an ajax request.
What I want to do is, disable the submit button UNTIL user has made selections from the select drop downs.
They must make a selection from BOTH select drop downs, before the Submit button is enabled.
I dont mind if the submit button is hidden until selections made.
Brief Code:
<form id="ad_form" method="post" action="">
<p>
<select id="ad_type" name="ad_type">
<option value="" selected="selected">Select premium ad type</option>
<option value="<?php echo TYPE_USER;?>">Featured Agent</option>
<option value="<?php echo TYPE_LISTING;?>">Featured Listing</option>
</select>
<label for="ad_type" class="labelStrong">Advertising Type</label>
</p>
<p>
<select id="ad_duration" name="ad_duration">
<option value="" selected="selected">Select premium ad duration</option>
<option value="weekly">Weekly</option>
<option value="fortnightly">Fortnightly</option>
<option value="monthly">Monthy</option>
</select>
<label for="ad_duration" class="labelStrong">Advertising Duration</label>
</p>
<p>
<div id="calender">
</div>
</p>
<p>
<input type="submit" name="submit" value="Submit" id="submitorder" />
</p>
</form>
Here's a demo that seems to do what you want:
http://jsfiddle.net/Yr59d/
That javascript code would go in a $(document).ready() block
$(function() {
$("#submitorder").css("visibility", "hidden");
$("#ad_form select").bind("change", function() {
if ($("#ad_type").val().length > 0 && $("#ad_duration").val().length > 0) {
$("#submitorder").css("visibility", "visible");
} else {
$("#submitorder").css("visibility", "hidden");
}
});
});
If you give all your selects a common class name (like 'required') , you can do something like this:
$('select.required').change(function() {
var total = $('select.required').length;
var selected = $('select.required option:selected').length;
$('#submitorder').attr('disabled', (selected == total));
});
This is not tested code. This documentation might help. This jquery discussion might help too.
Gah, I'll have to agree with Kon on this one - fix-now-worry-about-it-later answers have their place but an elegant solution that is simple at the same time has to be the way to go.
My solution: (with credit from a thread at: JQuery Enable / Disable Submit Button in IE7)
$('select.required').change(function() {
var total = = $('select.required').length;
var selected = $('#ad_form').find("select.required option[value!='':selected").length;
$('#submitorder').prop('disabled', (selected != total));
});
Incidentally, thanks ctcherry for demoing the code on the JSFiddle site - I've not seen that before and will make use of it in the future!
Use listeners on both select buttons for change and check whether the other is also set. If set, enable the submit button.