Accessing variable in javascript after onpaste event [duplicate] - javascript

This question already has answers here:
Javascript OnPaste
(2 answers)
Closed 8 years ago.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Submit Form</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<script src="domready.js"></script>
<script>
DomReady.ready(function() {
(function () {
var Username =document.getElementById("Username").onpaste = function() {username()};
alert(Username.length);
var Password = document.getElementById("Password").onpaste = function() {validate()};
var DOB = document.getElementById("DOB").onpaste = function() {validate()};
var Email = document.getElementById("Email").onpaste = function() {validate()};
var Country = document.getElementById("Country").onpaste = function() {validate()};
function validate(){
setTimeout(username, 3000);
}
function username(Username){
/*if(Username.value <= 5){*/
alert(Username.length);
}
})();
});
</script>
</head>
<body>
<div id="wrp">
<form action="">
<div>
<label for="Username">Username</label>
<input type="text" id="Username">
</div>
<div>
<label for="Password">Password</label>
<input type="password" id="Password">
</div>
<div>
<label for="DOB">Date of birth</label>
<input type="text" id="DOB">
</div>
<div id="wrp-gender">
<label for="Gender" id="Gender">Gender</label>
<div id="wrp-radio-btn">
<label for="Male">Male</label>
<input type="radio">
<label for="Female">Female</label>
<input type="radio">
</div>
</div>
<div>
<label for="Email">Email</label>
<input type="text" id="Email">
</div>
<div>
<label for="Country">Country</label>
<input type="text" id="Country">
</div>
<div>
<input type="submit" value="Submit" id="Submit">
</div>
</form>
</div>
</body>
</html>
The alert(Username.length) statement does get executed & an alert box pops up with value of 0.
Why is the value of variable Username null or 0 when I enter a value in input box?


I saw something similar when I was using jQuery's paste event.
Its a strange one, I think the paste event fires before the text is actually pasted into the input.
I was able to solve it using setTimeout to push it to the end of the event queue
var Username = document.getElementById("Username");
Username.onpaste = username;
function username(){
setTimeout(function(){
alert(Username.value.length);
});
}
fiddle

Related

Using Javascript validation checks in a Django Project

I have to make a registration page in a project that uses Django as the backend framework.. In the registration page, I have to input the names, email, password and mobile... During registration, I need to validate email if its a valid format, check if the mobile number is of 10 digits and check if the password is a strong one.. I want to do it using javascript... I have written the code for the form and also the javascript function... But while running on the server I am unable to get the desired validation checks and alerts... Please help what should i do?
signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% load static %}
<link rel="stylesheet" href="{% static 'signup1.css'%}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<!--Javascript form validator-->
<link rel="stylesheet" href="{% static './register.js' %}">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="text-center">
<h1>Signup</h1>
<h6>Register yourself</h6>
</div>
<form style="text-align: top;" name="myForm" method="POST" action="" onsubmit="validate()" >
{% csrf_token %}
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"><b>First Name</b></label>
<input type="text" name="first_name"placeholder="First Name" class="form-control" id="name" required aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"><b>Last Name</b></label>
<input type="text" name="last_name"placeholder="Last Name" class="form-control" id="name" required aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"><b>Mobile Number</b></label>
<input type="tel" name="mobile" class="form-control" id="number" required aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"><b>Email address</b></label>
<input type="email" name="email" placeholder="Enter Email Id" class="form-control" id="email" required aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label"><b>Password</b></label>
<input type="password" name="password" placeholder="Enter Password" class="form-control" id="password" required>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label"><b>Your Choice</b></label><br>
<input type="radio" id="user" name="user_type" value="user">
<label for="html">User</label><br>
<input type="radio" id="admin" name="user_type" value="admin">
<label for="css">Admin</label><br>
</div>
<button type="submit" class="btn btn-primary" onclick="validate()">Submit</button>
</form>
<a style="color: aqua; margin-top: 10px;" href="http://localhost:8000/"><small>Already Registered? Click to login</small></a>
</div>
</div>
</div>
</div>
</body>
</html>
register.js (In static folder of the project)
function validate()
{
var abc=document.forms["myForm"]["first_name"].value;
if(abc=="")
{
alert("Please enter the first name");
return false;
}
var def=document.forms["myForm"]["last_name"].value;
if(def=="")
{
alert("Please enter the last name");
return false;
}
var email = document.forms["myForm"]["email"].value;
var re = "/^[a-z0-9+_.-]+#[a-z0-9.-]+$"
var x=re.test(email);
if(x)
{}
else
{
alert("Email id not in correct format");
return false;
}
var mobile = document.forms["myForm"]["mobile"].value;
var check="^(\+91[\-\s]?)?[0]?(91)?[789]\d{9}$"
var a=check.test(mobile);
if(a)
{}
else
{
alert("Invalid mobile number");
return false;
}
var pass=document.forms["myForm"]["password"].value;
var checks="^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[#$!%?&])[A-Za-z\d#$!%?&]{8,}$"
var res=checks.test(pass);
if(res)
{}
else
{
alert("Password must contain atleast 1 small, 1 capital, 1 numeric, 1 special character and must be atleast 8 characters long");
return false;
}
}

