JavaScript - Textbox Stored To Array Then Displayed In Textarea

Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be?

Code:

<form name="signup" action="javascript:void(0);" method="post">

<table>
	<tr>
		<td>Date Of Birth:</td>
		<td>
		<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
		<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
		<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
	</tr>
	<tr>
		<td></td>
		<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
	</tr>
</table>
</form>

<script type="text/javascript" language="javascript">
<!--
	document.signup.DOBmonth.value="MM";
	document.signup.DOBday.value="DD";
	document.signup.DOByear.value="YYYY";

function clearDOBmonth() { document.signup.DOBmonth.value="";}
function clearDOBday() { document.signup.DOBday.value="";}
function clearDOByear() { document.signup.DOByear.value="";}
function restoreDOBmonth()
	{
		if ('document.signup.DOBmonth.value = ""')
			{
				document.signup.DOBmonth.value = "MM";
				// alert(document.signup.DOBmonth.value);
			}
	}

//-->
</script>

Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code:

var a = document.form.textbox.value;
a = blue;

does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks!

Hi i have a problem, i've been trying to fix this for the whole day

pls see my code below

Code:

for ($o = 0; $o <= $totalclass; $o++) 
{ 
	for($i = 1; $i <= 45; $i++)
	{
		if ($_SESSION['classification'][$o] == $i) 
		{
			$sql2="SELECT ClassDesc FROM tblclass WHERE ClassID = '$i'";
			$result2=mysql_query($sql2);
			
			// If successfully queried
			if($result2)
			{
				while ($row2 = mysql_fetch_assoc($result2)) 
				{
					$ClassDesc2 = $row2['ClassDesc'];
				}
			}
			//echo $ClassDesc2;
		?>
			<tr>
			<td bgcolor="FAFAF6" class="small" valign="top">Class <? echo $i; ?></td>
			<input type="hidden" name="<? echo "classid[]"; ?>" value="<? echo $i; ?>">
			<td bgcolor="FAFAF6">
			<textarea name="<? echo "specification[]"; ?>" COLS="50" ROWS="6" class="small" wrap="virtual" tabindex="<? echo $i; ?>"><? echo $ClassDesc2;?></textarea>
			<input type="button" value="Reset" onclick="window.reset();" name="reset">
			</td>
			</tr>
		<?			 
		}
	}
}

i've trying to create a button or image to reset one textarea (from whole array) and so far i've been unsuccessful.

i've seen this on other website and i know it is possible to do this, pls help!

Hello there. I'm having trouble with cookies. I have a bunch of links that when clicked on, create a cookie. For each link I need to be able to save that cookie value to the main cookie name.

Here is the click function I'm using to create the cookie:

$j('a.createCookie').click(function(e) {

var cookieName = "InsightsCookie";

var cookieValue = $j(this).attr("id");

$j.cookie(cookieName, cookieValue, {expires: 365, path: '/'});
});

The end result would be "InsightsCookie: cookieValue, cookieValue, cookieValue" - where each link clicked on would add a value to InsightsCookie.

Any help would be much appreciated.

Hello,

I am trying to retrieve a cookie I stored with Perl through javascript. Based on the contents of the cookie, I want the javascript to print/not print an extra link on my page. Below is the code, in Perl, I am using to store the cookie. In the Perl forum I was told to post in here for the javascript help.

The basic idea is that if the cookie has a "Role" of "Super," the ADMIN link displays on the page. If the role doesn't have "Super," the link is hidden.

Any help you could offer would be greatly appreciated. Thanks a lot.

Code:

#!/usr/local/bin/perl


# This page was created and worked on by 2/C Collard, 2/C Waymouth, 2/C Troisi, and 2/C Cunha 
#source: http://forums.speedguide.net/showthread.php?t=190821

# PERL MODULES WE WILL BE USING
use DBI;
use DBD::mysql;
use CGI qw( :standard );
use CGI::Carp qw(fatalsToBrowser);

#print "Content-type: text/html \n\n";

$userPassed = param("userID");

# CONFIG VARIABLES
$platform = "";
$database = "";
$host = "";
$port = "";
$tablename = "";
$user = "";
$pw = "";

# DATA SOURCE NAME
$dsn = "dbi:$platform:$database:$host:$port";

# PERL DBI CONNECT
$connect = DBI->connect($dsn, $user, $pw)
or die "Connection Error: $DBI::errstr\n";

