When populate data, labels don't move and mix with data:
<label class="control-label">email</label>
<input type="text" class="form-control" formControlName="email">
Related
This is my input form. Here, the Price label save as string in Database. How can change it into integer format. I'm using mongodb 3.2 version
<section>
<div class="container mt-4">
<div class="row">
<div class="col-md-6">
<h2 class="text-center">Add Product</h2>
<form action="/admin/add-product" method="POST" enctype="multipart/form-data">
<label for="">Name</label>
<input type="text" name="Name" class="form-control">
<label for="">Category</label>
<input type="text" name="Category" class="form-control">
<label for="">Price</label>
<input type="number" name="Price" class="form-control">
<label for="">Description</label>
<input type="text" name="Description" class="form-control">
<label for="">Image</label>
<input type="file" name="Image" class="form-control">
<button type="submit" class="btn btn-success mt-4">Submit</button>
</form>
</div>
</div>
</div>
</section>
Add to cart
addProduct:(product,callback)=>{
db.get().collection("product").insertOne(product).then((data)=>{
console.log(data)
callback(data.ops[0]._id)
})
}
Before adding the product to database change Price to integer
let Price=parseInt(req.body.Price)
req.body.Price=Price
then add product to mongodb
<form action="/test" method="post>
<input type="text" name="something">
<input type="text" name="something_again">
<button type="submit"></button>
</form>
When I fill up both of the inputs, data is sent in req.body and I can use them as I want, but if I fill only one or no inputs, nothing is happening and req.body is empty. What can I do to have data in req.body when not all the inputs are filled?
i have using ejs engine to get and post method.When i use http://localhost:8080/signup, i will get a sigup form where i can input my values. The problem is after submitting the form,i am unable console the value of "req.body". Help me?
app.post('/signup',urlencodedParser,function(req,res){
//console.log(req)
var names = req.body;
console.log(names);
res.end("sigup submitted");
});
app.get('/signup', function(req, res) {///////////signup ejs loading
res.render('signup')
});
<form id="signupForm" enctype="multipart/form-data" method="post" action="">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="name"><b>Company Name</b></label>
<input type="text" placeholder="Company Name" name="name" required>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label for="psw-repeat"><b>Address</b></label>
<input type="text" placeholder="Address" name="address" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
Express does come with some body parsers, but if you are using multipart/form-data then answer would be https://github.com/expressjs/multer not
You can even read that https://www.npmjs.com/package/body-parser (aka body-parser) also do not read multipart/form-data as they can be complicated and should be used only when files are sent.
I am trying to build an app that lets users find other users with a specific combination of skills. I ask the users to select which skills they are looking for via checkboxes but I'm not sure how to request for the status of that checkbox in my function.
My function currently is:
UserInfo.find()
.where('skill1').equals('')
.where('skill2').equals('')
.where('skill3').equals('')
.limit(10)
.then(function(doc) {
res.render('index', {items: doc});
});
It works properly if I set the equals('') to true or false but I'm not sure how to set it dynamically. My HTML code for the checkboxes is:
<form action="/getskills" method="get">
<div class="input">
<label for="skill1">Skill1</label>
<input type="checkbox" id="skill1" name="skill1" value="skill1"/>
</div>
<div class="input">
<label for="skill2">Skill2</label>
<input type="checkbox" id="skill2" name="skill2" value="skill2"/>
</div>
<div class="input">
<label for="skill3">Skill3</label>
<input type="checkbox" id="skill3" name="skill3" value="skill3"/>
</div>
FIND SKILL
</form>
How can I create and integrate a function to check the value of the checkbox and set the value of the required skill to either true or false?
Thanks in advance for your help.
The problem is that you are using an <a> element to perform the request to the server instead of <input type="submit">. Without a submit button, the elements on your form will not be submitted with the request. Modify your html to this
<form action="/getskills" method="get">
<div class="input">
<label for="skill1">Skill1</label>
<input type="checkbox" id="skill1" name="skill1" value="skill1" />
</div>
<div class="input">
<label for="skill2">Skill2</label>
<input type="checkbox" id="skill2" name="skill2" value="skill2" />
</div>
<div class="input">
<label for="skill3">Skill3</label>
<input type="checkbox" id="skill3" name="skill3" value="skill3" />
</div>
<input type="submit" value="FIND SKILL" />
</form>
then in your Node.js code (I assume you are using express), you can get the checkbox values as query parameters as follows:
//I'm assuming the req parameter is passed in to the express get() method
UserInfo.find()
.where('skill1').equals(req.query.skill1)
.where('skill2').equals(req.query.skill2)
.where('skill3').equals(req.query.skill3)
.limit(10)
.then(function(doc) {
res.render('index', {items: doc});
});
After having removed critical features such as input-xlarge and input-large, what is the substitution for it in bootstrap 3?
Of course I could use col-lg-12 etc but that is giving an error in tab pane.
I could also use style = "width:30px;" but then It would loose its responsiveness unlike input-xlarge.Any suggestions etc?
In Bootstrap 3, .form-control (the class you give your inputs) has a width of 100%, which allows you to wrap them into col-lg-X divs for arrangement. Example from the docs:
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
See under Column sizing.
It's a bit different than in Bootstrap 2.3.2, but you get used to it quickly.
You can use these classes
input-lg
input
and
input-sm
for input fields and replace input with btn for buttons.
Check this documentation http://getbootstrap.com/getting-started/#migration
This will change only height of the element, to reduce the width you have to use grid system classes like col-xs-* col-md-* col-lg-*.
Example col-md-3. See doc here http://getbootstrap.com/css/#grid
<form role="form">
<div class="form-group">
<div class="col-xs-2">
<label for="ex1">col-xs-2</label>
<input class="form-control" id="ex1" type="text">
</div>
<div class="col-xs-3">
<label for="ex2">col-xs-3</label>
<input class="form-control" id="ex2" type="text">
</div>
<div class="col-xs-4">
<label for="ex3">col-xs-4</label>
<input class="form-control" id="ex3" type="text">
</div>
</div>
</form>
i solved with a max-width in my main css-file.
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
It's a simple solution with little "code"
<div class="form-group">
<div class="input-group col-md-5">
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<input class="form-control" type="text" name="text" placeholder="Enter Your Email Id" width="50px">
</div>
<input type="button" name="SIGNUP" value="SIGNUP">
</div>