i am trying to save body of post form in mongodb.
Everytime i get this result only.
{ _id: new ObjectId("63f222995b85f79e258642c4"), __v: 0 }
HTML form code
<form action="/" method="post">
<div class="item11 bg12">
<input id="inph" type="text" class="in bg1" placeholder="Phone number, username or email address">
</div>
<div class="item11">
<input id="inpass" type="text" class="in bg1" placeholder="password">
</div>
<div class="item11">
<button type="submit" id="btlog" class="in bg2">Log in</button>
</div>
</form>
node js code
const credential=mongoose.Schema({username:String,password:String});const cr_den=mongoose.model('instagram_clone',credential);
app.get('/',(req,res)=>{res.render('index.pug');})
app.post('/',(req,res)=>{var data=new cr_den(req.body);data.save().then(()=>{console.log("response Noted..!!");console.log(data);}).catch(()=>{console.log('Failed To Save Data...!!!')})res.render('index.pug');})
The result should be
{ _id: new ObjectId("63f222995b85f79e258642c4"), username:"xyz",password:"xyz",__v: 0 }
Related
HTML
This is the form I am using to send the request to my server.
<form action="/compose" method="post">
<div style="margin-bottom: 1rem; margin-top: 2rem;">
<label for="exampleInputEmail1" class="form-label">Title</label>
<input type="text" name="postTitle" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div>
<label class="form-label" for="textAreaExample">Post</label>
<textarea name="postBody" id="textAreaExample" cols="150" rows="10" class="form-control"></textarea>
</div>
<button type="submit" name="button" class="btn btn-primary" class="mt-4"
style="margin-top: 1rem;">Publish</button>
</form
I am using nodejs to get catch the post request and logging it
In app.js
Here I am logging the request sent to the server
app.post("/compose", function(req, res){
const input = req.body;
console.log(input);
});
problem
Server started on port 3000
{ postTitle: 'dsfds', button: '' }
But only the postTitle thing is getting logged. Why is that?
So I found a solution to my problem in this post:
Here
What I needed to do, is to add a form id="composeForm" to my form and then use that same id
inside the textarea(attribute: form="composeForm")
HTML
<form action="/compose" method="post" id="composeForm">
<div style="margin-bottom: 1rem; margin-top: 2rem;">
<label for="exampleInputEmail1" class="form-label">Title</label>
<input type="text" name="postTitle" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div>
<label class="form-label" for="textAreaExample">Post</label>
<textarea name="postBody" id="textAreaExample" cols="150" rows="10" class="form-control" form="composeForm"></textarea>
</div>
<button type="submit" name="button" class="btn btn-primary" class="mt-4"
style="margin-top: 1rem;">Publish</button>
I am trying to send a post request to my API using axios. I have a html form where the user enters an email and a password. When the request is sent off, I can see in the chrome dev tools that the body of my request is empty, so I am not getting the form input. I would appreciate any advice on how I can extract this.
The HTML form
<modal name="modal-register" #opened="opened">
<form #submit.prevent="doRegister">
<div class="form-group">
<label for="email" class="block">Email</label>
<input type="email" id="email" name="email" class="border" ref="email">
</div>
<div class="form-group">
<label for="password" class="block">Password</label>
<input type="password" id="password" name="password" class="border">
</div>
<div class="form-group">
<button type="submit" #submit.prevent="doRegister">Register</button>
</div>
</form>
<div class="form-group">
<p>Already have an account? Login</p>
</div>
<div>
<p v-if="success"> {{ success }}</p>
<pre>{{ response }}</pre>
</div>
</modal>
The Axios request
doRegister() {
axios({
method: 'post',
url: 'http://localhost:3001/wallets/signup',
headers: {},
data: {
email: this.email,
password: this.password
}
});
}
When the values in the data block are hardcoded, the request works fine, so I am simply not extracting the form data. I am having trouble finding examples for doing this with javascript as most seem to use php for the request.
You probably have to bind the inputs to your data.
So adding v-model to the inputs and bind them to your perferred data key. eg this.email/this.password
<modal name="modal-register" #opened="opened">
<form #submit.prevent="doRegister">
<div class="form-group">
<label for="email" class="block">Email</label>
<input v-model="email" type="email" id="email" name="email" class="border" ref="email">
</div>
<div class="form-group">
<label for="password" class="block">Password</label>
<input v-model="password" type="password" id="password" name="password" class="border">
</div>
<div class="form-group">
<button type="submit" #submit.prevent="doRegister">Register</button>
</div>
</form>
<div class="form-group">
<p>Already have an account? Login</p>
</div>
<div>
<p v-if="success"> {{ success }}</p>
<pre>{{ response }}</pre>
</div>
</modal>
Issue was resolved by using
email: document.getElementById('email').value,
password: document.getElementById('password').value
The below code works fine, while fetching.. but i don't want the subflag div occupying the space which affects the submit button in displaying in correct position. Is there any other way possible to pass the values to app.js
app.post("/activitieslist/:id/edit", function(req. res) {
var astname = req.body.astname;
var subflag = req.body.subflag;
console.log(astname, subflag);
});
<form action="/activitieslist/<%= activitylist._id %>/edit" method="POST">
<div class="form-group">
<label>Asset Name :
</label>
<input class="form-control" type="text" name="astname" value="<%= activitylist.astname %>">
</div>
<div class="form-group invisible">
<input type="text" name="subflag" value="N">
</div>
<button class ="btn btn-info"><i class="fas fa-edit"></i>Save</button>
</form>
I have 2 separate forms in HTML and want to send them via a single button. How can I do that? When I try to make them into one form by removing the start and end in the middle, the div tags and CSS messes up. Here is my code.
<div class="contact-bottom">
<div class="col-md-6 contact-left">
<form>
<input type="text" placeholder="Name" required="">
<input type="text" placeholder="E-mail" required="">
<input type="text" placeholder="Phone" required="">
</form>
</div>
<div class="col-md-6 contact-left">
<form>
<textarea placeholder="Message"></textarea>
<input type="submit" value="SEND">
</form>
</div>
<div class="clearfix"> </div>
</div>
Use ajax to post values !
Exemple:
<script>
$(document).ready(function(){
$("#submit").click(function(){
$.ajax({
type: 'post',
url: "mail.php",
data: { "name" : $("#mail-name").val() ,"email" : $("#mail-email").val() },
success: function($response) {
alert($response);
}
});
});
});
I am using anuglar.js form validation.
I want to check validation without form submit button.
This is my html.
<form name="userForm">
<input type="hidden" ng-model="StandardID" />
<div class="form-group">
<label for="email">Name:</label>
<input type="text" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required>
<span ng-show="userForm.Name.$dirty && !userForm.Name.$valid">Name is required.</span>
</div>
<div class="form-group">
<label for="pwd">Alias:</label>
<input type="text" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required>
</div>
<button type="submit" class="btn btn-info" ng-click="update()">Submit</button>
<button type="submit" class="btn btn-info" data-dismiss="modal">Cancel</button>
</form>
My controller js is.
$scope.update= function () {
alert($scope.userForm.Name.$valid);
if ($scope.userForm.Name.$valid) {
alert("Entry added");
}
}
It shows small dialog that says this field is required. I don't want this popup . Why span section does not show?
To do it, the key is use the name attribute in your <form> and in all of your inputs.
Following this way, angularjs will create a form instance where you can access all fields like myForm.myInput.$invalid
For example:
<form name="myForm" novalidate>
<label>My Input:</label>
<input type="text" name="myInput" ng-model="myInput" required>
<span ng-show="myForm.myInput.$dirty && myForm.myInput.$invalid">My Input is invalid.</span>
</form>
Check angular docs
HTML
<div ng-app="myApp">
<form name="cutome_form" ng-submit="submitForm()" novalidate>
<input type="text" name="name" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required>
<div ng-show="cutome_form.name.$dirty && cutome_form.name.$invalid">
<span class="error" ng-show="cutome_form.name.$error.required">The field is required.</span>
</div>
<div class="form-group">
<label for="pwd">Alias:</label>
<input type="text" name="alias" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required>
</div>
<div ng-show="cutome_form.alias.$dirty && cutome_form.alias.$invalid">
<span class="error" ng-show="cutome_form.alias.$error.required">The field is required.</span>
</div>
<button type="submit" ng-disabled="cutome_form.$invalid">Submit All</button>
</form>
</div>
directive
.directive('ngModel', function() {
return {
require: 'ngModel',
link: function(scope, elem, attr, ngModel) {
elem.on('blur', function() {
ngModel.$dirty = true;
scope.$apply();
});
ngModel.$viewChangeListeners.push(function() {
ngModel.$dirty = false;
});
scope.$on('$destroy', function() {
elem.off('blur');
});
}
}
});