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>
Related
Hı guys.I have started to learn angular.I made an example that contains 2 page.One of them is main.html.The other one(it is popup) is form.html. When i click the button in main.html page, the popup is opened and user enter some inputs.(lacation and tag).There is a button at the bottom which is called add.What i want to do is when the user click the add button,i want to create a thumbnail in the main.html page.Then user can see location and tag inputs in the thumbnail.
How can i add thumbnails automatically?
form(popup).html
<div ng-show="true">
<label>Location</label>
<br>
<input type="text" gm-places-autocomplete ng-model="vm.autocomplete" class="form-control" style="width:300px;" />
<div ng-show="vm.tags2.length">
<tags-input ng-model="vm.tags2" placeholder="Selected people" on-tag-removed="tagLocRemoved($tag)" style="width:300px;" on-tag-adding="false">
</tags-input>
</div>
<br>
<label>Keywords</label>
<br>
<tags-input on-tag-added="tagAdded($tag)" on-tag-removed="tagRemoved($tag)" ng-model="vm.remove" style="width:300px;"></tags-input>
<div>
<br>
<button type="button" class="btn btn-default" ng-click="vm.clear()">
<span class="glyphicon glyphicon-ban-circle"></span> <span>Cancel</span>
</button>
<button type="button" class="btn btn-default" ng-click="vm.add()">
<span class="glyphicon glyphicon-ban-circle"></span> <span>Add</span>
</button>
</div>
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 am using a bootstrap dropdown and I want to trigger it with some other button.
<li class="dropdown">
Insert TA<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<form class="navbar-form navbar-left" >
<div class="form-group" id = "TAform">
<input type="text" class="form-control" placeholder = "Roll Number" required>
<input type="text" class="form-control" placeholder = "M.A.C address" required>
</div>
<button type="submit" class="btn btn-default" onClick = "addMAC()" >+</button>
<button type="submit" class="btn btn-default" onClick = "removeMAC()" >-</button>
<button type="submit" class="btn btn-default" onClick = "submitForm()">Submit</button>
</form>
</ul>
</li>
I want this to be triggered (open) when I click on this other button:
<button type = "submit" class="btn btn-default" onClick = "deleteTA()">delete</button>
ie what should be I put inside the deleteTA() function.
In your case you need to toggle dropdown this way:
function deleteTA(e) {
$('.dropdown-toggle').dropdown().dropdown('toggle');
e.stopPropagation();
}
Where you pass event object into function:
<button type="submit" onClick="deleteTA(event)" class="btn btn-default">delete</button>
It's important here that you stop event propagation otherwise dropdown will immediately close.
Demo: http://plnkr.co/edit/TfdnoGdW1CMpbZlHl62A?p=preview
In the bootstrap documentation on dropdown (with interactive examples enabled) it is given in "Usage" section as:
$('.dropdown-toggle').dropdown()
Hope that helps.
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.
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'" />