JavaScript - Select Results Based On Criteria / Checkbox > Div

Hey all, I'm trying to get the two followup questions underneath the checkbox to show up only if someone places a check there, but for some reason the way I've got it set up now it's simply hiding the area I want to show up altogether, and the checkbox has no effect on it.

Rather than waste tons of space pasting it here, here's the pastebin:

http://pastebin.ca/1822165
alternatively here is the live version:

http://soniajacobwedding.com/site/rsvptest.html

I'd prefer to have the form collapse when the additional questions are hidden, though if i can get this working at all I'd be pretty happy.

Hi all,

I have a script that checks and unchecks all boxes depending on the current state of the box. I have used it on one page and it works perfectly fine... copied it over to a new page where I wanted to reuse and can't get it to work.

Code:

<script type="text/javascript">
function check_all(form, input_name, self){
		if(!input_name){
			return;
		}
		
		var input = form.getElementsByTagName('input');
		for(var i = 0; i < input.length; i++){
			if(input[i].name.indexOf(input_name)!=-1){
				input[i].checked = self.checked;
			}
		}
	}
</script>

Code:

<input type="checkbox" name="notimportant" onclick="check_all(document.form1, 'check', this)" value="test" /><b>All</b>

Code:

<input type="checkbox" name="check_list[]" value="<?php echo $row2['email'];?>">

Code:

<form name="form1" action="emailspecificcandidates.php" method="post">

As I say this script works perfectly on another page, and as far as i can see i have copied everything over correctly.

Can anyone spot anything wrong?

Many thanks,

Greens85

EDIT: I think this may be broken because of the way I presenting it with php on my page... i copied a seperate entity of the script onto the page and it worked first time.

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>

I am very inexperienced with javasciprt. I am designing a form in coldfusion, and want some dynamic action to take place.

My users will be offered 2 selections via radio buttons. Depending on which radio button they select, they will get a few more radio buttons to choose from. I have been told that this can be handled in javascript.

So I am appealing to the javascript programmer nation for some assistance in this endeavor.

Any help would be greatly appreciated, Thanks.

Ok so let's say I have this dropdown with a list of these items:

PALCO
TRIBUNA
ORO

And in a button on the page I want to send it one of those names, let's say I send it ORO, and through Javascript select that in the dropdown list. How is this done? Do I have to iterate through everything, and how?

Thanks for any help in the subject.

Hello, I am trying to change the value of #name and #category inputs based on the value of select. A friend gave me the code below, but I can't get it to work. Thanks so much for your help

Code:

     
<script type="text/javascript">  
$('#Gift_Type').change(function(){
if ($(this).val() == 'Monthly'){
$('#name').val('Partnership')
$('#category').val('Partnership')
} else {
$('#name').val('Donation')
$('#category').val('Donations')
}
})
</script>

Code:

<SELECT NAME="sub_frequency" ID="Gift_Type" onchange="OnSelectionChanged (this)">
<OPTION VALUE="1m">Monthly</OPTION>
<OPTION VALUE="">One Time</OPTION>
</SELECT>

Code:

<input type="text" id="name" name="name" value="Partnership" />
<input type="text" id="category" name="category" value="Partnership" />

I am trying to change a character limit based on items changed in a drop down menu. To do this I have one function that will change the posted count based on the currently selected option and another function that is a commonly used char count with a few tweaks.

The main issue is getting the value of the currently selected option. I know that selectedIndex will return the position of the selected element rather than the actual value. I tried to code around that. I've tried every method I could find on google and nothing works. So, I may have a bigger problem on a higher level that I just don't understand. If any of you can take a look at my code and give me your thoughts I would be most appreciative. Thanks!

Code:

<!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" xml:lang="en" lang="en">
<head>
  <title></title>
 <script type="text/javascript"> 
