I work with playFramework 2.6. I have a popup that contains a form. When I try to submit the form, I get the following error:
Erreur Client!403 - No CSRF token found in body.
How can I fix this error?
Enable CSRF folder within application.conf:
play.filters.enabled += "play.filters.csrf.CSRFFilter"
Then in your form have this:
<form action="/submit-form-url" method="POST">
#CSRF.formField
//Your form body
</form>
In case you dont want to use the helper (#CSRF.formField)
First import the required library: import play.filters.csrf.CSRF.
Second, get its value within the controller method: CSRF.getToken and pass it on the views.
Third, within the views (after the form initial line) use the hidden input to hold the token value:
<input type="hidden" name="csrfToken" value="whatever-that-is">
Related
I am new to Angular2/Typescript, since I come from the Java world, I decided to learn Typescript and Angular2 directly.
I want to leave most of the logic on the server, thus I don't need complex validation management on the client. So all I want is the user to fill out forms, and post/put all the fields to the REST Service.The goal is to leave the client side as light as possible.
I have a form:
<form role="form" (ngSubmit)="onSubmit()" #ArbeitstagForm="ngForm">
and a field in it, some datepickers too: similar like this:
<input type="text" class="form-control pull-right" id="datepicker" [(ngModel)]="model.datum">
When I submit the form, I call this function:
model = new Arbeitstag();
onSubmit(form:any) {
alert(JSON.stringify(this.model));return false;
}
So that alerts me the the entered data as JSON, which I will after send to a REST Service. It works actually great, BUT only when I actually type something into the field, when I have a default value, or I set the field with a datepicker, the model object values will remain empty.
I've found out about the dirty setting of the fields, which are false by default and are getting true when I type something in and that's also what I see when I check firebug, but that's definitely not what I want to achieve.
Is there a way to set all the fields dirty in a form in Angular2? I've found many examples for Angular.js 1, but not for Angular2/Typescript.
Control has a markAsDirty() (and markAsTouched()) method
<input #datePicker="ngForm" type="text" class="form-control pull-right" id="datepicker" [(ngModel)]="model.datum">
<button (click)="datePicker.control.markAsDirty()">update dirty status</button>
Plunker example
What I usually do is get a reference to the form in my component, using ViewChild. With that reference I can mark to form dirty or touched when I need to. Like so:
export class MyComponent implements OnInit, OnDestroy {
#ViewChild('form') form: NgForm;
...
public methodWithFormChange(): void {
this.form.control.markAsDirty();
}
}
;-)
I'm missing something fundamental when it comes to mapping a view to a controller's action and hoping someone can point me in the right direction. I'm working on an existing project and still familiarizing myself with the language and the way it was configured. I have a form that will resolve a qaCase (question answer case) through the resolveForm action and qaCase/resolve view. below is a simplified version of what I have (please let me know if I need to include more information).
QaCaseController
#RequestMapping(value="/resolve/{id}/**", method=RequestMethod.GET)
public String resolveForm(#PathVariable("id") Integer id, Model model) {
QaCase qaCase = qaCaseDAO.findById(id);
// Load the backing objects into the session
model.addAttribute("qaCase", qaCase);
model.addAttribute("users", userDAO.findAll());
model.addAttribute("exams", examDAO.findAll());
return "qacases/resolve";
}
qaCase/resolve.jsp
the resolve view has a form that will accept text input and a resolve button.
<sf:form method="POST" modelAttribute="qaCase" onsubmit="return isValid()">
// some input fields
<input type="submit" name="submitted" value="resolve" />
</sf:form>
when submit button is clicked, the following query string is created
http://localhost:8080/qacases/resolve/<id>/<location>/<name>/<created by>
What I'd like to do is add an additional input field and button to the existing form so I can optionally add comments instead of resolving a case.
<sf:form method="POST" modelAttribute="qaCase" onsubmit="return isValid()">
// some input fields
<input type="submit" name="submitted" value="resolve" />
</sf:form>
<sf:form method="POST" modelAttribute="qaCase" action="addComment">
// optionally Add comment
<input type="submit" name="submitted" value="addComment" />
</sf:form>
If addComment is clicked then I want the query string to be created.
http://localhost:8080/qacases/addComment
Instead, I get the following query string with a 400 status code.
http://localhost:8080/qacases/resolve/<id>/<location>/<name>/<created by>/addComment
I've been going through configuration files to find how the mapping is being set but haven't had any luck. Not sure if this is an answer that can be answered without someone going through the project and determining how it's configured. Appreciate any advice and/or answers.
when you are using action = "addComment" without "/" before "addComment" in <form> that means you are posting your form to current_url_that_invokes_view/addComment
if add "/" to action = "/addComment" you will go to localhost:8080/addComment
so if you need http://localhost:8080/qacases/addComment
type action = "/qacases/addComment" and pay attantion to "/" before qacases to direct root url
I encounter a problem when testing form validation with angularjs
According to angularjs form guide,
an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control.
I created test code at plunker, it all works fine untill I change the input name from
<input type="number" name="age" ng-model="user.age" max="100" required>
<p>{{form1.age.$error}}</p>
to
<input type="number" name="user[age]" ng-model="user.age" max="100" required>
<p>{{form1.user[age].$error}}</p>
Does this mean angular can not recognize array syntax in form input?
The problem for me is I want to keep the normal form submission flow and only use angular for form validation, so I need to keep form input as array to work with the backend form handling
It has nothing to do with Angular. It is a syntactic JS error.
If you want to reference a property named user[age], you should do it like this:
form1['user[age]'].$error
form1.user[age] is incorrectly interpreted as (form1.user)[age]
Is it possible to add groovy code to grails form?
I have a form:
<g:uploadForm controller="document" action="save" method="post">
<input type="file" name="dataFile" />
<input type="submit" id="addDocument" value="<g:message code=messages.document.save"/>">
</g:uploadForm>
I need to add code that puts the URL segments to the parameter value.
You're using a POST (because it's an upload and that's correct) method in your form, so you will not see the params in the URL. The params will get there (to the controller you redirect the request to), but won't show at the URL. In any case, you should go with hidden inputs in your form. Like:
<input type="hidden" id="foo" value=""/>
In your controller, you can get the parameters set in your input hidden fields simply by accessing the params map:
params.foo
Use hidden fields inside the form.
This has driven me really bananas. It's so simple and easy and yet I can't figure out what's wrong with it.
I want to get my checkbox value populated in my controller (for testing purposes).
Here is my form.
<a href='#' name='submitForm'>submit the form</a>
//I have jquery attached to this tag and will submit the form when user clicks it
echo form_open('test/show');
echo form_checkbox('checkbox[]','value1');
echo form_checkbox('checkbox[]','value2');
echo form_checkbox('checkbox[]','value3');
echo form_checkbox('checkbox[]','value4');
echo "<input type='text' name='text1' value='ddd'>";
echo form_close();
//My controller test
public function show(){
$data1=$this->input->post('text1');
//I can get text1 value from input box
$data2=$this->input->post('checkbox');
//it keeps giving me undefined index 'checkbox'
$data3=$_POST['checkbox'];
//same error message
//WTH is going on here!!!!!
}
Please help. This thing drives me nuts! Thanks.
UPDATE:
Thanks for the help. To be more precisely, my submit button is a <a> tag and outside of form tag. It appear that I have to include <a> tag inside my form tag to make them works. Is that true?
A checkbox will not submit any data if it is unchecked as they're not considered successful (as per the w3c specification here)
If you actually tick the box and submit, it'll work - in fact it does, I've just tested it.
You need to wrap calls to $_POST in the isset() function.
if( isset( $_POST['checkbox'] ) ) {}
Calling $this->input->post('checkbox') shouldn't give you an undefined index error as the method deals with this eventuality. the Input::post() method returns false or the value of the checkbox.
Edit --
In response to your amendment to your question, you must use an element of type input with the type attribute set to submit in order to submit your form data without the use of Javascript etc. This button must be INSIDE the <form></form> which you are intending to submit.
<input type="submit" value="Submit">
The type="submit" causes the browser to send the data as submit event occurs. If you wish to use another element insider or outside of the form to do this you need to use Javascript. This however can be disabled on a per browser/user basis and isn't reliable as a result.
// Standard Javascript
<form name="myform"...
<a onclick="javascript:document.myform.submit();" href="javascript:void(0)">Submit</a>
// jQuery
$('#my-a-tag-submit-button').live( 'click', function() {
$('#my-form').submit();
}