|
JavaScript - How To Add New Functions To Remove Field?
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. Similar Tutorialsuse in form fields - onBlur="chkalpha(this)" function chknum(field) { var valid = "0123456789"; var ok = "yes"; var temp; for (var i=0; i<field.value.length && ok == "yes"; i++) { temp = "" + field.value.substring(i, i+1); if (valid.indexOf(temp) == "-1") { var ok = "no"; } } if (ok == "no") { alert("Invalid entry! Only numeric data is accepted!"); field.value=""; field.focus(); field.select(); } } function chkalpha(field) { var valid = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ "; var ok = "yes"; var temp; for (var i=0; i<field.value.length && ok == "yes"; i++) { temp = "" + field.value.substring(i, i+1); if (valid.indexOf(temp) == "-1") { var ok = "no"; } } if (ok == "no") { alert("Invalid entry! Only alphabetic data is accepted!"); field.value=""; field.focus(); field.select(); } } function chkalphanum(field) { var valid = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@_-. "; var ok = "yes"; var temp; for (var i=0; i<field.value.length && ok == "yes"; i++) { temp = "" + field.value.substring(i, i+1); if (valid.indexOf(temp) == "-1") { var ok = "no"; } } if (ok == "no") { alert("Invalid entry! Only alphanumeric data is accepted!"); field.value=""; field.focus(); field.select(); } } 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 I'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, I have written a number of functions designed to return frequency data on 1000 randomly chosen numbers using different math functions for the rounding. I would like to include all of these functions within the wrapper of another function so that only one call is needed to get returns from all of the 'inner' functions. However, while each of the functions works in isolation, the moment I wrap them in another function they stop working. The following code is one of the functions 'frequencyWrapperOne' that has been wrapped in the function 'testWrapper'. A call to testWrapper does nothing. Can anyone see what I'm doing wrong? Code: function testWrapper()
{
function frequencyWrapperOne()
{
var numberArrayOne = new Array(0,0,0);
for (var i = 0; i < 1000; i = i + 1)
{
var chosenNumber = Math.floor(Math.random() * 3);
if (chosenNumber == 0)
{
numberArrayOne[0] = numberArrayOne[0] + 1;
}
if (chosenNumber == 1)
{
numberArrayOne[1] = numberArrayOne[1] + 1;
}
if (chosenNumber == 2)
{
numberArrayOne[2] = numberArrayOne[2] + 1;
}
}
return window.alert(numberArrayOne.join(','));
}
}
testWrapper();
Thanks. hiiii, im new to javascripts . Can anyone help me to know that a javascript which is validating a phone number accepts only digits but if the text field is left empty it should accept the entry as an empty entry.... plz share knowledge u will be more knowledgeable Hi folks. Looking to see if anyone could tell me where I'm going wrong with this script... I'm trying to have a field automatically filled with the day of the week ("Monday", "Tuesday", "Wednesday" and so on), upon the user selecting a date from the datepicker jQuery. If this isn't clear, I'll clarify further down the page. Here is the script: Code: <script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[428]"]').change(function(){
var d = $('input[name="item_meta[428]"]').val();
var n = new Date(d).getDay();
if(n == 0)
val v = 'Sunday';
else if(n == 1)
val v = 'Monday';
else if(n == 2)
val v = 'Tuesday';
else if(n == 3)
val v = 'Wednesday';
else if(n == 4)
val v = 'Thursday';
else if(n == 5)
val v = 'Friday';
else if(n == 6)
val v = 'Saturday';
$('input[name="item_meta[429]"]').val(v).change();
});
});
</script>
I'm basically trying to say, if the user selected today (15/05/2012) in the field 428 it would fill the field 429 with "Tuesday". Again, if the user selected 18/05/2012 in the field 428 then it would automatically fill field 429 with "Friday". It's being done to work in conjunction with a wordpress plugin called Formidable Pro hence the item_meta[428] etc. Any assistance would be greatly appreciated. Sam. Is there a way to activate a function from another function? It has to be in the script tag, it can't be in the HTML section. Can I use something similar to this following code? If not, can anyone give me some help? I have tried to do it various ways, and have looked it up a few times, but to no avail. Can I use something similar to this following code? If not, can anyone give me some help? if (condition) {activate functionname();} Any help I can get would be appreciated. Thanks a lot to anyone who can help. Ok here is what I have so far, my ending part of my Call Function I think is ok. for my main function. I think I misplaced the { and } I will show you all the codes I have for my main function this is what I have I think I did misplace something but I can not pin point where that one small things should be Code: unction showResults(race,name,party,votes)
{ // script element to display the results of a particular race
var totalV = totalVotes(votes);
document.write("<h2>" + race + "</h2>");
document.write("<table cellspacing='0'>");
document.write("<tr>");
document.write("<th>Candidate</th>");
document.write("<th class ='num'>Votes</th>");
document.write("<th class='num'>%</th>");
document.write("</tr>");
}
for (var i=0; i < name.length; i++)
{
document.write("<tr>");
document.write("<td>" name[i] + "(" + party[i] + ")</td>");
document.write("td class='num'>" + votes[i] + "</td>");
var percent=calcPercent(votes[i], totalV)
document.write("<td class='num'>(" + percent +"%)</td>");
createBar(party[i],percent)
document.write("</tr>");
}
document.write("</table>");
}
</script>
Just wondering if i misplaced any ; or { or } anywhere suggestions? Here is my call function Code: <script type="text/javascript"> showResults(race[0],name1,party1,votes1); showResults(race[1],name2,party2,votes2); showResults(race[2],name3,party3,votes3); showResults(race[3],name4,party4,votes4); showResults(race[4],name5,party5,votes5); </script> I been going over this, I can not seem to figure out what { i might be missing? Thanks I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work. Can I do this? Help I have two drop down fields. When I select any value in the first drop down i want the second dropdown to automatically populate the value related to the first one. For e.g i have the first field as name and the second field as measured in. If I select 'Potato' in the first dropdown then the second drop down should populate 'kg'. Please help.
Hi Experts, I have designed an online registration system for a non profit in ASP/SQL. After the members register for classes they are automatically redirected to an invoice page with class fees. At the bottom of the page I have a Total Fees field of all the classes. The member is supposed to pay this amount to our organization. Question: We decided to do an online payment this year and would like to calculate a 2% additional amount on the Total Fees. This amount is paid to the Payment Merchant site. We cannot afford to lose the 2% since we are a non profit. Would really appreciate if someone can tell me how to 1) Add a new field under the Total field 2) And calculate the 2% additional fees and do a Grand Total. Thanks in advance. Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. Hi All, My boss asked me to create an Adobe form and I'm unsure how to code it to accomplish what he is asking. I'm working with an Adobe form that has required fields. FieldA is not required but if FieldA is filled in, FieldB would then become required. What would be the ideal way to code this? Thank you Hello, I'd like to make sure that a field is a field: Code: if ( typeof( myField ) != "field" ) {
}
This doesn't work, and I can't seem to find the answer. I can know if a field is a checkbox, for example, but I don't how to find the broader category of "input field". Hi, I am creating a mashUp with google maps and have a function that creates the map, marker, infowindow and all works great. I want to add more functions to that functions file. Do I start with another function Name() put my function in the {} and then I am going to use the onclick event when I want the function to run. I also am going to add more functions to this file Is that the correct way to keep adding functions? And what is the best way of calling them in my html file? Answers and examples would be great thank you I'm using jQuerys' $.ajax to load a div with some details in it and i want to use the esc key to close the div. Heres the code so far Code: $('.username span').click(function(){
$('.MiniPro').remove();
ID = $(this).parent().attr('ID');
This = $(this).parent();
miniPro();
});
function miniPro()
{
$(This).append('<div class="MiniPro">Loading...</div>');
$.ajax({
type: 'POST',
data: 'userID='+ID,
url: 'processing/miniPro.php',
success: function(msg)
{
$('.MiniPro').remove();
$(This).append('<div class="MiniPro"'+msg+'<div class="MiniProClose">X</div></div>');
}
});
}
Is it even possible to do that? Code: <html>
<head>
<script>
//declare variable
//var temp = 0;
var Num = parseInt(prompt('Enter an Intger'));
// starts the function factorial
factorial(Num);
//The function is declared
function factorial(currentNumber) {
if(currentNumber > 1) {
//temp = temp + (currentNumber);
factorial(currentNumber - 1);
alert(currentNumber);
}
else {
alert("here");
}
}
</script>
</head>
<body>
</body>
</html>
This code is suppose to take the prompt number and keep subtracting one if > 1 but it seems to be not doing that at all and doing the else statement first then + till it gets to the prompt number. I have been staring at it for a while now and cant work it out. Thanks . Why do we have functions without parentheses at times? Ex 1) http://www.youtube.com/watch?v=OHYFNDzlDTE (On 2:18) Ex 2) At the bottom: Code: var panel, flag;
function mousemoveResponse(e)
{
var x, y;
if( window.event )
{
x= event.x; y=event.y;
}
else if(e)
{
x=e.pageX; y=e.pageY;
}
if(flag)
{
panel.innerHTML = "Mouse is at X: " + x + ", Y: " + y ;
}
}
function mouseoverResponse()
{
flag = false;
panel.innerHTML = "Mouse is Over";
}
function mouseoutResponse()
{
flag = true ;
}
function init()
{
panel=document.getElementById("panel");
flag = true;
panel.innerHTML="Move the mouse..." ;
document.onmousemove=mousemoveResponse;
panel.onmouseover=mouseoverResponse;
panel.onmouseout=mouseoutResponse;
}
onload=init;
I'm a newbie student coder for now, hoping to enter the wonderful world of software engineering in another year. I put together a very simple site for a class and all is well, but my "Contact SRS" form doesn't seem to want to run my JavaScript code even though I've used a JS debugger which returned no errors. When I click the Submit button it's supposed to validate the form. But I keep getting "Error on page" in the bottom IE 7 message bar (where it usually says "Done" when you load a page). There is another function that also does not work - it's in the Telephone number fields - it' supposed to check that the values entered are numbers. Would anyone be kind enough to try to run this page in your browser and see if the validation functions runs for you? If they don't, could you offer any suggestions as to code errors or possible browser settings that might be causing the problem? Thanks in advance to anyone offering their time!!! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Page used to contact SRS" />
<meta name="keywords" content="resume, resumes, job, jobs, job market, job info, interview tips, job interview, salary,
salaries, cover letter, cover letters, SRS, Superior Resume Source, business cards, help with resume, help with job search" />
<title>Contact SRS</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript">/* <![CDATA[ *//* ]]> */
function checkForNumber()
{
if (isNan(document.forms[0].area.value)){alert("You must enter a numerical value");return false;}
else if (isNan(document.forms[0].exchange.value)){alert("You must enter a numerical value");return false;}
else if (isNan(document.forms[0].phone.value)){alert("You must enter a numerical value");return false;}
}
// function validateForm ()
// {
// if(document.forms[0].firstname.value==""){alert("You must enter your first name.");return false;}}
// }
// else if(document.forms[0].lastname.value== ""){alert("You must enter your last name.");return false;}
// else if(document.forms[0].address1.value== ""){alert("You must enter your address.");return false;}
// else if(document.forms[0].city.value== ""){alert("You must enter a city.");return false;}
// else if(document.forms[0].state.value== ""){alert("You must enter a state.");return false;}
// else if(document.forms[0].zip.value== ""){alert("You must enter your zip code.");return false;}
// else if(document.forms[0].area.value== ""||document.forms[0].exchange.value== ""||document.forms[0].phone.value== "")
// {alert("You must enter a complete phone number.");return false;}}
// else {alert('Thank you! SRS will contact you within one business day.');}}
function isEmpty(strfirst, strlast, straddress, strcity, strstate, varzip)
{
strfirst = document.forms[0].firstname.value
strlast = document.forms[0].lastname.value
straddress = document.forms[0].address1.value
strcity = document.forms[0].city.value
strstate = document.forms[0].state.value
varzip = document.forms[0].zip.value
//name field
if (strfirst == "" || strlast == null || strfirst.charAt(0) == ' ')
{
alert("\"First Name\" is a mandatory field.\nPlease amend and retry.")
return false;
}
//last name field
if (strlast == "" || strlast == null || strlast.charAt(0) == ' ')
{
alert("\"Last Name\" is a mandatory field.\nPlease amend and retry.")
return false;
}
//address field
if (straddress == "" || straddress == null || straddress.charAt(0) == ' ')
{
alert("\"Address\" is a mandatory field.\nPlease amend and retry.")
return false;
}
return true;
}
//city field
if (strcity == "" || strcity == null || strcity.charAt(0) == ' ')
{
alert("\"City\" is a mandatory field.\nPlease amend and retry.")
return false;
}
//state field
if (strstate == "" || strstate == null || strstate.charAt(0) == ' ')
{
alert("\"State\" is a mandatory field.\nPlease amend and retry.")
return false;
}
}
function check(form)){
if (isEmpty(form.firstname)){
if (isEmpty(form.lastname)){
if (isEmpty(form.address1)){
if (isEmpty(form.city)){
if (isEmpty(form.state)){
}
}
}
}
}
return false;
}
</script>
</style>
</head>
<body>
<a name="top"></a>
<div id="container">
<div id="header">
<h1></h1>
</div>
<div id="content">
<h2>Contact SRS</h2>
<p>Use this page to contact SRS and/or order products and services. Refer to our <a href="services.htm">Services</a> page for pricing.</p>
<p><strong>Remember, our work is guaranteed or your money back!</strong></p>
</div>
<div id="sidebar">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="about.htm">About SRS</a></li>
<li><a href="services.htm">Services</a></li>
<li><a href="contact.htm">Contact SRS</a></li>
</ul>
<div class="widget">
Did you know that employers prefer CV's that are limited to three pages or less?
</div>
<div class="widget">
First impressions last a lifetime... write a Thank You letter EVERY time!
</div>
<div class="widget">
Want to know your personality type? Take this FREE <a href="http://www.careerfulfillment.com/?hop=daviduk"> personality test.</a>
</div>
</div>
</div>
<form method="get" enctype="application/x-www-form-urlencoded">
<table border="0">
<tr>
<td id="contact table" valign="top">
<h3><strong>Contact SRS</strong></h3>
<p><strong>* Required</strong><p>
<p>First Name*<br />
<input type="text" name="firstname" size="50" />
</p>
<p>Last Name*<br />
<input type="text" name="laststname" size="50" />
</p>
<p>Address*<br />
<input type="text" name="address1" size="50" /><br />
<input type="text" name="address2" size="50" />
</p>
<p>City, State, Zip*<br />
<input type="text" name="city" size="34" />
<input type="text" name="state" size="2" maxlength="2" />
<input type="text" name="zip" size="10" maxlength="10" onchange="return checkForNumber;" />
</p>
<p>Telephone*</p>
<p>(<input type="text" name="area" size="3" maxlength="3" onchange="return checkForNumber;" />)
<input type="text" name="exchange" size="3" maxlength="3" onchange="return checkForNumber;" />
<input type="text" name="phone" size="4" maxlength="4" onchange="return checkForNumber;" /></p>
<strong>Check the reason(s) for your inquiry?*</strong>
<p><input type="checkbox" name="geninquiry" value="General_Inquiry" />General Inquiry <br/>
<input type="checkbox" name="help" value="Help" />Help<br/>
<input type="checkbox" name="new_resume" value="Order New Resume" />Order a New Resume <br />
<input type="checkbox" name="Update_resume" value="Update My Resume" />Update My Resume <br/>
<input type="checkbox" name="cover_letter" value="Order Cover Letter" />Order a Cover Letter <br /></p>
<textarea rows="10" cols="50">Type your comments here</textarea>
<p><input type="button" name="Submit" value="Submit" onsubmit="return check(this);" /> <input type="reset" /></p>
</td>
</tr>
</table>
</form>
<a href="#top">Back to Top</a><br />
</body>
</html>
|
|||||||