I've been writing a code generator where I can fill variables in a form, press generate and call a code into a text field.Have done this before, but for some reason I can't seem to get it to work this time. I am going nuts!
In this example, i've been trying to call the value of the first form field "issue"
Here is a link to an online page and here is the code I used in the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Generate Newsletter</title>
<style type="text/css">
#image {
background-color:#666;
box-shadow: 2px 2px 10px #888888;
display:block;
padding-top:1px;
padding-bottom:10px;
padding-left:5px;
padding-right:5px;
color:#FFF;
}
</style>
<script language="javascript" type="text/javascript">
function generateCode(form){
issue = document.inputForm.issue.value;
Header = document.inputForm.Header.value;
SubHeader = document.inputForm.SubHeader.value;
Content = document.inputForm.Content.value;
ArticleImage = document.inputForm.ArticleImage.value;
ArticleImageLink = document.inputForm.ArticleImageLink.value;
DidyouknowConent = document.inputForm.DidyouknowConent.value;
DidyouknowImage = document.inputForm.DidyouknowImage.value;
DidyouknowImageLink = document.inputForm.DidyouknowImageLink.value;
Courtesy = document.inputForm.Courtesy.value;
CourtesyLink = document.inputForm.CourtesyLink.value;
document.inputForm.source.value = issue;
return issue;
}
</script>
</head>
<body>
<form name="inputForm" id="inputForm">
<div id="EditBox" style="width:600px; height:650px; padding:10px; background-color:#CCC; border:2px; border-bottom-color:#666; box-shadow: 2px 2px 10px #888888;"><!--- INPUT FIELD -->
<div id="LeftEdit" style="float:left;"><!--- LEFT EDIT SIDE-->
<p>Issue #
<input name="issue" type="input" size="10" value="">
</p>
<p>Article Header<br />
<input name="Header" type="input" size="45">
</p>
<p>Sub Header<br />
<textarea name="SubHeader" cols="35" rows="3"></textarea>
</p>
<p>Content<br />
<textarea name="Content" cols="35" rows="25"></textarea>
</p>
</div>
<div id="RightEdit" style="float:right; margin-top:50px;"><!--- RIGHT EDIT SIDE-->
<div id="image">
<h4> Article Image </h4>
<p>source URL<br />
<input name="ArticleImage" type="input" size="35" onClick="this.focus();this.select()">
</p>
<p>Image Link<br />
<input name="ArticleImageLink" type="input" size="35" onClick="this.focus();this.select()">
</p>
</div>
<p>Did You Know Conent<br />
<textarea name="DidyouknowContent" cols="28" rows="5"></textarea>
</p>
<div id="image">
<h4> Did You know Image </h4>
<p>source URL<br />
<input name="DidyouknowImage" type="input" size="35" onClick="this.focus();this.select()">
</p>
<p>Image Link<br />
<input name="DidyouknowImageLink" type="input" size="35" onClick="this.focus();this.select()">
</p>
</div>
<p>Image courtesy of <input name="Courtesy" type="input" size="19"> <br />
Link to <input name="CourtesyLink" type="input" size="30" onClick="this.focus();this.select()"> <br />
</p>
</div>
</div>
<div style="clear:both;">
<input type="button" value="Generate Code!" onClick="javascript:generateCode();">
<br>
<textarea name="source" rows="7" cols="40" onClick="this.focus();this.select()" style="margin-top: 1.2px; margin-bottom: 1.2px; height: 200px; margin-left: 1.2px; margin-right: 1.2px; width: 500px; "></textarea>
</div>
</form>
</body>
</html>
Here the spelling is wrong
DidyouknowContent
DidyouknowConent = document.inputForm.DidyouknowConent.value; // DidyouknowConent
<textarea name="DidyouknowContent" cols="28" rows="5"></textarea> //DidyouknowContent
i try'ed your code in firebug it shows like this
TypeError: document.inputForm.DidyouknowConent is undefined
check it out this..
or you can try inseted of using
<input type="button">
try this
<input type="submit">
Related
I wrote a simple sign up webpage, and want to confirm password and check email address format, and show a check or cross sign after the input elements in the same line.
Before I added Bootstrap to my html file, the check or cross sign appear after the input elements in the same line. But after I added Bootstrap to my html file (especially after adding class="form-control"), the check or cross signs appear in the next line instead.
I wonder how to solve my problem? Thanks.
Here is my html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registration</title>
<style>
html, body{
height: 100%;
width: 100%;
/* border: 1px solid black; */
background: linear-gradient(to top, #f2f6fb, #b3cae3);
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/register.js" defer></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-offset-5">
<form class="form-horizontal" action="RegisterProcess" method="post">
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span width="5" name="passwordResult" id="passwordResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="passwordConfirm" id="passwordConfirm" placeholder="Confirm Password" style="border-color: grey; background-color\
: white">
<span width="5" name="passwordConfirmResult" id="passwordConfirmResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" style="border-color: grey; background-color: white">
<span width="5" name="emailResult" id="emailResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-3 col-lg-5">
<input type="submit" id="register" name="register" value="Sign Up">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Here is my javascript
function arePasswordsSame() {
input = this; // document.getElementById("passwordConfirm");
if (input.value != document.getElementById("password").value) {
input.setCustomValidity("Password Must be Matching.");
document.getElementById("passwordConfirmResult").innerHTML = "×";
} else {
input.setCustomValidity("");
document.getElementById("passwordConfirmResult").innerHTML = "✔";
}
}
document.getElementById("passwordConfirm").addEventListener("change",arePasswordsSame);
function validateEmail(){
input = this; // document.getElementById("email");
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(! input.value.match(mailformat)){
input.setCustomValidity("Email is invalid.");
document.getElementById("emailResult").innerHTML = "×";
}else{
input.setCustomValidity("");
document.getElementById("emailResult").innerHTML = "✔";
}
}
document.getElementById("email").addEventListener("change",validateEmail);
You can use the built in input-group-addon that ships with bootstrap
<div class="input-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span width="5" class="input-group-addon" name="passwordResult" id="passwordResult"></span>
</div>
</div>
https://getbootstrap.com/docs/4.0/components/input-group/
EDIT
This should be the markup;
<div class="form-group">
<div class="col-lg-5">
<div class="input-group">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span class="input-group-addon" name="passwordResult" id="passwordResult"> </span>
</div>
</div>
</div>
In Bootstrap, the form-control class causes the inputs to be display:block; at 100% width. You will have to override the default styling to prevent this(note that you can remove the !important rule as long as you add this CSS after Bootstrap is loaded):
function arePasswordsSame() {
input = this; // document.getElementById("passwordConfirm");
if (input.value != document.getElementById("password").value) {
input.setCustomValidity("Password Must be Matching.");
document.getElementById("passwordConfirmResult").innerHTML = "×";
} else {
input.setCustomValidity("");
document.getElementById("passwordConfirmResult").innerHTML = "✔";
}
}
document.getElementById("passwordConfirm").addEventListener("change",arePasswordsSame);
function validateEmail(){
input = this; // document.getElementById("email");
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(! input.value.match(mailformat)){
input.setCustomValidity("Email is invalid.");
document.getElementById("emailResult").innerHTML = "×";
}else{
input.setCustomValidity("");
document.getElementById("emailResult").innerHTML = "✔";
}
}
document.getElementById("email").addEventListener("change",validateEmail);
.form-control {
display:inline-block!important;
width:95%!important;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registration</title>
<style>
html, body{
height: 100%;
width: 100%;
/* border: 1px solid black; */
background: linear-gradient(to top, #f2f6fb, #b3cae3);
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/register.js" defer></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-offset-5">
<form class="form-horizontal" action="RegisterProcess" method="post">
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
<span width="5" name="passwordResult" id="passwordResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="password" class="form-control" name="passwordConfirm" id="passwordConfirm" placeholder="Confirm Password" style="border-color: grey; background-color\
: white">
<span width="5" name="passwordConfirmResult" id="passwordConfirmResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-5">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" style="border-color: grey; background-color: white">
<span width="5" name="emailResult" id="emailResult"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-3 col-lg-5">
<input type="submit" id="register" name="register" value="Sign Up">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Here's my website: http://library.bennington.edu. We use domtabs to organize our search boxes. We're switching cataloging software, so I'm trying to replace the catalog search box with a new search box from Ebsco Discovery Services (EDS). EDS provides their own code, so I didn't have to write anything, should just be cut and paste. But when I drop the new code in, nothing appears at all, just a total blank space. If I place the code BELOW the domtabs box, it works fine. It just blanks when placed within the domtabs box, as if there's some conflict. Here's the relevant DomTab code section:
<div class="domtab">
<ul class="domtabs">
<li><a style="border-top-left-radius:9px" href="#catalog">Catalog</a></li>
<li>Journals</li>
<li>Databases</li>
<li>Reserves</li>
<li>Reference</li>
<li><a style="border-top-right-radius:9px" href="#archive">Archive</a></li>
</ul>
<div>
<h2><a name="#catalog" id="catalog"></a></h2>
<table width="425px">
<tr>
<td valign="top" width="70%">
<!--Insert new code here-->
<!--Code Ends here-->
<span>Search the library's holdings for books, ebooks, movies, music recordings, and more.</span>
<form action="http://library.bennington.edu/search/Y" method="get" style="display:block; padding: 2px 0px; margin: 0;">
<input style="border-radius:3px" type="text" name="SEARCH" size="35" value="" />
<input type="hidden" name="SORT" value="A" />
<script language="javascript">
function iiiDoSubmit_1() {
var name = "iiiFormHandle_1";
if (document.getElementById)
obj = document.getElementById(name);
else if (document.all)
obj = document.all[name];
else if (document.layers)
obj = document.layers[name];
obj.form.submit();
}
</script>
<input type="hidden" id="iiiFormHandle_1"/>
<a href=# onclick="iiiDoSubmit_1();">
<input style="border-radius:3px; width:50px; margin-top:3px; padding:2px; font-size:11px" value="Search" type="Submit" />
</a>
</form>
</td>
<td valign="top" align="right">
<span class="roundedContentInfo">
<span style="font-size:130%; border-bottom:1px solid #000; text-align:left;"><b>Other Searches</b></span>
<span>Advanced </span>
<span>Title </span>
<span>Author </span>
<span>Author & Title </span>
</span>
</td>
</tr>
</table>
</div>
And here's the code that should be dropped in:
<script src="http://support.ebscohost.com/eit/scripts/ebscohostsearch.js" type="text/javascript"></script>
<style type="text/css">
.choose-db-list{ list-style-type:none;padding:0;margin:10px 0 0 0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt;width:340px; }
.choose-db-check{ width:20px;float:left;padding-left:5px;padding-top:5px; }
.choose-db-detail{ margin-left:30px;border-left:solid 1px #E7E7E7;padding:5px 11px 7px 11px;line-height:1.4em; }
.summary { background-color:#1D5DA7;color:#FFFFFF;border:solid 1px #1D5DA7; }
.one { background-color: #FFFFFF;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.two { background-color: #F5F5F5;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.selected { background-color: #E0EFF7;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
#ebscohostCustomSearchBox #disciplineBlock { width:auto; }
#ebscohostCustomSearchBox .limiter { float:left;margin:0;padding:0;width:50%; }
#ebscohostsearchtext { width: 144px; }
#ebscohostsearchtext.edspub { width: 245px; }
.ebscohost-search-button.edspub {
border: 1px solid #156619;
padding: 5px 10px !important;
border-radius: 3px;
color: #fff;
font-weight: bold;
background-color: #156619;
}
.ebscohost-title.edspub {
color: #1c7020;
font-weight: bold;
}
</style>
<form id="ebscohostCustomSearchBox" action="" onsubmit="return ebscoHostSearchGo(this);" method="post" style="width:340px; overflow:auto;">
<input id="ebscohostwindow" name="ebscohostwindow" type="hidden" value="1" />
<input id="ebscohosturl" name="ebscohosturl" type="hidden" value="http://0-search.ebscohost.com.library.bennington.edu/login.aspx?direct=true&site=eds-live&scope=site&type=0&mode=bool&lang=en&authtype=cookie,ip" />
<input id="ebscohostsearchsrc" name="ebscohostsearchsrc" type="hidden" value="db" />
<input id="ebscohostsearchmode" name="ebscohostsearchmode" type="hidden" value="+" />
<input id="ebscohostkeywords" name="ebscohostkeywords" type="hidden" value="" />
<div style="background-image:url('http://support.ebscohost.com/images/logos/eds100.gif'); background-repeat:no-repeat; height:50px; width:340px; font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt; color:#353535;">
<div style="padding-top:5px;padding-left:115px;">
<span class="ebscohost-title " style="font-weight:bold;">Research databases</span>
<div>
<input id="ebscohostsearchtext" class="" name="ebscohostsearchtext" type="text" size="23" style="font-size:9pt;padding-left:5px;margin-left:0px;" />
<input type="submit" value="Search" class="ebscohost-search-button " style="font-size:9pt;padding-left:5px;" />
<div id="guidedFieldSelectors">
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_0" value="" checked="checked" />
<label class="label" for="guidedField_0"> Keyword</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_1" value="TI" />
<label class="label" for="guidedField_1"> Title</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_2" value="AU" />
<label class="label" for="guidedField_2"> Author</label>
</div>
</div>
</div>
</div>
<div id="limiterblock" style="margin-left:-px; overflow: auto; ">
<div id="limitertitle" style="font-weight:bold;padding-top:25px;padding-bottom:5px;">Limit Your Results</div>
<div class="limiter" >
<input type="checkbox" id="chkFullText" name="chkFullText" checked="checked" />
<label for="chkFullText">Full Text</label>
</div>
<div class="limiter" >
<input type="checkbox" id="chkLibraryCollection" name="chkLibraryCollection" />
<label for="chkLibraryCollection">Available in Library Collection</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkPeerReviewed" name="chkPeerReviewed" />
<label for="chkPeerReviewed">Peer Reviewed</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkCatalogOnly" name="chkCatalogOnly" />
<label for="chkCatalogOnly">Catalog Only</label>
</div>
</div>
</form>
I've moved the javascript call to the top of the page, and moved the CSS to my CSS page to thin out the code, but still just getting the domtab box with normal background color as if nothing is there. :-/
I am developing a form for the 5 main browsers and want to know a little more about CSS vendor prefixes. The form looks different in firefox, i would usually move the div with top and left CSS but just want to tweak firefox.
From what i have read -moz-margin-start: 10em; seems to be a way of moving the div but doesn't work. How do I move the div in only firefox using css?
I have a list of prefixes here http://peter.sh/experiments/vendor-prefixed-css-property-overview/ and use https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-margin-start as well.
p.s. i read that using Grunt stops the need for using CSS Vendor prefixes, is it worth setting up?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="blueprint/blueprint/screen.css" />
<link rel="stylesheet" type="text/css" href="blueprint/blueprint/src/typography.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--<link rel="stylesheet" type="text/css" href="blueprint/blueprint/ie.css" />-->
<!--[if IE]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css"
media="screen, projection">
<![endif]-->
</head>
<body>
<div class="container showgrid">
<h2><center>Research Request Form</center></h2>
<div>
<input type="text" class="span-4" id="listcode">
</div>
<div>
<input type="text" class="span-4" id="sourceCode">
</div>
<div>
<input type="text" class="span-7" id="division">
</div>
<div class="span-24" id="wrap2">
<input type="text" class="span-23" id="projectName">
</div>
<div class="span-4">
<div class="span-4" id="interestCodes">
<p>
<input class="span-4" id="interestCodes" style="" type="text" name="mm" size="16" value="" />
</p>
<p>
<input class="span-4" id="interestCodes" style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
</p>
<p>
<input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
</p>
<p>
<input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
</p>
<p>
<input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
<p style=""> Interest Codes</p>
</p>
</div>
<div>
<input class="span-18" id="listCodeAndName"style="" name="Text1" value="List code and Name:">
</div>
<div id="detailWrap">
<div id="details">
<p>Marketing Manager: </p>
<p>Marketing Director: </p>
<p>Date Submitted: </p>
<p>Ideal Deadline: </p>
<p>Quantity Submitted: </p>
<p><input type="submit" name="submit" value="Send" /></p>
</div>
</div>
</body>
</html>
body {
background-color: #99FF99;
font-family: verdana, sans-serif;
}
#listcode {
height: 50px;
margin-left: 22px;
}
.container {
border:2px solid black;
}
#sourceCode {
height: 50px;
margin-left: 58px;
}
#division {
height: 50px;
float: right;
margin-right:18px;
}
#wrap2 {
display: block;
clear: both;
}
#projectName {
height: 50px;
margin: 20px 20px 20px 20px;
}
#interestCodes {
margin-left: 10px;
}
#listCodeAndName{
-moz-margin-end:10em;
margin-left: 230px;
width: 688px;
height: 160px;
position: fixed;
top: 224px;
left: 146px;
}
If I get your problem right , then your div container is not exactly in the top-left corner. Its because the browser has its default css definitions, like 10px margin on the body element. You can easily solve the problem:
body {
margin: 0;
}
Or you better start using CSS reset, normalize.css for example.
I hope it helps, and I dont went wrong way.
I have a problem with some jQuery code, I'm trying to show some fields in a form, but they have to appear only if the user clicks on Yes and hides when he clicks No. This works but when it shows the fields, it mounts them one on top of each other. I'm trying to give it direction, but is not working. Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<label> Do you want to create a new entry? </label>
<button id="showr" type="button" >YES</button>
<button id="hidr" type="button" >NO</button>
<br/>
<div class="mydiv">
<label> Field #1
<span class="small">Describe your field</span>
</label>
<textarea rows="10" cols="40" name="" id="" ></textarea>
</div>
<div class="mydiv">
<label> Field #2
<span class="small">Describe your field</span>
</label>
<textarea rows="10" cols="40" name="" id="" ></textarea>
</div>
<script>
$("#showr").click(function () {
$("div").first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});
});
$("#hidr").click(function () {
$("div").hide(1000);
});
</script>
</body>
</html>
relevant jsFiddle
If somebody has an idea please let me know, thanks
Add this to your style:
.mydiv{ clear:both;}
What do you mean by direction?
jsFiddle
To get your desired result including centering, use the following CSS:
.mydiv {
background:#def3ca;
margin: 0 auto;
width:400px;
text-align:left;
clear:both;
display: none;
}
.mytext {
text-align:center;
}
.wrapper {
display:block;
}
With the following markup:
<div class="wrapper">
<label>Do you want to create a new entry?</label>
<button id="showr" type="button">YES</button>
<button id="hidr" type="button">NO</button>
<br/>
<div class="mydiv">
<label>Field #1 <span class="small">Describe your field</span>
</label>
<div class="mytext">
<textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
</div>
</div>
<div class="mydiv">
<label>Field #2 <span class="small">Describe your field</span>
</label>
<div class="mytext">
<textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
</div>
</div>
</div>
Notice I added a wrapper around everything and set display: block then in your margin for .mydiv I set it to 0 auto. This allows for centering.
I also worked on your jQuery to improve it a little bit.
$("#showr").click(function () {
$(".mydiv").show("fast");
});
$("#hidr").click(function () {
$(".mydiv").hide(1000);
});
I have a form to change password, with javascript validate check for all the form fields, however, I don't think the Javascript even gets triggered. Entering submit takes me straight to Null Pointer Exception error in my Controller. Am I missing something ?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Change Password Page</title>
<script type="text/javascript">
function validate(){
var username=document.form.j_username.value;
var oldPassword=document.form.j_old_password.value;
var newPassword=document.form.j_new_password.value;
var confirmPassword=document.form.j_confirm_password.value;
if(username==""){
alert("Enter Username!");
return false;
}
if(oldPassword==""){
alert("Enter Old Password!");
return false;
}
if(newPassword==""){
alert("Enter New Password!");
return false;
}
if(confirmPassword==""){
alert("Enter Confirm Password!");
return false;
}
return true;
}
</script>
</head>
<body>
<div class="change_password-header">
<h1>Blah Blah</h1>
</div>
<div class="L" style="float: left; left; padding: 1em; background-color: #8eb4e3; border: 1px solid black;">
<form action="changepassword" method="post" onsubmit="return validate()">
<p><strong style="color: #e3f7ff">Username: </strong>
<input type="text" name="j_username" size="25" />
</p>
<p><strong style="color: #e3f7ff">Old Password: </strong>
<input type="password" size="25" name="j_old_password" />
</p>
<p><strong style="color: #e3f7ff">New Password: </strong>
<input type="password" size="25" name="j_new_password" />
</p>
<p><strong style="color: #e3f7ff">Confirm New Password: </strong>
<input type="password" size="25" name="j_confirm_password" />
</p>
<div style="text-align: center;">
<input type="submit" value="Submit" class="button-login" style="background-color: #c7d9f1; border: 1px solid black;" />
<input type="reset" value="Reset" class="button-login" style="background-color: #c7d9f1; border: 1px solid black;"/>
</div>
</form>
</div>
<div style="float: left; width: 100%; font-size: 12px; padding: 0 0 0 2em" class="change_password-footer">
<div>Return back to login screen</div>
<br/>
</div>
</body>
</html>
You just forgot to name your form:
<form action="changepassword" name="test" method="post" onsubmit="return validate()">
and reference in JS like this:
var username=document.forms.test.j_username.value;
http://jsfiddle.net/gq79y/