There are a few quite technical posts here on Forms, but they didn't work to solve my issue. I'm trying to send some form data on the request's body.
I'm aware of these options:
just submitting form,
using fetch + DataForm, or the XHR object
The first approach refreshes the page, the second approach sends a more convoluted encoding by default. This encoding isn't handled by bodyParser middleware in Express.
Last choice is getting each field's value by Id, and sending it as an object.
Is there any way to avoid writing some lines of code to get each element by Id, or maybe this is the right approach?
Using FormData is the easiest way of getting data from a form but it sends the data as multipart/form-data which your middleware cannot handle.
You can use a middleware like multer to handle that type of data.
If you can't use multer, you can take the data from the FormData object and put it in a URLSearchParams object to send the data.
var form = document.getElementById('form');
form.addEventListener('submit', function(e){
e.preventDefault();
var formData = new FormData(this);
var data = new URLSearchParams(formData);
fetch('',{
method: 'POST',
body: data
});
});
<form id="form">
Name: <input name="name">
Box: <input type="checkbox" name="box" value="box">
<button>Submit</button>
</form>
Related
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">
So I'm using a form in a specific page and I want to pass the exact search query to another url after submission
Example: I search for vehicles and I need the result to be domain.com/search/vehicles
So this is what I have so far:
<form id="" action="domain.com/" method="get">
<input type="text" name="search" />
<input type="submit" value="click here" />
</form>
The actual url result here is: domain.com/?search=vehicles
I can't figure out how to make it work
HTML forms will send the inputs in it as GET or POST (or DELETE or PUT also, I think) parameters. So they will send it as url?parameter1=xxx, they won't incorporate them in the url as you want like this url/parameter1/xxx/. I think to do it as you want is easier with jQuery (or plain javascript).
You can do this with jQuery, for example:
$("#form-id").submit(function() {
event.preventDefault(); // stops form from executing normal behavior
var newUrl = // get new url parameters and mount it;
document.location.href = newUrl; // sends to new location
/* Do Something */
return false;
});
document.location.href in javascript will redirect you to a new page.
I am creating buttons that send the customer to a hosted payment system. In this case an authorize.net Simple Checkout button in test mode.
<form name="PrePage" method = "post" action = "https://Simplecheckout.authorize.net/payment/CatalogPayment.aspx"> <input type = "hidden" name = "LinkId" value ="8a40541d-2f0f-4bfe-a1e8-397292f5dee5" /> <input type = "image" src ="//content.authorize.net/images/buy-now-gold.gif" /> </form>
My attempt to get the form inputs into the url are following:
https://Simplecheckout.authorize.net/payment/CatalogPayment.aspx/?LinkId=8a40541d%2D2f0f%2D4bfe%2Da1e8%2D3d397292f5dee5
What am I doing wrong?
The diffence is that you are using the GET method instead of POST.
When you include data in your query string (things after the ? in the URL) you are using the GET method.
If you have a form you can specify to use the POST (as it is in your code example also). In this set up the data is transferred a different way. Not in the query string.
see: HTTP - Post and Get
Maybe your server is not handling, only the POST method, so your GET request won't work.
In my Angular app I'm having a form bound to a model. The form does not have fields for all model properties.
When the user hits the submit button I want to post the form the traditional way, not as AJAX request (I have to deal with an already existing server side script).
That basically works if I add a action to the form. But it obviously only submits the form with its present fields as it is, not the whole model just like it's done when using the $http service.
And additionally it does not create name attributes.
How could I submit the form the old-school way with the full model data? Do I have to create the missing form fields on my own or is there a way to let Angular do that for me?
<script>
angular.module('foobar', []).controller('ContentCtrl', ['$scope', function($scope) {
$scope.content = {
'title': 'Foo',
'subtitle': 'Bar',
'text': 'desc' // this field is missing in the form itself and therefore is not submitted
};
}]);
</script>
<form action="http://postcatcher.in/catchers/521c6510429f840200000169" method="post" ng-controller="ContentCtrl">
<input type="text" name="est" ng-model="content.title" value="asdf">
<input type="text" ng-model="content.subtitle">
<button>submit</button>
see post result
</form>
Here's a plunker: http://plnkr.co/edit/5XYGH9hTe7cpchSFWbTK
Angular doesn't do anything special when you have a form with an action defined. It's pure html form submission with exactly the fields that are defined.
Normally you would use:
<input type="hidden" ng-model="content.desc">
but angular currently (1.2.0rc1) still doesn't support ng-model binding to hidden inputs.
The workaround is this:
<input type="text" name="text" ng-model="content.text" ng-hide="true">
I'm creating a form text field, but would like to set an additional attribute called additional so the html markup looks like this.
<dd id="email-element">
<input type="text" value="" id="email" name="email" additional="">
</dd>
I'm able to set the attribute using setAttrib like so.
$email = new Zend_Form_Element_Text('email');
$email->setAttrib('additional', '');
$this->addElement($email);
I'm then setting the value of additional on the client side via ajax. But when the form is submitted, additional appears empty. When I var_dump the form, I can see it as an attribute on this form field, but it's empty. Also when I var_dump the request, it's not on it (which is understandable since it's an attribute, and not the field value itself). Is there a way to read attributes that were changed on the client side?
PHP has no way of reading form attributes that were modified in the browser, but you can read it on the client side and send it back to PHP. The only data submitted are the element values themselves.
If you need the attribute in PHP, add a hidden input called additional (or whatever you like), and during the form's onsubmit event, you can read the value of the attribute, and populate the hidden element and then submit the form. Note that if the client has Javascript disabled, the value will not come through, but that method can be used to read it and send it to the server.
Hope that helps.