Your regular expressions are formatted as strings, not regular expressions.
For example...
// re is string
var re = "/^[a-z0-9+_.-]+#[a-z0-9.-]+$"
var x=re.test(email);
// re is regex
var re = /^[a-z0-9+_.-]+#[a-z0-9.-]+$/
var x=re.test(email);

How to make a button clickable only if the textfield is entered

I had a textfield to enter the emailId..Iam getting that value stored in $rootScope.emailId.
Now when I click the submit button,I must take to next page only if the emailId is entered or else it must give an alert saying that must be filled.
Currently it is in form and i am using required="true" and form.$valid but still its not working is there any other way to achieve this.
<form name="customerForm" class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-lg-4 col-lg-offset-1 control-label">Email address</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.eMail" placeholder="Enter customer email" type="email" required focus value="{{emailId}}">
</div>
</div>
</form>
--
<div class="col-lg-1">
<button type="submit" class="btn btn-primary right-button" ng-click="$ctrl.proceedToPaymentDetails()" ng-disabled="$ctrl.customerDetails">Next</button>
</div>
Currently the form and the button are not in the same html page..Is der any way to fix this.

change ng-disabled="customerForm.$invalid" or you can also check the value of email id inside your proceedToPaymentDetails() method for alert message.

Please gone throw this example code for your better understanding
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
Email:<br>
<input type="text" ng-model="user.emailID">
<br><br>
<button ng-click="proceedToPaymentDetails()">Next</button>
</form>
<p>form = {{user}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.user = {firstName:"", lastName:"",emailID:""};
$scope.proceedToPaymentDetails = function() {
alert($scope.user.emailID);
};
});
</script>
</body>
</html>

How to submit for after all the fields are filled in JavaScript

Basically I have a HTML form that contains a textbox and a submit button, what I want is when I pressed submit button it should check for the textbox that it have no error then proceed with submission.
Here is my button code:
<form id="thisform">
<div id="Registeration" class="Registeration">
<input type="text" id="textbox" class="textbox"
placeholder="My textbox" name="fBox" maxlength="30"/>
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="submitform" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" onclick="submit()"/>
</div></form>
function(){
alert('hello');
return false;
}

Here's a plain JS example where the form is only submitted if the text is at least 5 characters long.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="POST" action="result.html" class="da-form">
<input type="text" name="textbox" class="textbox">
<input type="submit" class="submit">
</form>
<script>
var formEl = document.querySelector('.da-form');
var submitBtn = document.querySelector('.da-form .submit');
var textEl = document.querySelector('.textbox');
submitBtn.addEventListener('click', function(event) {
event.preventDefault();
if (textEl.value.length >= 5) {
formEl.submit();
} else {
console.error('text should be at least 5 chars long');
}
console.log();
});
</script>
</body>
</html>

