JavaScript - Add Textbox Content To Select Field?

I have a telephone input on my form. It is an optional input for users. The prompt begins with the user having to select a phone type from a select menu, and then continue to the text fields to enter the digits. I would like to have the text fields disabled unless any of the types of phone are selected, but not if a type isn't selected. Here's my HTML code so far:

Code:

<select name="phoneType1">
	<option value="" selected="selected">Type...</option>
	<option value="Home">Home</option>
	<option value="Work">Office</option>
	<option value="Cell">Cell</option>
</select> 
	(<input type="text" id="phAreaCode1" name="phAreaCode1" size="2" maxlength="3" onkeyup="moveOnMax(this,'phPrefix1')"/>) - 
	<input type="text" id="phPrefix1" name="phPrefix1" size="2" maxlength="3" onkeyup="moveOnMax(this,'phLine#1')"/> - 
	<input type="text" id="phLine#1" name="phLine#1" size="5" maxlength="4"/> 
	&nbsp;&nbsp;&nbsp;&nbsp;ext.<input type="text" name="phExtension1" size="4" maxlength="4"/>

I know that all I need to do to disable the text fields is to type in "disabled" before the name of the field. But, I don't know how to enable it when "Home," "Office," or "Cell" is selected. Thanks for any help.

I am finishing up my Form page, and totally forgot to have a numeric only field. So I added it and I can't get it to work. I also am having issues throwing an error when you don't select at least one topping.

And are these lines correct?
Code:

document.cookie = "toppings=" + encodeURIComponent(document.getElementsByName("toppings[]").value);

Code:

document.cookie = "extra=" + encodeURIComponent(extra);

Here is a link to the page hosted on my dropbox

http://dl.dropbox.com/u/49211616/dw/...orderPage.html

Javascript:
Code:

function validateOrder ()
{
	var crustSelection = document.orderForm.crust.value; 
	var crustPrice; //Adds $1 for Deep DishParmesagn, and Sourdough 
	var count = 0; //Amount of Toppings Selected
	var choice = ""; //Toppings Selected list
	var x = ""; //Don't need for the Cookie
	var extra = 0; //extra charge for toppings over 3
	try{
		  
        var error = ""; // Initialize Var to store the error messages.
        

	if(document.getElementById("delivery").checked != true &&
           document.getElementById("takeout").checked != true)
	{
           error=error+"Order Type is required.\n"
                }
	if(document.getElementById("fname").value == "")  
	{
        error = error + "First Name is required.\n";
        	}
        if(document.getElementById("lname").value == "") 
	{
        error = error + "Last Name is required.\n";
        	}
        if(document.getElementById("address").value == "") 
	{
        error = error + "Street address is required.\n";
        	}
        if (isNaN(document.getElementById("quantity")))
	{
error = error + "Enter Pizza Quantity in Numbers Only.\n";
			} 
	    if(document.getElementById("crust").value == "") 
	{
        error = error + "Crust Type is required.\n";
        	} 
		if(document.getElementsByName("toppings").value == 0) 
	{
        error = error + "Select at Least One Topping.\n";
        	} 

	if(error == "") 
	{
        // save all the information in the cookie
document.cookie = "firstName=" + encodeURIComponent(document.getElementById("fname").value);
document.cookie = "lastName=" + encodeURIComponent(document.getElementById("lname").value);
document.cookie = "address=" + encodeURIComponent(document.getElementById("address").value);
document.cookie = "order=" + encodeURIComponent((document.getElementById("delivery").checked) ? "delivery" : "takeout");
document.cookie = "quantity=" + encodeURIComponent(document.getElementById("quantity").value);
document.cookie = "quantity=" + encodeURIComponent(document.getElementById("quantity").value);
document.cookie = "crust=" + encodeURIComponent(document.getElementById("crust").value);
document.cookie = "toppings=" + encodeURIComponent(document.getElementsByName("toppings[]").value);      
alert("Order successfully Placed!");
		}
		else 
		{
             alert(error);
        }
    }
	catch(ex) 
	{
        alert("An error occurred!.\n" + "Error Name : " + ex.name + "\nError Message : " + ex.message);
    }
	
for (var i=1; i<11; i++) 
{
x = document.orderForm['toppings' + i].value;
if (document.orderForm['toppings' + i].checked) 
{
choice = choice + "  " +  x ;
count ++;   
} 
}  
if (choice.length <= 0) 
{
choice = choice + "NONE";
}
if (count > 3)
{
	extra = (count - 3) * 1 
}
document.cookie = "extra=" + encodeURIComponent(extra);  
}
</script>

HTML:
Code:

<form name = "orderForm" onsubmit="validateOrder()">
<table width="600" border="0">
  <tr>
    <th scope="col" width="400" align="left"><b>First Name</b><br /><input type="text" id="fname" name="fname" size=30>
