JavaScript - Auto Complete Fields If A User Is Found Help

Let me start by saying I am not the best in JavaScript, so any help would be much appreciated. What i am trying to do is allow a user to get a quote on how much an item would be if they wanted to sell it. all the data is being generated dynamically on the item and passed to this JavaScript correctly. The issue is when a user changes his mind and switches his options a few times the price goes out of wack and some times will actually be more then the original price. For example. If the item was in mint condition it would be 100 dollars. If it is "
good condition" then it would loose lets say 20 percent, so it would be worth 80 dollars. Now each item has 3 sections of questions, what is the condition of the item, any "modifiers" like water damage or functional issues, and then third section is if its missing any parts or cables. All of this is being asked on 1 page, and when a user changes any of the options it should update the price on that page with out the user needing to press update.
So condition goes, 100%, 70%, 40%, 20%. Modifiers are 50 percent of current price of item, so if it was "perfect (yes I know an item cant be perfect and have water damage but this is just an example) thus being 100 dollars, and has water damage, that would make it now worth 50 dollars, and has functional issues, now worth 25 dollars. If it was missing cables, it would loose lets say 5 dollars so now its worth 20 dollars. Thats an example on how i calculate the value of the items. So once again, the actual amount is being passed correctly to this script, but when you make to many changes its not happy.



Here is the java code I have.

Code:

function calculateTotal(inputItem,amount1,percent1) {

  with (inputItem.form) {
    // Process each of the different input types in the form.

    if (inputItem.type == "radio") {   // Process radio buttons.
      // Subtract the previously selected radio button value from the total.

      if (inputItem.name =="conditions")
	  {

		if (percent1 ==100)
		{
			amount2= (amount1*percent1/100)-1;
		}
		if (percent1 ==70)
		{
			amount2 = (amount1*percent1/100)-2;
		}
		if (percent1 ==40)
		{
			amount2 = (amount1*percent1/100)-3;
		}
		if (percent1 ==20)
		{
			amount2 = (amount1*percent1/100)-4;
		}
		calculatedTotal.value = eval(amount2) ;
		


	  }
      // Save the current radio selection value.
      previouslySelectedRadioButton.value = eval(inputItem.value);

      // Add the current radio button selection value to the total.
      calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
    } else {   // Process check boxes.
      if (inputItem.checked == false) {   // Item was unchecked. Subtract item value from total.
       	   
	  if (inputItem.name =="modifiers1")
	  calculatedTotal.value = eval(calculatedTotal.value) / eval(percent1/100);
     if (inputItem.name =="modifiers2")
	  calculatedTotal.value = eval(calculatedTotal.value) / eval(percent1/100);
     if (inputItem.name =="extra1")
	  calculatedTotal.value =  eval(calculatedTotal.value) + eval(percent1) ;
     if (inputItem.name =="extra2")
	  calculatedTotal.value = eval(calculatedTotal.value) + eval(percent1)  ;
     if (inputItem.name =="extra3")
	  calculatedTotal.value = eval(calculatedTotal.value) + eval(percent1);
     if (inputItem.name =="extra4")
	  calculatedTotal.value = eval(calculatedTotal.value) + eval(percent1) ;	
	    
	   } else {   // Item was checked. Add the item value to the total.
     
	 if (inputItem.name =="modifiers1")
	  calculatedTotal.value = eval(calculatedTotal.value) *  eval(percent1/100);
     if (inputItem.name =="modifiers2")
	  calculatedTotal.value = eval(calculatedTotal.value) *  eval(percent1/100);
     if (inputItem.name =="extra1")
	  calculatedTotal.value = eval(calculatedTotal.value) - eval(percent1);
     if (inputItem.name =="extra2")
	  calculatedTotal.value = eval(calculatedTotal.value) - eval(percent1);
     if (inputItem.name =="extra3")
	  calculatedTotal.value = eval(calculatedTotal.value) - eval(percent1);
     if (inputItem.name =="extra4")
	  calculatedTotal.value = eval(calculatedTotal.value) - eval(percent1);


      }
    }

    // Total value should never be less than 0.
    if (calculatedTotal.value < 0) {
      InitForm();
    }

    // Return total value.
   
    return(formatCurrency(calculatedTotal.value));
  }
}