# PREPARE THE QUERY
my $query = "SELECT * FROM $tablename WHERE User = '$userPassed'";
my $query_handle = $connect->prepare($query);

#print ($query);

# EXECUTE THE QUERY
$query_handle->execute();

while (@row = $query_handle->fetchrow_array) {
	$roleIn = "$row[2]";
	#print ("$roleIN");
	}
	
$query = new CGI; # create a new CGI object
$cookie = $query->cookie ( -name => 'Role',
                           -value => '$roleIn',
                           -path => '/',
                           -expires => '+60m');

$location = '';

print $query->header(-cookie=>$cookie);
print qq{<meta http-equiv="REFRESH" content="0;URL=http://www.togoto.com">\n};

# HTTP HEADER
#print( header() );
#print ( start_html() );

# Print XHTML footer
#print ( end_html() );

Hi,

I need a javascript function to show and allow user to access Browser stored Favorites and Recent History in a web page.


Thanks,
GravityPush

I have garlic.js automatically local storing my radio button value but the onclick function does not run when the page reloads. Is there a way to work around this ??





Reply With Quote




01-15-2015, 11:17 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts

And we are supposed to guess what "garlic.js" is doing? Or what it is? And do you really mean that the onclick event handler does not work? Or do you mean that the radio buttons are set to a different state but the click() for the chosen button is not executed? That is, it is not the onclick that is missing, it is the click ??

I'm using a image of the day script and my pictures will not be located at the site where the code will be.


Code:

images[0] = "<img src='yourimage.jpg'>"

Do I/can I use the link such as
<a href="http://www.sample.com/mphases.htm">

right where (yourimage) is, in between the quotes to link to an offsite picture?
Could someone retype this snippet of code showing how it would look for me?

Thanks

Hi, I tried displaying few images as MENU using Javascript. These images are showed normally in Firefox and chrome except Internet Explorer. Help plz

Code:

function my_fav_quote_show_optin_form() {	

	if (!empty($_POST['my_fav_quote_email'])) {
	
		my_fav_quote_opt_in();
	}
		$out2 = '';
		
		$out = '<form action="" name="myform "method="post" id="requestQuote">';
		$out .= '<table style="padding="0px" width="40px">';
		$out .= '<tr><td>Name:*</td><td><input type="text" name="my_fav_quote_name" id="my_fav_quote_name"/></td></tr>';
		$out .= '';
		$out .= '<tr><td>Email:*</td><td><input type="text" name="my_fav_quote_email" id="my_fav_quote_email"/></td></tr>';
		
$out .= '';
		$out .= '<tr><td>Phone:*</td><td><input type="text" name="my_fav_quote_phone" id="my_fav_quote_phone"/></td></tr>';

$out .= '';

$out .= '<tr><td>Event Date(optional):</td><td><input type="text" name="my_fav_quote_date" id="my_fav_quote_date"/></td></tr>';
		$out .= '';

$out .= '<tr><td>Estimated Number of Guests(optional):</td><td><input type="text" name="my_fav_quote_guest" id="my_fav_quote_guest"/></td></tr>';
		$out .= '';

$out .= '<tr><td>Desired Price Range Per Person (optional):</td><td><input type="text" name="my_fav_quote_rate" id="my_fav_quote_rate"/></td></tr>';
		$out .= '';
		$out .= '<tr><td style="vertical-align: middle;">Message:<br>(List your special requests, any food allergies , event description , special menu items that are not listed or any other information you think will helpful) </td><td><textarea placeholder=""  name="my_fav_quote_message" id="my_fav_quote_message"></textarea></td></tr>';
		$out .= '';
		$out .= '<tr><td>Security code:*</td><td><img src='.get_bloginfo('wpurl').'/wp-content/plugins/quote-cart/captcha.php?width=60&height=30&characters=5" /></td></tr>';
		$out .= '';
		$out .= '<tr><td>Input Above Security Code He *</td><td><input type="text" name="security_code" id="security_code" size="5"></td></tr>';
		$out .= '';

		$out .='<tr><td colspan="2">';
		if ( function_exists( 'my_fav_quote_display' ) ){
			$out .= my_fav_quote_display();
		}



		if ( function_exists( 'my_fav_quote_display3' ) ){
			$out .= my_fav_quote_display3();
		}
		
		
		$out .='</td></tr>';
		$out .= '<tr><td colspan=2 align=center><input type="submit" value="Request Quote" onclick="return chk_validation()" style="background-color:#000;color:#FFF;padding:5px;margin-top:10px;border:none;cursor:pointer;"/>  
		<input type="button" onclick="formReset()" value="Reset form" />

</td></tr>';
		
		$out .='</table></form>';
		echo $out;
		?>
			<script language="javascript" type="text/javascript">
		//<![CDATA[
				function validate_email(field,alerttxt)
				{
				
				  apos=field.indexOf("@");
				// alert(apos);
				  dotpos=field.lastIndexOf(".");
				   //alert(dotpos);
				  if (apos<1||dotpos-apos<2)
					{ return false;}
				  else {return true;}
				  
				}
				function chk_validation()
				{
					if(document.getElementById("my_fav_quote_name") && document.getElementById("my_fav_quote_name").value == '')
					{
						alert("Please Enter Name");
						document.getElementById("my_fav_quote_name").focus();
						return false;
					}
					
					if(document.getElementById("my_fav_quote_email").value == '')
					{
						alert("Please Enter Email");
						document.getElementById("my_fav_quote_email").focus();
						return false;
					}
					else
					{
					
					//alert(validate_email(document.getElementById("my_fav_quote_email").value,"Not a valid e-mail address!");
						if (validate_email(document.getElementById("my_fav_quote_email").value,"Please enter valid e-mail address!")==false)						{
						alert("Please enter valid e-mail address!");
						document.getElementById("my_fav_quote_email").focus();
						return false;
						}
					}
					if(document.getElementById("security_code").value == '')
					{
						alert("Please Enter Security Code");
						document.getElementById("security_code").focus();
						return false;
					}
					if(document.getElementById("quotes").value == '')
					{
						alert("Please add atleast one request quote");
						document.getElementById("quotes").focus();
						return false;
					}
					//return true;
				}

				
				
				//]]>
	
			</script>
<?php

}

