send string query alongside user name and password ajax - javascript

I want to send command=login& string along side username and password collected from the form, like
login.php?command=login&name=something&password=main
<form id="login" action="https//login.php" method="GET">
<fieldset>
<label for="name">Email</label>
<input type="email" id="email" name="email">
</fieldset>
<fieldset>
<label for="password">password</label>
<input type="password" id="password" name="password">
</fieldset>
<fieldset>
<input type="submit" value="Submit">
</fieldset>
</form>
$('#login').on('click', function(e) {
e.preventDefault();
data: "command=login&" + ('#login').serialize(),
$.get('https://login.php', data, function() {
// $('#').html(data);
});
});

You can do:
$.get('https://login.php?command=login&' + $('#login').serialize(), function() {
// $('#').html(data);
});

Add a hidden input field to your form. You should also be sending the form via POST and not GET since you are sending sensitive information.
<form id="login" action="https://login.php" method="POST">
<input type="hidden" name="command" value="login">
<fieldset>
<label for="name">Email</label>
<input type="email" id="email" name="email" >
</fieldset>
<fieldset>
<label for="password">password</label>
<input type="password" id="password" name="password" >
</fieldset>
<fieldset>
<input type="submit" value="Submit">
</fieldset>
</form>
Then remove the string portion from your data attribute like this:
$('#login').on('click', function(e) {
e.preventDefault();
let data = $('#login').serialize()
$.post('https://login.php', data, function(results) {
// $('#').html(results);
});
});

Related

Automatic filling of identical registration fields at the same time

I need to help. I have a next form
<form action="" method="POST">
<input type="email" name="email">
<input type="email" name="email-repeat">
<input type="password" name="password">
<input type="password" name="password-repeat">
<input type="submit" value="">
</form>
and I want when I reload to page, that browser to autocomplete all fields from saved data in the browser(email and password) twice password and twice email. I tried a few combinations with attribute of autocomplete, but nothing.
You should add autocomplete="off" to the inputs that you don't want to be filled automatically.
<input autocomplete="off" type="email" name="email">
<input autocomplete="off" type="email" name="email-repeat">
<input autocomplete="off" type="password" name="password">
<input autocomplete="off" type="password" name="password-repeat">
<input type="submit" value="">
You can find details in MDN

onsubmit function does not invoke correctly using Node.js

