You get that error because in the JS you check for an ID, but in the HTML you have no id
tag supplied, only a name
tag.
I changed the name="..."
for every input-element to id="..."
.
But there were some other errors in your code as well. Below is a working code snippet with all those error fixed, and an explanation as to what I have changed:
JS, CSS, HTML:
$(window).on('load',function(){
$("#submitBtn").hide();
$("#logStat").hide();
$('#preCheckBtn').click(function(){
$("#logStat").fadeIn(200);
$("#progBar").progressbar();
$("#progBar").progressbar("value", 0);
$("#writeThis").html("Verifying name...");
if ($("#nameIn").val() == (null||"")) {
$("#writeThis").html("ERROR: Name is empty.");
setTimeout(function(){$("#logStat").fadeOut(200);},2000);
return;
}
$("#progBar").progressbar("value", 25);
$("#writeThis").html("Verifying ID...");
if ($("#idIn").val()==(null||"") || isNaN($("#idIn").val())) {
$("#writeThis").html("ERROR: ID is empty or has wrong format.");
setTimeout(function(){$("#logStat").fadeOut(200);},2000);
return;
}
$("#progBar").progressbar("value", 50);
$("#writeThis").html("Verifying phone number...");
if ($("#phoneIn").val()==(null||"") || isNaN($("#phoneIn").val())) {
$("#writeThis").html("ERROR: Phone Number is empty or has wrong format.");
setTimeout(function(){$("#logStat").fadeOut(200);},2000);
return;
}
$("#progBar").progressbar("value", 75);
$("#writeThis").html("Locking data...");
$("#nameIn").attr("disabled", true);
$("#idIn").attr("disabled", true);
$("#phoneIn").attr("disabled", true);
$("#submitBtn").show();
$("#progBar").progressbar("value", 100);
$("#writeThis").html("Done!");
setTimeout(function(){$("#logStat").fadeOut(200);},1000);
});
});
body{
font-family: sans-serif;
width: 1020px;
margin: 25px auto;
}
#logStat{
margin: auto;
text-align: center;
padding: 10px;
width: 60%;
border-radius: 5px;
background-color: #B3B3B3;
}
<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<body>
<form action="data/scripts/submit_form.php" method="post">
<input type="text" placeholder="Name" id="nameIn" required /><br />
<input type="text" placeholder="ID" id="idIn" required /><br />
<input type="text" placeholder="Phone number" id="phoneIn" maxlength="10" required /><br />
<input type="submit" value="Run PHP" id="submitBtn" />
</form>
<button id="preCheckBtn">Pre-check data</button>
<div id="logStat">
<div id="progBar"></div>
<p id="writeThis"></p>
</div>
</body>
(
fiddle: http://jsfiddle.net/sdbhu7yL/8/)
- In the second and third if-clause you only check the input-element itself, not it's value. I think you probably just forgot the
.value
, so I changed it to check the value.
- In those same if-clauses,
isNaN(checkData)
gives an error because checkData
is never declared, it's undefined. I changed it to isNaN($("#someID").val())
to check the value directly.
- In all your if-clauses, I changed
==null
into ==(null||"")
. Otherwise, if you click the pre-check-button while one or more of the input fields are still empty, they all get disabled anyway, and you can't fill in the empty fields anymore. (I'm not so sure if disabling them is such a good idea in the first place, because a user might make a mistake filling them in, and then he/she can't correct it anymore.)
- I put the CSS and JS in separate files. This is good practice: keep different kinds of code separated. (In the code snippet and jsfiddle they are just in separate sub-windows, but on your actual site you need to link to the CSS and JS files - just like you link to the jQuery '.js' and '.css' files.)
- I removed the
loaded()
function. The whole idea of jQuery's document.ready
and window.load
is to replace the normal JavaScript's window.onload
.
What you are doing is this: on page load you call a function loaded()
(from inside your HTML body), and inside that function you check for document.ready
. That is very redundant.
Plus, document.ready
is called before window.load
, so putting document.ready
inside the function that is called on load, has no use whatsoever. Actually, the first two .hide()
lines weren't even executed; the submitBtn
and logStat
remained visible, because you checked for document.ready
after window.load
, but document.ready
won't fire anymore because it already happened before window.load
.
(I recommend always using window.load
btw, unless there is a specific need for document.ready
.)
- I put
window.load
around the whole code, not just the first two .hide()
lines. This is how window.load
should preferably be used.
- I removed the
type="button"
from your pre-check-button in HTML. type="button"
is only used on input elements to classify it as a button (because there are more input types). If you already use a dedicated <button>
element, you don't need the type="button"
anymore.
- I gave the pre-check-button an ID and moved the
onclick
-binding to jQuery: $('#preCheckBtn').click(function(){ ...});
. It is cleaner to have all your JS related code inside the JS file. Read about it here.
- I translated all your regular JavaScript to jQuery (e.g.
document.getElementById("someID").innerHTML = ...;
to $('#someID').html(...);
.
- I added
$("#submitBtn").show();
at the end, I think you probably just forgot to add it (I'm assuming you want that button to show when all if-clauses are passed).
- I changed your
"ERROR: ID is NULL."
messages to a more user friendly text, because that NULL-error message also displays when you type in text (instead of numbers), which makes the message incorrect. (This is more of a design issue of course, feel free to hate me for it.)