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;
});
Related
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 want to store my data in a database using forms.
How can I do it without using SQLFORM
like in php we use $var = $_POST['var_form']
I created a table in modul file called Produit
db.define_table('Produit',`enter code here`
Field('Nom', requires = IS_NOT_EMPTY()),
Field('Poid', 'float', requires = IS_NOT_EMPTY()),
Field('Prix', 'float', requires = IS_NOT_EMPTY()),
Field('Expiration', 'datetime'),
auth.signature)
And created a form like
{{extend 'layout.html'}}
<form action="create" method=post>
<fieldset>
<legend><h1><center><em>Ajouter un produit</em></center></h1></legend>
Nom:<br>
<input type="text" name="nom" required/>
<br>
Poid:<br>
<input type="text" name="poid" required/>
<br>
Prix:<br>
<input type="text" name="prix" required/>
<br>
Date d'expiration:<br>
<input type="date" name="exp" required/>
<br>
<br><br>
<input type="submit" value="Ajouter">
Use URL helper to specify action of the form.
<form action="{{=URL('create')}}" method=post>
...
</form>
Then in create controller, you can access submitted values using request.vars
db.Produit.insert(Nom=request.vars.nom, Poid=request.vars.poid,
Prix=request.vars.prix, Expiration=request.vars.exp)
This answer has the right idea, but to make things a little easier, you should use HTML field names that exactly match the database table field names. In that case, you can simplify the insert to:
db.Produit.insert(**db.Produit._filter_fields(request.post_vars))
Beware, though, that your manual approach lacks any protection against CSRF attacks (which the web2py form system would provide). As an alternative, note that you can still use SQLFORM even if you want to generate a custom form layout in the view. This approach is covered in the documentation here and here.
Sorry if this question is a bit basic, but how can you parse form inputs in the Go Iris framework?
Here is the form I am using
<form action="/" method="post">
Username:<input type="text" name="username">
Password:<input type="password" name="password">
<input type="submit" value="Login">
</form>
here is the route and the controller respectively
iris.Post("/", TestController)
func TestController(c *iris.Context){
username := c.Form.Get("username")//Doesn't work
password := c.Form.Get("password")//Doesn't work
}
how do I retrieve the values in the Post request after the form has been submitted, Thanks
Based off an example on the iris github page you could try c.PostValue("Username"). The code you have may also work but I think you need to capitalize the variable names. In the html template you can see the name value is lowercased, however your context is more likely going off those the variable names to the left of the actual html like Username.
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
Building a CMS with node, mongoDB & angularjs. I have an edit form with inputs that I want to bind to the $scope so their values are populated with existing data. Ex:
<form ng-submit="editArticle(article._id, article)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-model="article.hed" value="{{article.hed}}" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-model="article.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
This appropriately fills in the input values with the current data from my mongo database. However, I would like to bind to a new form scope, so it doesn't try to pass in every value in the article scope, just the new scope within the form. (Article scope currently consists of every field in the article document in Mongo. If I pass all of this data in, I get an error about invalid schema because it is trying to pass in the __v field as well.)
So ideally I want to do this:
<form ng-submit="editArticle(article._id, form)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-model="form.hed" value="{{article.hed}}" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-model="form.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
So on submit, it only passes form.hed and form.dek to my database. However, now these input fields are blank because they're not bound to the original article data. The user would have to re-fill in each of the fields with the original values. Is there a way to bind to multiple models orrrr bind to a current model, but on submit only send the updated form data?
EDIT:
It looks like I have to add the ng-change attribute to each field, to populate the input fields with the original scope, then on change, set the form scope equal to the changed value. Eg.
<form ng-submit="editArticle(article._id, form)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-change(form.article = article.hed) ng-model="article.hed" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-change(form.dek = article.dek) ng-model="article.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
Not sure how thrilled I am about this solution, but it works. If anyone knows a more efficient way to accomplish this please let me know!
Do a copy of the original object (or part of it) upon receiving it from DB and bind your from to it.
Coping objects before edit is a very good pattern since it allows you to easily provide additional functionality like revert edits and disable save buttons if no edit was made.