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.
Related
I am new in angular JS, working with existing project on angular 1.2.16
please check the code sample
<form role="form" name="UserCreateForm"
novalidate class="biocheck-form">
<div class="row">
<div class="col-xs-4"> <input class="input-forms" placeholder="Usuario" aa-field-group="UserCreate.data.username" type="text" aa-label="Usuario"
required maxlength="20"> </div>
<div class="col-xs-4"> <input class="input-forms" placeholder="ejemplo#mail.com" aa-field-group="UserCreate.data.email" type="email"
aa-label="Email" required> </div>
<div class="col-xs-4"> <input class="input-forms" placeholder="" aa-field-group="UserCreate.data.newPassword" type="password" aa-label="Contraseña"
required> </div>
</div>
Rol
</div> <button type="submit" class="btn btn-primary pull-right" aa-submit-form="UserCreate.on.doUserCreate()"> Guardar </button> <button class="btn btn-cancel pull-right" ng-click="UserCreate.on.toUserList()"> Cancelar </button> </form>
I want to check debug the next flow of the code. If anything is unclear please comment.
I want to check how it is save the data in DB this project used yii for handling server side request.
Thanks
If i understand correctly you need to open the developer tools in your browser, go to the Source tab and find the js file that holds the function on your ng-click. Then put a breakpoint there and click the button. The browser should stop in the breakpoint and with F10 you can go line by line to your code.
I have an Angular directive that includes a form with a datepicker. I am trying to create a function to keep the button click from calling submit on the form. I can not determine where to find the .opened attribute. When I was performing the open with ng-click everything worked. Below is sample code.
HTML:
<form ng-submit="editAlert.$valid && vm.handleSubmit()" name="editAlert" id="editAlert" class="buffer-bottom" novalidate>
<div class="form-group">
<label class="control-label" for="effectiveDate">Effective Date</label>
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="MM-dd-yyyy" is-open="dpEffectiveDate.opened" ng-model="alertMsg.effectiveDateFmt" name="effectiveDate" id="effectiveDate">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="vm.openDateHandler($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
<p class="help-block" ng-show="editAlert.effectiveDate.$error.endBeforeStart">Effective date must be before expire date.</p>
</div>
</form>
I also tried passing dpEffectiveDate into the openDateHandler function.
Below is my Typescript function
openDateHandler = ($event) => {
$event.preventDefault();
//dpDate.opened = !dpDate.opened;
}
How do I access the .opened attribute?
If all you are trying to do is prevent the submit behaviour, simply add 'type="button"' to your button element.
<button type="button" class="btn btn-default" ng-click="vm.openDateHandler($event)">
By default, a button inside a form will act as a submit button unless it's given a different type.
You shouldnt need to mess with the opened state of a date picker to prevent a form submitting.
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 a form whose ng-submit is to move to the next question.
<form ng-submit="BC.next()" novalidate>
<input type="submit" value="Next Question"/>
<button id="previous" ng-click="BC.previous()">Previous Question</button>
However, whenever I click on the previous button, after executing, it then triggers the BC.next() I'm so confused, does anyone know why this is happening? I even tried closing the <input type="submit"> tag with a </input> but that didn't fix it.
Make sure that all other button in the form that are not submitting it will be from type="button".
<form ng-submit="BC.next()" novalidate>
<input type="submit" value="Next Question"/>
<button type="button" id="previous" ng-click="BC.previous()">Previous Question</button>
You can see the details: How to prevent buttons from submitting forms
TL;DR for the post: HTML5 defaults <button> as <button type="submit"> so you need to change this manually.
How to set dirty input type=file field in Angularjs ?
I need to form be setted dirty if file is uploaded through input field and so submit button be enabled accordingly.
Code below doesn't work.
<form novalidate name="newForm" id="add-new-form" method="post" action="">
...
<input type="file" id="image_file" name="image_file" onchange="angular.element(this).scope().newForm.image_file.$setDirty()" accept="image/*">
...
<button type="button" class="btn btn-success" ng-disabled="newForm.$invalid || newForm.$pristine" id="add-new-btn" ng-click="update(product)"><i class="fa fa-check"></i> Save</button>
</form>