you can use AngularJS:
Angular allow you to get status about your form: $invalid/$valid
the following code will disable the button until the form will be valid:
<input type="button" value="Submit" ng-click="submit()" class="button" ng-disabled="myForm.$invalid">
please see the following example:
HTML:
<div ng-app>
<form ng-controller="FormController" name="myForm">
<div class="header padding-b--10">Form Area</div>
<div class="padding-b--10">
<input name="empId" placeholder="Employee ID" ng-model="data.empId"
style="padding:5px" required/>
<span ng-if="myForm.empId.$dirty && myForm.empId.$invalid" ng-bind="invalid" class="error"></span>
</div>
<div class="padding-b--10">
<input name="empEmail" type="email" placeholder="Email" ng-model="data.empEmail"
style="padding:5px" required/>
<span ng-if="myForm.empEmail.$dirty && myForm.empEmail.$invalid" ng-bind="invalid" class="error"></span>
</div>
<input type="button" value="Submit" ng-click="submit()" class="button" ng-disabled="myForm.$invalid">
</form>
Controller:
function FormController($scope){
$scope.invalid = "Invalid";
$scope.submit = function(){
console.log($scope.data);
}
};
Working Example: https://jsfiddle.net/pqz3hsac/22/

Checking a var is checked

In my case my checkboxes are not ticked by default so when the checkbox var html is ticked I would like it to show the alert.
Is there anyway that this can be done via a variable/use of #id or do I have to do something along the lines of ($('.checkbox_check').is(':checked'))?
I am just trying not to bloat my code if possible.
Code:
<!DOCTYPE html>
<html>
<head>
<title>E-mail Sig Generator</title>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
rel="stylesheet">
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var html = $('#showInline');
var file = $('#html');
if(html)
{
alert("muppets");
}
});
</script>
</head>
<body style="background:#000;">
<div style="width:980px; margin-left:auto; margin-right:auto;">
<table border="0" cellpadding="0" cellspacing="0" width="980px">
<tr>
<td style="text-align:center; background:#000;"></td>
</tr>
</table>
</div>
<div style=
"width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style=
"width:380px; padding:20px;">
<div class="form-group">
<label for="name">Name</label> <input class="form-control" id=
"name" type="text">
</div>
<div class="form-group">
<label for="position">Position</label> <input class=
"form-control" id="position" type="text">
</div>
<div class="form-group">
<label for="phone">Phone</label> <input class="form-control"
id="phone" type="tel">
</div>
<div class="form-group">
<label for="email">E-Mail</label> <input class="form-control"
id="email" type="email">
</div>
<div class="form-group">
<label for="address">Address</label> <input class=
"form-control" id="address" type="text">
</div>
<div class="form-group">
<label for="facebook">Facebook</label> <input class=
"form-control" id="facebook" type="text">
</div>
<div class="form-group">
<label for="website">Website</label> <input class=
"form-control" id="website" type="text">
</div>
<div class="form-group">
<div class="checkbox">
<label><input id="html" type="checkbox" value="">
<strong>Download as a HTML file</strong></label>
</div>
</div>
<div class="form-group">
<label><input id="showInline" type="checkbox" value="">
<strong>Show as HTML Code</strong></label>
</div>
</form>
<div id="inlineDIV" onchange="showInlineDIV()" style="display:none;">
<textarea id="showInlineHTML" readonly="readonly">
</textarea>
</div>
</div>
</body>
</html>

For that you have to attach event delegate to jquery .change() event
$(document).ready(function(){
var html = $('#showInline');
html.change(function() {
alert("muppets : "+ $(this).is(":checked"));
});
});
Try the FIDDLE.
Hope this helps..

You can use the var html directly as it is a valid jquery object. Use below code -
if(html.is(':checked'))
{
alert("muppets");
}

