The problem is that I can't get value of my password fields - alert with pso1 returns null.
I don't see any error in this code so I'm asking for help.
<form class='container' onsubmit="return checkit()">
<h1> Javascript </h1>
Login <input type='text' id='log'><br>
Password <input type='password' id='pso1'><br>
Confirm passwordd <input type='password' id='pso2'><br>
<button>Register</button>
</form>
<script type="text/javascript">
var pso1=document.getElementById('pso1').value ;
var pso2=document.getElementById('pso2').value ;
alert(pso1);
function checkit(){
if(pso1=!pso2){
return false;
alert('Passwords are not the same.');
}
else{
return true;
alert('work');
}
}
</script>
</body>
In your code you are setting the values of pso1 and ps02 once right after the page load before their values are changed. You will want to update these values instead, declared them as local variables inside your function:
function checkit(){
var pso1=document.getElementById('pso1').value;
var pso2=document.getElementById('pso2').value;
if(pso1=!pso2){
return false;
alert('Passwords are not the same.');
}
else{
return true; alert('work');
}
}
You have only declared the function checkIt. You need to call that function to actually check it.
Related
My form is validating the two java functions script and if both are true it will continue the form submit. But when i submit it validates only first function validateFormROLLNO() not the second function. Also, when the first function fails it submits the form anyway. I want to submit the form only when the two functions are passed.
first function will check if the roll no = 12 characters.
second function checks if the name is not null.
<body>
<center>
<script type="text/javascript">
function validateFormROLLNO() {
var x = document.forms["myForm"]["id"].value;
if (x !=12) {
alert("ROLLNO must be 12 characters long!!!!");
return false;
}
document.forms["myForm"]["submit"].disabled = true;
document.forms["myForm"]["submit"].value="Wait..";
}
function validateFormNAME() {
var p = document.forms["myForm"]["student"].value;
if (p =='') {
alert("Name cannot be NULL!!!!");
return false;
}
document.forms["myForm"]["submit"].disabled = true;
document.forms["myForm"]["submit"].value="Wait..";
}
function validate(){
return validateFormROLLNO() && validateFormNAME();
}
</script>
<br> <FORM name="myForm" ACTION="insert.jsp" onsubmit="return validate()" METHOD="POST">
Please enter the Rollno and Name you want to INSERT:
<BR> <br>
<b>ISIN :<INPUT TYPE="TEXT" NAME="id"></b>
<BR><BR>
<b> SOURCE :<INPUT TYPE="TEXT" NAME="student"></b>
<br><BR>
<INPUT TYPE="SUBMIT" value="Submit">
</FORM>
</center>
</body>
</html>
There might be some javascript errors exists on the page, that don't let second function to execute. Please use browser's inspect element to explore it.
document.forms["myForm"]["id"].value you are are checking value of the textbox. Please document.forms["myForm"]["id"].value.length to validate it.
Here is the complete method.
function validateFormROLLNO() {
var x = document.forms["myForm"]["id"].value;
if (x.length <12) {
alert("ROLLNO must be 12 characters long!!!!");
return false;
}
else
return true;
document.forms["myForm"]["submit"].disabled = true;
document.forms["myForm"]["submit"].value="Wait..";
}
I don't know what im doing wrong, i have a form and using this function to check if the input is empty...what Iam trying to do is to highlight the field by adding a class to the text field...but if i add this line
name.addClass("empty");
to the function, the function dont work
function register()
{
if(document.myForma.userid.value == '')
{
name = $("#userid");
document.myForma.userid.focus();
$("#empty").html("This field is required")
name.addClass("empty");
return false;
}
}
Declare your name variable as local, or use a different name for it, - global window.name already exists and is not changeable.
console.log(name);
function register() {
if (document.myForma.userid.value == '') {
var name = $("#userid");
document.myForma.userid.focus();
$("#empty").html("This field is required");
name.addClass("empty");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForma" name="myForma" onsubmit="return register();">
<input id="userid" type="text" />
<div id="empty"></div>
<input type="submit" />
</form>
I have a form which I am trying to check color of the element before the page submits. I am trying to validate the form using a function called by the from using 'onsubmit='. If I add 'document.getElementById(name).style.backgroundColor' in the code below, when I submit the page it will go directly to the next page without asking if I want to go onto the next page or letting the user know the form has errors. It looks like the form is successfully calling both validate() and check_form() functions, but with the background color check it seems to not complete the validate() function. I've tested it without the 'style.backgroundColor' and it works fine (gives notice to user). What am I doing wrong?
Thanks
Simplified example of the code used:
<!DOCTYPE html>
<html>
<body>
<form class="bulk" onsubmit="return validate(this)" action="next_page.php" method="GET">
<input type="checkbox" id="checkbox" name ="checkbox">
<input type="text" id="sample" name="sample" value="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
var checkbox_name = 'checkbox';
var sample = 'sample';
sample = document.getElementById(sample);
//if checkbox is checked, make sure all the required fields are there
$("#"+checkbox_name).change(function(){
if(document.getElementById(checkbox_name).checked){
sample.style.backgroundColor = "red";
}
});
});
function validate(from) {
var valid = 'true';
if(check_form() == 'false'){
valid = 'false';
}
if(valid == 'false'){
alert('ERROR: Some inputs are invalid. Please check fields');
return false;
}
else{
return confirm('Are you sure you want to submit?');
}
}
function check_form(){
sample = document.getElementById(sample);
if(sample.style.backgroundColor == 'red'){
return 'false';
}
else{
return 'true';
}
}
</script>
<input type='submit' id="sub" name ="submit" value='Update Samples' />
</form>
test example of check_form function that does work:
function check_form(){
sample = document.getElementById(sample);
return 'false';
}
Edit: The way I have my form set up now is more accurately displayed as:
<!DOCTYPE html>
<html>
<body>
<?php $sample = 'test'; ?>
<form class="bulk" onsubmit="return validate(this)" action="next_page.php" method="GET">
<input type="checkbox" id="checkbox" name ="checkbox">
<input type="text" id="<?php echo $sample;?>" name="<?php echo $sample;?>" value="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
var checkbox_name = 'checkbox';
sample = <?php echo json_encode("$sample"); ?>;
sample = document.getElementById(sample);
//if checkbox is checked, make sure all the required fields are there
$("#"+checkbox_name).change(function(){
if(document.getElementById(checkbox_name).checked){
sample.style.backgroundColor = "red";
}
});
});
function validate(from) {
var valid = 'true';
if(check_form() == 'false'){
valid = 'false';
}
if(valid == 'false'){
alert('ERROR: Some inputs are invalid. Please check fields');
return false;
}
else{
return confirm('Are you sure you want to submit?');
}
}
function check_form(){
sample = document.getElementById(sample);
console.log(sample.style.backgroundColor)
if (sample.style.backgroundColor == 'red') {
return 'false';
} else {
return 'true';
}
}
</script>
<input type='submit' id="sub" name ="submit" value='Update Samples' />
</form>
Where the samples are brought in from another page to dynamically create the form.
sample is a local variable in the dom ready handler which is not accessible in the check form method, but since sample is an id of an element that will be available as a window property(global variable), so you will be getting an error like Uncaught TypeError: Cannot read property 'style' of null.
Instead pass the id as a string literal in the check_form method like
function check_form() {
var sample = document.getElementById('sample');
console.log(sample.style.backgroundColor)
if (sample.style.backgroundColor == 'red') {
return 'false';
} else {
return 'true';
}
}
Demo: Fiddle
<script>
function KeepCount() {
var x=0;
var count=0;
var x;
for(x=0; x<document.QuestionGenerate.elements["questions"].length; x++){
if(document.QuestionGenerate.elements["questions"][x].checked==true || document.QuestionGenerate.elements["option"][x].checked==true || document.QuestionGenerate.elements["Description"][x].checked==true || document.QuestionGenerate.elements["fillups"][x].checked==true){
count= count+1;
document.getElementsByName("t1")[0].value=count;
}
else
{
document.getElementsByName("t1")[0].value=count;
//var vn=$('#t1').val();
// alert(vn);
//alert(vn);
//alert("value is"+count);
}
}
// var cc = document.getElementsByName("t1")[0].value;
var vn=$('#t1').val();
alert(vn);
if(vn==0){
alert("You must choose at least 1");
return false;
}
}
</script>
<form action="SelectedQuestions.jsp" method="post" name="QuestionGenerate">
<input type="text" name="t1" id="t1" value="">
<input type="submit" id="fi" name="s" value="Finish" onclick="return KeepCount();">
</form>
I use the above code for checking how many check box are checked in my form my form having many check box. and if no check box are selected means it shows some message and than submit the form but for loop is working good and textbox get the value after the for loop the bellow code doesn't work even alert() is not working
**
var vn=$('#t1').val();
alert(vn);
if(vn==0){
alert("You must choose at least 1");
return false;
}
This code is not working why?
**
I change my KeepCount() function code shown in bellow that solve my problem
function KeepCount()
{
var check=$("input:checkbox:checked").length;
alert(check);
if(check==0)
{
alert("You must choose at least 1");
}
return false;
}
The bug is : document.QuestionGenerate.elements["questions"] it is undefined that's why the code is not even going inside for loop use instead :
document.QuestionGenerate.elements.length
I am new in JS and I am trying to do the simplest validation here and I cannot get it to work :/ basically when I press Submit I want either ERROR text in the div below the form or an echo text from the php file. Whats wrong with it? I really dnt know what I am doing wrong please help
<form name="myform" id="myform" method="post" action="echo.php">
<label for="username">User Name:</label><br />
<input type="text" id="username" name="username" /><br />
<label for="password">Password</label><br />
<input type="text" name="password" /><br />
<input type="submit" id="submit" value="Send">
</form>
<div id="errorMessages"></div>
And JS code:
window.onload = function(){
validateForm();
}
function validateForm(){
document.getElementById("myform").onsubmit = function(){
if (document.getElementById("username") == ""){
document.getElementById("errorMessages").innerHTML = "ERROR";
return false;
}
else return true;
};
}
document.getElementById("username") is a DOM element.
As long as the element exists, it will never fuzzily equal "".
You probably want .value, which returns the value of the textbox.
if (document.getElementById("username").value){
document.getElementById("errorMessages").innerHTML = "ERROR";
return false;
}
else {
return true;
}
Pay attention that document.getElementById returns the instance of the DOM element found on the page. So use the .value property. Also you do not really need to compare strings with empty string in JavaScript so get rid of == "".
This is the correct js:
window.onload = function(){
validateForm();
}
function validateForm(){
document.getElementById("myform").onsubmit = function(){
if (document.getElementById("username").value == ""){
document.getElementById("errorMessages").innerHTML = "ERROR";
return false;
}
else return true;
};
}
there was a ".value" missing after document.getElementById("username")