So, I'm building a form where you select a date, then you can add timeslots to that date to schedule things. Something like this:
<form name="NewForm" ng-submit="submitForm(NewForm)">
<form-group>
<angular-ui datepicker>
<button ng-click="addRow()">
</form-group>
<form-group ng-repeat="timepicker in timepickers track by $index">
<angular-ui timepicker>
<select box for tasks to pick from>
<button class="btn btn-danger" ng-click="deleteRow($index)">
</form-group>
<button type="submit" class="btn btn-primary">
</form>
Then in the controller I have:
$scope.timepickers = []
$scope.addRow = function() {
$scope.timepickers.push({ some default object data to fill out the row });
}
$scope.deleteRow = function(index) {
$scope.timepickers.splice(index, 1);
}
$scope.submitForm(form) {
if ($scope.timepickers.length < 1) {
//do some stuff and don't send the form
}
else if (form.$valid) {
//send form data to api
}
else {
//do some other stuff and don't send the form
}
}
The delete button was the last thing I added, and everything was working fine before I added it. The problem, however, is that sometimes when I push the delete button on a row, it submits the form and for the life of me I can't figure out why.
If I only have 1 or 2 'rows' it works fine. The delete button deletes the row and I can keep adding new rows, etc. If I have more than 2 rows added, though, AND I try to delete one of the rows in the middle (ie where if I checked if '$middle == true' in the ng-repeat), then it deletes the row and calls the submitForm function.
I know it actually runs through the submitForm function because if I don't fill out the form completely, then the validation stuff still triggers and the submit doesn't go through.
Anyone have any ideas?
You need to add the attribute of type button:
<button class="btn btn-danger" ng-click="deleteRow($index)" type="button">
Related
I've been researching how to do this and I can't find any helpful links so I'm asking here.
I have table on my website with data from my database. Each item has a delete checkbox next to it. If the user checks these boxes then hits the delete button, they are prompted with a message asking them if they are sure they want to delete the items. If they say yes, then the items are removed. I'd like to show what they selected in the confirmation box.
Example: Let's say they selected item4, item8, and item9, then clicked on delete. I'd want the prompt to say:
"Are you sure you want to delete the selected items?
item4
item8
item9"
I'm not sure how to even start this. Here's my current delete button:
<input type="submit" value="Delete" onclick="return confirm('Are you sure you want to delete the selected item(s)?');"/>
You could use javascript for this, something like below will work (pseudo code);
<!-- Add the onclick handler -->
<input type="submit" onclick="submitOnClick();" value="Delete" />
// Javascript function
function submitOnClick() {
var ret = "";
var table = getTable();
for (int i = 0; i < table.length; i++) {
if (row.checked) {
ret += row.innerText + " ";
}
}
alert('Are you sure you want to delete the selected items of " + ret);
}
Depending how your HTML is setup/structured you may have to change things to get it working properly.
Hoped this helped.
I have a form with multiple save buttons per customer request along with a few other buttons. When they click a save button, a confirm box opens. If they select cancel the intent is to prevent the form from submitting. However, when a user tries to select a save button other than the save button they just pressed nothing happens.
$("form").submit(function (e) {
var $btn = $(document.activeElement);
if ($btn.attr("value") == "Save") {
var c = confirm("Did you review the suicide related issues, signs and factors for currency?");
if (!c) {
$btn.css('filter', 'none');
e.preventDefault();
} else {
return true;
}
}
});
I have some issues with the code:
1- using activeElement seems dicey, I would switch to target
id.
To Clarify this point: from this answer: Just a note to keep things current. As of right now, Safari sets activeElement to the document body when clicking on a submit button. I ran into this issue on Safari 9.1
2- After checking the button is a save, prompt for confirm and then call .submit(handler) etc
I couldn't reproduce your behavior on pc, on mac there are bugs so it won't even run
Edit:
Here's what I propose instead:
$(":button").click(function(e) {
if (e.target.value == "Save") {
var c = confirm("Did you review the suicide related issues, signs and factors for currency?");
if (!c) {
console.log('form not submited');
} else {
$("form").submit(function() {
console.log('Form Submited');
});
}
}
});
And the HTML:
<form>
<button value ="Save" type="submit" name="button_1">Button #1</button>
<button value ="Save" type="submit" name="button_2">Button #2</button>
<button value ="Save" type="submit" name="button_3">Button #3</button>
<button value ="Save" type="submit" name="button_4">Button #4</button>
<button value ="Save" type="submit" name="button_5">Button #5</button>
<button value ="Save" type="submit" name="button_6">Button #6</button>
</form>
In Codepen
Description:
I'm using ui-router to load form pages upon icon click, whenever the user clicks the icon the new form should load ( remove any filled fields ). I have added ng-click on icon which can be leveraged to reset the form values.
index.html
<td>
<a ui-sref="form2"
title="yahoo">
<span class="glyphicon glyphicon-file" ng-click="newForm('new')" id="yahooIcon" ></span>
</a>
</td>
form2.html
<input type="text" name="firstname" ng-model="myModel.firstname"><br>
app.js
$scope.newForm = function (id){
if ( id == 'new' )
{
console.log(" model value inside: "+$scope.myModel.firstname);
$scope.myModel = {};
}
}
Problem:
ng-model data is showing undefined in controller and not able to reset the model upon clicking the icon.
The demo uses the same controller, However if my from has different controllers than index page. How can i send button click (ng-click) value to child controllers ?
DEMO ( Plunker )
Please Try This
//In Html Page
<button type="reset" ng-click="resetForm(formObject)">Clear Form</button>
//In Angular
$scope.resetForm = function(form) {
angular.copy({},form);
}
I have started to get into Angular JS validation....
I have this step:
<step title="Let's begin with some information about your business">
<form name="myForm" ng-submit="submitForm(myForm.$valid)" novalidate>
<table>
<tr>
<td><label>Your Name</label></td><td><input class="form-control" type="text" ng-model="user.name" required /></td>
</tr>
</table>
</form>
</step>
and I have this button outside of the steps...outside of the wizard:
<a class="btn btn-default" ng-click="gotoNextStep()" ng-show="showNextButton()">Next</a>
and in my js file, I have this function called on ng-click:
$scope.gotoNextStep = function () {
if ($scope.currentStepIndex == (3)) {
$scope.submitForm = function (isValid) {
if (isValid) {
toggleSteps($scope.currentStepIndex + 1);
}
};
} else {
toggleSteps($scope.currentStepIndex + 1);
}
}
what I am trying to do is prevent the user from going to the next step until the required field is filled.
just before my step ends and after the form ends I added this <p>{{myForm.$invalid}}</p> and it appears as true, if I change it to valid it returns false. So it seems like this is kinda working except I cant provent my user from going to the next page.
Currently with this code, the button does not goto the next step even if the required field is filled in or not. Please Help.
I should also note that $scope.submitForm is saying its undefined :(
Another note.. {{myForm.$valid}} returns false but when I fill out the required field it returns true....how would I use myForm.$valid in the js file for the $scope.gotoNextStep function
Could you use ng-disabled in your button? Like this:
<a ng-disabled="myForm.$pristine || myForm.$invalid" class="btn btn-default" ng-click="gotoNextStep()" ng-show="showNextButton()">Next</a>
And then get rid of the ng-submit in the form tag. I also just noticed you have novalidate on your form. You should remove that too.
I've got a form that has multiple submit buttons. One for changing data in a database, one for adding, and one for deleting. It looks like this:
<form action="addform.php" method="post" id="addform" onSubmit="return validate(this)">
<select name="listings" id="listings" size="1" onChange="javascript:updateForm()">
<!-- Here I have a php code that produces the listing menu based on a database query-->
</select>
<br />
Price: <input type="text" name="price" id="price" value="0"/><br />
Remarks: <textarea name="remarks" wrap="soft" id="remarks"></textarea><br />
<input type="submit" value="Update Database Listing" name="upbtn" id="upbtn" disabled="disabled"/>
<input type="submit" value="Delete Database Listing" name="delbtn" id="delbtn" disabled="disabled"/>
<br />
<input type="submit" value="Add Listing to Database" name="dbbtn" id="dbbtn"/>
<input type="button" value="Update Craigslist Output" name="clbtn" id="clbtn" onClick="javascript:updatePreview();"/>
</form>
There are actually more elements in the form, but that doesn't matter. What I want to know is, for my validation method, how can I check which submit button has been clicked?
I want it to do the following:
function validate(form){
if (the 'add new listing' or 'update listing' button was clicked'){
var valid = "Are you sure the following information is correct?" + '\\n';
valid += "\\nPrice: $";
valid += form.price.value;
valid += "\\nRemarks: ";
valid += form.remarks.value;
return confirm(valid);}
else {
return confirm("are you sure you want to delete that listing");
}
}
I assume there must be some way to do this relatively easily?
Why don't you set a global variable specifying which button was last clicked? Then you can check this variable in your validate method. Something like:
var clicked;
$("#upbtn").click(function() {clicked = 'update'});
// $("#delbtn").click(function() {clicked = 'delete'});
// ...
function validate(form) {
switch(clicked) {
case 'update':
break;
// more cases here ...
}
}
You can, for example, attach a click event to every submit button that will save a pointer to it in a variable or mark it with a specific attribute / class (it that case you will have to remove that marker from all other submit buttons in the event handler) and then in the submit callback you will know which one was clicked
I think it's easier to just use a click event on each button and handle it individually.
$(function() {
$('input[name=someName]').click(someFunc);
});
function someFunc() {
// Your validation code here
// return false if you want to stop the form submission
}
You could have a hidden field on a form and set the value of that field on clicking the button and then pick it up in your validation routine. You can use jquery to achieve this, let me know if you require an example.
You can use ajax submission with jQuery, you can try something like this:
$('form#addform input[type="submit"]').on('click',function(e){
e.preventDefault();
var current = $(this); //You got here the current clicked button
var form = current.parents('form');
$.ajax({
url:form.attr('action'),
type:form.attr('method'),
data:form.serialize(),
success:function(resp){
//Do crazy stuff here
}
});
});