I have a problem with dont save button in my app.
The scenario is:
I hit edit button on a facility, delete the name and dont want to save the changes. However if I delete the name and click "dont save", it stores an empty new name. How to avoid this?
here is the code if edit.ctp
<input id="subcategory" name="name" size="36" type="text" value="<?php echo $f['Whatever']['name'];?>" />
<div id="name_error" style="color: red;"></div>
<button class="btn btn-lg btn-primary" type="submit" name="submit" onclick="return whatevername();">
<span class="glyphicon glyphicon-ok"></span> Save
</button>
Saving a new name works well, validation function works also okay. Now the cancel button:
<a href="<?php echo h($this->Html->Url(array('controller'=>'whatever','action'=>'view'))); ?>">
<button class="btn btn-lg btn-warning" >
<span class="glyphicon glyphicon-trash"></span> Cancel the changes
</button>
</a>
Any sugestions will be greatly appreciated. Thanks
Instead of the button, use stylized link that will take you back to the reference page.
Related
I have two buttons in angularjs to activate and deactivate user my problem is I want to make one button when I click the button change her color and text I try to change but no success.
Someone correct me my Attempt
This is my two button :
<input type="button" class="btn btn-success" value="Active" ng-click="Active(User)" />
<input type="button" class="btn btn-danger" value="Desactive" ng-click="Desactive(User)" />
I try to change them but I don't know what the problem :
<div ng-class="User.IsActive? 'btn btn-success' : 'btn btn-danger' "
ng-click="User.IsActive?Active(User):Desactive(User)">
{{ User.IsActive ? 'Active' : 'Desactive'}}
</div>
I am trying to identify a button which looks like
<span class="btn btn-default fileinput-button" title="Add files…">
<i class="icon-plus"></i>
<span>Add files…</span>
<input id="fileUploadComponent" type="file" name="files[]" multiple="">
</span>
I am trying to identify this button with
//input[#type='file']" selector="Xpath"
input[id='fileUploadComponent'][#type='file'] Selector Css
input[id='fileUploadComponent'] Selector Css
I don't get any exception, instead in my log it shows the element is clicked but nothing happens in the page (button is not clicked)
I currently have the following html which consists of 3 buttons (1 hidden). I have a button which triggers a hidden button which is used to select a file to upload and I have a third button which is used to call upload and send the data to the server. I would like to change this so that after selecting a file, the file is automatically uploaded. I am having issues triggering the upload button when a file is selected (and then I will hide the upload button once I have the automatic upload functionality working). I have tried using the onchange event to accomplish this but with no success
<div class="col-xs-12" style="margin-top:250px">
<div class="col-xs-4" align="center" style="padding-left:290px">
<button class="btn btn-default" ng-click="newProject()">New Project</button>
</div>
<form class="col-xs-4" align="center"
ng-controller="CsvImportController" style="display: inline-block;padding-left:200px" id="csvForm">
<a href="#" class="btn btn-default btn-file"
onclick="document.getElementById('fileBrowser').click(); return false;">Select
CSV File</a>
<button id="submitCsv" class="btn btn-default" ng-click="upload()">Upload</button>
</form>
<div class="col-xs-4" align="center" style="padding-left:110px">
<a class="btn btn-default">Browse
Projects</a>
</div>
</div>
<br>
<br>
<input id="fileBrowser" style="visibility: hidden;"
class="btn btn-default btn-file" type="file" id="file" file-input="files" onchange="document.getElementById('submitCsv').click(); return false;"/>
See this answer for some libraries that will handle all the upload functionality for you as well as provide some other nice features.
onchange will not work on <input type="file"/> as it will not register a change when you select a file. ng-click will not work also as it will trigger when the input is first clicked, not when a file is selected.
You also can't apply any styles to an <input type="file" /> either, so I get what you're trying to do here, but <input type="file" /> does not offer much functionality which is really unfortunate.
You also have 2 ids defined on your hidden input. Make sure there is only one id so that you can call it correctly.
I have this form:
<form ng-submit="submit()" action="/api/project" method="post">
<input type="text" name="prj_title" ng-model="project.prj_title" >
<input type="submit" class="btn btn-block btn-success btn-lg" value="Request">
</form>
It works, but problem is the url changes to /api/project. I don't want this. I just want to post my data to /api/project.
How do I avoid this?
omit the action attribute and do all the logic through your submit method
<form ng-submit="submit()">
<input type="text" name="prj_title" ng-model="project.prj_title" >
<input type="submit" class="btn btn-block btn-success btn-lg" value="Request">
You don't need it, since Angular does the major work here
Quote from the docs:
Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.
Consider a form with three buttons:
<form ng-submit="updateUser()">
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary" ng-click="updateUser()">Save</button>
<button class="btn" ng-click="cancelEdit()">Cancel</button>
<button class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
</div>
</form>
When I click cancel, cancelEdit() is being called, then updateUser() is being called. I don't want the updateUser() method to be called. Is there a way to suppress this form submission (preferebly wtihout jQuery?)
Note: I'd still like to be able to hit enter and default to the Save action.
There is a type attribute for the <button> which defaults to submit - see this spec. Thus every button in your form is a submit button. You need to specify the button type for buttons which should not trigger the form submission, like this:
<form ng-submit="updateUser()">
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary">Save</button>
<button type="button" class="btn" ng-click="cancelEdit()">Cancel</button>
<button type="button" class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
</div>
</form>
And also no need to put the submit action to both ng-click and ng-submit - it will trigger double submit. I would advise to use ng-submit because it catches all ways of form submission, like pressing ENTER and not only clicking on submit button.
Try this
<form ng-submit="updateUser()">
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary">Save</button>
<a class="btn" ng-click="cancelEdit()">Cancel</a>
<a class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</a>
</div>
</form>
or this
<form>
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary" ng-click="updateUser()">Save</button>
<button class="btn" ng-click="cancelEdit()">Cancel</button>
<button class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
</div>
</form>
ultimately I don't think you need updateUser() twice in the html
You can use for cancel button type="reset":
<button type="reset" class="btn" ng-click="cancelEdit()">Cancel</button>
The button is a reset button (resets the form-data to its initial values)
http://www.w3schools.com/tags/att_button_type.asp
I was having same problem.I used anchor instead of button.
<form ng-submit="updateUser()">
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary" ng-click="updateUser()">Save</button>
<a class="btn btn-danger" ng-click="cancelEdit()" role="button">Cancel</a>
<button class="btn btn-primary" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
</div>
</form>