We Keep Coding

Form cant progress any further and seems on getting stuck in function

when checking one of the language,degree or car options and fill out their corresponding inputs the form gets gets stuck on the Cage() function(it displays the message but doesnt progress further) and I dont know why any clues?I also find out by removing the upper functions (Cemail,Cuser,Checkpassword) one by one that they all get stuck and don't let the button get enabled.Is it because too many boolean functions are in the enableMe() if?
I am a student and still learning so, sorry for the headache in advance.
function Cuser() {
var Us = document.getElementById("User").value;
if (Us.length < 7 || Us.length > 15) {
l1.innerHTML = "The username must be at least 7 characters and up to 15";
return false;
}
else if (Us == "" || Us == " " || Us == " " || Us == " " || Us == null) {
l1.innerHTML = "The username must be filled with at least 7 characters";
return false;
}
else {
l1.innerHTML = "Username is Valid";
return true
}
}
function Cemail() {
var Em = document.getElementById("mail").value;
var patt = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (Em == "" || Em == " " || Em == " " || Em == " " || Em == null) {
l1.innerHTML = "Please fill out the email";
return false;
}
else if (!patt.test(Em)) {
l1.innerHTML = "Please fill out the email correctly";
return false;
}
else {
l1.innerHTML = "email is valid";
return true;
}
}
function CheckPassword() {
var p = document.getElementById("pass1").value;
var p1 = document.getElementById("pass2").value;
var pattent = /[A-Z]/;
if (p == "" || p == " " || p == " " || p == " " || p == null) {
l1.innerHTML = "The password must be filled with at least 6 characters";
return false;
}
else if (p.length < 6 || p1.length > 12) {
l1.innerHTML = "Password min chars:6 Max chars:12";
return false;
}
else if (!p.match(pattent)) {
l1.innerHTML = "please include at least one capital letter"
return false;
}
else if (p1 != p) {
l1.innerHTML = "Passwords must be identical.";
return false;
}
else {
l1.innerHTML = "password is valid";
return true;
}
}
function checkPasswordStrenght() {
var x = document.getElementById("pass1").value;
if (x.length == 6) {
document.getElementById("strenght").value = "0";
}
if (x.length == 7) {
document.getElementById("strenght").value = "15";
}
if (x.length == 8) {
document.getElementById("strenght").value = "30";
}
if (x.length == 9) {
document.getElementById("strenght").value = "45";
}
if (x.length == 10) {
document.getElementById("strenght").value = "65";
}
if (x.length == 11) {
document.getElementById("strenght").value = "80";
}
if (x.length == 12) {
document.getElementById("strenght").value = "100";
}
}
function Cage() {
var Ag = document.getElementById("Age").value;
if (isNaN(Ag) == true || Ag == " " || Ag == "" || Ag == " ") {
l1.innerHTML = "Age must be a number.";
return false;
}
else if (Ag < 18) {
l1.innerHTML = "You must be an Adult to use this form";
return false;
}
else {
l1.innerHTML = "Age is valid";
return true;
}
}
function DisableMe() {
document.getElementById("butt").disabled = true;
}
function myCar() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked == true) {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function myDegree() {
var checkBox = document.getElementById("myDeg");
var text = document.getElementById("Ddeg");
if (checkBox.checked == true) {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function myLangu() {
var checkBox = document.getElementById("myLang");
var text = document.getElementById("Llang");
if (checkBox.checked == true) {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function Checker() {
if (document.getElementById("GF").checked == false && document.getElementById("GM").checked == false) {
l1.innerHTML = "Please select your gender";
return false;
}
else {
return true;
}
}
function CChecker() {
var Cheddar = document.getElementById("myCheck").checked;
var Ham = document.getElementById("TypeOfCar").value;
if (Cheddar == true) {
if (Ham == "" || Ham == " " || Ham == " " || Ham == " " || Ham == null) {
l1.innerHTML = "Please Fill in the type of car you own";
}
}
else {
return true;
}
}
function LChecker() {
var Lettuce = document.getElementById("myLang").checked;
var Tomato = document.getElementById("TypeOfLang").value;
if (Lettuce == true) {
if (Tomato == "" || Tomato == " " || Tomato == " " || Tomato == " " || Tomato == null) {
l1.innerHTML = "Please Fill in at least one foreign language that you know";
}
}
else {
return true;
}
}
function DChecker() {
var Bread = document.getElementById("myDeg").checked;
var Mayo = document.getElementById("TypeOfDeg").value;
if (Bread == true) {
if (Mayo == "" || Mayo == " " || Mayo == " " || Mayo == " " || Mayo == null) {
l1.innerHTML = "Please Fill in at least one degree you own";
}
}
else {
return true;
}
}
function enableMe() {
if (Cuser() && Cemail && CheckPassword && Cage() && Checker() && CChecker() && LChecker() && DChecker()) {
document.getElementById("butt").disabled = false;
l1.innerHTML = "All credentials are valid";
return true;
}
else {
document.getElementById("butt").disabled = true;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta name="description" content="Form signup and php">
<meta name="keywords" content="Signup,html,php,react">
<meta name="author" content="Filippos Karagiannis">
<link href="StyleSheet.css" rel="stylesheet" />
<title>Exclusive Signup</title>
<script src="JavaScript.js"></script>
</head>
<body style="background-color:powderblue; text-align:center;" onload="DisableMe()">
<center>
<form action="react.html" display: inline - block;">
<fieldset class="center" style="width:50%; font-size:x-large; color:#383838;font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif">
<legend><b>Sign up form</b></legend>
<p>
<input type="text" id="User" name="Username" onchange="return Cuser()" placeholder="Type Username" />
</p>
<p>
<input type="email" id="mail" name="Email" onchange="return Cemail()" placeholder="e-Mail" />
</p>
<p>
<input type="password" id="pass1" name="Pass1"
placeholder="Password" onkeyup="checkPasswordStrenght(pass1), CheckPassword()" />
<input type="password" id="pass2" name="Pass2"
placeholder="Confirm Password" />
</p>
<div class="Strng">Password strenght:</div> <progress max="100" value="0" id="strenght" style="width:230px"></progress>
<p> <input type="text" id="Age" onchange="return Cage()" name="Age" placeholder="Type Age" /> </p>
<div class="Strng">
Male<input type="radio" id="GM" name="gender" value="male">
<input type="radio" id="GF" name="gender" value="female"> Female
</div>
<div class=" Strng">Do you own a car?<input type="checkbox" id="myCheck" onclick="myCar()"></div>
<div id="text" style="display:none"><input type="text" id="TypeOfCar" placeholder="Please inlcude the type of car" /></div>
<div class=" Strng">Do you know any other Languages<input type="checkbox" id="myLang" onclick="myLangu()"></div>
<div id="Llang" style="display:none"><input type="text" id="TypeOfLang" placeholder="Please inlcude the Languages" /></div>
<div class=" Strng">Do you own any postgraduate degrees<input type="checkbox" id="myDeg" onclick="myDegree()"></div>
<div id="Ddeg" style="display:none"><input type="text" id="TypeOfDeg" placeholder="Please inlcude the type of Degrees" /></div>
<p><div onmouseover="return enableMe()">Click Bellow to register your credentials</div></p>
<div onmouseover="return enableMe()">
<input class="button" id="butt" type="submit" value="Register">
</div>
<label class="Labbel" id="l1"></label>
</fieldset>
</form>
</center>
</body>
</html>

As well as some syntax errors Burham mentions in the comments.
Why the button won't enable is due to your CChecker(), LChecker() and DChecker() functions, you never return true if one is selected and a value is filled.
Example of where to add return (view comment, add to other functions in same place):
function CChecker() {
var Cheddar = document.getElementById("myCheck").checked;
var Ham = document.getElementById("TypeOfCar").value;
if (Cheddar == true) {
if (Ham == "" || Ham == " " || Ham == " " || Ham == " " || Ham == null) {
l1.innerHTML = "Please Fill in the type of car you own";
}
// else return true
else {
return true;
}
}
else {
return true;
}
}

jquery Image Puzzle

I am trying to make a puzzle using jQuery. I have followed this code
Create an image puzzle game using jQuery
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AnupPuzzle</title>
<script src="jquery-1.8.2.min.js"></script>
<style>
.main-container{background:#600; width:270px; height:270px; text-align:center;}
button{width:80px; height:80px; background:#CCC; float:left; margin:5px; color:#600; font-size:18px; }
button:hover{background:#9CF;}
span{width:100%; color:#900; font-family:"Comic Sans MS", cursive;}
</style>
</head>
<body>
<h3>Are you want to try your brain logics...</h3>
<div class="main-container">
<button alt="" name="1" value="1" id="1">5</button>
<button alt="" name="2" value="2" id="2">6</button>
<button alt="" name="3" value="3" id="3">8</button>
<button alt="" name="4" value="4" id="4">3</button>
<button alt="" name="5" value="5" id="5"></button>
<button alt="" name="6" value="6" id="6">7</button>
<button alt="" name="7" value="7" id="7">1</button>
<button alt="" name="8" value="8" id="8">2</button>
<button alt="" name="9" value="9" id="9">4</button>
</div>
<span>Anup</span>
</body>
</html>
<script>
$(document).ready(function(){
var upval, downval, leftval, rightval, txt, bVal;
$("button").click(function(){
txt = $(this).text();
bVal = $(this).val();
if(txt != ""){
if((bVal != 1) && (bVal != 2) &&(bVal != 3)){
upval = eval(eval(bVal)-eval(3));
var upTxt = $("#"+upval).text();
if(upTxt == ""){
$("#"+upval).text(txt);
$(this).text("");
}
}
if((bVal != 7) && (bVal != 8) &&(bVal != 9)){
downval = eval(eval(bVal)+ eval(3));
var downTxt = $("#"+downval).text();
if(downTxt == ""){
$("#"+downval).text(txt);
$(this).text("");
}
}
if((bVal != 1) && (bVal != 4) &&(bVal != 7)){
leftval = eval(eval(bVal)-eval(1));
var leftTxt = $("#"+leftval).text();
if(leftTxt == ""){
$("#"+leftval).text(txt);
$(this).text("");
}
}
if((bVal != 3) && (bVal != 6) &&(bVal != 9)){
rightval = eval(eval(bVal)+ eval(1));
var rightTxt = $("#"+rightval).text();
if(rightTxt == ""){
$("#"+rightval).text(txt);
$(this).text("");
}
}
var one = $("#1").text();
var two = $("#2").text();
var three = $("#3").text();
var four = $("#4").text();
var five = $("#5").text();
var six = $("#6").text();
var seven = $("#7").text();
var eight = $("#8").text();
var nine = $("#9").text();
if((one == "1")&&(two == "2")&&(three == "3")&&(four == "4")&&(five == "5")&&(six == "6")&&(seven == "7")&&(eight == "8")&&(nine == "")){
alert("Congratulations You Won The Game...");
$("button").attr("disabled", "disabled");
}
}
});
});
</script>
I am trying to make it so that instead of the numbers moving, the button background images do
If someone Could please help find a solution that would be greatly appreciated
https://jsfiddle.net/24jjwdxj/
this is what I have so far
However in this fiddle I am using background colors to demonstrate my
desired result.

The solution works as given. Here it is in a JSFiddle, where I've separated the external jQuery resource, the HTML, the CSS, and the JS. Below is the JavaScript portion:
(function() {
var upval, downval, leftval, rightval, txt, bVal;
$("button").click(function() {
txt = $(this).text();
bVal = $(this).val();
if (txt != "") {
if ((bVal != 1) && (bVal != 2) && (bVal != 3)) {
upval = eval(eval(bVal) - eval(3));
var upTxt = $("#" + upval).text();
if (upTxt == "") {
$("#" + upval).text(txt);
$(this).text("");
}
}
if ((bVal != 7) && (bVal != 8) && (bVal != 9)) {
downval = eval(eval(bVal) + eval(3));
var downTxt = $("#" + downval).text();
if (downTxt == "") {
$("#" + downval).text(txt);
$(this).text("");
}
}
if ((bVal != 1) && (bVal != 4) && (bVal != 7)) {
leftval = eval(eval(bVal) - eval(1));
var leftTxt = $("#" + leftval).text();
if (leftTxt == "") {
$("#" + leftval).text(txt);
$(this).text("");
}
}
if ((bVal != 3) && (bVal != 6) && (bVal != 9)) {
rightval = eval(eval(bVal) + eval(1));
var rightTxt = $("#" + rightval).text();
if (rightTxt == "") {
$("#" + rightval).text(txt);
$(this).text("");
}
}
var one = $("#1").text();
var two = $("#2").text();
var three = $("#3").text();
var four = $("#4").text();
var five = $("#5").text();
var six = $("#6").text();
var seven = $("#7").text();
var eight = $("#8").text();
var nine = $("#9").text();
if ((one == "1") && (two == "2") && (three == "3") && (four == "4") && (five == "5") && (six == "6") && (seven == "7") && (eight == "8") && (nine == "")) {
alert("Congratulations You Won The Game...");
$("button").attr("disabled", "disabled");
}
}
})
})();

Validate and display window alert

how do I validate to ensure a value for total or orderForm have been fill up if not it will display a window alert upon clicking on Submit button ?
It seems the below is not working at all .
Pure JS:
function va(){
var result = false;
var w = document.forms["orderForm"]["companyName"].value;
var x = document.forms["orderForm"]["forename"].value;
var y = document.forms["orderForm"]["surname"].value;
var z = document.forms["orderForm"]["total"].value;
if (x == null || x == "") && (y == null || y == "") && (w == null || w == ""){
window.alert('Name must be Filled out');
result = false;
// } else if (z = < 5){
// window.alert('Please Select A CD');
// return false;
// }else {
// return true;
}
return result;
}
HTML:
<section id="checkCost">
<h3>Total cost</h3>
Total <input type="text" name="total" id="total" size="10" readonly="readonly" />
</section>
<section id="placeOrder">
<h3>Place order</h3>
Your details
Customer Type: <select id="show" name="customerType" onchange="change(this)">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails" style="display:none">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>

try this:
if (x == null || x == "") {
window.alert('forename must be Filled out');
result = false;
} else if (y == null || y == "") {
window.alert('surname must be Filled out');
result = false;
} else if (w == null || w == "") {
window.alert('companyName must be Filled out');
result = false;
}
return result;

Try:
if ((x == null || x == "") || (y == null || y == "") || (w == null || w == ""))
EDIT:
Sure thing, original line:
if (x == null || x == "") && (y == null || y == "") && (w == null || w == "")
I did two things. Switch out the && for || and wrap the if condition in an inclusive set of parenthesis (which probably isn't required but I do it for neatness). The original if statement reads as "if condition and condition and condition" meaning all conditions have to return true (i.e. be blank) in order to continue. I believe each of these values are required to validate the form. My proposed if statement would read "if condition or condition or condition" letting the alert box be displayed if any value is empty.

Very strange javascript issue with booleans

Booleans will work before setting variables inside a function but not after? The variables are all taken from forms except "status".
Here is the function:
<script src="js/main.js"></script>
<script src="js/ajax.js"></script>
<script>
function signup(){
// if(1==1){ -----When I place this here, the alert comes up.
// alert("yes");
// }
var u = _("username").value;
var e = _("email").value;
var p1 = _("pass1").value;
var p2 = _("pass2").value;
var c = _("country").value;
var g = _("gender").value;
var a = _("age").value;
var o = _("occ").value;
var status = _("status");
// Nothing below here works
if(u == "" || e == "" || p1 == "" || p2 == "" || c == "" || g == "" || a == "" || o == ""){
status.innerHTML = "Fill out all of the form data";
alert("true");
} else if(p1 != p2){
status.innerHTML = "Your password fields do not match";
}
else if( _("terms").style.display == "none"){
status.innerHTML = "Please view the terms of use";
} else {
_("signupbtn").style.display = "none";
status.innerHTML = 'please wait ...';
var ajax = ajaxObj("POST", "signupfront.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
if(ajax.responseText != "signup_success"){
status.innerHTML = ajax.responseText;
_("signupbtn").style.display = "block";
} else {
window.scrollTo(0,0);
_("signupform").innerHTML = "OK "+u+", check your email inbox and junk mail box at <u>"+e+"</u> in a moment to complete the sign up process by activating your account. You will not be able to do anything on the site until you successfully activate your account.";
}
}
}
ajax.send("u="+u+"&e="+e+"&p="+p1+"&c="+c+"&g="+g+"&a="+a+"&o="+o);
}
}
This function is called by a button, and I want the function to return the messages alongside the button.
<button id="signupbtn" onclick="signup()">Create Account</button>
<span id="status"></span>
main.js contains the following:
function _(x){
return document.getElementById(x);
}
Any help with this would be greatly appreciated as I have been looking at it for hours and cannot figure it out.
Thanks in advance
Here is the html as requested:
<body>
<div id="pageMiddle">
<h3>Create Account</h3>
<form name="signupform" id="signupform" onsubmit="return false;">
<div>Username: </div>
<input id="username" type="text" onblur="checkusername()" onkeyup="restrict('username')" maxlength="16">
<span id="unamestatus"></span>
<div>Email Address:</div>
<input id="email" type="text" onfocus="emptyElement('status')" onkeyup="restrict('email')" maxlength="88">
<div>Create Password:</div>
<input id="pass1" type="password" onfocus="emptyElement('status')" maxlength="16">
<div>Confirm Password:</div>
<input id="pass2" type="password" onfocus="emptyElement('status')" maxlength="16">
<div>Age:</div>
<input id="age" type="text" onfocus="emptyElement('status')" maxlength="3">
<div>Occupation:</div>
<input id="occ" type="text" onfocus="emptyElement('status')" maxlength="88">
<div>Gender:</div>
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female
<div>Country:</div>
<select id="country" onfocus="emptyElement('status')">
//long list of countries here
</select>
<div>
<a href="#" onclick="return false" onmousedown="openTerms()">
View the Terms Of Use
</a>
</div>
<div id="terms" style="display:none;">
<h3>Our Terms Of Use</h3>
<p>v</p>
</div>
<br /><br />
<button id="signupbtn" onclick="signup()">Create Account</button>
<span id="status"></span>
</form>
</div>
</body>

if any of your input fields that you are referencing in the variable declaration do not exist your code will fail, because you are calling .value on an undefined field.
post your HTML and we can figure it out.

Have a look at the gender input
<div>Gender:</div>
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female
Here's your mistake
var g = _("gender").value;
The code breaks at the above line because you're trying to get the value of an element with id equals gender, but there's no element with id="gender" attribute.
You need to change the gender input to the following, where the radio buttons have the unique id (genderMale and genderFemale)
<div>Gender:</div>
<input type="radio" name="gender" id="genderMale" value="m">Male
<input type="radio" name="gender" id="genderFemale" value="f">Female
then use the following syntax to assign the value of the selected gender to g variable
var g = "";
if (document.getElementById("genderMale").checked) {
g = _("genderMale").value;
} else if (document.getElementById("genderFemale").checked) {
g = _("genderFemale").value;
}
Below is the modified part of the javascript
var u = _("username").value;
var e = _("email").value;
var p1 = _("pass1").value;
var p2 = _("pass2").value;
var c = _("country").value;
var a = _("age").value;
var o = _("occ").value;
var status = _("status");
var g = "";
if (document.getElementById("genderMale").checked) {
g = _("genderMale").value;
} else if (document.getElementById("genderFemale").checked) {
g = _("genderFemale").value;
}
if (u == "" || e == "" || p1 == "" || p2 == "" || c == "" || g == "" || a == ""
|| o == "") {
status.innerHTML = "Fill out all of the form data";
alert("true");
}
Demo: http://jsfiddle.net/zpeu4fq9/1/

Try using this
if(1===1){
alert("yes");
}
if(u === "" || e === "" || p1 === "" || p2 === "" || c === "" || g === "" || a === "" || o === ""){
status.innerHTML = "Fill out all of the form data";
alert("true");
} else if(p1 != p2){
status.innerHTML = "Your password fields do not match";
}
Hope this help

Javascript Validation for Radio Buttons in a form with multiple Validations

I'm having trouble finding a way to validate my Gender choice action buttons. I've made efforts at doing it by saying that the buttons can't be left null, but it still recognises one button as being null and won't let me continue. I've tried different variations of this like saying both male and female aren't selected then return false but it still won't work for me. I'm beginning to think that the method I'm going about it just may not be correct. The main issue you want to look at the below is the two radio buttons but I have included the rest of the code as context for the Javascript. The rest of the code works fine it is only the radio buttons than I'm struggling with. Thanks.
Html
<form action="ReviewPHP.php" name="review" onsubmit="return validateForm()">
<fieldset>
Title: <input type="text" name="Title">
</br>
Email Address: <input type="text" name="Email">
<br/>
Rating: <select name="Rating">
<option value="0"></option>
<option value="1">Excellent</option>
<option value="2">Good</option>
<option value="3">Bad</option>
<option value="4">Awful</option>
</select>
<br/>
<textarea name ="Comments" rows="8" colspan="40">Comments:
</textarea>
<br/>
<input type="radio" name="Gender" id="male" value="male">Male
<input type="radio" name="Gender" id="female" value="female">Female
</fieldset>
<fieldset>
<input class="button" type="submit" value="Submit"/>
</fieldset>
</form>
Javascript
function validateForm()
{ //Variable declarations for form inputs
var t = document.forms["review"]["Title"].value;
var e = document.forms["review"]["Email"].value;
var r = document.forms["review"]["Rating"].value;
var c = document.forms["review"]["Comments"].value;
var b = document.forms["review"]["Gender"].value;
var atsymb = e.indexOf("#");
var dotsymb = e.lastIndexOf(".");
if (t == null || t == "") {
document.getElementById("valAlert").innerHTML = "Title Missing";
return false;
}
else if (e == null || e == "" || atsymb < 1 || dotsymb < atsymb + 2 || dotsymb + 2 >= e.length)
{
document.getElementById("valAlert").innerHTML = "Email Missing";
return false;
}
else if (r == "0") {
document.getElementById("valAlert").innerHTML = "Please Rate the Movie, it's why you're here";
return false;
}
else if (c == null || c == "" || c.length < 10) {
document.getElementById("valAlert").innerHTML = "Reviews gotta be at least 10 characters!";
return false;
}
else if (b == null) {
document.getElementById("valAlert").innerHTML = "Please select Gender";
return false;
}
else {
alert("Review for " + t + " has been submitted, Good Job!");
return true;
}
}

You can use checked property to know if a option is checked.
document.getElementById('male').checked
The document is here:
http://www.w3schools.com/jsref/prop_radio_checked.asp
I guess what you would like to do is something like this:
var b = "";
if (document.getElementById('male').checked) {
b = document.getElementById('male').value;
}else if(document.getElementById('female').checked) {
b = document.getElementById('female').value;
}
if(b == "" | b == null ){
// alert
}
Hope this helps.

You have to check if b is undefined.
if (!b || b == null) {
I pared down the javascript and made a simple working demo:
http://jsfiddle.net/z7e7D/