|
JavaScript - Remove Class From Form Field
Hi all, I have a couple of functions, an add error function, if some validation is not met I add a message to a array holding error messages and mark the field red, I have no problem with that piece of code...
Code: function addError(errorArray, formObj, message) {
errorArray[errorArray.length] = message;
if (formObj.options != undefined) {
formObj.parentNode.className = "error-field";
} else {
formObj.className = "error-field";
}
}
However I have an issue with the 2nd function, it takes in 2 variables, an id for a div which is displaying the error messages, and the form object, the issue I have is removing the error class. for some reason obj.className = '' fails to remove the class, getting the same object using getElementById() (name and id are the same) however if I construct the removing piece of js code as a String and execute it using eval it works... Code: function clearErrors(errorDivId, vForm) {
var errorDiv = document.getElementById(errorDivId);
errorDiv.innerHTML = "";
errorDiv.style.display = "none";
// remove red boxes
for (i=0; i<vForm.elements.length; i++) {
var obj = vForm.elements[i];
if (obj.type != "button" && obj.type != "hidden") {
if (obj.options != undefined) {
if (obj.parentNode.className == "error-field") {
obj.parentNode.className = "";
}
} else {
if (obj.className == "error-field") {
alert(obj.name);
obj.className == "";
alert(obj.className);
obj = document.getElementById(obj.name);
alert(obj);
obj.className == "";
alert(obj.className);
var jsExecuteCommand = "vForm." + obj.name + ".className = '';";
alert(jsExecuteCommand);
eval(jsExecuteCommand);
alert(obj.className);
}
}
}
}
}
I am so baffled? I have no idea why it won't work can anybody please explain what is happening please? Although I have a work around, I have been banging my head to get to this workaround and I just don't understand why the obj.className = ''; doesn't work. Thanks, Dale Similar TutorialsI'm trying to figure out how to both make the text grey and when a user clicks inside a input field remove the helptext. So far I got this: Code: <input onfocus="this.select()" onblur="this.value=!this.value?'E-mail here':this.value;" name="name" value="E-mail here" type="text"> What this does is allmost correct, but it doesnt remove the predefined text "E-mail here", it just select it all, and then the text is not grey... Can somebody please guide me in the right direction... Thanks in advance! Hi Guys, Someone please help me how to add new function to remove the field, i have js script function that add new field as follows Code: <script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
var htmlText = " <input type='text' name='friends[]' value='' size='auto' maxlength='45' /><br />";
var newElement = document.createElement('div');
newElement.id = 'new_field';
newElement.innerHTML = htmlText;
var fieldsArea = document.getElementById('new_field');
fieldsArea.appendChild(newElement);
fields += 1;
} else {
alert("Only 10 fields allowed.");
document.form.add.disabled=true;
}
}
</script>
but i need some helps to add new functions for removing field, For any suggest and pointer would be appreciate. Hi, I have no experience with javascript. For several hours I have been trying to figure out how to use it but I cannot. I want to change the layout of a page to something that would be much more readable. Recently the website Cramster has moved to Chegg and I don't like the layout. Everytime I load a problem I have to make the two changes in this screenshot: I expand the answer box then delete the footer because it overlaps in front of the answer box. Here is a screenshot of the before and after of what it does: How do I create a script to automate this every time I go to this site? I'm at a loss and tried all kinds of codes that are supposed to remove elements, but none have done anything. I know I don't have any code to show here, but I don't know what is supposed to work. Please help, thank you! No Jquery plz As you can see that I want to remove this advertisement area (denoted by 1) via some java code. Now one can observe that this advert is hosted in the 'main-content' id & wrapped in 'inner' class. One cannot remove/hide id but CAN remove/hide the class which also will remove/hide the advert area placed within this class. Hey all, Hoping someone could help me out with some javascript coding as I am a complete novice to this! I am currently building a website using 1 static page and all the content will be pulled in through different iframes by clicking on a navigation on the page. I found a very handy piece of javascript coding that lets me remove a class from one link and move it to the link that was clicked on (the code will be below). The issue I am facing with this is that if I have Home set to class="On" to begin with and then click on Location, the background image will be added to the Location section but won't get removed from Home until it is physically clicked on. Can anyone help me out with how I can get this to work correctly? javascript: Code: <script language="JavaScript" type="text/javascript">
var Lst;
function CngClass(obj){
if (typeof(obj)=='string') obj=document.getElementById(obj);
if (Lst) Lst.className='';
obj.className='On';
Lst=obj;
}
</script>
HTML: Code: <div id="navWrapper">
<div id="globalNav">
<ul>
<li onclick="CngClass(this);" class="On"><a href="iframes/home.html" target="content_iframe">Home</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/location.html" target="content_iframe">Location</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/speakers.html" target="content_iframe">Speakers</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/agenda.html" target="content_iframe">Agenda</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/useful_material.html" target="content_iframe">Useful Material</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/event_presentations.html" target="content_iframe">Event Presentations</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/gallery.html" target="content_iframe">Gallery</a></li>
</ul>
</div>
<div id="localNav"></div>
</div>
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>
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" 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 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?
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 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 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 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">'; } } Using the url test.html?a=john&b=doe I am using the following code: <script type="text/javascript" language="javascript"> function getUrlVars() { var map = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi; function(m,key,value) { map[key] = value; }); return map; } var john=getUrlVars(map[a]); alert (getUrlVars(map[a])) alert (john) </script> I can't seem to get an alert to show me anything. The eventual result is not an alert, but a document.write to post the url contents to various form fields for firstname= and lastname= etc. I am really having a hard time using the document.write function, and am not sure how to employ it, whether in the same script statement or in a separate script in the body. Greetings, I'm working on a php/mysql app that has multiple tabs with multiple form fields. I am trying to incorporate a javascript form field detection function that alerts the user that they have not submitted their changes if they try to navigate away. The detection works as designed, but the problem I am having is when the form is submitted, the script senses an unload and still fires the alert. The form submits to itself and updates the database and then reloads the page with the new values. Is there a way to have the script ignore the forms submit url and skip the form check? Here is the code ( NOT mine, found it somewhere else.) Code: <script language="javascript">
var ids = new Array('description');
var values = new Array('<?php echo $detail['description']; ?>');
function populateArrays() {
// assign the default values to the items in the values array
for (var i = 0; i < ids.length; i++) {
var elem = document.getElementById(ids[i]);
if (elem)
if (elem.type == 'checkbox' || elem.type == 'radio')
values[i] = elem.checked;
else
values[i] = elem.value;
}
}
var needToConfirm = true;
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm) {
// check to see if any changes to the data entry fields have been made
for (var i = 0; i < values.length; i++) {
var elem = document.getElementById(ids[i]);
if (elem)
if ((elem.type == 'checkbox' || elem.type == 'radio') && values[i] != elem.checked)
return "Your changes have not been saved. Are you sure you want to leave?";
else if (!(elem.type == 'checkbox' || elem.type == 'radio') && elem.value != values[i])
return "Your changes have not been saved. Are you sure you want to leave?";
}
// no changes - return nothing
}
}
</script>
The url of the page is "edit.php?&mode=edit&t=2&id=284&cn=2009-002" The only detectable change to the query string would be the 't' variable. Basically what I want to do is have the script look for a change in the 't' variable and if detected, check the form values for changes. If 't' doesn't change, skip the script completely. Thanks.. Hello, I have several event handlers on my page; one of them doesn't work. I'll post them all here, indicating how they are executed: #1: Works [CODE]<script type="text/javascript"> function combName() { var fname = document.forms[0].fname.value; var lname = document.forms[0].lname.value; document.forms[0].name.value = fname + " " + lname; } </script>[CODE] NOTE: The "lname" field uses "onKeyUp" to make the script run. A hidden field named "name" is populated with the concatenation. #2: Works (this script is too long to post; it is a validation script and runs via the "onSubmit" in the form tag.) #3: Doesn't Work [CODE]<script type="text/javascript"> function combPrograms() { document.forms[0].00N70000002WNax.value = "1st Choice: " + document.forms[0].sf1.value + document.forms[0].alameda1.value + document.forms[0].sanmateo1.value + document.forms[0].marin.value + document.forms[0].cc1.value + "2nd Choice: " + document.forms[0].sf2.value + document.forms[0].alameda2.value + document.forms[0].sanmateo2.value + document.forms[0].marin2.value + document.forms[0].cc2.value; } </script>[CODE] Note: 1. Not all of the values for Choice 1 and Choice 2 are populated. 2. For that reason, one of the later, unrelated text fields in the form has "onKeyUp="combPrograms()" to run the event. 3. A hidden field named 00N70000002WNax is populated with the concatenation. Any help is much appreciated! I have modified a free JS function from he http://www.tangorangers.com/examples...post/index.php To dynamically add text fields to the form. My work-in-progress version is he http://jimpix.co.uk/junk/test/6.html On the form, I have a hidden text field: Code: <input type="hidden" name="hiddenCount" value="" /> What I'd like to do is to increment the hiddenCount each time the "Add" fields button is clicked. This is the button: <input id="add_contact()" onclick="add_contact()" value="Add" type="button"> And this is the JS function: Code: var contact_counter = 0;
function add_contact()
{
if (contact_counter < 9)
{
contact_counter++;
var newFields = document.getElementById('add_contact').cloneNode(true);
newFields.id = 'contact';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + contact_counter;
}
var insertHere = document.getElementById('add_contact');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
}
I'm new to JS. I could just about edit the JS function to slightly modify it from the tangorangers version (I only changed it v. slightly). To somehow increment the value in the hidden field each time the button is pressed is beyond me though! Any advice much appreciated. Thanks Hello, First off thank you for looking at my post. Please forgive me if I do something incorrectly here. I have never posted in a forum before. You are very kind to assist me in this problem. I wish to send the javascript calculated value in a form from one page to another page form. I just need the one value sent. The value is "answer: in the code below. I would like to send it to a form page called "answer.html" I am not a computer person, and I am doing this in frontpage. I do not know how to write java or anything, I just copied this from a free script site and am trying to use it. Thank you once again for your kindness and patience with me. Thanks to all you experts! Michael here is the code I have. --------------------------------------------- Code: <table cellspacing=0 width=427
height=1 bgcolor="#FFFFFF" style="border-collapse: collapse" cellpadding="0" border="0">
<tr>
<td width="634" nowrap height="1">
<script language="JavaScript">
function findcalculatorcalculate(form) {
a = form.debt.value - 0;
b = form.faith.value - 0;
d = a / b;
form.answer.value = Math.round (d);
}</script>
<p align="right" style="margin-left: 3; margin-right: 5"></p>
<form name="form" style=" margin-right: 5; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1" action="--WEBBOT-SELF--" method="POST">
<p align="right">
<font style="font-size: 11pt; font-weight:700">Input amount <input class="regfont" size="13" type="text" name="debt"></font><span style="font-size: 11pt; font-weight:700"> <br>
divide by
</span><font style="font-size: 11pt; font-weight:700"><input class="regfont" size="6" type="text" name="faith"></font><br>
<b><font color="#FF0000" size="5"> </font></b><font style="font-size: 11pt"><input onclick="findcalculatorcalculate(this.form)" value="CLICK HERE TO CALCULATE" type="button" style="border-style:solid; border-width:2; font-weight: bold; font-family:Arial"><br>
<b>ANSWER</b>
</font></font>
<INPUT NAME="answer" SIZE="5" VALUE=""><br>
<INPUT TYPE="BUTTON" onClick="nextpage()" VALUE="Go to the next page"></p>
</p>
</form>
</td>
</tr>
</table>
<p align="right" style="margin-left: 3; margin-right: 5">I would like ANSWER
field to
pre populate the calculated amount on the second page titled "answer.html" THANK
YOU!</p>
------------------------ Thank you again for helping me in plain language because I do not have the skills that all of you do. |
|||||||