<br />
<br />
<b>Last Name</b><br />
<input type="text" id="lname" name="lname" size=30>
<br />
<br />
<b>Street Address</b><br />
<input type="text" id="address" name="address" size=30>
<br />
<br />
<input name="orderType" value="delivery" id="delivery" type="radio">Delivery</font>
<input name="orderType" value="takeOut" id="takeout" type="radio">Take Out</font></th>
    <th scope="col" width="200" align="Left">
    How Many Pizzas? <input type="text" id="quantity" name="quantity" size=5>
    <br />
    <br />
    <select name="crust" id="crust">
  <option selected value="false">Select Crust Type</option>
  <option value="regular">Regular Crust</option>
<option value="thin">Thin Crust</option>
  <option value="deep">Deep Dish</option>
  <option value="Parmesagn">Parmesagn Cheese</option>
  <option value="sourdough">Sourdough</option>
</select>
<br />
<br />
Select at Least One Topping:
<br />
<br />
<input name = "toppings1" type = "checkbox" value = "extraCheese"> Extra Cheese<br>
<input name = "toppings2" type = "checkbox" value = "sausage"> Sausage<br>
<input name = "toppings3" type = "checkbox" value = "pepperoni"> Pepperoni<br>
<input name = "toppings4" type = "checkbox" value = "bacon"> Bacon<br>
<input name = "toppings5" type = "checkbox" value = "canadianBacon"> Canadian Bacon<br>
<input name = "toppings6" type = "checkbox" value = "mushroom"> Mushroom<br>
<input name = "toppings7" type = "checkbox" value = "pineapple"> Pineapple<br>
<input name = "toppings8" type = "checkbox" value = "onion"> Onion<br>
<input name = "toppings9" type = "checkbox" value = "olive"> Olive<br>
<input name = "toppings10" type = "checkbox" value = "greenPepper"> Green Pepper<br></th>
  </tr>
</table>
<input name="submit" type="submit" value="submit" /><input name="" type="reset" />
</form>

Hi there,

I am a new javascript guy - struggling a bit but marching on -

The following code works fine to set a form field -

Code:

document.getElementById("ZS_Land").value = (empLand.innerHTML);

However, I changed to form field into a select with option list, and I need it to set an option from the select now - the select has the same name/id as the field had, but is not working

Any ideas how I do that ?

Many thanks in advance

Glorifindal

I am pretty sure this is a javascript function. I want it where when a person chooses an option in a select box, it displays content.

Here is the page it'd be on.
http://www.rodgame.org/register.html

So for Class: once they select something, in the black area in the middle bottom, it'd show a description of that class. How would I do something like this?

when someone selects a date it shows ok in the field but the checker script can not view it for some reason, i have an alert show the content, if i place the alert before everything it unblurs and the tick shows, but i have to click the alert off for the tick to show. The alert show nothing on the first run.

just a thought, but would the DOM not be updating quick enough for the next line to read the content ?

reason i ask is that with the alert line in the code it shows the previous state of the field when i change the date to something else.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type='text/javascript'>
function checkValidFormInput() {
redX = '<img alt="Invalid" src="images/redX.png" style="width: 18px;">';
greenTick = '<img alt="Valid" src="images/icongreentick.png">';


alert('.' + document.getElementsByName('j1date')[0].value + '.');

document.getElementsByName('j1date').blur();



		if (document.getElementsByName('j1date')[0].value == '') {
		document.getElementById('j1dateImg').innerHTML = redX;//
		} else {
		document.getElementById('j1dateImg').innerHTML = greenTick;//
		}

	}
</script>

</head>

<body>

<? // for some strange reason the following lines need to be here for the date picker to work! ?>
<table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
    <tr><td id="ds_calclass"></td></tr>
</table>
<script type="text/javascript" src="datetimepicker.js"></script>
<? // end of date picker storage ?>


<form method="POST" action="index.php">

<li class="value"> <input type="text" autocomplete="off" name="j1date" id="j1date" value="<?=$j1date;?>" style="width: 200px; float: left;" onClick="ds_sh(this);" onBlur="checkValidFormInput();"> <div style="float: left;" id="j1dateImg"></div><br style="clear:both"> </li>

</form>

</body>
</html>

attached is the datetimepicker.js
you will need to remove the last part .txt from the above file name

I have a form with a postcode field in it

I want to add a button or text link next to this field which if clicked on goes to the google maps url querying that postcode

i.e. if the postcode text in the field (form not submitted) was SW1A 1AA then without submitting that form there would be a button / link next to it which when clicked on went to "http://maps.google.co.uk/?q=SW1A1AA"

Pretty sure Java should be able to do this ?

Hi Guys,

i am wondering if there is a way to have an auto Complete form field from a db table data ?

thanks

Hi Guys,

Im in need of some help with regards to forms. I am looking to build as basic as possible, a form that has 3 select dropdowns that have predetermined options. The user will select the first option and based on that option the second will populate and based on that, the third one will give the last option.

