I am trying to insert some data into mongodb database from a simple registration form. It includes first name, middle name and last name in which middle name is optional. Now I want insert middle name into database only if user provides it in the form.
fname = request.values.get('fname')
mname = request.values.get('mname')
lname = request.values.get('lname')
db.users.insert({'fname':fname, 'mname':mname, 'lname':lname})
I am getting this output:
id:5d11c378f829d8938bf65e0b
fname:"test"
mname:""
lname:"user"
I want this( if mname is not provided in the form):
id:5d11c378f829d8938bf65e0b
fname:"test"
lname:"user"
<form action="/register" method="post">
First name:<br>
<input type="text" name="fname" required>
<br>
Middle name:<br>
<input type="text" name="mname"> <!-- optional -->
<br>
Last name:<br>
<input type="text" name="lname" required>
<br><br>
<input type="submit" value="Submit">
</form>
return "Registered successfully!"
How about check the empty value before insert?
var m = request.values.get(‘mname’);
mname = (m) ? m : null;
Or you can try insert object.
user.fname = request.values.get('fname')
var m = request.values.get(‘mname’)
user.lname = request.values.get('lname')
if (m){
user.mname = m
}
db.users.insert(user)
Related
I have a registration page for my app. In order to be able to click the button the username and email input fields must have content inside of them. The password input field has a list of parameters: between 8-30 characters long and contain atleast one: uppercase letter, lowercase letter, special character, & number. and the confirm password input field should match the password input field exactly. I used regex to test the password input field and I used the triple equal operator to test if the passwords matched. I'm using oninput events for both of those cases. Where I'm having trouble is finding the best event to trigger the styles associated with my button depending on it being enabled or disabled. I can tie the styling and element attribute to the same functions I'm using for the password stuff but its not exactly full proof.
JS:
function pwValidation() {
let str = document.getElementById('password').value;
let message = document.getElementById('passwordError');
if (!str.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$#!%&*?])[A-Za-z\d#$#!%&*?]{8,30}$/)) {
message.innerText = 'Passwords must be between 8-30 characters long and contain atleast one: uppercase letter, lowercase letter, special character, & number.';
document.getElementById('signUp-btn').style.color = "rgba(255, 255, 255, 0.38)"
document.getElementById('signUp-btn').style.backgroundColor = "rgba(14, 16, 27, 0.38)"
} else {
message.innerText = '';
}
};
function pwMatch() {
if(document.getElementById('password').value !== document.getElementById('password2').value){
document.getElementById('passwordMatch').innerText = 'Passwords must match.';
} else {
document.getElementById('passwordMatch').innerText = '';
document.getElementById('signUp-btn').style.color = "rgb(255, 255, 255)"
document.getElementById('signUp-btn').style.backgroundColor = "rgb(14, 16, 27)"
}
}
HTML:
<form action="/register/createUser" method="POST">
<fieldset>
<input
type="text"
id="text"
name="username"
class="form-control"
placeholder="Username"
oninput="inputDisable()"
/>
<input
type="email"
id="email"
name="email"
class="form-control"
placeholder="Email"
oninput="inputDisable()"
/>
<div class="password-container">
<input
type="password"
id="password"
name="password"
class="form-control"
placeholder="Password"
oninput="pwValidation()"
/>
<div id="passwordError"></div>
<i class="fa-regular fa-eye-slash" id="togglePassword"></i>
</div>
<div class="password-container">
<input
type="password"
id="password2"
name="password2"
class="form-control"
placeholder="Confirm Password"
oninput="pwMatch()"
/>
<div id="passwordMatch"></div>
<i class="fa-regular fa-eye-slash" id="togglePassword2"></i>
</div>
<button type="submit" id="signUp-btn">Sign Up</button>
</fieldset>
</form>
My logic with the functions isn't full proof and you can easily get the button to display. I need some better logic in my functions or a need a better eventlistener but I lack context as I'm new.
I have a couple of major gaps in my understanding of vapor/leaf/html. I am working from the "todo" example that is created using the beta branch of vapor.
First, I made my own fluent model (no problems that I know of):
import FluentSQLite
import Vapor
final class affordatmodel: SQLiteModel {
var id: Int?
var propertyCost: String
var targetEquity: String
var interestRate: String
var amortization: String
var sponsor1: String
var sponsor2: String
var rent: String
var rentInflation: String
var propertyTaxes: String
var propertyTaxesInflation: String
var strataFees: String
var strataFeesInflation: String
init(propertyCost: String, targetEquity: String, interestRate: String, amortization: String, sponsor1: String, sponsor2: String, rent: String, rentInflation: String, propertyTaxes: String, propertyTaxesInflation: String, strataFees: String, strataFeesInflation: String) {
self.propertyCost = propertyCost
self.targetEquity = targetEquity
self.interestRate = interestRate
self.amortization = amortization
self.sponsor1 = sponsor1
self.sponsor2 = sponsor2
self.rent = rent
self.rentInflation = rentInflation
self.propertyTaxes = propertyTaxes
self.propertyTaxesInflation = propertyTaxesInflation
self.strataFees = strataFees
self.strataFeesInflation = strataFeesInflation
}
}
/// Allows to be used as a dynamic migration.
extension affordatmodel: Migration { }
/// Allows to be encoded to and decoded from HTTP messages.
extension affordatmodel: Content { }
/// Allows to be used as a dynamic parameter in route definitions.
extension affordatmodel: Parameter { }
Then I make an instance and send it to a leaf template:
let defaultData = affordatmodel(propertyCost: "700000", targetEquity: "300000", interestRate: "1", amortization: "20", sponsor1: "500000", sponsor2: "200000", rent: "1200", rentInflation: "1", propertyTaxes: "8000", propertyTaxesInflation: "1", strataFees: "0", strataFeesInflation: "0")
return leaf.render("welcome", ["affordat": defaultData])
And my Leaf template successfully populates the html with the default data (body shown here):
<body class="container">
<h1>Payment and Principal Calculations</h1>
<form action="/affordat" method="POST">
<div class="form-group">
<label for="propertyCost">Property Cost</label>
<input type="number" class="form-control" name="propertyCost" placeholder="#(affordat.propertyCost)">
</div>
<div class="form-group">
<label for="targetEquity">Target Equity</label>
<input type="number" class="form-control" name="targetEquity" placeholder="#(affordat.targetEquity)">
</div>
<div class="form-group">
<label for="interestRate">Interest Rate</label>
<input type="number" class="form-control" name="interestRate" placeholder="#(affordat.interestRate)">
</div>
<div class="form-group">
<label for="amortization">Amortization (years)</label>
<input type="number" class="form-control" name="amortization" placeholder="#(affordat.amortization)">
</div>
<div class="form-group">
<label for="sponsor1">Sponsor 1 Funds</label>
<input type="number" class="form-control" name="sponsor1" placeholder="#(affordat.sponsor1)">
</div>
<div class="form-group">
<label for="sponsor2">Sponsor 2 Funds</label>
<input type="number" class="form-control" name="sponsor2" placeholder="#(affordat.sponsor2)">
</div>
<div class="form-group">
<label for="rent">Rent</label>
<input type="number" class="form-control" name="rent" placeholder="#(affordat.rent)">
</div>
<div class="form-group">
<label for="rentInflation">Rent Inflation (will be used exactly)</label>
<input type="number" class="form-control" name="rentInflation" placeholder="#(affordat.rentInflation)">
</div>
<div class="form-group">
<label for="propertyTaxes">Property Taxes (first year est.)</label>
<input type="number" class="form-control" name="propertyTaxes" placeholder="#(affordat.propertyTaxes)">
</div>
<div class="form-group">
<label for="propertyTaxesInflation">Property Taxes Inflation (est.)</label>
<input type="number" class="form-control" name="propertyTaxesInflation" placeholder="#(affordat.propertyTaxesInflation)">
</div>
<div class="form-group">
<label for="strataFees">Strata Fees (first year est.)</label>
<input type="number" class="form-control" name="strataFees" placeholder="#(affordat.strataFees)">
</div>
<div class="form-group">
<label for="strataFeesInflation">Strata Fees Inflation (est.)</label>
<input type="number" class="form-control" name="strataFeesInflation" placeholder="#(affordat.strataFeesInflation)">
</div>
<input type="hidden" name="_csrf" value="{{csrfToken}}">
<button type="submit" class="btn btn-primary">Refresh Calculations</button>
</form>
</body>
Great, so I know how to get fluent data to HTML. My problem is I don't know how to get it back. When the "Post" occurs, the data does not seem to get passed to the controller. My route is:
router.post("affordat", use: affordatController.create)
And the relevant part of my controller looks like this:
import Vapor
final class AffordatController {
func create(_ req: Request) throws -> Future<affordatmodel> {
return try req.content.decode(affordatmodel.self).flatMap(to: affordatmodel.self) { affordatmodel1 in
return affordatmodel1.save(on: req)
}
}
}
Which shows me one of my models, with an ID #, but no data. And I kind of understand why because I didn't really seem to send the post data to the controller. How I am supposed to send the POST data to the controller? Is the problem in my leaf template, my route, or my controller?
It looks like it should work. You can inspect the data being sent to your server in the network inspector in your browser. Make sure you preserve logs and you'll be able to see the POST request and the data sent to the server.
If you breakpoint at each point in the request you can see what the data is.
As an aside, it looks like you're submitting an empty form, so it's just filling everything in as blank strings. Do you mean to use value instead of placeholder in the form inputs? Value will pre-populate the data for the user, placeholder will show the value to the user as a suggestion but won't send the data in the form submission.
So im making this inventory website, so the forklift drivers can add or remove weight from our inventory we measure our products in weight.
So basically I need to be able to fetch the weight (in kg) from mongo db and add it to it and save it
//edit
the problem I'm having is the current code is returning "NaN kg" in html
kg is defined by a number inserted into the db and i cant seem to get the kg value without my code running into a error
The Html
<form class="add-pro">
<input type="text" class="form-control" name="namn" required="true" placeholder="Produkt Name"/>
<br />
<input type="text" class="form-control" name="id" required="true" placeholder="Produkt code"/>
<br />
<input type="number" class="form-control" placeholder="KG" name="kg" />
<input id="btnModal" type="submit" value="add" class="btn btn-primary"/>
</form>
<form class="add-data">
<input type="number" class="form-control" id="add-data-control" name="g" placeholder="how much">
<button class="glyphicon glyphicon-plus" type="submit" id="add-data-plus" aria-hidden="true"></button>
</form>
Javascript
"submit .add-data": function(event){
var g = event.target.g.value;
var x = produkter.find().fetch();
var k = kg;
produkter.update(this._id, {$set: {kg: +k + +g }});
},
Template.produkter.events({
"submit .add-pro": function(event){
var namn = event.target.namn.value;
var id = event.target.id.value;
var kg = event.target.kg.value;
produkter.insert({
namn: namn,
id: id,
kg: kg
});
return false;
},
There are a few problems with your code, see comments:
"submit .add-data": function(event){
var g = event.target.g.value;
var x = produkter.find().fetch();
// Where is kg defined?
var k = kg;
// The expression +k + +g does not compute - do you mean k+g ?
produkter.update(this._id, {$set: {kg: +k + +g }});
},
You may also be running into trouble with strings versus numbers. Even though your HTML input tag says type="number", the value will be a string, and will need to be converted to a number before saving it to the database.
I suspect you are also intending to save the value as something like "2.7 kg", which is useful for displaying the weight, but it's a bad idea, because if you do that you will need to strip off the " kg" every time you want to calculate a new value.
i am trying to processing a form in lift frame work. my form is having one checkbox and radiobuttons. how could i check whether the checkbox is checked or not and the selected radio button.the following code i used to get other elements value.
the view:
<form class="lift:MySnippet?form=post">
From:<input type="text" name="source" /><br />
To: <input type="text" name="destination" /><br />
Age: <input type="text" name = "age"/><br />
Return: <input type="checkbox" name="needreturn" value="Return Ticket" /><br />
<input type="radio" name="sex" value="male" />Male<br />
<input type="radio" name="sex" value="male" />Female<br />
<input type="submit" value="Book Ticket"/>
</form>
and MySnippet scala code is:
object MySnippet {
def render = {
var from = ""
var to = ""
var age = 0
def process() {
S.notice("in process function")
}
"name=source" #> SHtml.onSubmit(from = _) &
"name=destination" #> SHtml.onSubmit(to = _) &
"name=age" #> SHtml.onSubmit(s => asInt(s).foreach(age = _)) &
"type=submit" #> SHtml.onSubmitUnit(process)
}
}
in this how could i process the checkbox and radio button. can anyone help me...thanx in advance.
Do you need to specify the choices in your HTML? If not, the easiest way is:
Return: <input type="checkbox" name="needreturn" /><br />
Sex: <input type="radio" name="sex" />
and the CSS Transform:
val radioChoices = List("male", "female")
var sex:Box[String] = None
var needReturn:Boolean = false
"#sex" #> SHtml.radio(radioChoices, sex, (resp) => sex = Full(resp)) &
"#needreturn" #> SHtml.checkbox(needReturn, (resp) => needReturn = resp)
You could replace SHtml.radio with SHtml.ajaxRadio and SHtml.checkbox with SHtml.ajaxCheckbox if you want your selection to be sent to the server every time the value is changed, instead of when the form is submitted
I believe you can also use the SHtml.onSubmit as you do above for the checkbox and radio, but I'd have to do some testing to figure out exactly how.
With regards to the radio button, you can find some information about changing the way the label is output here if you need to: https://groups.google.com/forum/?fromgroups=#!topic/liftweb/rowpmIDbQAE
Use SHtml.checkbox, SHtml.radio
By the way, the <input>-s should be SHtml.text, I think. So, they're not buttons -- they're inputs. Don't forget to check the resulting html in the web page with firebug. (You'd see that using the current code you have input=text deleted.)
This question already has answers here:
Using the HTML5 "required" attribute for a group of checkboxes?
(16 answers)
Closed 6 years ago.
I have a list of checkboxes with the same name attribute, and I need to validate that at least one of them has been selected.
But when I use the html5 attribute "required" on all of them, the browser (chrome & ff) doesn't allow me to submit the form unless all of them are checked.
sample code:
<label for="a-0">a-0</label>
<input type="checkbox" name="q-8" id="a-0" required />
<label for="a-1">a-1</label>
<input type="checkbox" name="q-8" id="a-1" required />
<label for="a-2">a-2</label>
<input type="checkbox" name="q-8" id="a-2" required />
When using the same with radio inputs, the form works as expected (if one of the options is selected the form validates)
According to Joe Hopfgartner (who claims to quote the html5 specs), the supposed behaviour is:
For checkboxes, the required attribute shall only be satisfied when one or more of the checkboxes with that name in that form are checked.
For radio buttons, the required attribute shall only be satisfied when exactly one of the radio buttons in that radio group is checked.
am i doing something wrong, or is this a browser bug (on both chrome & ff) ??
You can make it with jQuery a less lines:
$(function(){
var requiredCheckboxes = $(':checkbox[required]');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is(':checked')) {
requiredCheckboxes.removeAttr('required');
}
else {
requiredCheckboxes.attr('required', 'required');
}
});
});
With $(':checkbox[required]') you select all checkboxes with the attribute required, then, with the .change method applied to this group of checkboxes, you can execute the function you want when any item of this group changes. In this case, if any of the checkboxes is checked, I remove the required attribute for all of the checkboxes that are part of the selected group.
I hope this helps.
Farewell.
Sorry, now I've read what you expected better, so I'm updating the answer.
Based on the HTML5 Specs from W3C, nothing is wrong. I created this JSFiddle test and it's behaving correctly based on the specs (for those browsers based on the specs, like Chrome 11 and Firefox 4):
<form>
<input type="checkbox" name="q" id="a-0" required autofocus>
<label for="a-0">a-1</label>
<br>
<input type="checkbox" name="q" id="a-1" required>
<label for="a-1">a-2</label>
<br>
<input type="checkbox" name="q" id="a-2" required>
<label for="a-2">a-3</label>
<br>
<input type="submit">
</form>
I agree that it isn't very usable (in fact many people have complained about it in the W3C's mailing lists).
But browsers are just following the standard's recommendations, which is correct. The standard is a little misleading, but we can't do anything about it in practice. You can always use JavaScript for form validation, though, like some great jQuery validation plugin.
Another approach would be choosing a polyfill that can make (almost) all browsers interpret form validation rightly.
To provide another approach similar to the answer by #IvanCollantes.
It works by additionally filtering the required checkboxes by name. I also simplified the code a bit and checks for a default checked checkbox.
jQuery(function($) {
var requiredCheckboxes = $(':checkbox[required]');
requiredCheckboxes.on('change', function(e) {
var checkboxGroup = requiredCheckboxes.filter('[name="' + $(this).attr('name') + '"]');
var isChecked = checkboxGroup.is(':checked');
checkboxGroup.prop('required', !isChecked);
});
requiredCheckboxes.trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form target="_blank">
<p>
At least one checkbox from each group is required...
</p>
<fieldset>
<legend>Checkboxes Group test</legend>
<label>
<input type="checkbox" name="test[]" value="1" checked="checked" required="required">test-1
</label>
<label>
<input type="checkbox" name="test[]" value="2" required="required">test-2
</label>
<label>
<input type="checkbox" name="test[]" value="3" required="required">test-3
</label>
</fieldset>
<br>
<fieldset>
<legend>Checkboxes Group test2</legend>
<label>
<input type="checkbox" name="test2[]" value="1" required="required">test2-1
</label>
<label>
<input type="checkbox" name="test2[]" value="2" required="required">test2-2
</label>
<label>
<input type="checkbox" name="test2[]" value="3" required="required">test2-3
</label>
</fieldset>
<hr>
<button type="submit" value="submit">Submit</button>
</form>
i had the same problem, my solution was apply the required attribute to all elements
<input type="checkbox" name="checkin_days[]" required="required" value="0" /><span class="w">S</span>
<input type="checkbox" name="checkin_days[]" required="required" value="1" /><span class="w">M</span>
<input type="checkbox" name="checkin_days[]" required="required" value="2" /><span class="w">T</span>
<input type="checkbox" name="checkin_days[]" required="required" value="3" /><span class="w">W</span>
<input type="checkbox" name="checkin_days[]" required="required" value="4" /><span class="w">T</span>
<input type="checkbox" name="checkin_days[]" required="required" value="5" /><span class="w">F</span>
<input type="checkbox" name="checkin_days[]" required="required" value="6" /><span class="w">S</span>
when the user check one of the elements i remove the required attribute from all elements:
var $checkedCheckboxes = $('#recurrent_checkin :checkbox[name="checkin_days[]"]:checked'),
$checkboxes = $('#recurrent_checkin :checkbox[name="checkin_days[]"]');
$checkboxes.click(function() {
if($checkedCheckboxes.length) {
$checkboxes.removeAttr('required');
} else {
$checkboxes.attr('required', 'required');
}
});
Here is improvement for icova's answer. It also groups inputs by name.
$(function(){
var allRequiredCheckboxes = $(':checkbox[required]');
var checkboxNames = [];
for (var i = 0; i < allRequiredCheckboxes.length; ++i){
var name = allRequiredCheckboxes[i].name;
checkboxNames.push(name);
}
checkboxNames = checkboxNames.reduce(function(p, c) {
if (p.indexOf(c) < 0) p.push(c);
return p;
}, []);
for (var i in checkboxNames){
!function(){
var name = checkboxNames[i];
var checkboxes = $('input[name="' + name + '"]');
checkboxes.change(function(){
if(checkboxes.is(':checked')) {
checkboxes.removeAttr('required');
} else {
checkboxes.attr('required', 'required');
}
});
}();
}
});
A little jQuery fix:
$(function(){
var chbxs = $(':checkbox[required]');
var namedChbxs = {};
chbxs.each(function(){
var name = $(this).attr('name');
namedChbxs[name] = (namedChbxs[name] || $()).add(this);
});
chbxs.change(function(){
var name = $(this).attr('name');
var cbx = namedChbxs[name];
if(cbx.filter(':checked').length>0){
cbx.removeAttr('required');
}else{
cbx.attr('required','required');
}
});
});
Building on icova's answer, here's the code so you can use a custom HTML5 validation message:
$(function() {
var requiredCheckboxes = $(':checkbox[required]');
requiredCheckboxes.change(function() {
if (requiredCheckboxes.is(':checked')) {requiredCheckboxes.removeAttr('required');}
else {requiredCheckboxes.attr('required', 'required');}
});
$("input").each(function() {
$(this).on('invalid', function(e) {
e.target.setCustomValidity('');
if (!e.target.validity.valid) {
e.target.setCustomValidity('Please, select at least one of these options');
}
}).on('input, click', function(e) {e.target.setCustomValidity('');});
});
});
var verifyPaymentType = function () {
//coloque os checkbox dentro de uma div com a class checkbox
var inputs = window.jQuery('.checkbox').find('input');
var first = inputs.first()[0];
inputs.on('change', function () {
this.setCustomValidity('');
});
first.setCustomValidity( window.jQuery('.checkbox').find('input:checked').length === 0 ? 'Choose one' : '');
}
window.jQuery('#submit').click(verifyPaymentType);
}