I have 2 buttons - Delete and Submit. Submit button is disabled initially. I am trying to enable Submit button whenever the user clicks on Disable button. I am using AngularJS 1.3.15 for this project.
main.html
<body>
<button ng-disabled="isItemDeleted" ng-init="isItemDeleted=true"
class="btn btn-lg btn-primary create-txn-button" ng-click="submit()">Submit Transaction</button>
deleteController.js
angular.module('myApp').controller('myCtrl',
function{};
$scope.deleteItem = function(item)
{
$scope.isItemDeleted = false;
var modalScope = $scope.$new(true);
modalScope.message = 'Why would you like to delete this item?';
modalScope.item = item;
modalScope.transaction = $scope.transaction;
};
But, even after setting the $scope.isItemDeleted to false, the submit button is not enabled. I believe the issue is connecting to the controller. I have to connect my div tag to the controller. But if I do it, the entire page is changed. Any clue?
Update: deleteItem() function is getting called by Delete Button.
DeleteButtonTabView.html
<div ng-controller="myCtrl">
<button ng-click="deleteItem(item)" class="btn btn-info btn-sm">Delete</button>
</div>
Please find the link to JSFiddle: https://jsfiddle.net/L1bnv9fr/
Related
I'm trying to figure out how to link a button to open a new HTML component but no matter which method I've tried I cannot get it to work
First I tried a JS Function:
function openNext(){
window.location = '../nextpage.html';
}
on this button code:
<div class="content">
<button type="button" ng-click="openNext()" class="nextBtn mat-raised-button"> Next!</button>
</div>
But that didn't do anything, so tried a simple href link, still nothing.
So I thought it was something perhaps with the routing
Notice that you are only asking to load a component on the click of a button. Nothing simpler:
<div class="content">
<button type="button" ng-click="openNext()" class="nextBtn mat-raised-button"> Next!</button>
<the-html-component-you-want-to-open
ng-if="isMyComponentOpen == true"
></the-html-component-you-want-to-open>
</div>
In your controller:
$scope.isMyComponentOpen = false;
$scope.openNext = function() {
$scope.isMyComponentOpen = true;
}
On the other hand, if you are looking into switching pages in your application, or loading external dialogs/modals containing other components, then you are asking the wrong question.
I have a node application, where on the frontend, I have multiple buttons that activate the same post route as specified by the formaction attribute below:
<button type="submit" formaction="/specifiedroute">-</button>
However, I want to be able to tell which button was clicked within the post route. Is there anyway I would be able to access the name or id attributes of the button within the post route (perhaps within the request object)? If not, would the only way to identify the buttons be to add a parameter to the formaction as below:
<button type="submit" formaction="/specifiedroute?redbutton">-</button>
Note all these buttons exist in one form (I can't change this) and I can't just use a hidden input field.
May be you should try this
<button type="submit" formaction="/specifiedroute?button=red">Red</button>
<button type="submit" formaction="/specifiedroute?button=green">Green</button>
<button type="submit" formaction="/specifiedroute?button=blue">Blue</button>
// NodeJS
Controller
app.post('/specifiedroute', (req, res) => {
let buttons = {
"red": "Red Button Clicked",
"green": "Green Button Clicked",
"blue": "Blue Button Clicked"
}
let reqButton = req.query.button;
res.send(buttons[reqButton])
})
The name and value of the submit button used to submit a form will be included in the submitted form data.
<button formaction="/specifiedroute" name="foo" value="minus">-</button>
and on the server
if (req.body.foo === 'minus')
As title
What I want to do is to add a button. After pressing the button, a duplicate form will be added to enter data. Need to add a few pieces of information, just press the button several times!
How can I achieve this?
You need to use javascript for this.
let button = document.getElementById('add')
let form = document.querySelector('.form')
let forms = document.getElementById('forms')
button.addEventListener("click", function() {
clone = form.cloneNode(true)
forms.appendChild(clone)
});
<div id='forms'>
<form class='form'>
<input placeholder='Name'>
</form>
</div>
<button id='add'>Add more!</button>
But you can use formsets to repeat the same form multiple times on the same page without the button:
https://docs.djangoproject.com/en/3.0/topics/forms/formsets/
I need to make a submit button work with two different IDs. Below is the HTML code:
Button: <button class="some class" type="submit" id="gform_submit_button add_to_quote">Submit</button>
Since it's not possible to assign two different IDs to a button, what's the best way to deal with it?
You'll need to create a button (it doesn't need an id) and attach a JavaScript event handler to submit the form programatically when clicked.
For example:
<form name="myForm" action="...">
<!-- Form elements go here -->
<button id="button1">Submit Button 1</button>
<button id="button2">Submit Button 2</button>
</form>
<script type="text/javascript">
var button1 = document.getElementById('button1'),
button2 = document.getElementById('button2');
function submitForm() {
document.myForm.submit();
}
button1.addEventListener('click', submitForm);
button2.addEventListener('click', submitForm);
</script>
Sounds easy and a well known question, right? I thought so as well. How do I do this in angularJS.
CSHTML
#using (Html.BeginForm("Order", "Shop", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
<div class="container" ng-app="order" ng-controller="orderController">
<button type="submit" ng-disabled="orderButtonClicked" ng-click="orderClicked()" class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button>
</div>
}
AngularJS
angular.module("order", [])
.controller("orderController", ['$scope', '$http','$filter', function ($scope, $http, $filter) {
$scope.orderButtonClicked = false;
$scope.orderClicked = function () {
$scope.orderButtonClicked = true;
}
}]);
As many others reported as well, the form is not submitting when disabling or removing the button. this answer did the same, he claims it is working, but for me is a no go.
You can assume that angular is setup correctly, disabling the button works fine.
I've never had much luck with disabling the submit button in any circumstances - even if it doesn't prevent the form from submitting, the server can get confused because it expects the name/value combination from the submit button.
Instead, I generally hide the submit button, and replace it with something appropriate:
<button type="submit" ng-show="!orderButtonClicked" ng-click="orderClicked()" class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button>
<button ng-show="orderButtonClicked" disabled class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button>
Keep in mind that even in this case, the user may be able to re-submit by hitting enter in a textbox.
Try this way:
<div ng-app="myApp" ng-controller="myCtrl">
<form>
<input type="submit" ng-disabled="orderButtonClicked" ng-click="orderClicked()">
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.orderButtonClicked = false;
$scope.orderClicked = function () {
$scope.orderButtonClicked = true;
}
});
</script>
I will put a break point there and see if orderButtonClicked is set to true when orderClicked() is triggered. Just another thought, I have experience with this issue before when I have an ng-if somewhere inside the controller scope in html. This is because angular seems to create a new scope inside that ng-if dom. The best way to avoid that is to use controllerAs and then access the scope property using controllerName.propertyName.
Does the form submit if you don't disable or remove the button? The angular documentation states that, "For this reason, Angular prevents the default action (form submission to the server) unless the <form> element has an action attribute specified."
So, depending on what you're trying to accomplish, you would have to add javascript in your .orderClicked method to make an ajax call, for example, or whatever you're trying to accomplish.