$(document).ready(function() {
var html = $('#showInline');
if (html.prop('checked')) {
alert("muppets");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style="width:380px; padding:20px;">
<div class="form-group">
<label>
<input id="showInline" type="checkbox" value="" checked>
<strong>Show as HTML Code</strong>
</label>
</div>
</form>
</div>

First I suggest you to change jquery and bootstrap library sequence on page.
Please follow below code.
<!DOCTYPE html>
<html>
<head>
<title>E-mail Sig Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
type="text/javascript"></script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
rel="stylesheet">
<script>
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var html = $('#showInline');
var file = $('#html');
$("input[type='checkbox']").on("click",function() {
alert("muppets");
});
});
</script>
</head>
<body style="background:#000;">
<div style="width:980px; margin-left:auto; margin-right:auto;">
<table border="0" cellpadding="0" cellspacing="0" width="980px">
<tr>
<td style="text-align:center; background:#000;"></td>
</tr>
</table>
</div>
<div style=
"width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style=
"width:380px; padding:20px;">
<div class="form-group">
<label for="name">Name</label> <input class="form-control" id=
"name" type="text">
</div>
<div class="form-group">
<label for="position">Position</label> <input class=
"form-control" id="position" type="text">
</div>
<div class="form-group">
<label for="phone">Phone</label> <input class="form-control"
id="phone" type="tel">
</div>
<div class="form-group">
<label for="email">E-Mail</label> <input class="form-control"
id="email" type="email">
</div>
<div class="form-group">
<label for="address">Address</label> <input class=
"form-control" id="address" type="text">
</div>
<div class="form-group">
<label for="facebook">Facebook</label> <input class=
"form-control" id="facebook" type="text">
</div>
<div class="form-group">
<label for="website">Website</label> <input class=
"form-control" id="website" type="text">
</div>
<div class="form-group">
<div class="checkbox">
<label><input id="html" type="checkbox" value="">
<strong>Download as a HTML file</strong></label>
</div>
</div>
<div class="form-group">
<label><input id="showInline" type="checkbox" value="">
<strong>Show as HTML Code</strong></label>
</div>
</form>
<div id="inlineDIV" onchange="showInlineDIV()" style="display:none;">
<textarea id="showInlineHTML" readonly="readonly">
</textarea>
</div>
</div>
</body>
</html>

$(document).on('click', '#showInline', function() {
if (html.get(0).checked) {
alert('Checked')
}
});
HERE

Try this
if(html.prop('checked')){
alert('Do something');
}

I want to make you notice that you may have an scope issue with the html variable, as it is declared inside the closure of the function called on document ready. So once the function is executed the variable "disappears". One solution might be declare the variables you want to initialize as global vars, meaning outside any function declaration.
var html; //declare as global
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var file = $('#html');
html = $('#showInline'); //initialize
if(html)
{
alert("muppets");
}
});
Although it is not a very elegant solution. You may think of using a class and initialize a instance on your document ready callback.

Adding HTML fields with Add user Button

I want to add fields in my HTML code via an "ADD USER button such that all the validations done in the First three fields Email Name & Phone number should be same in the new generated 3 fields.I have used Jquery validate plugin.
My HTML code is as follows
<!DOCTYPE html>
<!--<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>-->
<html>
<head>
<meta charset="utf-8">
<title>Manageuser_addUser</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--<script src="plugin/validation/dist/additional-methods.min.js"></script>-->
<script src="plugin/validation/dist/jquery.validate.min.js"></script>
<script src="plugin/utilities/validationutils.js"></script>
</head>
<body>
<div>
<h1>Manage Users!</h1>
<form id="formRegistration" method="post" action="">
<div>
<label for="email">Email Id*</label>
<input id="email" type="email" name="email" value="" placeholder="Enter your Email Id" />
</div>
<div>
<label for="name">Name*</label>
<input id="name" type="text" name="name" value="" placeholder="Enter your Name" />
</div>
I am trying to use this section of js and J query but its not working
<script type="text/javascript">
var i = 3;
function addField(tableid)
{
var row = document.createElement("tr");
var col1 = document.createElement("td");
var col2 = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("name","field" + i );
col1.appendChild(document.createTextNode("Field" + i));
col2.appendChild(input);
row.appendChild(col1);
row.appendChild(col2);
var table = document.getElementById(tableid);
table.appendChild(row);
i++;
}
<div>
<label for="phone">Phone</label>
<input id="phone" type="text" name="phone" value="" placeholder="+xx-xxxxxxxxxx" />
</div>
<div>
<input type="submit" name="add" value="Add User" id="publiclogin">
</div>
<div>
<input type="submit" name="add" value="Add more Fields" id="">
</div>
</form>
</div>
</body>

Your javascript code seems incomplete, there should be:
$("#formRegistration").validate();
within the script tags

Categories