I have an input button that I want to set to disabled if a user selects a certain value from a select box:
Select menu:
<select id="jobstatus" name="jobstatus" ng-model="associate.JobStatus" class="form-control">
<option value="0">Current</option>
<option value="1">Former</option>
<option value="2">Never worked there</option>
</select>
Input Button:
<input type="submit" class="btn btn-info pull-right
btn-lg btn-block" ng-disabled="{{associate.JobStatus === '2'}}" />
Now when I am viewing the source, when I do select option 2, the input button element changes from value ng-disabled="false" to ng-disabled="true" but the disabled attribute is not applied to the button.
What am I doing wrong here?
Use this
<input type="submit" class="btn btn-info pull-right btn-lg btn-block" ng-disabled="associate.JobStatus == 2" />
Angular Doc ngDisabled
Curly braces means the notation {{ }} to bind expressions to elements is built-in Angular markup.
Use:
<input type="submit" ng-disabled="associate.JobStatus == 2" />
Instead of:
<input type="submit" ng-disabled="{{associate.JobStatus == 2}}" />
same as for ng-show / ng-hide / ng-if, you can use the model
expression itself instead of {{}}
For Example:-
Use:
<div ng-show="someObject.showProperty">
Instead of:
<div ng-show="{{someObject.showProperty}}">
You have to use like this.
<input type="submit" class="btn btn-info pull-right
btn-lg btn-block" ng-disabled="associate.JobStatus === '2'" />
Related
I'm trying to enable a button only when my input is filled with at least 18 characters. Here is the HTML code:
<form id="frm.frmEntidade" name="frm.frmEntidade">
<div>
<input type="text" ng-model="entidade.cnpj" id="cnpjEntidade" name="cnpjEntidade" required />
<span class="input-group-btn">
<button title="Buscar Entidade" class="btn btn-primary"
type="button" ng-click="buscarEntidade(entidade.cnpj)" ng-
disabled="frm.frmEntidade.cnpjEntidade.lenght !== 18">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</form>
but the button stay awas disabled, anyone could help?
You have a typo error on the word length. Change:
<button [...]
ng-disabled="frm.frmEntidade.cnpjEntidade.lenght !== 18">
To:
<button [...]
ng-disabled="frm.frmEntidade.cnpjEntidade.length !== 18">
As a side note, this condition check if it is different from 18, not if "input is filled with at least 18 characters".
try ng-disabled="entidade.cnpj.length!=18"
It's better use ng-minlength for form validation. by checking $valid you can enable or disable button
<form id="frm.frmEntidade" name="frm.frmEntidade">
<input type="text" ng-model="entidade.cnpj" id="cnpjEntidade" name="cnpjEntidade" required ng-minlength="18" />
<span class="input-group-btn">
<button title="Buscar Entidade" class="btn btn-primary"
type="button" ng-click="buscarEntidade(entidade.cnpj)"
ng-disabled="!frm.frmEntidade.$valid">
<span class="glyphicon glyphicon-search"></span>
Button
</button>
</span>
</form>
I'm trying to fetch values from some input fields that are placed in a Bootstrap Popover. But I get empty string.
Complexity: There is a button within a form, when you click this button a popover appears with 2 input fields and a button. I want to capture the values of these 2 fields when we click the button. If I put these fields in a form, then it would become nested forms.
Following is my code.
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
My way of fetching values
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
Here is my JSFiddle covering the above case.
Try following code:
$(document).ready(function() {
$(document).on('click', '.urlDetails', function() {
console.log('clicked');
console.log($('.popover-content').find('#urlLabel').val());
console.log($('.popover-content').find('#url').val());
})
});
I think you misspelled
$(document).ready(function() {
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
Here is a working code
I have the following likert scale:
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled style="width:10px">Not<br />Fearsome</a>
<button id="fear1" type="button" name="gender" class="btn btn-default likert-1" val="0">1</button>
<button id="fear2" type="button" name="gender" class="btn btn-default likert-2" val="1">2</button>
<button id="fear3" type="button" name="gender" class="btn btn-default likert-3" val="2">3</button>
<button id="fear4" type="button" name="gender" class="btn btn-default likert-4" val="3">4</button>
<button id="fear5" type="button" name="gender" class="btn btn-default likert-5" val="4">5</button>
<a class="btn btn-link disabled" disabled style="width:10px">Extremely<br />Fearsome</a>
</div>
</div>
I am trying to access the 'val' attribute from a script by using:
$('#fear').val($(this).getAttribute('val'));
but this does not seem to work.
Note: #fear is the id of a hidden variable
getAttribute is a standard DOM method but you are trying to call it on a jQuery object.
Either use a standard DOM object:
this.getAttribute('val')
or use the jQuery attr method:
$(this).attr('val')
Note that val is not a valid attribute for the button element. Consider data-val instead.
Alternative, avoid adding an extra attribute with redundant information in the first place.
$(this).text();
none of the element has id "fear", check u have named them like fear1, fear2, fear3 ....
try
$(this).attr('val');
Try this: $('#fear').attr('val');
As suggested by #DimalChandrasiri, use
$(this).attr('val') or $('#fear').attr('val')
HTML form method post does not work with multiple submit
I have the following
<form id="myForm" method="post" action="">
<select name="select_data">
<option value="1000">Account Demo 1</option>
<option value="1035">Account Demo 2</option>
</select>
<input type="submit" onclick="sendForm('<?php echo $domainURL;?>page_1')" form="myForm" class="btn btn-primary btn-sm" value="Page 1">
<input type="submit" onclick="sendForm('<?php echo $domainURL;?>page_2')" form="myForm" class="btn btn-primary btn-sm" value="Page 2">
<script>
function sendForm(action)
{
document.getElementById('myForm').action = action;
document.getElementById('myForm').submit();
}
</script>
I did some testing, I change method to "get" and its work, but when I change method to "post" , it not able send anything.
I tried with
print_r($_GET);
print_r($_POST);
Get was able to retrieve the send value on a select option tag.
Same code, but post doesn't send through
I tried to do post
if action="" , its work fine
but if action="http://www.myowndomain.com/subpage/page/thepage.php" it does not work for post.
Instead of Javascript, use the formaction attribute:
<input type="submit" formaction="<?php echo $domainURL;?>page_1" class="btn btn-primary btn-sm" value="Page 1">
<input type="submit" formaction="<?php echo $domainURL;?>page_2" class="btn btn-primary btn-sm" value="Page 2">
THere's also no need for form="myForm" when the submit button is inside the <form> element.
Change <input type="submit"> to type="button" I hope it will work.
Hi I have following dropdown
<select ng-model="item" ng-options="a.name for a in adda" ng-change="onChange()">
<option value="">
Add new account
</option>
</select>
In my code I have following button..
<button class="btnS btn-success ctrl-btn" ng-click="save()"> Submit</button>
What i want the button disabled and only be enabled if one of the options in the drop down is selected. Thanks
You can use ng-disabled:
<button
class="btnS btn-success ctrl-btn"
ng-click="save()"
ng-disabled="!item"> Submit</button>