I've been searching the internet for a long time now and I've yet not managed to find any useful information on this problem.
Use case:
POST Data to mongo database using EJS and Mongoose.
This is a simple registration for users in a Modal View.
This is my Registration Form:
Top.ejs
<form id="register-form" action="/" method="POST" style="display:none" enctype="multipart/form-data">
<div class="modal-body">
<div id="div-register-msg">
<div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-register-msg">Register</span>
</div>
<input name="firstname" class="form-control" type="text" placeholder="Firstname" required>
<input name="lastname" class="form-control" type="text" placeholder="Lastname" required>
<input name="email" class="form-control" type="email" placeholder="Email" required>
<input name="phonenumber" class="form-control" type="number" placeholder="Phonenumber" required>
<input name="password" class="form-control" type="password" placeholder="Password" required>
<input name="password_c" class="form-control" type="password" placeholder="Confirm" required>
</div>
<div class="modal-footer">
<!--<div class"checkbox">
<label><input type="checkbox">I have read and understood the terms for Debate.It</label>
</div>-->
<input type="submit" class="btn btn-success btn-block" value="Register">
</div>
</form>
Below you'll see the POST Route. Please be aware that this is working with POSTMAN. The data is posted into a mongoLab online database. Working like a charm.
router.post('/', jsonParser, function (req, res){
mongoose.connect(url, function(err, db) {
console.log(req.body);
console.log("User created!");
var user = {
firstname : req.body.firstname,
lastname : req.body.lastname,
email : req.body.email,
phonenumber : req.body.phonenumber,
password : req.body.password
};
UserReq.create(user, function(err, data) {
if(err) {
res.status(400);
}
else {
res.status(201);
//res.send(data);
res.json(data);
mongoose.disconnect();
}
});
});
});
I do not believe there is anything particular wrong with the route, but might be the EJS Page.
Here you'll see my Modal View. The Form's are in a single file, but they have been separated into their own forms and given an ID.
Alright, so when I click the "Register"-button I do not get any action at all. I've tried with some JQuery, but I don't get any action.
I hope anyone in here can help me out. Maybe give me a tip and some theory behind.
If you've any misunderstandings in my explaining, please do hesitate to tell me. I will correct it or try to be more clear. This is written just 5 minutes before the guests for Christmas arrives.
Have a wonderful Christmas everyone. May you all have a wonderful night.
Related
I have created a javascript page and connected it with html page. In the Javascript, i have created validation of the password and if there is a password mismatch then it will alert that there is a mismatch.
function validation()
{
if(password==repassword){
console.log(" ");
}
else{
alert(" ");
}
}
Above code is the javascript code and below is the html code.
LogIn
<label for="username">First Name: </label>
<input class="firstname" type="text" id="firstname" placeholder="First name"><br>
<label for="username">Last Name: </label>
<input class="lastname" type="text" id="lastname" placeholder="Last name"><br>
<label for="email">Email id: </label>
<input class="email" type="email" id="email" placeholder="Email id"><br>
<label for="labeltext">Password: </label>
<input class="password" type="password" id="password" placeholder="Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"><br><br>
<label for="labeltext">Re-Password: </label>
<input class="Re-Password" type="password" id="repassword" placeholder="Re-Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"><br><br>
<button class="Submit" onclick="validation()">Submit</button>
<button class="reset">Reset</button>
</form>
Does anyone know what's wrong in my code? Thank you!
You must create a reference for each element in javascript:
const password = document.getElementById('password');
const repassword = document.getElementById('repassword');
Now your variables are not local and you can use them in your function:
function validation()
{
if(password.value==repassword.value){
console.log(" ");
}
else{
alert(" ");
}
}
I believe what you want to do is to check if the password matches the verify password value.
From your javascript codes, everything looks good but if it is not working, then there is a problem with your HTML elements IDs i.e password field id and verify password field id. Check if you are making a mistake in any of the code you are using to get the element values.
A little mistake like
var x = document.getElementById("txtpass").value;
Where as, in your HTML source, there is no such element with txtpass as id could cause your javascript codes to break.
I would advise you post the complete HTML and Javascript codes.
Better still, use your browser console to check for the runtime error that is depriving your code from running as expected.
Use name=password in your password and name=repassword in your repassword tag like
<input class="password" name="password" type="password" id="password" placeholder="Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"><br><br>
I am not web developer, but I have a task to add autocomplete function for an input box. Please treat me as a very beginner.
<div>
<label id="email_label" for="send_email" style="padding-right:5px">
Send Email:
</label>
<input id="send_email" type="text" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" onclick="requestAck()">
Request
</button>
</div>
requestAck() is a javascript function sending a email to address given by user (i.e. address in <input >). I am trying to add a flag in <input autocomplete="on" ...>, but it doesn't work. Perhaps because it's not in a <form></form> environment.
Could you help me to modify this code adding autocomplete (from cache) without changing other functions. Many thanks!
Try setting the property name="email" on the input tag, without that set the browser doesn't know what's supposed to autocomplete the field with :)
protip: I warmly suggest you to set the type of the input to email with type="email" instead of text, it's not required but it will help validating the input!
check this code:
<div>
<label id="email_label" for="send_email" style="paddingright:5px">Send Email:</label>
<input id="send_email" type="email" name="email" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" onclick="requestAck()">Request</button>
</div>
EDIT: Final solution discussed in comments
<form onsubmit="submitForm(event)">
<label id="email_label" for="send_email" style="padding-right:5px">Send Email:</label>
<input id="send_email" type="email" autocomplete="email" name="email" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" type="submit">Request</button>
</form>
<script>
function submitForm(e) {
e.preventDefault(); // this prevents the page from reloading
requestAck();
}
//dummy function so the javascript won't crash:
function requestAck() {}
</script>
Working example: https://codesandbox.io/s/focused-cray-ubkw4
I have a form outlined in my app.component.html file as below, when I click the Send button to submit the form I get an error in my Javascript saying that the chatForm is undefined.
I've had a look at a few different tutorials and I can't seem to find why this function is not operating as I expect. What am I doing wrong?
Also when I'm submitting the form how do I get the value of the input that is present in my form? I have a name of message defined on the form, how can I use this variable?
app.component.html
<div class="container">
<h2>Message Form</h2>
<form (ngSubmit)="sendMessage(chatForm)" #chatForm="ngForm">
<div>
<label for="message">Message</label>
<input type="text" id="message" name="message" [(ngModel)]="message" required>
</div>
<button type="submit" id="sendmessage" [disabled]="!chatForm.valid">
Send
</button>
</form>
</div>
app.component.ts
public sendMessage(form): void {
console.log("Message sent: " + form.value);
}
You should get the data by using
form.value.message
My example look like this
<form (ngSubmit)="onSubmit(registerForm)" #registerForm="ngForm">
<div class="form-group">
<label for="UserName">Your email</label>
<input
type="text"
ngModel
class="form-control"
id="UserName"
name="UserName"
required
/>
Then in my component I can access to the form data like this
onSubmit(formValue: NgForm) {
const registerModel: AccountModel = {
UserName: formValue.value.UserName,
Password: formValue.value.Password
};
How can I make the user submit the form, store it in MYSQL DB and then display the same submitted data in the form field?
<div class="form-group">
<label class="control-label col-sm-2" for="lname">Last Name*</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="Last Name" name="lastname" value="" autocomplete="nope" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email*</label>
<div class="col-sm-10">
<input class="form-control" type="email" id="email" placeholder="Enter email" name="email" value="" autocomplete="nope"required />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="phone">Phone</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" placeholder="Phone" name="phone" value="" autocomplete="nope" />
</div>
</div>
Below script is used to save into MSQL database
function post() {
var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
if(firstname && lastname && email && phone) {
$.ajax({
type: 'post',
url: 'profile.php',
data: {
firstname: firstname,
lastname: lastname,
email: email,
phone: phone
},
success: function (response) {
document.getElementById("status").innerHTML="Profile updated successfully";
}
});
}
return false;
}
Any similar example link would be great!
Now my question/problem/process is:
To save the form data into MYSQL DB (this I have already done).
How do I still display the form data of that specific user in the input field each time the user login? (To be done)
Kindly help me as I am trying since last 3 days for a solution and have used so many approaches available on the internet and nothing has worked so far. Your help is very much appreciated. Thank you.
In your PHP file, you need to return the row and in your AJAX success function display data.
Every time when there is a user login, you should check the user Id(or anything that can verify this user) according to the data in database.
And by this user id you can get the data of this user by php file.
And the you can get the information show through ajax form php file.
Please help me, I stuck at likely simple task. I'm learning to webdriverjs , so I wrote a small code to register an account on FitBit site at url: www.fitbit.com/signup, after input my email and password, there is an div popup show up and ask user to fill all required field. Problem comes here, I cannot 'sendkeys' or 'click' on First Name field, could you please help me out?
my code is very simple:
const webdriver = require('selenium-webdriver');
const driver = new webdriver.Builder()
.forBrowser('firefox')
.build();
const By = webdriver.By;
// ask the browser to open a page
driver.navigate().to('https://www.fitbit.com/signup');
//Enter Email
driver.findElement(By.className('field email')).sendKeys('thisisatest#yopmail.com');
//Enter Password
driver.findElement(By.className('field password')).sendKeys('Abcd1234');
//Check check box
driver.findElement(By.id('termsPrivacyConnected')).click();
//Click Continue button
driver.findElement(By.xpath("//button[#type='submit' and #tabindex='16']")).click();
//Input First Name
driver.sleep(3000);
driver.findElement(By.xpath('//input[#id="firstName"]')).click();
driver.findElement(By.xpath('//input[#id="firstName"]')).sendKeys('why not input');
Depending on if this is a popup, a frame or another window you need a different SwitchTo() command. See: http://toolsqa.com/selenium-webdriver/switch-commands/ or here: http://learn-automation.com/handle-frames-in-selenium/
Now you added your HTML it is clear that that you don't have to Switch to fill in the popup fields. I translated your code to C# and use Chromedriver instead of Firefox and there where no problems filling in the Firstname and Lastname. So basicly nothing is wrong with your code.
Are you getting any error messages?
There is no window here, that's a tag, I posted its source code here for your reference
<section class="wrapper profile common-form">
<div class="panel panel-profile">
<h1 class="headline">
Tell Us About Yourself
</h1>
<p class="explain">
We use this information to improve accuracy.
</p>
<form method="post" autocomplete="off" name="completeProfile" action="https://www.fitbit.com/user/profile/complete" id="completeProfile" class="form">
<input name="_eventName" type="hidden" value="signupAndCompleteProfile" />
<input name="redirect" type="hidden" value="" />
<input name="csrfToken" type="hidden" value="84764c8b4da04c85a4541e49947240d0" />
<fieldset class="info-personal">
<dl class="field-group">
<dd class="left-cell">
<label class="field-label">
Name
</label>
<input autocomplete="off" tabindex="1" name="firstName" id="firstName" placeholder="First Name" type="text" class="field firstName" />
</dd>
<dd class="right-cell">
<label class="field-label"> </label>
<input autocomplete="off" tabindex="1" name="lastName" id="lastName" placeholder="Last Name" type="text" class="field lastName" />
</dd>
</dl>
<div class="clear"></div>
</fieldset>
</section>