I created a jQuery external file confirmPassword.js which contain keyboard event but when I'm trying to import in my html file my external js file won't work. But when I create jQuery script under html file it work. I'm just trying to save some line of codes.
<!doctype html>
<html>
<head>
</head>
<body>
<div id = "container">
<h1>Register</h1>
<hr>
<form method = "post" action = "../process/registerProcess.php" >
<fieldset>
<div class = "form-field">
<label for = "username">Username:</label>
<input type = "text" name = "username" required>
</div>
<div class="form-field">
<label for = "userPassword">Password:</label>
<input type="password" id="userPassword">
</div>
<div class="form-field">
<label for = "userConfirmPassword">Confirm Password:</label>
<input type="password" id="userConfirmPassword" onChange="checkPasswordMatch();">
</div>
<div class="registrationFormAlert" id="divCheckPasswordMatch"> </div>
<div class = "form-field">
<input type = "submit" name = "registerSubmit" value = "Register">
</div>
<div class = "form-field">
<input type = "reset" name = "registerReset" value = "Reset">
</div>
</fieldset>
</form>
</div>
<script type = "text/javascript" src = "jQuery Compressed/jquery.js"></script> //jQuery Compressed
<script type = "text/javascript" src = "register/confirmPassword.js"></script>
</body>
</html>
confirmPassword.js
function checkPasswordMatch()
{
var password = $("#userPassword").val(); //Grab the value of userPassword.
var confirmPassword = $("#userConfirmPassword").val();
if (password != confirmPassword)
{
$("#divCheckPasswordMatch").html("Passwords do not match!");
}
else
{
$("#divCheckPasswordMatch").html("Passwords match.");
}
}
$(document).ready(function ()
{
$("#userConfirmPassword").keyup(checkPasswordMatch);
});
If I understood you correctly, you are saying your confirmPassword.js file doesn't work without jQuery, right?
You are using jQuery in your confirmPassword.js file, so you have to have jQuery imported.
EDIT: Found the problem after private chat. The paths to JS files were incorrect.
Related
This is my code I've been working on for a couple of hours, I can't get it to compare the two passwords, it will submit the form even if the passwords don't match. It does not return any alert message either way. I've tried doing (pass1.value == pass2.value) too, it didn't work.
strong text alert ("Welcome");
function enableButton(){
if (document.getElementById("checkb").checked)
{
document.getElementById("btn").disabled = false;
}
else {
document.getElementById("btn").disabled = true;
}
}
function checkPassword() {
var pass1= document.getElementById("pw").value ;
var pass2= document.getElementById("pw2").value ;
if ( pass1 == pass2 )
{
alert ("Passwords match") ;
return true;
}
else {
alert ("Passwords do not match");
return false;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> Sign up </title>
<link rel = "stylesheet" href = "registration.css">
<script src = "registration.js"></script>
<noscript> Sorry, your browser does not support Javascript! </noscript>
</head>
<body>
<header style = " background-color : #f0e68c" >
<div class = "logo">
<img src = "logo.png" style = "width : 130px ; height : 130px">
</div>
<ul class = "menu">
Home </li>
<li class = "menu1"> About us </li>
<li class = "menu1"> Blog </li>
<li class = "menu1"> Book an Appointment </li>
<li class = "menu1"> Contact us </li>
</ul>
<br>
</header>
<div class = "heading">
<h1> Sign Up </h1>
<div>
<div class = "form" align = "center">
<form>
<fieldset>
<div class = "left">
<label for = "fname"> First Name </label><br>
<input type = "text" id = "fname" name = "fname" required>
</div>
<div class = "left">
<label for = "lname"> Last Name </label><br>
<input type = "text" id = "lname" name = "lname" required>
</div>
<div class = "clear"> </div>
<div class = "left">
<label for = "email"> E-mail </label><br>
<input type = "email" id = "email" name = "email" required>
</div>
<div class = "clear"> </div>
<div class = "left">
<label for = "pw"> Password </label><br>
<input type = "password" id = "pw" min = "6" max = "25" pattern = "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,25}" title="Password should contain Uppercase letters, lowercase letters, numbers, minimum 6 and maximum 25 characters " required>
</div>
<div class = "left">
<label for = "confpw"> Confirm password </label><br>
<input type = "password" id = "pw2" required>
</div>
<div class = "clear"> </div>
<input type = "checkbox" id = "checkb" name = "checkb" onclick = "enableButton()" required> I agree to the rules and privacy policy<br><br>
<input type = "checkbox"> I want to recieve updates by mail <br>
<input type = "checkbox"> Subscribe for monthly newsletter <br><br>
<div class = "clear"> </div>
<input type = "submit" id = "btn" value = "sign up">
</fieldset>
</form>
</div>
</html>
You are never calling checkPassword so the code never gets run, if you want to run that code when someone submits your form, you can use the following code.
document.querySelector('form').addEventListener('submit', function (e) {
//Prevent default behaviour
e.preventDefault();
//Check passwords
if (checkPassword()) {
this.submit();
}
});
You are calling the checkPassword function when the sign up button is clicked by user.
So you can't compare pass1 and pass2 when user information is submitted to the server.
In this case, you can solve to catch using JavaScript the event that handle by the sign up button, like this.
document.querySelector('form').addEventListener('submit', function (e) {
//Prevent default behaviour
e.preventDefault();
//Check passwords
if (checkPassword()) {
this.submit();
}
});
And you was wrong in HTML code.
<input type = "submit" id = "btn" value = "sign up">
If I fix your mistake, as allows.
<input type = "submit" id = "btn" value = "sign up">
// or
<button typpe="submit" id="btn"> sign up </button>
Good luck! see you again.
my page.php contains div id="container" with id="input" which default type is input type="text":
<div class="container">
<div class="row">
<div class="col-75">
<div id="container">
<input type="text" id="input" value="" name="password">
</div>
<input type="submit" value="OK" id="logBtn">
</div>
</div>
</div>
I want to change input type="text" to input type="password" for same input id="input" with receiving of value textToPassType(1):
function textToPassType(val1){
if (val1 == 1){
document.getElementById('input').type = 'password';
} else if (val1 == 0){
document.getElementById('input').type = 'text';
}
}
This way works only if I call this function included to page.php, but if use it in external document: <script type="text/javascript" src="myjs.js"></script> method does not works. So, I'm looking for some correct method to change input type dynamically and keep same id name from external myjs.js to my page.php
var is a keyword in JavaScript, used to declare a variable, you can't use it as a variable name, try naming your variable val or something:
function textToPassType(val) {
if (val == 1) {
document.getElementById('input').type = 'password';
} else if (val == 0) {
document.getElementById('input').type = 'text';
}
}
textToPassType(1);
<div class="container">
<div class="row">
<div class="col-75">
<div id="container">
<input type="text" id="input" value="" name="password">
</div>
<input type="submit" value="OK" id="logBtn">
</div>
</div>
</div>
The JavaScript function is not responding when called from the HTML body.
I keep getting the error that the function sayHi() is not defined.
<head>
<meta charset="UTF-8">
<title>innerHTML.html</title>
<script type = "text/javasctipt">
// javasctipt
function sayHi(){
txtName = document.getElementById("txtName");
divOutput = document.getElementById("divOutput");
var name = txtName.value;
divOutput.innerHTML = "<em>" + name + "</em>";
divOutput.innerHTML += " is very nice name.";
}
</script>
</head>
<body>
<h1>Inner HTML Demo</h1>
<form action = "">
<fieldset>
<label>Please type your name</label>
<input type = "text"
id = "txtname" />
<button type = "button"
onclick = "sayHi()" >
Click Me
</button>
</fieldset>
</form>
<div id = "divOutput">
Watch this space
</div>
</body>
</html>
Your <script> tag is wrong:
<script type = "text/javasctipt">
You really don't need the "type" or "language" attributes, so just use
<script>
If you feel compelled to use "type", use the correct type:
<script type="text/javascript">
If the "type" attribute isn't something the browser recognizes, the <script> content is completely and silently ignored.
Your element's id is 'txtname' but you want to get it like 'txtName'.
<head>
<meta charset="UTF-8">
<title>innerHTML.html</title>
<script>
function sayHi(){
txtName = document.getElementById("txtname");
divOutput = document.getElementById("divOutput");
var name = txtName.value;
divOutput.innerHTML = "<em>" + name + "</em>";
divOutput.innerHTML += " is very nice name.";
}
</script>
</head>
<body>
<h1>Inner HTML Demo</h1>
<form action = "">
<fieldset>
<label>Please type your name</label>
<input type = "text"
id = "txtname" />
<button type = "button"
onclick='sayHi()'>
Click Me
</button>
</fieldset>
</form>
<div id = "divOutput">
Watch this space
</div>
</body>
There is a typo in type attribute of script tag. Please change it to text/javascript from text/javasctipt. It will work.
I'm sorry if this is a repeat post, I haven't been able to locate anything covering my particular problem. So I'm using Javascript to validate a form to check for empty fields, and I'm using method="get" to push the data to another html page. On that page the data is interpretted from the query string and displayed. This is for a class and I keep getting "Uncaught TypeError: Cannot set property 'innerHTML' of null". I have provided all of my code below. I would really appreciate any help figuring out what is happening. Cheers.
The errors I am receiving..
<--Form Submit.htm-->
<!DOCTYPE html>
<html>
<head>
<title>jpratt_Lab04-Form Validation</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
// Function gets data submitted on first page and displays it on the second page
function getData() {
// Set formData to the query string passed in by the page URL
var formData = location.search;
// Extract the characters from formData where 0 is the first character
formData = formData.substring(1, formData.length);
// Replace all characters in formData as "+" => " " AND "=" => ": " AND "%40" => "#"
while (formData.indexOf("+") != -1 || formData.indexOf("=") != -1) {
formData = formData.replace("+", " ");
formData = formData.replace("=", ": ");
// Firefox and Chrome use %40 for the "#" char in email address
formData = formData.replace("%40", "#");
}
// Split the string formData into an array, "&" is the delimiter used to split string
var interestList = "Interests: ";
var formArray = formData.split("&");
// Write array values to id's on the second page
document.getElementById("user").innerHTML = formArray[0];
document.getElementById("email").innerHTML = formArray[1];
document.getElementById("password").innerHTML = formArray[2];
document.getElementById("passwordConfirm").innerHTML = formArray[3];
document.getElementById("specialOffers").innerHTML = formArray[4];
// Create a string “interestList” of reported interests
for (var i = 5; i < formArray.length; i++) {
interestList += formArray[i].substring(11) + ", ";
}
document.getElementById("interests").innerHTML = interestList;
}
</script>
</head>
<body>
<header>
<h1>Website Registration Form</h1>
</header>
<article>
<h2>Your Submitted Information:</h2>
<p id="user"><script>getData();</script></p>
<p id="email"><script>getData();</script></p>
<p id="password"><script>getData();</script></p>
<p id="passwordConfirm"><script>getData();</script></p>
<p id="specialOffers"><script>getData();</script></p>
<p id="interests"><script>getData();</script></p>
</article>
</body>
</html>
<--index.htm-->
<!DOCTYPE html>
<html>
<head>
<title>jpratt_Lab04-Form Validation</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function validate() {
var user = document.forms['form']['user'].value;
var email = document.forms['form']['email'].value;
var pass = document.forms['form']['pass'].value;
var confirmPass = document.forms['form']['confirmPass'].value;
var specialOffers = document.forms['form']['specialOffers'].value;
var errors = false;
var userError = document.getElementById('userWarning');
var emailError = document.getElementById('emailWarning');
var passError = document.getElementById('passWarning');
var soError = document.getElementById('soError');
try {
if (user == '' || user == 'Please enter your name..') throw userError.innerHTML = 'Your name is required.';
}
catch (err) {
var errors = true;
err;
}
try {
if (email == '' || email == 'Please enter your email..') throw emailError.innerHTML = 'Your email is required.';
}
catch (err) {
var errors = true;
err;
}
try {
if (pass == '' || confirmPass == '') throw passError.innerHTML = 'Password is required.';
if (pass != confirmPass) throw passError.innerHTML = 'Passwords do not match.';
}
catch (err) {
var errors = true;
err;
}
try {
if (specialOffers == '') throw soError.innerHTML = 'You must select yes or no.';
}
catch (err) {
var errors = true;
err;
}
// var chkd = document.getElementByID['form']['interests'].value;
// alert(chkd);
if (errors == true) {
return false;
}
else {
}
}
</script>
</head>
<body>
<header>
<h1>Website Registration Form</h1>
</header>
<article>
<form name="form" method="get" enctype="application/x-www-form-urlencoded" action="form-submit.htm" onsubmit="return validate()">
<h2>Personal Information:</h2>
<p>
<label name="user">Name:</label>
<input type="text" name="name" id="user" value="Please enter your name.." />
</p>
<p id="userWarning" class="alert"></p>
<p>
<label name="email">Email:</label>
<input type="text" name="email" id="email" value="Please enter your email.." />
</p>
<p id="emailWarning" class="alert"></p>
<h2>Security Information:</h2>
<p>
<label name="pass">Password:</label>
<input type="password" name="pass" id="pass" />
</p>
<p>
<label name="confirmPass">Confirm Password:</label>
<input type="password" name="confirmPass" id="confirmPass" />
</p>
<p id="passWarning" class="alert"></p>
<h2>Security Information:</h2>
<p class="alignleft">
<label name="specialOffers">E-mail Specail Offers:</label>
<input type="radio" name="specialOffers" id="specialOffers" value="true" />Yes
<input type="radio" name="specialOffers" id="specialOffers" value="false" />No
</p>
<p id="soError" class="alert"></p>
<p class="alignleft">
<label name="interests">Interests:</label><br>
<input type="checkbox" name="interests" id="entertaiment" value="entertainment" />Entertainment<br>
<input type="checkbox" name="interests" id="interests" value="business" />Business<br>
<input type="checkbox" name="interests" id="interests" value="music" />Music<br>
<input type="checkbox" name="interests" id="interests" value="shopping" />Shopping<br>
<input type="checkbox" name="interests" id="interests" value="travel" />Travel
</p>
<p id="interestError" class="alert"></p>
<p class="buttons">
<input type="submit" />
<input type="reset" value="Reset"/>
</p>
</form>
</article>
<footer></footer>
</body>
</html>
Your problem is down here:
<p id="user"><script>getData();</script></p>
<p id="email"><script>getData();</script></p>
<p id="password"><script>getData();</script></p>
<p id="passwordConfirm"><script>getData();</script></p>
<p id="specialOffers"><script>getData();</script></p>
<p id="interests"><script>getData();</script></p>
You are calling the function getData() for 6 times and you need to call it only once since in the function you have already this:
// Write array values to id's on the second page
document.getElementById("user").innerHTML = formArray[0];
document.getElementById("email").innerHTML = formArray[1];
document.getElementById("password").innerHTML = formArray[2];
document.getElementById("passwordConfirm").innerHTML = formArray[3];
document.getElementById("specialOffers").innerHTML = formArray[4];
The DOM parses from top-down so the browser reads your #user paragraph then it stops to launch the getData() function. Your function gets to execute document.getElementById("user") and all it's fine, then it goes next to execute document.getElementById("email") and it throws an error simply because your browser is still stuck at the #user paragraph and it didn't parsed the #email paragraph yet.
The solution to this is to remove <script>getData();</script> from all the tags and then place a single call at the end of your HTML document, just before the closing body tag.
In a nutshell this is one of the main reasons why libraries are generally loaded on the head tag while all the custom code, including DOM manipulation is usually loaded at last.
What I'm trying to do is to redirect people to a link depending of what they have summited on the form (the link is built using the values from the form fields)
This is the Form:
<form id="form">
<div class="formbox">
<div class="radio-toolbar">
<input type="radio" id="iconapp1" name="department" value="1250"/>
<label for="iconapp1">PP</label><br>
<input type="radio" id="iconapp2" name="department" value="944"/>
<label for="iconapp2">EP</label><br>
</div>
<div class="radio-bar1">
<input type="radio" id="enginemake1" name="enginemake" value="6"/>
<label for="enginemake1"> Chevrolet</label><br>
<input type="radio" id="enginemake2" name="enginemake" value="8"/>
<label for="enginemake2"> Chrysler</label><br>
</div>
<div class="bodyvertdivision1"></div>
<div class="radio-bar3">
<select name="powerrange">
<option id="powerrange1" value="28">100</option>
<option id="powerrange2" value="128">200</option>
<option id="powerrange3" value="228" selected>300</option>
</select>
</div>
<div class="bodyvertdivision1"></div>
<div class="radio-bar4">
<input type="radio" id="location1" name="location" value="store"/>
<label for="location1"> America (NT - ST)</label><br>
<input type="radio" id="location2" name="location" value="store.au"/>
<label for="location2"> Australia and Oceania</label><br>
</div>
<div class="radio-bar2">
<input onclick="goToPage();" type="button" class="buttonmyapp" value="Submit" />
</div>
</div>
</form>
The link I'm trying to build using the values selected will look like this:
http://{location}.mydomain.com/product-catalog.aspx?section=-{department}-{enginemake}-{powerrange}-
Each bracketed section needs to be replaced by the value of the select with the corresponding name.
First include the jquery library link or download js and link
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
function goToPage(){
var location = $('input[name=location]:checked').val();
var department = $('input[name=department]:checked').val();
var enginemake = $('input[name=enginemake]:checked').val();
var powerrange = $('select[name=powerrange]').val();
window.location.href = "http://"+location+".mydomain.com/product-catalog.aspx?section=-"+department+"-"+enginemake+"-"+powerrange+"-";
}
</script>
After the goToPage function on the submit button validates the response change the src attribute of the form should work fine.
So in jQuery it should look something like
var location = $('input[name=location]:checked', '.radio-bar4').val();
var dept = $('input[name=location]:checked', '.radio-bar4').val();
var engine = $('input[name=enginemake]:checked', '.radio-bar1').val();
var power = $('powerrange').val() ;
var domain = "http://"+ location+".mydomain.com/product-catalog.aspx?section=-"+dept+"-"+engine+"-"+power+"-";
$("#form").attr("action", domain);
you can try this
HTML
<select id="powerrange" name="powerrange">
JAVASCRIPT
function goToPage()
{
var location;
var department;
var enginemake;
var powerrange;
pName = document.getElementById('powerrange');
powerrange = pName.options[pName.selectedIndex].value;
var form = document.getElementById('form');
var ele = form.getElementsByTagName('input');
for(var i=0;i<ele.length;i++)
{
if(ele[i].getAttribute('type')=='checkbox')
{
if(ele[i].getAttribute('name')=='department')
{
if(ele[i].checked)
department = ele[i].value;
}
else if(ele[i].getAttribute('name')=='enginemake')
{
if(ele[i].checked)
enginemake = ele[i].value;
}
else if(ele[i].getAttribute('name')=='location')
{
if(ele[i].checked)
location = ele[i].value;
}
else;
}
}
var url = "http://"+ location+".mydomain.com/product-catalog.aspx?section=-"+department+"-"+enginemake+"-"+powerrange+"-";
form.setAttribute('action',url);
form.submit();
}