|
JavaScript - What Is The Opposite Of Undefined When Checking If A Form Field Is Filled Or Not
What I am wanting to do is have my form open up a new part of the form when the previous sections are filled out.
i.e name field shows, when it has content, the next field opens up for it to be filled out, and so on. Similar TutorialsI am having some trouble with my code in that I am trying to take the value from the date of birth field and check to see if over 18 years old. I they are not over 18, a window.alert dialog box pops up to tell them. Any help with this I would greatly appreciate. Below is the check if 18 validation. Script section in the document head: Code: //check if over 18
function overAge(){
var age;
var input = document.forms[0].birthDate.value;
var pyear = parseInt(input.substring(6,10));
var pmonth = parseInt(input.substring(0,2)) - 1;
var pday = parseInt(input.substring(3,5));
if ( month < pmonth ){
age = year - pyear - 1;
}
else if ( month > pmonth ){
age = year - pyear;
}
else if ( month == pmonth ){
if ( day < pday ){
age = year - pyear - 1;
}
else if ( day > pday ){
age = year - pyear;
}
else if ( day == pday ){
age = year - pyear;
}
}
if(age < 18){
window.alert('Attention: Under 18!');
valid=false;
return valid;
}
}
Code for body section: Code: Date of Birth: <br/> <input type = "text" name = "date" value = "(mm/dd/yyyy)"/> What I'm trying to do is check if a field (number) is blank or not. If it is filled perform validation on the remaining fields. If not filled let the user submit.The JavaScript is currently being testing in SharePoint 2007. Below is a sample of my initial code. In firebug "techIdValue" is currently returned as not defined. If some can help me identify why this is the case I would greatly appreciate it. If it matters I have included and referenced jquery prior to the code sample below. Code: //run validation only if the Tech ID is filled
var techId = 'input[name*ff34_1]:number';
var techIdValue = $("#techId").val();
alert(techIdValue);
alert('1');
if(isNaN(techIdValue) == false)
{
function PreSaveAction() // this hooks into the PreSaveAction function which is called in the clicking of the "Ok" button.
{
var overall = 'input[name*=ff1_1]:text';
var overallValue = $("#overall").val();
//Check if Overall is Not Started and Schedule or Budget or Resources are Complete
if(getTargetMatch('Overall', 'select', new Array('Not Started'))== true)
{
Hi, im having a little difficulty checking if an XML node has a value, here the code: var Divs=new Array("artist","bio","img","date","tickets","venue","street","city","country","headliner"); xmlDoc=xmlhttp.responseXML; for ( nodes in Divs ) { if(!xmlDoc.getElementsByTagName(Divs[nodes])[0].childNodes[0].nodeValue) { } else { document.getElementById(Divs[nodes]).innerHTML= xmlDoc.getElementsByTagName(Divs[nodes])[0].childNodes[0].nodeValue+"<br>"; } } This always throws up the error: document.getElementById(Divs[nodes]) is null ive tried putting the xmlDoc in a variable then checking if its null but no luck, also tried the same method against "undefined" but no luck either. Would be greatful if anyone has any suggestions. Thanks, Tom. Hi. I'm having some trouble with validating all my fields in my form. I'm posting my code here. Code: function validateForm()
{var chk = document.forms["EntryPage"]["studentname"].value;
if (chk==null || chksdtnm=="")
{
alert("Student name must be filled out");
return false;
}
if (chk==null || chksdtnm=="")
{
alert("Student ID must be filled out");
return false;
}
}
I need to alert the user with a messagebox for six fields if ever they're not filled in. How do I achieve that? I'm trying to figure out how to how to make a rule if a field is filled with the number "0". As it is now I have a rule saying if a field is filled with anything but a number do this else... if (document.form2["stroke"+i].value===''){ document.form2["p"+i].value="0" } else { document.form2["p"+i].value = points; } I have tryid this but with no luck... } else if (document.form2["stroke"+i].value=0''){ document.form2["p"+i].value="0" Where do I go wrong... Thanks in advance ;-) Okay, new to this magical thing called Javascript and LOVING it. Don't know how I avoided it all these years. Running into a stupid issue and I am sure it is just something I am missing. I have a hidden field in my page with the default value of HELLO. I am trying to make a change based on the default value, but I obviously am doing something wrong because it won't display my hidden field value. Any help would be greatly appreciated. Code: <html>
<head>
<script>
function checkForm()
{
var testing = document.getElementById("testing").value;
document.getElementById("result").innerHTML = testing;
}
</script>
</head>
<body>
<input type="hidden" name="testing" value="HELLO" />
<input type="submit" value="submit" onClick="checkForm()"; />
<div id="result"></div>
</body>
</html>
Hi All, In one of my php page I have a form where I am displaying a table. The First row is having the drop down and the second row is a text field. Now the problem is that based on the drop down value choosed I have to set some field in text field. For this I am calling a javascript function but when I am trying to set the value in the text field which is still not into picture when this function is called it is showing the error that the field is not defined. Can Anyone tell how I can get access to a field which is yet not defined. I even tried to make a hidden field before drop down and tried to set some value for that still I am facing the same problem. Can anyone help me out ... I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong? here is my code so far... Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok. Code: ....
<script type="text/javascript">
window.onload = function() {
document.forms[0].username.focus();
}
function validate(form)
{
var form = document.getElementById("reg");
var e = document.getElementById("error");
e.style.background = "red";
for(var i = 0; i < form.elements.length; i++)
{
var el = form.elements[i];
if(el.type == "text" || el.type == "password")
{
if(el.value == "")
{
e.innerHTML = "Please fill in all fields!";
el.style.border = "1px solid red";
el.focus();
return false;
} else {
el.style.border = "1px solid green";
return false;
}
}
}
var un = form.username;
un.value = un.value.replace(/^\s+|\s+$/g,"");
if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value)))
{
e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters";
un.focus();
return false;
}
var pw = form.password;
pw.value = pw.value.replace(/^\s+|\s+$/g,"");
if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value)))
{
e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters";
pw.focus();
return false;
}
e.innerHTML = "You filled in all the fields, well done!";
e.style.background = "green";
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>My Cool Website</h1>
</div>
<div id="content">
<div class="padding">
<h2>Registration</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<form id="reg" action="#" method="post" onsubmit="return validate(this)">
<div id="error"></div>
<div><label for="username">Username</label></div>
<div><input type="text" name="username" id="username" size="30" maxlength="16" /></div>
<div><label for="password">Password</label></div>
<div><input type="password" name="password" id="password" size="30" maxlength="16" /></div>
<div><label for="c_password">Confirm Password</label></div>
<div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div>
<div><label for="email">Email address</label></div>
<div><input type="text" name="email" id="email" size="30" maxlength="200" /></div>
<div><label for="c_email">Confirm Email address</label></div>
<div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div>
<div><label for="firstname">First name</label></div>
<div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div>
<div><label for="surname">Surname</label></div>
<div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div>
<div><label for="gender">Gender</label></div>
<div>
<div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div>
<div><input type="radio" name="gender" value="f" />Female</div>
</div>
<div><input type="submit" value="Register" name="submit" /></div>
</form>
</div>
</div>
<div id="footer">
<p>Copyright © 2009 My Cool Website</p>
</div>
</div>
</body>
</html>
This has me completely stumped. I have a multiple select form element in my HTML document that needs to be manipulated by two different sets of context-sensitive controls. One set of controls is marked up as follows: Code: <div id="divControls1" name="divControls1" style="display:none"> <form id="fControls1" name="fControls1"> <input type="button" id="btnAdd" name="btnAdd" value="Add" onClick="addStuff();" /> <input type="button" id="btnEdit" name="btnEdit" value="Edit" onClick="editStuff();" disabled /> <input type="button" id="btnDelete" name="btnDelete" value="Delete" onClick="deleteStuff();" disabled /> </form> </div> When I load this page into Safari (on Mac OS X) and set the style of divControls1 to "display:block," I have an enabled "Add" button, a disabled "Edit" button, and a disabled "Delete" button, just as I expected. (I monitor selections in a multiple selection element to turn the buttons on and off.) But when I load this page into Firefox (also Mac OS X), all three buttons are disabled at startup. My page runs a function called startup() when the body fires onLoad. To try to troubleshoot the problem, I wrote this line at the beginning of the startup() function: Code: function startup() {
alert (document.getElementById("btnAdd").disabled);
...
When I run this code in Safari, the alert returns "false" (not disabled), just as I would expect, and intended. However, the same code in Firefox (Mac OS X) returns "true" (disabled) ... but the same code in Firefox (WinXP) returns "false"! Any insight into what might be happening here? Getting a document.form is undefined when calling this select onchange event Code: function submitShipMethodChange(form,field){
if(document.form['shipform'].elements['shipping_method']){
var fldIndex = form.elements[field].selectedIndex;
var selectedMethod = form.elements[field].options[fldIndex].value;
document.forms['shipform'].elements['shipping_method'].value = selectedMethod;
document.forms['shipform'].submit();
}
}
<select name="shipping_method" onChange="submitShipMethodChange(this.shipform,'shipping_method');">
How can I add a form field value to a url. I tried the below but it no work. Code: href="index2.php?q=4&id=+document.theForm.lists.value+&picklist" Hi there, I have a html form, and I need it so that when a user clicks a button, it adds a field into the form. I also need it to write <td></td> around the new field, and I need it to write this in a specific part row of a table. How would I go about doing this? I've tried searching for the past two hours, but no luck. Many thanks, I appreciate it, Jason Is there a way to give an input or textarea field the focus and set the focus to begin right at the end of the current text in the field?
function checkValidFormInput() { if (document.getElementsByName('customerName').value != '') { document.getElementById('customerNameImg').innerHTML = '<img alt="Valid" src="images/greenTick.png">'; } else { document.getElementById('customerNameImg').innerHTML = '<img alt="Invalid" src="images/redX.png">'; } if (document.getElementsByName('customerEmail').length > 0) { document.getElementById('customerEmailImg').innerHTML = '<img alt="Valid" src="images/greenTick.png">'; } else { document.getElementById('customerEmailImg').innerHTML = '<img alt="Invalid" src="images/redX.png">'; } } I need to learn how to clear form fields when a user clicks on them. Here is the site in question: http://www.yourvancouvermortgagebroker.ca/apply They used to work, but then I changed the field value and now it doesn't work on some of the fields (whichever ones I changed). Here is a link to the .js file: http://www.yourvancouvermortgagebroker.ca/js/apply.js I have a form which has various fields which are arrays (so the name of a field may be myField[]). The reason for this is that the form has add buttons to add another field or fields for the purpose of entering another email address, etc., to send invitations and do other things. The problem that I am running into is how to access the individual fields in an array of fields inside javascript to do form validation. So if I have an email address field name emailAddress[], and using the add button, the user of my site adds 3 other copies of the emailAddress[] field, I want to then do form validation onSubmit to ensure those email address are valid using standard procedures. However, inside the javascript code, how do I access the individual fields that make up emailAddress[]? I just cannot find anywhere online the proper way to get at these values. If anyone can help me, I would greatly appreciate it. Happy Holidays Hi! I use the :: Form field Progress Bar from DynamicDrive: Form field Progress Bar Now I trided to change the text when the textarea is full "Limit:100%" to "Your max. characters is reached" I trided it but with no luck. This is the main code.. Code: <script type="text/JavaScript">
function textCounter1(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = 137;
var charcnt = field.value.length;
// trim the extra text
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
}
else {
// progress bar percentage
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Limiet: "+percentage+"%"
// color correction on style from CCFFF -> CC0000
setcolor(document.getElementById(counter),percentage,"background-color");
}
}
function setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
This is the place where the text is set. Code: ((fieldWidth*percentage)/100)+"px"; document.getElementById(counter).innerHTML="Limiet: "+percentage+"%" Help would be highly appreciated ! greetings Jardin |
|||||||