function checkTextArea(fromto){

var textstring = "textarea";
var id = textstring + fromto;
var destination = document.forms["form1"].[id.selectedIndex].text;

if (destination=="1") {
var limit = "500";

}
else {
var limit = "1000";

}


     if (document.getElementById(id)){
         var txt = document.getElementById(id).value;
         if (txt.length>limit){
             document.getElementById(id).value = txt.substr(0,limit);
         }
         len = document.getElementById(id).value.length;
         span_id = "span" + id;
         if (document.getElementById(span_id)){
           document.getElementById(span_id).innerHTML = (limit-len);
         } // if
     } //if
} //function


function chardisplay(fromto) {

var deststring = "dest";
var identifier = deststring + fromto;

// no idea how to make this work...seems to stop working whenever I try to assign it to any kind of variable
// I have also tried assigning .value and .text
// I have also tried naming it with document.forms["form1"].[identifier.selectedIndex]
   // also using .value and .text
var harmless = document.getElementById('identifier').selectedIndex;
alert("value="+document.getElementById('identifier').value);
alert("text="+document.getElementById('identifier').options.[harmless].text);

var spanstring = "spantextarea";
var spanidentifier = spanstring + fromto;

if (harmless=="1") {
document.getElementById(spanidentifier).innerHTML = "500";
}

else {
document.getElementById(spanidentifier).innerHTML = "1000";
}

}
</script>
  
</head>
<body>

<form id="form1" name="form1" method="POST" action="myurl">

<p><span id="spantextareafrSOMENUMBER">500</span> characters left </p>

<select name="destfrSOMENUMBER" onchange="javascript:chardisplay('frSOMENUMBER');\" onfocusout="javascript:chardisplay('frSOMENUMBER');\" onblur="javascript:chardisplay('frSOMENUMBER');\">
<option value="opt1">display option 1</option>
<option value="opt2">display option 2</option>
<option value="opt3">display option 3</option>
</select>

<textarea onkeyup="checkTextArea('textareafrSOMENUMBER');" name="mesgfrSOMENUMBER" id="textareafrSOMENUMBER" cols=50 rows=4></textarea>
</form>
</table>
</body>
</html>

Ok so I have a select box where the value must be passed via the form. If the users selects choice B or Choice C then I want a specific div to show. If they choose choice A then I want the div to hide or remain hidden. It should be hidden on page load.
Code:

<select name="Event_Type_ID">
    <option value="1">Choice A</option>
    <option value="2">Choice B</option>
    <option value="3">Choice C</option>
</select>

<div id="showme">
 Content to show if EITHER Choice B or C is chosen. Otherwise this div  should be hidden.
</div>

Can anyone lead me in the right direction?
Thanks!

Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction.

I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html

The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely.

If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks.

I have a web page created using plsql web toolkit. I want to set the text box values for street line 2 and zip based on user selection in select drop down which is street line 1. The select drop down list is based on a cursor selecting data from the Oracle database. I'm not sure if I need to use an array in the javascript code or if I can set the values some where in my package. Any advice would be appreciated.

cursor:
Quote:
cursor bldglistc
is
select stvbldg_code,
stvbldg_desc,
slbbldg_street_line1,
slbbldg_city,
slbbldg_stat_code,
slbbldg_zip
from stvbldg, slbbldg
where stvbldg_code = slbbldg_bldg_code (+)
and stvbldg_desc not like 'DNU%'
and stvbldg_desc not like 'Online%'
order by slbbldg_bldg_code;