Now, when the last one is selected, i need a div or a paragraph displaying information to be displayed.

So here's the framework.

Option 1 = fruit or vegitables of which fruit is selected is selected by the user
Option 2 = Apples, Grapes, and pears of which apples is then selected
Option 3 = Red, Green and Yellow of which Green is selected.

Once green is selected, I need a description about the green aple to be displayed.

Can anyone help me out on this? I am not sure where to begin and my boss is adament it must be done like yesterday. Ay help will be appreciated.

Thanks.

I am having trouble writing this javascript for my work, normally I would do this in ASP or PHP, but the environment I am working with will only allow javascript for dynamic function.

The form has two different select boxes and based on your options selected for select box #1 and select box #2, the hidden input field "redirect" (which is currently empty) would then populate dynamically with the URL associated with that combination mentioned below. The hidden redirect input field (now containing dyanmically generated data) would then pass the new value via HTTP_POST to .net script that will handle the redirect processing step fed to it.

Here are the mappings:

If selections = Elementary & Vocabulary = http://www.widget.com/content/elem-vocab

If selections = Elementary & Writing = http://www.widget.com/content/elem-writing

If selections = Elementary & ELD = http://www.widget.com/content/elem-eld

If selections = Middle School & Vocabulary = http://www.widget.com/content/midscl-vocab

If selections = Middle School & Writing = http://www.widget.com/content/midscl-writing

If selections = Middle School & ELD = http://www.widget.com/content/midscl-eld

If selections = High School & Vocabulary = http://www.widget.com/content/hiscl-vocab

If selections = High School & Writing = http://www.widget.com/content/hiscl-writing

If selections = High School & ELD = http://www.widget.com/content/hiscl-eld


Here's a snippet of a different method that I tried, but it did not work. I think the above mentioned method would probably be best.

Code:

<script language="javascript" type="text/javascript">
<!--
function build() {

document.fillgaps.redirect.value = "http://www.widget.com/content/" + document.fillgaps.grade.value + "-" + document.fillgaps.solution.value ;

//print example: http://www.widget.com/content/ELM-VOC

return true;

}

-->
</script>


<form name="fillgaps" action="http://www.widget.com/submit.aspx" method="post" onSubmit="return build();">

<input type="hidden" name="redirect" value="">

<table class="elqFormTable" border="0" cellspacing="2" cellpadding="2">


<tr>
<td valign="top">Grade:</td>
<td>
<select name="grade">
<option value="ELM">Elementary</option>
<option value="MID">Middle School</option>
<option value="HIG">High School</option>
</select>
</td>
</tr>

<tr >
<td valign="top">Solution:</td>
<td>
<select name="solution">
<option value="VOC">Vocabulary</option>
<option value="WRI">Writing</option>
<option value="ELD">ELD</option>
</select>

<!--truncated code -->

Hi..

I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database.

How is it possible?

here is my sample code:

Code:

<?php
    error_reporting(0);
   date_default_timezone_set("Asia/Singapore"); //set the time zone  
$con = mysql_connect('localhost', 'root','');

if (!$con) {
    echo 'failed';
    die();
}
mysql_select_db("mes", $con);
?>

<html>
<head>
<script type="text/javascript">
function ini()
{

// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;

}

</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">

<form name=barcode onsubmit = "return ini()">

<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>

</body>
</html>

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!

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.

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've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost.

When I select the first option nothing appears in the second option.

here's the javascript code:

Code:

function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}

function valChange(){
    var firstList = document.getElementById("emailaddress");
    var secondList = document.getElementById("subject");
    while(secondList.hasChildNodes())
        secondList.removeChild(secondList.childNodes[0]);
    switch(firstList.value){
        case "1":{
             secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
             secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
             secondList.appendChild(createOption("Other", Other));
             break;
        }
        case "2":{
             secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
             secondList.appendChild(createOption("Report Spam", Report Spam));
             secondList.appendChild(createOption("Report Harassment", Report Harassment));
			 secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
			 secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
             break;
        }
// ....
        default:{
             secondList.appendChild(createOption("Please select from the first list", ""));
             break;
        }
    }
}
 
window.onload = valChange;

this is the form code

Code:

<div class="mailto_form">
<form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php">
<div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();">
	<option value=""></option>
	<option value="1">Webmaster</option>
		<option value="2">Admin</option>
		</select>
  </div>
	

<div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject">
  </div>
  
  	<div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value="">
	</div>
  
		<div style="padding-bottom: 1em;">Enter the text contained in the image into the text box:
					<br /><img src="../includes/captcha.php" />
					<br /><input type="text" name="userpass" value="">
	</div>
	<div style="padding-bottom: 1em;">Message:
					<br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?>				
	</div>
	
	<div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit">
	</div>
</form>


</div>

Link to the page http://www.netgamegurus.com/contact/