// Format a value as currency.
function formatCurrency(num) {
  num = num.toString().replace(/\$|\,/g,'');
  if(isNaN(num))
     num = "0";
  sign = (num == (num = Math.abs(num)));
  num = Math.floor(num*100+0.50000000001);
  cents = num%100;
  num = Math.floor(num/100).toString();
  if(cents<10)
      cents = "0" + cents;
  for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
      num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
  return (((sign)?'':'-') + '$' + num + '.' + cents);
}

// This function initialzes all the form elements to default values.
function InitForm() {
  // Reset values on form.
  document.selectionForm.total.value='$0';
  document.selectionForm.calculatedTotal.value=0;
  document.selectionForm.previouslySelectedRadioButton.value=0;

  // Set all checkboxes and radio buttons on form to unchecked.
  for (i=0; i < document.selectionForm.elements.length; i++) {
    if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
      document.selectionForm.elements[i].checked = false;
    }
  }
}



<!-- Paste this code into the HEAD section of your HTML document
   
</script>

Any help would be greatly appreciated.

Let me first say I am not a java programmer but I can follow the tutorials and get some things to work. Here I am trying to create a password protected page, realizing the level of security is not very high.

This page of code, link1.html, will be blank and if the correct password is entered then I want to automatically link to another page, barcs.html. I simply cannot find a way to do it.....Thanks

Code:

<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Psw test link 1</title>
  <script language="JavaScript">
<!--hide
var password;
var pass1="cool";
var pass2="awesome";
var pass3="geekazoid";
password=prompt('Please enter your password to view this page!',' ');
if (password==pass1 || password==pass2 || password==pass3)
alert('Password Correct! Click OK to enter!');
else
{
window.location="http://www.acma-rc.com/";
}
//-->
  </script>
</head>
<body>
This is link1.html<br>
</body>
</html>

The page loads and existing data is put in their correct fields.

When I click 'add more' to add more fields to the form it does so and I am able to add new data.

If on adding a new fields and its data I click 'add more' again it clears out the recently added data from the fields. The existing data that was present when the page first loaded is still their but all the new fields added data is cleared.

how can I get it so the data stays, like in phpmyadmin when adding new fields.


JS
Code:

function addmore(addwhat) {
	// count existing boxes to find out next number to use.
	// ?
	if (addwhat == 'addresses') {
	fieldid = 'addressesdiv';
	}
	if (addwhat == 'namesnumbers') {
	fieldid = 'namesdiv';
	}
	var dv = document.getElementById(fieldid).innerHTML;
	var lines = dv.match(/<br>/ig).length;
	
		if (addwhat == 'addresses') {
					document.getElementById('addressesdiv').innerHTML += '<textarea name="address' + lines + '" cols="30" rows="2"></textarea><br>';
					}
		if (addwhat == 'namesnumbers') {
					document.getElementById('namesdiv').innerHTML += '<textarea name="name' + lines + '" cols="30" rows="2"></textarea><br>';
					document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile' + lines + '" cols="30" rows="2"></textarea><br>';
					}
	}

PHP
Code:

<?
if ($_POST['Submit'] == 'Submit') {
echo("sent<br>");
for ($c = 1; $c <= (count($_POST)-1)/2; $c++) {
echo("name" . $c . " = " . $_POST['name'.$c] ."&nbsp;&nbsp;&nbsp;mobile" . $c . " = " . $_POST['mobile'.$c] . "<br>");
}
}

$customer_id = "11";

// get existing data.

// if not yet sent get data from databases
$ok = "no";
		if ($_POST['Submit'] != "Submit") {
		echo("<br>not sent<br>");
		$res = db_query("SELECT * FROM `customer_client_names` WHERE `customer_id` = '". $customer_id ."'");
		$maincount = mysql_num_rows($res);
		echo("<br>number of clients = ".$maincount."<br>");
			for ($c = 1; $c <= $maincount; $c++) {
			$_POST['name'.$c] = mysql_result($res, $c-1, "client_name");
			$_POST['mobile'.$c] = mysql_result($res, $c-1, "client_mobile");
			echo("cn = ".$_POST['name'.$c] . " cm = ".$_POST['mobile'.$c] . "<br>");
			}
		} else {
						// display last posted info
						echo("<br>sent<br>");

						$ok = "yes";
						// check if info was entrted correctly or not.
						
						for ($c = 1; $c <= ((count($_POST)-1)/2); $c++) {
							if ($_POST['name'.$c] != "" && $_POST['mobile'.$c] == "") {
							echo("<br>" . $_POST['name'.$c] ." was not given a mobile number<br>");
							$ok = "no";
							$maincount ++;
							}
							if ($_POST['name'.$c] == "" && $_POST['mobile'.$c] != "") {
							echo("<br>" . $_POST['mobile'.$c] ." mobile was not given a name<br>");
							$ok = "no";
							$maincount ++;
							}
						}

				}