bldg_record bldglistc%ROWTYPE;
Javascript in package:
Quote:
htp.p('
<SCRIPT LANGUAGE="JavaScript" TYPE = "text/javascript">
function UpdateNextField(which1,which2,fld1,fld2) {
document.getElementById(fld1).value = which1.value;
document.getElementById(fld2).value = which2.value;
}

</SCRIPT>
');
Form code from package:
Quote:
HTP.formopen ('bwgkogad.P_ProcAddrUpdate', 'post');
twbkfrmt.P_FormHidden ('atyp', atyp);
twbkfrmt.P_FormHidden ('seqno', seqno);


twbkfrmt.p_tableopen (
'DATAENTRY',
cattributes =>G$_NLS.Get('BWGKOAD1-0003','SQL','SUMMARY="This table shows Address Selected for Update."')
);
twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledataheader (stvatyp_rec.stvatyp_desc, ccolspan => '5');
twbkfrmt.p_tablerowclose;

twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledatalabel (
twbkfrmt.f_formlabel (
g$_nls.get ('BWGKOAD1-0007', 'SQL', 'Address Line 1:'),
idname => 'street_line1_input_id'
)
);
twbkfrmt.p_tabledataopen (ccolspan => '5');
HTP.formselectopen (
'str1',
'',
1,
cattributes => 'ID="street_line1_input_id" onChange="javascript: UpdateNextField(this,this,''street_line2_input_id' ',''zip_input_id'')"'
);


OPEN bldglistc;

LOOP
FETCH bldglistc INTO bldg_record;

IF bldglistc%NOTFOUND
THEN
EXIT;
END IF;

IF address_rec.spraddr_street_line1 = bldg_record.slbbldg_street_line1
THEN
twbkwbis.p_formselectoption (
bldg_record.slbbldg_street_line1,
bldg_record.slbbldg_street_line1,
'selected'
);
ELSE
twbkwbis.p_formselectoption (
bldg_record.slbbldg_street_line1,
bldg_record.slbbldg_street_line1
);
END IF;
END LOOP;

CLOSE bldglistc;

HTP.formselectclose;
twbkfrmt.p_tabledataclose;
twbkfrmt.p_tablerowclose;


twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledatalabel (
twbkfrmt.f_formlabel (
g$_nls.get ('BWGKOAD1-0008', 'SQL', 'Address Line 2:'),
idname => 'street_line2_input_id'
)
);
twbkfrmt.p_tabledata (
twbkfrmt.f_formtext (
'str2',
70,
75,
address_rec.spraddr_street_line2,
cattributes => 'ID="street_line2_input_id" readonly'
),
ccolspan => '5'
);
twbkfrmt.p_tablerowclose;

twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledatalabel (
twbkfrmt.f_formlabel (
g$_nls.get ('BWGKOAD1-0013', 'SQL', 'ZIP or Postal Code:'),
idname => 'zip_input_id'
)
);
twbkfrmt.p_tabledata (
twbkfrmt.f_formtext (
'zip',
NULL,
30,
address_rec.spraddr_zip,
cattributes => 'ID="zip_input_id" readonly'
),
ccolspan => '5'
);
twbkfrmt.p_tablerowclose;

twbkfrmt.p_tableclose;
HTP.para;
--
HTP.formsubmit (NULL, G$_NLS.Get('BWGKOAD1-0054','SQL','Submit'));
HTP.formreset (g$_nls.get ('BWGKOAD1-0055', 'SQL', 'Reset'));
HTP.formclose;

Dear all,

background information:
I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values):

echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>";

When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly.

The javascript looks like this

function set_time_hour(hour_value,next_field){
alert (hour_value);
alert (next_field);
document.getElementById(next_field).value = hour_value;
}

The alert calls are giving me the right values. but the

document.getElementById(next_field).value = hour_value;

is not working. What is wrong there? Do you have an idea?

How can I change the value of a select box with Javascript?

The select box values are already popoluated with PHP so I just want to select the right value.

Hello

I am trying to create a form which when the submit button is selected will open a new window with 1 of 4 URLs based on the the combination of data in 2 select boxes.

For example:

if select box 1 = a and select box 2 = a then open new window with URL 1
if select box 1 = a and select box 2 = b then open new window with URL 2
if select box 1 = b and select box 2 = a then open new window with URL 3
if select box 1 = b and select box 2 = b then open new window with URL 4

Any help would be greatly appreciated.

Thanks

Daniel

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 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.

Hi, what would be the best way to have a hidden array of possible text directed at a textarea and then if something is not within that array "onfocus", a certain select option is chosen within that form?

Thanks