onsubmit function does not invoke correctly using Node.js - javascript

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>

Related

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();
}
});
});

Validating TextBox on form submit

I have textbox and i want to replace the value % of textbox with - on form submit using jquery. But not getting how can i do it.
Here is my HTML
<form [formGroup]="form" id="form" (submit)="addDetails();form.reset()" class="form-style-9" ngNativeValidate>
<div class="form-group">
<div class="col-sm-4">
<label for="username">User Name</label></div>
<div class="col-sm-8"><input type="text" id="username" class="form-control"
placeholder="Please Enter User Name" formControlName="username" required="true">
</div>
<input type="hidden" id="usernameX" name="username" />
</div>
<input type="submit">
</form>
JS
var doReplace = function(string){
return string.replace(/%/g, "-");
}
var $usernameX = $('#usernameX');
$("#form").on("submit", function(e) {
$usernameX.val(doReplace($('#username').val()));
e.preventDefault();
});
You can do it like this. But you don't need jQuery for this:
<form [formGroup]="form" id="form" (submit)="onSubmit()" class="form-style-9" ngNativeValidate>
<div class="form-group">
<div class="col-sm-4">
<label for="username">User Name</label>
</div>
<div class="col-sm-8">
<input type="text" id="username" class="form-control" placeholder="Please Enter User Name" formControlName="username"
required="true">
</div>
<input type="hidden" id="usernameX" name="username" />
</div>
<input type="submit">
</form>
And add a onSubmit() to the component.ts:
public onSubmit(): void {
this.addDetails();
const value = this.form.get('username').value.replace(new RegExp('%'), '-');'
this.form.reset();
}
var myStr = 'replace_underscore_by_minus';
var newStr = myStr.replace(/_/g, "-");

How to prevent to reset or clearing the django form fields if any error occurs during submit?

I am using django registration-redux for user registration.
When i enter a same userid it shows error and the clears all the input fields of the form. how to prevent that error should occurs but input fields shouldn't get cleared.
<form method="POST" role="form" class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label class="col-sm-2 lab" for="id_username">Username *</label>
<div class="col-sm-10">
<input name="username" id='id_username' class='form-control' placeholder='Username' minlength="5" maxlength="15" type='text' required></div>
</div>
<div class="form-group">
<label class="col-sm-2 lab" for="id_email">E-Mail *</label>
<div class="col-sm-10" >
<input class='form-control' name="email" id='id_email' placeholder='user#mydomain.com' pattern="(^[a-zA-Z0-9_.+-]+#[a-zA-Z]+\.com$)|(^[a-zA-Z0-9_.+-]+#[a-zA-Z]+\.org$)|(^[a-zA-Z0-9_.+-]+#[a-zA-Z]+\.co\.in$)" maxlength="200" type='email' required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 lab">Password *</label>
<div class="col-sm-10">
<input class="form-control" name="password1" id="id_password1" placeholder="Password" minlength="8" maxlength="15" type="password" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 lab2">Password Confirmation *</label>
<div class="col-sm-10">
<input class="form-control" name="password2" id="id_password2" placeholder="Confirm Password" minlength="8" maxlength="15" type="password" required>
</div>
</div>
<button type="submit" value= "register">Register</button>
</form>
should i use java script or what should help me?
Ideally your form should retain the entries. From what I can infer, it seems that you might not in your template you are not making use of form passed by the view.
Here is an example on how you can update the template:
<form action="/action/" method="POST">
{% csrf_token %}
<div class="form">
<br />
{{ form.username}}
<br />
<input type="submit" name="submit">
</div>
</form>
Now in your action view you can easily pass the variables in your form. Something like :
def action(request):
if request.method == "POST":
form = CustomForm(request.POST)
if form.is_valid():
form.save()
else:
print("form.errors:", form.errors)
else:
form = CustomForm()
ResponseDict = {"username": username}
return render_to_response("UserName.html", ResponseDict,
context_instance = RequestContext(request))
For more reference - Displaying form using template
The main essence is in you going to your view and then making the necessary calls. Please do note that wherever you are rendering the html you are also passing the form values.
Hope this helps.

preventDefault doesn't work [duplicate]