can we reset the display functions data when we click on reset button?

Hello everyone!
Hi, I am a complete beginner at Javascript(started a few days ago) and was having trouble with some functions. I'm trying to get the inputs required to change based on an option selected in a drop down menu. I was intending to run different scripts based on whatever is chosen but when I ran a test using an alert function, I realized my code isn't working. I went online and found really confusing stuff like "running a for loop through an array to make a dynamic select feature". Still confused any help would be appreciated.
My code thus far:

Code:

<html>
<head>
<title>Practice</title>
<script language="javascript">
function myScript()
{
var loanType = document.form1.loan.options.text
if (loanType == "Bank A")
{
alert("Working")
}
}
</script>
</head>
<body>
<form name="form1">
<select id="loan" name="loan" onchange="myScript">
<option></option>
<option>Bank A</option>
<Option>Bank B</Option>
</select>
</form>
</body>
</html>

Reply With Quote




01-29-2015, 12:02 PM #2
vwphillips View Profile View Forum Posts Visit Homepage

Senior Coder Join Date Mar 2005 Location Portsmouth UK Posts 4,540 Thanks 3 Thanked 513 Times in 500 Posts

Code:

<html>
<head>
<title>Practice</title>
<script language="javascript">
function myScript()
{
var s=document.form1.loan,loanType = s.options[s.selectedIndex].text
if (loanType == "Bank A")
{
alert("Working")
}
}
</script>
</head>
<body>
<form name="form1">
<select id="loan" name="loan" onchange="myScript();">
<option></option>
<option>Bank A</option>
<Option>Bank B</Option>
</select>
</form>
</body>
</html>

or better

Code:

<html>
<head>
<title>Practice</title>
<script language="javascript">
function myScript(s)
{
if (s.value == "Bank A")
{
alert("Working")
}
}
</script>
</head>
<body>
<form name="form1">
<select id="loan" name="loan" onchange="myScript(this);">
<option></option>
<option value="Bank A" >Bank A</option>
<Option value="Bank B">Bank B</Option>
</select>
</form>
</body>
</html>

Hello.
I have a <div> html element which contains other html tags, as well as plain text inside those tags. How do I grab only the content within the div that will actually be displayed in the browser, and put it in a Javascript string variable?

Thanks in advance.

Can anyonle pls explain me why the return function is not returning the result as intended? I appreciate you help


OUTPUT
======

Student : Doe,John
eMail : johndoe@gmail.com
Course ID : COIN-070B.01
--------------------------------
function task() { var title = ["Assignment1", "Assignment2", "Assignment3", "Assignment4", "Assignment5", "Mid Term", "Finals"]; var points = [30, 30, 28, 27, 29, 41, 45]; for (var i = 0; i < points.length; i++) { titlePoints += title[i] + (" : " + points[i] + "\n"); } return titlePoints; }