if ($ok == "no") {
					?>
					<form name="form1" method="post" action="?ac=<?=$menu_item;?><? echo("&amp;phpsession=" . $phpsession); ?>">
					<div style="width: 850px;">
						<div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br>
							<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
							if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
							?>
							<textarea name="<?='name'.$c;?>" cols="30" rows="2"><?=$_POST['name'.$c];?></textarea><br>
							<?
							}
							} ?>
						</div>
						<div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br>
							<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
							if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
							?>
							<textarea name="<?='mobile'.$c;?>" cols="30" rows="2"><?=$_POST['mobile'.$c];?></textarea><br>
							<?
							}
							} ?>
						</div>
					</div>
					<br style="clear: both;">
					  <a href="#" onClick="javascript:addmore('namesnumbers'); return false;" >Add more</a> 
					  <input type="hidden" name="customer_id" value="<?=$customer_id;?>">
					  <input type="submit" name="Submit" value="Submit">
					</form>
					<?
					}
?>

I type something on the current textarea/input and all the values get removed after I add another field. Is there a solution?


Code:

<script language="Javascript" type="text/javascript">
<!--
//Add more fields dynamically.
function addField(area,field,limit) {
	if(!document.getElementById) return; //Prevent older browsers from getting any further.
	var field_area = document.getElementById(area);
	var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
	//Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
	//		field given in the argument is 'friend_' the last id will be 'friend_4'.
	var last_item = all_inputs.length - 1;
	var last = all_inputs[last_item].id;
	var count = Number(last.split("_")[1]) + 1;
	
	//If the maximum number of elements have been reached, exit the function.
	//		If the given limit is lower than 0, infinite number of fields can be created.
	if(count > limit && limit > 0) return;
 	
	 //Older Method
		
		field_area.innerHTML += "<li><textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /></li>";
	
}
//-->
</script>


<ol id="steps_area"><li>
<textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' />
</li>
</ol>

<input type="button" value="Add" onclick="addField('steps_area','',15);"/>

http://yfrog.com/ed20392020p

need 2 make those 2 pics in java n i dont even know where to start T-T, the one on the right is supoose to be like lil boat lookin things can anyone give me a place where i can learn to make a line then array it from the center?

I have been searching for years to get ahold of a complete reference to the ECMAscript languages.

I was recently watching some old videos by Douglas Crockford. He talked about the 'set' and 'get' statements. I had never heard of them before... and infact was one of the things I really missed from Delphi and have been wishing for in javascript.

Even now I can't find any references that contain them. I keep having this feeling that there is so much more in the language than I know about and there is no easy way to learn it.

Where is the most complete reference of the language?

David

Hello,

I am trying to complete a test site but adding some javascript.

In short I am trying to make the main content div slide from behind the nav via some JS. http://www.squareflash.com/test/index.html


First I am just trying to get the animate onClick to work. I found this practice site -- Using this I am trying to get some guidance on how to add a automatic stop function to the moveRight variable.
http://www.tutorialspoint.com/cgi-bi...=javascript_45

The site is in html5, is there anything special I need to know for that?

ty

This may seem a long shot, but 5 years ago I found a script that had everything (not just alpha, etc, but everything). I have looked at Jquery validation and while it is robust, many of the examples were bugged.

I am no coder, and I feel like I may be torched here for wasting precious space. However, I was really hoping you all could point me in a right direction. Perhaps if not java, with something else. Paid, Donate, Free. Anything.

(The only script I have on form now is just Auotab next/prev plugin for jquery)


Function required:
Inline on change/next type matching (confirm email/pw fields) basic formatting (numeric only, alpha with spaces, etc) Basic validation of email type expressions, etc Required fields, etc