This question already has answers here:
JS & jQuery can't detect html elements, and say's they are undefined
(4 answers)
Closed 7 years ago.
I have a problem with preventDefault function. It doesn't work. Here is my JS file:
(function() {
var app = {
initialize : function () {
this.setUpListeners();
},
setUpListeners: function () {
$('form').on('submit', app.submitForm);
},
submitForm: function(e){
e.preventDefault();
}
}
app.initialize();
}());
My HTML code has 2 confirm button. Second step is hidden and should be display, when first step will be done. But I can't at least add preventDefault for first step.
Here is my HTML:
<form id="login">
<!-- #first_step -->
<div id="first_step">
<h1>Registration Form</h1>
<fieldset id="inputs">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" placeholder="Create a username" required="">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Create a password" required="">
</div>
<div class="form-group">
<label for="cpassword">Password</label>
<input type="password" name="password" id="cpassword" class="form-control" placeholder="Confirm your password">
</div>
</fieldset>
<fieldset id="actions">
<div class="form-group">
<input type="submit" class="submit" name="submit_first" id="submit_first" value="Next">
</div>
</fieldset>
</div>
<!-- #second_step -->
<div id="second_step">
<h1>Registration Form</h1>
<fieldset id="inputs">
<label>Name</label>
<input type="text" name="name" id="firstname" class="form-control" placeholder="Enter your name" autofocus="" required="">
<label>Surname</label>
<input type="text" name="surname" id="lastname" class="form-control" placeholder="Enter your last name" required="">
<label>Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter your email" required="">
</fieldset>
<fieldset id="actions">
<input class="submit" type="submit" name="submit_second" id="submit_second" value="Next">
</fieldset>
</div>
</form>
I'm sorry. I'm just a beginner in js and will be very thankful if someone help me
$(function() {
var app = {
initialize : function () {
this.setUpListeners();
},
setUpListeners: function () {
$('form').on('submit', app.submitForm);
},
submitForm: function(e){
e.preventDefault();
}
}
app.initialize();
});

Checking passwords using Javascript in HTML

This is some code for a 'Signup' html page; i'm having trouble getting it to check if the two passwords match though. If they don't match, I need a pop up box to display "try again"; if they do math, the page can continue as normal (The sumbit button goes to the home page of my website).
Thanks!!! I've written a javascript function near the bottom....
<form class="form-horizontal" role="form" method="post" action="index.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Create a password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password1" name="password" placeholder="Your Password Here" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Confirm password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password2" name="password" placeholder="Confirm Password" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="signup" type="submit" value="Sign Up" class="btn btn-primary" onclick="checkPassword()">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
<script>
function checkPassword{
var1 = document.getElementById("password1");
var2 = document.getElementById("password2");
var n = var1.localeCompare(var2)
if(n == 0){
return true;
alert("Passwords do not match, please try again!");
}
return false;
}
</script>
</div>
</div>
</form>
Changed your code slightly:
<form class="form-horizontal" role="form" method="post" onsubmit="return checkPassword();" action="index.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Create a password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password1" name="password" placeholder="Your Password Here" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Confirm password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password2" name="password" placeholder="Confirm Password" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="signup" type="submit" value="Sign Up" class="btn btn-primary" >
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
</div>
</div>
</form>
<script>
function checkPassword(){
var1 = document.getElementById("password1");
var2 = document.getElementById("password2");
if(var1.value != var2.value){
alert("Passwords do not match, please try again!");
return false;
}
else{
return true;
}
}
</script>
Please note your form tag has onsubmit event, which calls your javascript function(not submit button) this way you stop form from being submited if passwords don't match. Also in your javascript function notice how I display alert before returning false and modified code to compare element values not elements. This code is tested and works.
delete onclick="checkPassword()" from submit tag
and in form tag add
onsubmit="return checkPassword()"
var1 = document.getElementById("password1").value;
var2 = document.getElementById("password2").value;
Also n===0 means, it matches and alert after return statement won't work.
You are comparing the elements, not the values. Get the values from the elements:
var1 = document.getElementById("password1").value;
var2 = document.getElementById("password2").value;
Return false if you want to stop the submission, and show the message before calling return. The localeCompare method returns a non-zero value if the strings are different:
if(n != 0){
alert("Passwords do not match, please try again!");
return false;
}
return true;
Instead of using the click event on the button, use the submit event on the form:
<form class="form-horizontal" role="form" method="post" action="index.php" onsubmit="return checkPassword();">
First switch lines with return and alert.
var pw1 = document.getElementById("password1").value;
var pw2 = document.getElementById("password2").value;
if( pw1 !== pw2 )
{
alert("Passwords do not match, please try again!");
return true;
}
I took the value out of the input elements and compare them with !==. That means, the type of both variables must be equal and the text must also be not equal.

Categories