Code:

<head>
<title>Variable - Examples 1</title>
   <script type="text/javascript">
	function Student(firstName, lastName, email,courseID){
		this.firstName = firstName;
		this.lastName = lastName;
		this.email = email;
		this.courseID = courseID;
                 this.assignments = task; 
	}
	
	Student.prototype = {
		constructor : Student,
		toString : studentInfo
	};
	
	 function task(){
		var title = ["Assignment1","Assignment2","Assignment3","Assignment4","Assignment5","Mid Term", "Finals"]
		var points = [30, 30, 28, 27, 29,41,45];
                var titlePoints = "";
		for (var i=0; i < points.length; i++){
			titlePoints += title[i] + " : " + points[i] + "\n";
		}
		return titlePoints; 
	} 
	
	
	function studentInfo(){
			 return "Student : " + this.lastName + "," + this.firstName + "<br>"+ "eMail : " + this.email + "<br>" + "Course ID : " + this.courseID + "<br>" + "--------------------------------" + "<br>" + this.assignments;
	}
	var student = new Student("John", "Doe", "johndoe@gmail.com","COIN-070B.01");
	
   </script>
</head>
<body>
	<script type="text/javascript">    
		document.writeln(student.toString());
	</script>
</body>
</html>

Good Day,

I am very new to JavaScript and I am working on an assignment that is almost finished, but I have a problem getting the result to work. When I enter the two values and then hit submit, nothing is returned. I am guessing that either my code is incorrect or I have used the wrong ids maybe.

Basically, the user enters 2 parameters (hourly wage and hours worked) and the first function turns the parameters into the gross pay (depends on if the hours are standard pay or if overtime is involved).

The second function takes the gross pay and does the tax amounts for local, state and federal. Then it adds all taxes to give a total of tax amount paid.

The input for the parameters is done by <input> tag. The return reslut is supposed to be just the number which is the total amount of taxes to be taken out. This all has to be done by <input> tags.

Could someone look over the html and JS and help me find where the problem is at. The instructor said we could use ? : operator for determining the pay rates, but I found it easier to do if/else staements because I was not sure how you would script that. Any help would be great.

Thanks

HTML Code
Code:

<!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>Calculate Tax Amount</title>
<link href="style.css"  rel="stylesheet" type="text/css">
<script type="text/javascript" src="calculateGross.js"></script>
<script type="text/javascript" src="calculateTax.js"></script>

</head>

 <body>
 <table width="60%" border="0" cellpadding="0" cellspacing="2" align="center" class="view">
  <tr>
  	<td colspan="3" class="textview">Calculate the gross pay:</td>
	 
  </tr>
  <tr>
    <td class="labeltext">Pay rate(dollars per hour)</td>
	<td>:</td>
    <td><input type="text" name="payrate" id="payrate" class="textval"></td>
  </tr>
  <tr>
    <td class="labeltext">Hours worked</td>
	<td>:</td>
    <td><input type="text" name="hours" id="hours" class="textval"></td>
  </tr>
   <tr>
    <td colspan="3" align="center"><input type="button" name="" value="Submit" onclick="return calculate(); "> 
    </td>
  </tr>
</table>
<br>
<br>
<table width="60%" border="0" cellpadding="0" cellspacing="2" align="center" class="view">
  <tr>
  	<td colspan="3" class="textview">Total Tax Paid:</td>
	 <tr>
	 	</tr>
    <td class="labeltext">Grand Total of Taxes</td>
	<td>:</td>
    <td><input type="text" name="total" id="totalTax" class="textval" disabled="disabled"></td>
  </tr>
  </table>
</body>
</html>

First Function JS
Code:

function calculate() {  

	var payRate = document.getElementById("payrate").value;
	var hoursWorked = document.getElementById("hours").value;
	var oTime;
	var oPay;
	var oHour;
	var grossPay;
	
	if(hoursWorked > 40)
	{
		oTime	=	 Number ( hoursWorked ) - 40;
		oPay	=	 Number ( ( payRate ) * 1.5 ) * oTime;
		oHour	=	 Number ( hoursWorked )- Number ( oTime );

	    grossPay	=	 Number ( payRate ) * Number ( oHour )
		 + Number ( oPay );
	}
	else 
 
 		grossPay	=	 Number ( hoursWorked ) * Number ( payRate );
		
}