However, I would love to take it a step further Email: Checks for valid TLD Password: sctricter requirements Phone: Requires legitimate values (not just numeric); ie: 201-999, no 555, 411,611,911, etc Date of birth: Checks valid ranges of dates entered; checks min/max age requirement Possible real time database or web services checks (which would be ajax, etc im sure) custom number values (ie, for credit cards, number must be xxxx-xxxx (not 0000-1111-2222-3333 Any other possible logical info, for instance, Name not in badnames list (like Fred Flinstone, IP Freely, or other Cuss words/phrases)

Yes, I know most of these would wind up as a server side reject on the submit page, where we could possibly recapture the data. However, that type of method typically lowers conversions.

Yes, there is the Jquery plugin, and with knowhow, you can make it do this, however I dont have the knowhow and would rather donate/pay for something already out of the box.

The use for this would be contact forms, profile forms, info requests, sales pages,

I'm building a website to catalog a history of college football uniforms, and having something like this on several of the pages would be extremely helpful. I've been told that making it in Javascript instead of Flash would be better for my website. I've also been told that it should be relatively easy to write the code for it.

In short, I want to be able to take the parts of this image and allow viewers of the site to be able to switch between parts to mix and match. There are quite a few teams with six or more possible uniform combinations, so I'd like to be able to do this for the site.

This would probably be a good way to get my start on learning at least some Javascript basics, so would anyone be willing to help me put this together?

Hi, I'm trying to work through a head first book on ajax and javascript. I am also trying to emplement some of the codes in a small application I had built strictly with server side code.

What it does is: two input fields for user defined values. Once the user inputs the two values, they are passed to the action page, some simple math is performed on these 2 values, and then 4 different resluts are displayed back on the action page. What I wanted was of course to make this asynchronous and display the results without a page reload.

So, when I reworked the book code for my own use, and try to run the application, I get an error saying my url variable is undefined. The value of the first input seems to be passed though.

One thing of note to mention is the application was written in coldfusion. The form values are passed using cf. Not sure if that matters. I mean cf works well with js and ajax, but maybe my original procedure doesnt work with my js code as it is now.

Here is the javascript/ajax code:
PHP Code:
<script type="text/javascript" language="javascript">
var request = null;

      try {
          request = new XMLHttpRequest();
      }   catch (trymicrosoft) {
          try {
              request = new ActiveXObject("Msxm12.XMLHTTP");
          } catch (othermicrosoft) {
              try {
                  request = new ActiveXObject("Microsoft.XMLHTTP");
              }   catch (failed) {
                  request = null;
          }
      }

  if(request == null)
  alert("Error creating request object!");
  }
  
  function getLampVolts() 
  {
      var lamp = document.getElementById("lampVoltage").value;
      var url = "calculatorAction.cfm?lamp = " + escape(lampVolts);
      request.open("GET", url, true);
      request.onreadystatechange = updatePage;
      request.send(null);
  }
  function updatePage()
  {
    if(request.readyState == 4)
    {
        if(request.status == 200)
        {
            
        var lumens = request.responseText;
        document.getElementById("lumens").value =
        lumens;
        }
        else
         alert("Error! Request Status is " + request.status);
    }
  }
</script> 


Here is the form:
Code:

<form action="calculatorAction.cfm">
  <table>
    <tr>
      <th>Lamp Voltage</th>
      <td><input name="lampVoltage" id="lampVoltage" type="text" /></td>
    </tr>
    <tr>
      <th>Socket Voltage</th>
      <td><input name="socketVoltage" id="socketVoltage" type="text" /></td>
    </tr>
    <tr>    
      <td><input type="button" value="Submit" onClick="getLampVolts();" /></td>
      <td><input type="reset" value="Reset" /></td>
    </tr>
  </table>

and here is my action page calculatorAction.cfm:
Code:

<cfparam name="bulbCalculator.cfm" type="any" default="0">
<!--- Set User Defined Values of Form --->
<cfset lampVolts = FORM.lampVoltage>
<cfset actualVolts = FORM.socketVoltage>
<!--- Set Constants For Calculations --->
<cfset lumens = 27500>
<cfset life = 500>
<cfset watts = 65>
<cfset colorTemp = 3500>
<!--- Perform Calculations --->
<cfset actualLumens = ((actualVolts/lampVolts)^3.4)*lumens>
<cfset lumenPercent = actualLumens/lumens*100>
<cfset hours = ((lampVolts/actualVolts)^13)*life>
<cfset hourPercent = hours/life*100>
<cfset actualWatts = ((actualVolts/lampVolts)^1.3)*watts>
<cfset wattPercent = actualWatts/watts*100>
<cfset temperature = ((actualVolts/lampVolts)^.42)*colorTemp>
<cfset tempReduction = temperature-colorTemp>

<!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>Untitled Document</title>
</head>

<body>
<cfsavecontent variable="calculations">
<table>
  <cfoutput>
    <tr>
      <td>Lamp Rated Voltage:</td>
      <td>#lampVolts#</td>
    </tr>
    <tr>
      <td>Socket Application Voltage:</td>
      <td>#actualVolts#</td>
    </tr>
    <tr>
      <td id="lumens">Percent of Lumens Used:</td>
      <td>#round(lumenPercent)#%</td>
    </tr>
    <tr>
      <td>New Rated life in Percentages:</td>
      <td>#round(hourPercent)#%</td>
    </tr>
    <tr>
      <td>Percent of Watts Used:</td>
      <td>#round(wattPercent)#%</td>
    </tr>
    <tr>
      <td>Change in Temperatu </td>
      <td>#round(tempReduction)#&deg;</td>
    </tr>
  </cfoutput>
</table></cfsavecontent>
</body>
</html>

Again, the url variable says it is undefined. But the variable "lamp" contains the form field value.

Thanks for any help and tips in advance!

Hello,

I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible.

I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading:

Code:

<td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td>

The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script.

The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue..

http://watch-movies-online.anyfilman...-Movie-17.html

To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com.

If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required.

Please feel free to ask any questions, i'll be happy to answer.

Thanks in advance.

Best Regards,
Jonathan.

Every year or two, I want to do something SIMPLE via JS, and each time it's like i've never been there before

I simply want a button to show/hide something on click, and I THINK I'm close, but it's not quite working.

Here's what I'm toying with.
Code:

<html>
  <head>
    <script type="text/javascript">
      function showHide("idName") {
        if(document.getElementById("idName").style.visibility=="hidden") {
          document.getElementById("idName").style.visibility=="visible";
        }
        else {
          document.getElementById("idName").style.visibility=="hidden";
        }
      }
    </script>
  </head>
  <body>
    <button type="button" onclick="showHide(1)">Click Me!</button>
    <div id="1" "style=visibility:hidden;"><p>this is the stuff.</p></div>
  </body>
</html>

How do I get the button to make that div (in)visible??
~Mo

I need javascript event calendar sourcecode with highlighting of colors when dates selecting from datepicker of DHTMLgoodies calendar

I am trying to trigger one custom function or another, depending on whether a radio button is checked or not.

How can this be done? (I was hoping that "self" would be the ticket, but I think I was barking up the wrong tree.)
Code:

function toggleFieldsetByRadio(element){
  if(SELF.checked){
    enable(element);
  }else{
    disable(element);
  }
}

How should I do this?
I am hoping to use this function with an onchange event.

~ Mo

epic thread title!


Right I have a process page in php which is fairly long and complex with many options. If a certain option case is met as this ie: we've hit the Note Saved case.

PHP Code:
// save notes against company
if ($_POST['a']=="Save Note") {
    if (addnote($_POST['notetitle'],$_POST['notebody'])) {
        $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Note Saved</strong></font></p>";
    } else {
        $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Failed to save note.</strong></font></p>";
    }
} 


I want to then wait until the page load is complete and then do the following.

PHP Code:
document.getElementById('addevent').style.display='block'; 


The reason I need to wait for page complete is that the div that needs to be displayed it one of the last parts of the page rendered so triggering the above too soon leads to the div not actually being available to be shown.

Now my current fail attempt at doing it was this
PHP Code:
echo "<script type=\"text/javascript\">if (confirm('You have not yet added a call back event do you wish to do so now?')) { document.getElementById('addevent').style.display='block'; } 


However it doesn't display the hidden div like i want it to as it holds the page rendering off until the confirm is completed are there any suggestions of better ways or should I say CORRECT says of doing this.