I'm trying to create a simple web app that will ask the user to fill out a few questions and then upload a photo. I'd like for all of this information to be stored in a Meteor collection when the submit button is pressed, but I'm having some difficulty with the FS Collection package.
Here is the relevant main.html:
<form class="photoForm">
Problem: <input type = "text" id = "problem" placeholder="page # problem #"><br><br>
Your group members <input type = "text" id="group" size="50"> <br><br>
Your questions and comments about this problem: <br><br>
<textarea name="comments" form="photo" rows="4" cols="70" placeholder="Enter text here..."></textarea>
<br>
Upload a snapshot of your work here: <input type = "file" id = "myFileInput">
<br /><br />
<input type="submit" value="submit" />
</form>
Here's the main.js:
Template.form.events({
'click input[type=submit]': function(event, template) {
console.log("form submit")
event.preventDefault();
FS.Utility.eachFile(event, function(file) {
Images.insert(file, function (err, fileObj){
//Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
});
});
}
});
Here are my questions:
I can only get the file to upload on the event 'change .myFileInput'. I've tried to get it to upload on 'click input[type=submit]' and 'submit' and it doesn't upload the file. Is there a way to get it to upload the file when the submit button is clicked?
How do I add data from the various text fields to the image collection? Can I incorporate these additions into the Images.insert() command?
Check the autoform package
autoform package
And the cfs autoform package
Cfs autoform
These packages are very helpful
Related
I am trying to use MapBox Autofill feature to get a full address in an address input field, but I don't see an autocomplete tag that includes full addresses.
I tried to use multiple autocomplete tags to get street addresses, cities, states, etc. without showing them (by using type="hidden"), but then values from the hidden fields don't get submitted along with with the main input field (address):
<form action="/results" method="post">
<input name="address" placeholder="Enter your address" type="text" autocomplete="street-address" />
<input name="city" placeholder="City" autocomplete="address-level2" type="text" disabled="true" />
<p>
<center><button type="submit" class="button btn-send disabled">Search</button></center>
</p>
</form>
Can someone help me understand how I can submit full address through the form without showing secondary input fields?
One solution is to use the retrieve event from mapbox-search, which returns an AutofillRetrieveResponse (promise) from which you can extract the full address.
In the following example I'm getting the full address and setting it as the value of the input field, but you could change this according to your needs.
const autofill = mapboxsearch.autofill({
accessToken: YOUR_MAPBOX_TOKEN,
});
autofill.addEventListener('retrieve', async (event) => {
const fullAddress = event.detail.features[0].properties.full_address;
this.inputTarget.value = await fullAddress;
});
I have a long text 20 lines with HTML code that I need to use into a form test. For small texts I could use something like this:
browser.actions().mouseMove(element(by.id("field_bodytext")).sendKeys("BodyText <h2>Protractor</h2> Text1")).perform();
and it will work fine. But for 20 lines it does not. I have seen this information in Protractor API page, but can not see how to use it in my case:
http://www.protractortest.org/#/api?view=webdriver.WebElement.prototype.sendKeys
var form = driver.findElement(By.css('form'));
var element = form.findElement(By.css('input[type=file]'));
element.sendKeys('/path/to/file.txt');
form.submit();
There is an example for selenium that I do not see how to adapt: Selenium Webdriver enter multiline text in form without submitting it
This is the form field in Angular:
<div class="form-group">Wordhtml.com
<label class="form-control-label" jhiTranslate="jhipsterpressApp.post.bodytext" for="field_bodytext">Bodytext</label>
<textarea type="text" rows="10" cols="50" class="form-control" name="bodytext" id="field_bodytext"
[(ngModel)]="post.bodytext" required minlength="2" maxlength="65000">
<div [hidden]="!(editForm.controls.bodytext?.dirty && editForm.controls.bodytext?.invalid)">
<small class="form-text text-danger"
[hidden]="!editForm.controls.bodytext?.errors?.required" jhiTranslate="entity.validation.required">
This field is required.
</small>
<small class="form-text text-danger"
[hidden]="!editForm.controls.bodytext?.errors?.minlength" jhiTranslate="entity.validation.minlength" translateValues="{ min: 2 }">
This field is required to be at least 2 characters.
</small>
<small class="form-text text-danger"
[hidden]="!editForm.controls.bodytext?.errors?.maxlength" jhiTranslate="entity.validation.maxlength" translateValues="{ max: 65000 }">
This field cannot be longer than 65000 characters.
</small>
</div>
</textarea>
</div>
And the text to be inserted could be something like this:
<h2>What is JHipsterPress?</h2>
<ul>
<li>It is an open source and collaborative project made with Jhipster.</li>
<li>It is a live project that it is explained in its GitHub project. Explained? What do you mean? Whether you are a beginner that wants to find out an example about how to How to open access to the REST Api: or a more advance user who wants to see How to change DTOs to load attributes of not related entities: and see the actual code working, just visit the ReadMe file at GITHUB</li>
<li>And YES, you can use it for your own website.</li>
<li>At the same time JHipsterPress will try to create a community for Jhipster developers to join groups about different topics such as Websockets, Mapstruct, or anything you like.</li>
</ul>
<br />
Put the HTML in quotes `` as #lunin-roman is saying and then call it:
let htmltext = `<h2>What is JHipsterPress?</h2> and so on`;
element(by.id("field_bodytext")).sendKeys(htmltext);
and then use it in the element.sendKeys
I want to build a form (in bootstrap) that has an email or telephone number input field.
In mobile I want that field to open the "email keyboard" and I want it to don't validate if the value is an email.
This form also has some text inputs that I want them to be required.
What is the simple way for this to be achieved?
If I understood your question correctly, you want to validate your form's inputs but DO NOT want to validate teh email input in the same form....
use something like this:
jQuery:
$(document).on('click', ".button", function(){
var name = $(".name").val();
var lastname = $(".lastname").val();
var email = $(".email").val();
if(name == "" || lastname == "" ){
alert('Please fill in all the details')
}else{
///////submit your form here... you can even use AJAX to submit yuour form////
}
});
HTML:
<form action="" method="post">
<input type="text" class="name">
<input type="text" class="lastname">
<input type="email" class="email">
</form>
YOU CAN USE ANY JQUERY LIB.
EDIT:
If you are using html5, the <input type="email" will automatically open the 'keypad email' on your device.
A working FIDDLE:
https://jsfiddle.net/2v7ybe9h/2/
Based on the link you provided in the comments below, this is what it says:
They also provided an example in the same page...
As you can already see, the email input in that page has a 'required' attribute and the pattern attribute.
If you simply remove those attributes, there wont be any "Verification" anymore.
Example here:
https://jsfiddle.net/2v7ybe9h/3/
You can also use the novalidate attribute on your form and simply validate your form using jQuery same as what i have provided you in the first fiddle.
Example:
https://jsfiddle.net/2v7ybe9h/4/
The modern answer (as of 2020) is to use inputmode:
<input type="text" inputmode="email">
<input type="text" inputmode="tel">
See MDN for more
I'm building a form that generates an invitation when submitted. The invitation has several fields, one of which is an email address input with an 'add' button, which when clicked should add that address to a list of email addresses that should receive the invite.
This can be done with a single form, however if the user hits the enter key while typing an email then it triggers submit on the whole form. I'd like to have the enter key result - when the email input field is focused - have the same effect as clicking the 'add' button. I expected that the proper way to solve this would be to nest an email entry form within the invitation form, something like this:
<ng-form ng-submit="sendInvite()">
<input type="text" placeholder="Title" ng-model="invitation.title"/>
<ng-form ng-submit="addInvitee()">
<input type="email" placeholder="Title" ng-model="inviteeEmail"/>
<button class="btn" type="submit">add</button>
</ng-form>
<button class="btn" type="submit">Send</button>
</ng-form>
With the following javascript in the controller:
$scope.addInvitee = function() {
$scope.invitation.emails.push($scope.inviteeEmail);
$scope.inviteeEmail = '';
}
$scope.sendInvite = function() {
//code to send out the invitation
}
My problem is that having nested the forms (and in doing so converted from <form> to <ng-form>, submitting either one no longer works.
Plunker here
I've similar requirement - wizard driven multi-step form. When user clicks 'Next' button, I've to validate the current step form.
We can trigger validation by firing '$validate' event on the scope bound to the form.
isFormValid = function($scope, ngForm) {
$scope.$broadcast('$validate');
if(! ngForm.$invalid) {
return true;
}
}
When ever I want to check if the form values are correct, I'll call isFormValid with the scope & form instance.
Working code: Plunker link
It is also useful to have few additional logic in isFormValid (included in the above Plunker) which makes the form & form fields $dirty as we would be showing/hiding validation messages based on their $dirty state.
You can use one of the following two ways to specify what javascript method should be called when a form is submitted:
* ngSubmit directive on the form element
* ngClick directive on the first button or input field of type submit (input[type=submit])
-- form docs
<ng-form>
<input type="text" placeholder="Title" ng-model="invitation.title"><br>
<ng-form>
<input type="email" placeholder="Title" ng-model="inviteeEmail">
<button class="btn" ng-click="addInvitee()">add</button><br>
</ng-form>
<ul class="unstyled">
<li ng-repeat="invitee in invitation.invitees">
<span>{{invitee.email}}</span>
</li>
</ul>
<button class="btn" ng-click="sendInvite()">Send</button>
</ng-form>
Plunker
When the form is submitted, you can find all nested forms using some thing like below
forms = []
forms.push(form)
nestedForms = _.filter(_.values(form), (input) -> (input instanceof form.constructor) and (input not in forms))
Here, form is the outer form controller which was submitted. You can hook this code on ur onsubmit, and find all nested forms and do whatever you have to.
Note: This is coffeescript
I am building a Lift application, where one of the pages is based on the "File Upload" example from the Lift demo at: http://demo.liftweb.net/file_upload.
If you look at the source code for that page... you see that there is a Lift "snippet" tag, surrounding two "choose" tags:
<lift:snippet type="misc:upload" form="post" multipart="true">
<choose:post>
<p>
File name: <ul:file_name></ul:file_name><br >
MIME Type: <ul:mime_type></ul:mime_type><br >
File length: <ul:length></ul:length><br >
MD5 Hash: <ul:md5></ul:md5><br >
</p>
</choose:post>
<choose:get>
Select a file to upload: <ul:file_upload></ul:file_upload><br >
<input type="submit" value="Upload File">
</choose:get>
</lift:snippet>
The idea is that when a user hits the page for the first time (i.e. a GET request), then Lift will show the form for uploading a file. When the user submits the form (i.e. a POST request to the same page), then Lift instead displays the outcome of the file being processed.
With my application, the new wrinkle is that my "results" POST view needs to also contain a form. I want to provide a text input for the user to enter an email address, and a submit button that when pressed will email information about the processed file:
...
<choose:post>
<p>
File name: <ul:file_name></ul:file_name><br >
MIME Type: <ul:mime_type></ul:mime_type><br >
File length: <ul:length></ul:length><br >
MD5 Hash: <ul:md5></ul:md5><br >
</p>
<!-- BEGIN NEW STUFF -->
Output: <br/>
<textarea rows="30" cols="100"><ul:output></ul:output></textarea>
<br/><br/>
Email the above output to this email address:<br/>
<ul:email/><br/>
<input type="submit" value="Email"/>
<!-- END NEW STUFF -->
</choose:post>
...
However, both the GET and POST versions of this page are wrapped by the same Lift-generated form, which has its "action" set to the same snippet in both cases. How can I change this such that in the POST version, the form's action changes to a different snippet?
In a typical web framework, I would approach something like this with an "onclick" event and two basic lines of JavaScript. However, I haven't even begun to wrap my mind around Lift's... err, interesting notions about writing JavaScript in Scala. Maybe I need to go down that route, or maybe there's a better approach altogether.
First, I will suggest you use Lift's new designer friendly CSS binding instead of the custom XHTML tag.
And one thing you should remember when you're using Lift's snippet, is that it is recursive, you could put an lift snippet inside another snippet's HTML block.
For example, if you wish there is another form after POST, then just put it into the block.
<choose:post>
<p>
File name: <ul:file_name></ul:file_name><br >
MIME Type: <ul:mime_type></ul:mime_type><br >
File length: <ul:length></ul:length><br >
MD5 Hash: <ul:md5></ul:md5><br >
</p>
<!--
The following is same as <lift:snippet type="EMailForm" form="post" multipart="true">
-->
<form action="" method="post" data-lift="EMailForm">
<input type="text" name="email"/>
<input type="submit" />
</form>
</choose:post>
Then deal with the email form action at snippet class EMailForm.
Finally, you may pass the filename / minetype and other information by using hidden form element or SessionVar.
I agree with Brian, use Lift's new designer friendly CSS binding.
Use two separate forms, one for the file upload and one for the submitting the email. Use S.seeOther to redirect the user to the second form when the first has finished processing.
I also prefer the new 'data-lift' HTML attribute.
File upload HTML:
<div data-lift="uploadSnippet?form=post">
<input type="file" id="filename" />
<input type="submit" id="submit" />
</div
File upload snippet:
class uploadSnippet {
def processUpload = {
// do your processing
....
if (success)
S.seeOther("/getemail")
// if processing fails, just allow this method to exit to re-render your
// file upload form
}
def render = {
"#filename" #> SHtml.fileUpload(...) &
"#submit" #> SHtml.submit("Upload", processUpload _ )
}
}
GetEmail HTML:
<div data-lift="getEmailSnippet?form=post">
<input type="text" id="email" />
<input type="submit" id="submit" />
</div
Get Email Snippet:
class getEmailSnippet {
def processSubmit = {
....
}
def render = {
"#email" #> SHtml.text(...) &
"#submit" #> SHtml.submit("Upload", processSubmit _ )
}
There's a bit more on form processing in my blog post on using RequestVar's here:
http://tech.damianhelme.com/understanding-lifts-requestvars
Let me know if you want more detail.
Hope that's useful
Cheers
Damian
If somebody comes up with a more elegant (or "Lift-y") approach within the next few days, then I'll accept their answer. However, I came up with a workaround approach on my own.
I kept the current layout, where the view has a GET block and a POST block both submitting to the same snippet function. The snippet function still has an if-else block, handling each request differently depending on whether it's a GET or POST.
However, now I also have a secondary if-else block inside of the POST's block. This inner if-else looks at the name of the submit button that was clicked. If the submit button was the one for uploading a file, then the snippet handles the uploading and processing of the file. Otherwise, if it was the send email submit button shown after the first POST, then the snippet processes the sending of the email.
Not particularly glamorous, but it works just fine.