The second function JS
Code:

function calculateTax(gross) {
	
	var gross;
	var localTax;
	var localTaxBal;
	var stateTax;
	var stateTaxBal;
	var fedTax;
	var fedTaxBal;
	var totalTax;
	
	localTax    = Number ( gross ) * 2/100;
	localTaxBal = Number ( gross ) - Number ( localTax );
	
	stateTax    = Number ( localTaxBal ) * 8/100; 
	stateTaxBal = Number ( localTaxBal ) - Number ( stateTax );
	
	fedTax    	= Number ( stateTaxBal ) * 31/100;
	fedTaxBal 	= Number ( stateTaxBal ) - Number ( FedTax );
	
	totalTax	= Number ( localTax.toFixed(2) ) + Number ( stateTax.toFixed(2) ) + Number ( fedTax.toFixed(2) );
	 
	return totalTax.toFixed(2);
	
}

Hi, I am a complete beginner at Javascript(started a few days ago) and was having trouble with some functions. I'm trying to get the inputs required to change based on an option selected in a drop down menu. I was intending to run different scripts based on whatever is chosen but when I ran a test using an alert function, I realized my code isn't working. I went online and found really confusing stuff like "running a for loop through an array to make a dynamic select feature". Still confused any help would be appreciated.
My code thus far:
<html>

<head>

<title>Practice</title>
<script language="javascript">
function myScript()
{
var loanType = document.form1.loan.options.text
if (loanType == "Bank A")
{
alert("Working")
}

}

</script>

</head>

<body>
<form name="form1">
<select id="loan" name="loan" onchange="myScript">
<option></option>
<option>Bank A</option>
<Option>Bank B</Option>
</select>
</form>
</body>
</html>





Reply With Quote




01-08-2015, 10:52 AM #2
Primus View Profile View Forum Posts

New Coder Join Date Oct 2014 Posts 92 Thanks 0 Thanked 14 Times in 14 Posts

Code:

<script>
    function myScript()
	{
		var selectedIndex = document.form1.elements.loan.options.selectedIndex; // returns 0-2 in this case
		var loanType = document.form1.elements.loan.options[selectedIndex].value; // returns the value of the selected item
		if (loanType == "Bank A")
		{
			alert("Working")
		}

	}	
</script>
<form name="form1">
<select id="loan" name="loan" onchange="myScript()">
<option></option>
<option>Bank A</option>
<option>Bank B</option>
</select>
</form>

Maybe not the best way, but it does the trick.





Reply With Quote

01-08-2015, 11:43 AM #3
Philip M View Profile View Forum Posts

Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts

You have quite a lot of obsolete code:-

1) It is obsolete to assign a name to a form and permitted only for the sake of backwards compatibility.
2) <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9).
3) Scripts should normally be placed right in front of the </body> tag. Any script can optionally go in the head if you wrap it inside a load event listener so that it can't run before the page loads.
4) Use the value of a select box option, not the text.
5) It is recommended that you place the opening brace following the function, if, else, for, while, do, switch, and try statements on the same line and not on the following line. Apart from that every Javascript statement should be followed by a semi-colon (;). It is quite possible to disregard this advice, but if you do one day it will rise up and bite you in the undercarriage.


Code:

<html>
 <head>
 <title>Practice</title>
 </head>

 <body>
 <form>
 <select id="loan" name="loan" onchange="myScript()">
 <option value = "">Chosoe...</option>
 <option value = "Bank A">Bank A</option>
 <Option value = "Bank B">Bank B</Option>
 </select>
 </form>

<script type = "text/javascript">

 function myScript()  {
 var loanType = document.getElementById("loan").value;
 if (loanType == "Bank A")  {
 alert("Working")
 }
 }

 </script>

 </body>
 </html>

If you really want to use the option text ...

Code:

<html>
 <head>
 <title>Practice</title>
 </head>

 <body>
 <form>
 <select id="loan" name="loan" onchange="myScript(this)">
 <option value = "">Choose...</option>
 <option value = "Bank A">Bank A</option>
 <Option value = "Bank B">Bank B</Option>
 </select>
 </form>

<script type = "text/javascript">

function myScript(element)  {
var loanType = element.options[ element.selectedIndex ].text;
if (loanType == "Bank A")  {
alert("Working")
}
}

 </script>

 </body>
 </html>

The Warrington players can hang their heads high. - Commentator, BBC Radio 2