I want to make some validations when the form submitted. However when the form submitted validation function seems like invoking correctly. The alert part doesn't come up but when i try to alert like this
function validation(){
alert("somethinglol");
var username = $("#register.username").val().toString();
alert(username);
};
somethinglol appears but the second alert doesn't.
This is my get function:
app.get('/', (req, res) => {
res.render('index.ejs');
})
This is the index.ejs
<form id="form1" action="/" method="post" onSubmit="validation();">
<div class="form-group">
<label for="register.username">Username</label>
<input type="text" name="username" id="register.username" class="form-control" placeholder="Username" aria-describedby="helpId">
<small id="helpRegisterUsername" class="text-muted">You should enter a username.</small>
</div>
<div class="form-group">
<label for="register.password">Password</label>
<input type="password" name="password" id="register.password" class="form-control" placeholder="Password" aria-describedby="helpId">
<small id="helpId" class="text-muted">Enter a password.</small>
</div>
<div class="form-group">
<label for="register.confirm.password">Confirm password</label>
<input type="password" name="confirmedPassword" id="register.confirm.password" class="form-control" placeholder="Confirm password" aria-describedby="helpId">
<small id="helpId" class="text-muted">Confirm password</small>
</div>
<input type="submit" id="registerSubmit" value="Submit"></input>
</form>
This is the script part of index.js which contains the validation() function.
<script>
function validation(){
alert($("#register.username").val().toString());
var username = $("#register.username").val().toString();
username = "somethinglol";
alert(username);
};
</script>
I have changed the script as external but it didn't work. I have changed the jquery cdn. I used $("#registerSubmit").click(...) instead of onSubmit but it didn't work again. I also tried something using async and await but if it's the problem I am not sure that I did it correctly.
with jquery you can use $( "#form1" ).submit(function( event ) { to perform an action before the submit
moreover to select id with dot (.) in jquery you have to use \\ before dot
$("#register\\.username")
$( "#form1" ).submit(function( event ) {
alert($("#register\\.username").val().toString());
var username = $("#register\\.username").val().toString();
username = "somethinglol";
alert(username);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" action="/" method="post" onSubmit="validation();">
<div class="form-group">
<label for="register.username">Username</label>
<input type="text" name="username" id="register.username" class="form-control" placeholder="Username" aria-describedby="helpId">
<small id="helpRegisterUsername" class="text-muted">You should enter a username.</small>
</div>
<div class="form-group">
<label for="register.password">Password</label>
<input type="password" name="password" id="register.password" class="form-control" placeholder="Password" aria-describedby="helpId">
<small id="helpId" class="text-muted">Enter a password.</small>
</div>
<div class="form-group">
<label for="register.confirm.password">Confirm password</label>
<input type="password" name="confirmedPassword" id="register.confirm.password" class="form-control" placeholder="Confirm password" aria-describedby="helpId">
<small id="helpId" class="text-muted">Confirm password</small>
</div>
<input type="submit" id="registerSubmit" value="Submit"></input>
</form>

Validate multiple fields and showing a message

I have a pretty simple form. I want to show the message "Please say something! I want to hear from you!" on my website when people leave the fields empty. How to go about it ?
<form action="/action_page.php">
<label for="name">Name</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email</label>
<input type="text" id="email" name="email"><br><br>
<label for="comment">Comment</label>
<input type="text" id="comment" name="comment"><br><br>
<input type="submit" value="Submit">
</form>
Here's one way to do it. You listen for the submit from the button and when that happens you stop the form from submitting with event.preventDefault(), so you can check the values. We set up the form fields in an array called check, so we can loop through them and check for their value. If the value is empty, we make a note of that in a error array. At the end, we check to see if there are errors and if so, display the alert. If not, allow the form to submit.
document.querySelector('input[type=submit]').addEventListener('click', function(e) {
e.preventDefault(); // stop the form from submitting
let form = document.querySelector('form');
let check = ['name', 'email', 'comment'];
let error = [];
check.forEach(field => {
if (form.querySelector('#' + field).value.trim() === '') {
error.push(field);
}
})
if (error.length > 0) {
alert('Please say something! I want to hear from you! The following fields are missing information: ' + error.join(", "));
} else {
form.submit();
}
})
<form action="/action_page.php">
<label for="name">Name</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email</label>
<input type="text" id="email" name="email"><br><br>
<label for="comment">Comment</label>
<input type="text" id="comment" name="comment"><br><br>
<input type="submit" value="Submit">
</form>
Add the required attribute to your inputs and the novalidate attribute to the form (so we can use our own validation). Then, use form.checkValidity() to check whether all fields have been filled in.
document.querySelector('form').addEventListener("submit", function(e) {
if (!this.checkValidity()) {
document.querySelector('#error').style.display = 'block';
e.preventDefault();
}
})
#error {
display: none;
color: red;
}
<form action="/action_page.php" novalidate>
<label for="name">Name</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email</label>
<input type="text" id="email" name="email" required><br><br>
<label for="comment">Comment</label>
<input type="text" id="comment" name="comment" required><br><br>
<input type="submit" value="Submit">
</form>
<p id="error">Please say something! I want to hear from you!</p>

How to make popup only invoke when form is actually submitted javascript

I have the following form:
<form action="/signup" method="post" class="register-form">
<div>
<div class="form-element">
<label class="form-label" for="name">Name</label>
<input class="form-input-text" type="text" name="name" value="" required>
</div>
<div class="form-element">
<label class="form-label" for="email">E-Mail</label>
<input class="form-input-text" type="email" autocomplete="email" name="email" value="" required>
</div>
<button class="form-button" type="submit" name="submit">Register</button>
</div>
</form>
I built a little popup that says thanks for signing up that should come up after the user has entered his data. However at the moment I have the problem that it also comes up when the user clicks the register button without entering any data (meaning the request does not fire due to the required tags in the fields). How do I make the popup only come up when the form is actually submitted?
Jquery for the popup:
$(window).load(function() {
$(".form-button").click(function() {
$('.popup').show();
});
});
I think you might be looking for the .submit event.
Using your example
$('.register-form').submit(function(e){
e.preventDefault(); // Stop the form submitting
$('.popup').show(); // Show the popup
e.currentTarget.submit(); // Now submit it!
});
Simply define ids on your each input to validate if both fields have value in it or not. Do like this
<form action="/signup" method="post" class="register-form">
<div>
<div class="form-element">
<label class="form-label" for="name">Name</label>
<input class="form-input-text" type="text" name="name" value="" id="text1">
</div>
<div class="form-element">
<label class="form-label" for="email">E-Mail</label>
<input class="form-input-text" type="email" autocomplete="email" name="email" value="" id="text2">
</div>
<button class="form-button" type="submit" name="submit">Register</button>
</div>
</form>
$(window).load(function() {
$(".form-button").click(function() {
let input1 = $('#text1').val();
let input2 = $('#input2').val();
if(input1 && input2){
//make your http req and then after getting your response open your popup
$('.popup').show();
}
});
});

how to display a response message on html after post request in nodejs

i wanted to display a message in html page after submiting the data, wether it is correct or not on the same html page, till now i can only do is show the message on new page.
below is the node code
app.post('/login',(req,res)=>{
try{
console.log(req.body)
if(req.body.yourname!='mohit')
res.send('Content-Type' )
else
res.send('thankyou for submission')
}catch(error){
res.send()
}
})
app.listen(port,()=>{
console.log('server started to'+port);
})
Below is the html code
<div class="container">
<form id="contact" action="/login" method="post">
<h3>Contact Form</h3>
<fieldset>
<input name="yourName" placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input name="Email" placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input name="Phone" placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input name="site" placeholder="Your Web Site (optional)" type="url" tabindex="4">
</fieldset>
<fieldset>
<textarea name="Message" placeholder="Type your message here...." tabindex="5"></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit">Submit</button>
</fieldset>
</form>
help would be really appricated?

Categories