I have an input form like this:
<form name="userForm">
<md-input-container>
<label>Username</label>
<input name="username" ng-model="userLogin.username" required>
<div ng-messages="userLogin.username.$error" ng-show="userLogin.username.$dirty">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
</form>
<div layout="row" layout-align="center">
<md-button class="md-raised md-primary md-padding button-margin" ng-click="handleLoginResult()" ng-disabled="!userForm.$valid">Login</md-button>
</div>
The problem is that until I don't write anything in the input field (= user interaction), the userLogin.username variable doesn't appear in the $scope (I'm using AngularJS' addon for Chrome dev console).
Indeed if I try to print it I get erro (userLogin is not defined >> username can't be read).
Any clue?
Typically, in an AngularJS controller, if you do not create the property implicitly on the $scope object it will not be defined until a bound element attempts to update it. This is just the nature of how AngularJS works and the nature of dynamic Javascript. Is there a reason you need to get to the property if it isn't defined yet? From your question I am assuming that you were just prodding it with the console. If you really need to use it in a function before it is defined use the OR logical operator in Javascript represented by two pipe characters:
$scope.userLogin || '';
Related
I am using nightwatch.js to perform end-to-end testing and have to use a roundabout method for a waitForElementVisible command to work as expected. For example, my code below:
browser.waitForElementVisible(".profile label[for='Admin']") // works
browser.waitForElementVisible(".profile label[for='Admin'] input[id='Admin']") // breaks
For further clarification, I am testing to see if a radio button is visible. The radio button's DOM elements is as such:
<div class='profile'>
<div class='roleSelector'>
<label for="Admin">
<input type="radio" id="Admin" class="Admin">
</label>
</div>
</div>
As far as I know, there is no such specific case.
Did you try using '.profile input[id='Admin']' ?
Hope that serves your purpose at hand.
I am trying to retrieve multiple values from HTML and make use of it using req.body..
I am able to do this via message: req.body.message
<form id="message-form" class="input-group input-group-lg" style="">
<input type="text" name="message" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
<div class="input-group-prepend">
<button class="btn btn-primary">Send</button>
</div>
</form>
However, I would like to retrieve the values from elements that are not inside the e.g <span id="item" style="font-weight:bold"> </span>
The reason is that when I load the page, it renders these values dynamically (retrieved from database). When I want to do a POST, I would like to make use of these values that have been rendered previously.
Is there a way to do this?
Many thanks.
Forms don't submit data that does not appear inside a form control.
So you can either:
Store the data somewhere in the server (such as in a session) where you can read it back on a subsequent request (watch out for race conditions!) or
Put the data in a form control instead of or as well as in the span. (Possibly using a hidden input).
I have
<form action="?#cgi.query_string#" method="post" ...
The cgi.query_string comes in with an indefinite number of variables. I tried using
<form action="?#EncodeForURL(cgi.query_string)#" method="post" ...
Should I be doing any kind of escaping?
You are using method="POST" in your form tag. So you're trying to have a page with both a query string (URL scope) and a form body (FORM scope), correct?
I'm not sure that's best practice or even allowed by some browsers (I read elsewhere they'll strip query strings on POST actions).
The best solution might be to make the action either GET or POST, and loop through the query string making each item a hidden input?
<cfloop list="#CGI.query_string#" delimiters="&" index="i">
<input
type='hidden'
name='#listFirst(i, "=")#'
value='#listLast(i, "=")#'
/>
</cfloop>
As you say, you can't do this. Your specific question was whether you should do any escaping. The answer to that is "yes" and the location is going to be on the backend, parsing the query string.
<cfoutput>
<form action='?#CGI.query_string#' method='POST' class='form-horizontal bordered-group' role='form' id='test'>
<input
class='form-control'
type='text'
name='formvar'
/>
<input
class="btn btn-primary btn-lg btn-block"
type="submit"
value="Submit"
/>
</form>
</cfoutput>
Will submit a form to the same page, with the FORM scope present, the URL scope present, and the CGI.query_string defined. The CGI.query_string will have url formatting (%20 for space, etc). The FORM and URL scopes will already be decoded (%20 converted to space, etc).
It seems the crux of your question is really about security and sanitization. In which case you'll want to examine encodeForHTML() (Adobe Docs for encodeForHTML()).
Obviously, this isn't 100% foolproof, since I don't know the details of your code and what you do with the input. But those sanitization functions should be a good start.
So very generally, if you use the URL scope, use encodeForHTML(), and if you use #CGI.query_string#, it will be URL-encoded.
When I submit my Netlify form the server responds with a 200 status and I get the 'thank you' response page. However, when I check the form submission in the Netlify admin, they are all blank. I've inspected my xhr requests and the data shows in the 'params' section of the browser dev tools.
Disclaimer: I work for Netlify.
When our service stores blank submissions, it has not received any fields from the submission which were defined in the html version of the form with the same name parameter in its definition as the submission.
To start off with, it's useful to know that our service requires a plain html version of your form, with a name parameter as well as the netlify or data-netlify=true parameter; this is what prepares your site to accept form submissions at all, so you had that set up right already; if you didn't, you'd get a 404 when POSTing.
Once you have this in a deploy and we parse it correctly, you'll see the form name in your site settings dashboard on the 'Forms' tab. Note that we ALSO pull all the field names we'll save and show to you in notifications or the dashboard from this file and only this file, so make sure you give each form field all a name as well, in that html file.
If you see the form in your dashboard, yet get a blank submission when you are sure data was POSTed, this probably has one of three causes:
Netlify did not correctly process your field names from the html version of your form. The service will only properly handle the fields which we see in that html version at deploy time.
Netlify does matching by field name at submission time, so make sure that what your site sends to us then matches up between with your deployed html copy of the form. This happens automatically for pure html (no JS) forms since you are POSTing from the file which is the canonical "definition" of your form fields; however for javascript forms you need to take care that the names match up. Put another way, you cannot later add new fields dynamically in javascript and send them (Netlify will accept all fields, as you have seen; but will not store them or notify you about ones that were not processed at deploy time!)
One more quirk that could get in the way: having multiple copies of a form with the same name in your deploy. Only one will be processed, so if you happen to have an errant <form name=test netlify></form> in another html file (or even the same one!) - it could be the one that we process rather than the other form also named test. So, make sure that you only send a single html definition of your form. Note that some frameworks like gatsby render your jsx down into html before deploy, meaning that if you have a plain html file form definition in your deploy - it could be processed instead of the copy gatsby built.
This blog post describes a successful form built in a react app: https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/
I missed the "name" attribute in input field.
Every input in the form must have a "name" attribute. Something like <input name="email" ...> or <textarea name="message" ...> is what you need.
Don't miss the "name" attribute for both parent and child layers
<form name="contact" method="POST" data-netlify="true">
<input type="text" placeholder="name" class="box" name="name">
<input type="email" placeholder="email" class="box" name="email">
<input type="text" placeholder="project" class="box" name="project">
<textarea name="message" id="" cols="30" rows="10" class="box message" placeholder="message"></textarea>
<div class="field">
<div data-netlify-recaptcha="true"></div>
</div>
<button type="submit" class="btn"> send <i class="fas fa-paper-plane"></i> </button>
</form>
I can not post to CouchDB through an update handler and I do not know what I am doing wrong. Below follows the long description.
I created an app using erica, with details taken primarily from the wiki. It worked fine until I decided to go for POSTing, but server-side, through an update handler according to Apache CouchDB wiki Working_with_Forms
I created a new 'webapp' with erica, constructed an index (cut-n-paste from the wiki, with small alterations):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Minimal Form</title>
</head>
<body>
<div id="contact-form">
<form id="contact" method="post" action="/mydatabase/_design/mydesigndoc/_update/postForm" enctype="multipart/form-data">
<fieldset>
<label for="name">name</label>
<input type="text" name="name" placeholder="Full Name" title="Enter your name" class="required">
<label for="phone">phone</label>
<input type="tel" name="phone" placeholder="+1 (555) 555-5555" required="" pattern="\+?[0-9 )(-]+">
<label for="email">e-mail</label>
<input type="email" name="email" placeholder="you#example.org" title="e-mail address" class="required email">
<label for="blog">blog</label>
<input type="url" name="url" placeholder="http://">
<label for="message">message</label>
<textarea name="message"></textarea>
<input type="submit" name="submit" class="button" id="submit" value="submit">
</fieldset>
</form>
</div>
I altered the form-attribute action= to: htttp://localhost:5984/DBNAME/_design/DESIGNDOCID/_update/UPDATENAME and added enctype="multipart/form-data".
Then a _design document was constructed, according to the wiki, like this:
{
updates: {
postForm: function(previous, request) {
/* during development and testing you can write data to couch.log
log({"previous": previous})
log({"request": request})
*/
var doc = {}
if (!previous) {
// there's no existing document _id as we are not using PUT
// let's use the email address as the _id instead
if (request.form && request.form.email) {
// Extract the JSON-parsed form from the request
// and add in the user's email as docid
doc = request.form
doc._id = request.form.email
}
}
return [doc, toJSON({
"request": request,
"previous": previous,
"doc": doc
})]
}
}
}
This was placed in the "ddoc"-folder, pushed the app with erica, opened the webpage according to the link, found the form but when it was submitted this is what answer I got:
{"error":"unnamed_error","reason":"(new TypeError(\"point is undefined\", \"/usr/share/couchdb/server/main.js\", 1475))"}
I have fiddled around with the action="..." attribute, even put absolute adress like this:
http://localhost:5984/mydatabase...
I have replaced the toJSON() with JSON.stringify().
I have restarted the process and done the project it all over again. To no avail.
I have the distinct feeling that I have gone "blind", and that the solution is probably just in front of my eyes but I cannot see it. Seems like there is no problem with the POST-http-request, cause the server has complained before when I have experimented with AJAX (forgot "content-type"), but this time it seems to be internal server problems. And I do not have a clue. Really.
All in all, the question is: Can somebody help me? Please.
I will answer my own question and at the same time ask forgiveness from those who wasted their time with it.
What I did is that I read through kanso and understood how the concept of scope applies to the situation. It is a matter of using exports on the update handler so it can be reached through <form action="/database/_design/designDocument/_update/updateFunction.
Why did I not read through Kan.so earlier? Well, I had my mind set on keeping it simple - erica being the successor of couchapp I decided that it would be a sound move to stay on course with the basics. Though I must say that documentation is scarce so the magic of couchapp-building was demystified by reading through Kan.so and on top of it I was introduced to several other nifty concepts and techniques. I bend my neck in gratitude.
And I hope that all those who have spent their time reading through my long and, as it turned out, unnecessary question will oversee with my ignorance.
(Now I only wonder if there is some kind of admin/moderator who can dispose of my writings to avoid future timel oss)
I also ran into this error and what causes it, as hinted at by #Pea-pod, is not defining properly your exports in the couchapp's design documents. In our case it was as list function that couldn't be called and instead displayed a 500 error with Type error and point is undefined in the couchdb log.
We use kanso and in the app.js we hadn't required the list file. We had:
module.exports = {
rewrites: require('./rewrites'),
views: require('./views'),
shows: require('./shows')
};
Changing it to the following solved the problem:
module.exports = {
rewrites: require('./rewrites'),
views: require('./views'),
shows: require('./shows'),
lists: require('./lists')
};
Can I suggest to a moderator to change the title of this question to include point is undefined which is the error that shows up in the CouchDB log when this type of error is made, in order to help others find it more easily?