JavaScript - Hiding/disabling The Submit Button Based On Dropdown Selection

Hi,

I have two dropdown lists with the second one being dependent on the selection in the first.

Options in list 1:
1,3 or 4

List two should be enabled when 3 or 4 is selected in list 1.

So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form:

Code:

<select name="fw[$i]" id="fw[$i]">
<option value="1">FWH</option>
<option value="3">links</option>
<option value="4">rechts</option>
<option value="0" selected></option>
</select><br />
<select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);">
<option value="0" selected>---</option>
<option value="1">gut</option>
<option value="2">schlecht</option>
<option value="3">Strafschlag</option>
<option value="4">OB</option>
</select>

$i is my index generated by my PHP script and runs from 1 to 18.
Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field.

Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable.

Code:

function showBox(field,val) {
		
if (val > 1) {		
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
	
}

Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem.
Thanks in advance!
Joe

Dear Javascript programmers,

Do you have an example of a Javascript something like this:

A dropdownlist with values "one" and "two". The radio button is not visible (as a start).
- If you have selected "one" from the dropdown list, then a radio button will appear.
- If you have selected "two" from the dropdown list, then a radio button will NOT appear.

Thanks,

Cornelis
Gouda - The Netherlands

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.

Hi
I'm new to javascript, so this is probably very simple. I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success!
Thanks in advance

I've got the following 2 fields in my form:

<input type="file" name="filename" id="filename" value="filename">
<input type="submit" name="submit" value="Upload Image" />

Now I want to hide both of them as soon as the submit button is pressed. Problem is that I'm a javascript noob and I can't find it with google :S

Can someone help me?

What have I done wrong here?


<INPUT id="purchase" onclick="document.getElementById("purchase").disabled = true;" type="submit" value="PURCHASE">

Hello, I am completely new to HTML/JS/CSS, therefore I know very little.

I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July".

I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected).

If it matters, I am using IE8. Thanks!

hi..
i have a jsp page in which there is a table. the number of rows is variable and depends on a pre-defined query.
every row has 2 editable textboxes which are initially disabled. i need to activate these textboxes according to the radio button which corresponds to the particular row in question.
can anybody pls tell me how to do that.
the code that i have written is as follows.if there is any tweaking to be done pls suggest the same.
code:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="java.util.ArrayList" %>


<%@page import="DTO.UserGroupDTO"%>

<html>
<head>
<script type="text/javascript">}
funtion enable(){
document.getElementById("inp1").disabled=false;
document.getElementById("inp2").disabled=false;
}
function disable(){
document.getElementById("inp1").disabled=true;
document.getElementById("inp2").disabled=true;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Update User Group Inquiry Results</title>
</head>
<body bgcolor="#aabbcc">
<center>
<h3>Update User Group Inquiry Results</h3><br><br>

<%ArrayList arrayList=(ArrayList)request.getAttribute("myList");
ArrayList list;
int size=arrayList.size();

Integer groupId=null;
String userGroupName=null;
String description=null;

%>
<form action="/test/BankServlet">
<table style="color: highlight" border="5">


<%
if(!(arrayList.isEmpty())){%>
<tr><th>Group ID</th><th>User Group Name</th><th>Description</th><th>Selection</th></tr>
<% for(int i=0;i<size;i++){
UserGroupDTO userGroupDTO=(UserGroupDTO)arrayList.get(i);

userGroupName=userGroupDTO.getUserGroupName();
groupId=userGroupDTO.getGroupId();
description=userGroupDTO.getDescription();
%>
<tr>
<td><%out.println(groupId); %></td>

<td><input id="inp1" disabled="disabled" value="<% out.println(userGroupName); %>"></td>

<td><input id="inp2" disabled="disabled" value="<%out.println(description); %>"> </td>

<td>
<input type="radio" name="radio2" value="<%=groupId %>" onclick="enable()">
</td>
</tr>
<%
}

}

else{
out.println("No match found");
}
%>




<tr>
<td><input type="hidden" name="strTitle" value="UpdateUserGroup"></td>
</tr>
<tr>
<td><input type="hidden" name="value" value="<%=groupId%>"></td>
</tr>
</table><br>
<input type="submit" value="Update User Group" style="background-color: gray">
</form>

<form action="/test/jsp/UserGroup.jsp">
<input type="submit" value="Go Back to User Group Operations Page" style="background-color: gray">
</form>


<br><br><br><br>


</center>
</body>
</html>

Alright, working on an ajax image uploader, and im a bit rusty with JS.

How would i go about hiding the form after the submit button is pressed, so it disappears? Heres my website. If you need the scripts, just ask.


Thanks in advance.

Hey everyone, I have a simple html form that asks a user to select a state from a drop down list. Later, in the same form, there's a question that needs to display an image of the state they previously selected from the drop down menu. How can I accomplish this using javaScript?

Hi Guys,

I'm a new member, so hello all!
I'm ok at html/xhtml, but i know nothing about javascript, so hoping someone here can help!

Basically, I have a contact form on my website that offers 2 different types of contact: RSVP and Other.
these two types are available in a selection box.

What I want to happen is when the "RSVP" option is selected, the following options are displayed:
"Yes/No" radio buttons
"additional info" textarea

And when the "Other" option is selected, the following option is displayed:
"Message" text area

How can i make this happen?! i've tried searching the internet but I can't get anything i find to work. I can't even get the elements to hide!

At the moment, my form looks like this: -

Code:

<form method="POST" action="contact.php">
<table class="contact">
<tr>
<td>Name:</td>
<td><input type="text" name="name" size="20"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" size="20"></td>
</tr>
<tr>
<td>Contact Type:</td>
<td><select size="1" name="type">
<option value="rsvp" >RSVP</option>
<option value="other">Other</option></td>
</tr>
<tr>
<td colspan=2>&nbsp;</td>
</tr>

<div id="rsvp" style="display:none;">
<tr>
<td colspan=2><input type="radio" name="response" value="y"> Yes Please!</td>
</tr>
<tr>
<td colspan=2><input type="radio" name="response" value="n"> Sorry, but No. </td>
</tr>
<tr>
<td colspan=2>Additional Comments (Please include any special dietary requirements): </td>
</tr>
<tr>
<td colspan=2><textarea rows="5" name="rsvpmsg" cols="30"></textarea></td>
</tr>
</div>

<div id="other" style="display:none;">
<tr>
<td colspan=2>Message:</td>
</tr>
<tr>
<td colspan=2><textarea rows="9" name="othermsg" cols="30"></textarea></td>
</tr>
</div>

<tr>
<td>&nbsp;</td>
<td><input type="submit" value="Submit" name="submit"> &nbsp; <input type="reset" value="Reset" name="reset"></td>
</tr>
</table>
</form>

Please note, the style="display:none;" parts aren't even working

I appreciate any help you can give!

thanks!

I want to insert text to a textarea based on the selected text. It should insert tags like the buttons for posting on this form work. Ie: If 'bar' is selected, and I click 'b', then I get:

Code:

Foo bar frog

becomes: Code:

Foo <b>bar</b> frog

I found some code that works for firefox, but I need it to work in explorer as well.

Do you have any ideas or examples how to do this?

Here's the code I'm currently using. ( Works right in ff3. In IE7 it appends the tags at the end of the text. I want it to insert based on my selection. )

Usage: Code:

<a onclick="insertTags('<b>', '</b>', document.forms.formpost.text);return false;" href="javascript:void(0);">[ Bold ]</a>

insert function: Code:

<script type="text/javascript">
// Surrounds the selected text with text1 and text2.
function insertTags(text1, text2, textarea)
{
	// Can a text range be created?
	if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
	{
		var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

		if (temp_length == 0)
		{
			caretPos.moveStart("character", -text2.length);
			caretPos.moveEnd("character", -text2.length);
			caretPos.select();
		}
		else
			textarea.focus(caretPos);
	}
	// Mozilla text range wrap.
	else if (typeof(textarea.selectionStart) != "undefined")
	{
		var begin = textarea.value.substr(0, textarea.selectionStart);
		var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
		var end = textarea.value.substr(textarea.selectionEnd);
		var newCursorPos = textarea.selectionStart;
		var scrollPos = textarea.scrollTop;

		textarea.value = begin + text1 + selection + text2 + end;

		if (textarea.setSelectionRange)
		{
			if (selection.length == 0)
				textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
			else
				textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
			textarea.focus();
		}
		textarea.scrollTop = scrollPos;
	}
	// Just put them on the end, then.
	else
	{
		textarea.value += text1 + text2;
		textarea.focus(textarea.value.length - 1);
	}
}
</script>

Is it possible to pull multiple variables from a single dropdown menu selection?

example:
I have this:
Code:

function material_choices_menu() /* Provides Specific Gravity for various materials */
{
var data = "Material <select name='material'>";
data += "<option value='.926'>CYCOLAC MG47 (ABS)<\/option>";
data += "<option value='1.050'>CYCOLAC MG47MD (ABS)<\/option>";
data += "<option value='.958'>CYCOLAC T (ABS)<\/option>"; 
data += "<\/select>";
document.write(data);
}

I'd like to have multiple option values:
Code:

function material_choices_menu() /* Provides Specific Gravity for various materials */
{
var data = "Material <select name='material'>";
data += "<option value1='.926', option value2='.005-.008'>CYCOLAC MG47 (ABS)<\/option>";
data += "<option value1='1.050', option value2='.005-.008'>CYCOLAC MG47MD (ABS)<\/option>";
data += "<option value1='.958', option value2='.005-.008'>CYCOLAC T (ABS)<\/option>"; 
data += "<\/select>";
document.write(data);
}

I plan to use the first value in some math formulas to determine weights and the rest of the values will just be shown as data for the user and/or possibly a link to the datasheet for the material selected.

Is this possible or am I reaching here?

Hello,

I would like to know how can I send the selection from a dropdown from a webpage to another. In the first page where I have the dropdown list, I have this:

Code:

<td valign="top" align="left" nowrap width="90%">
<input name="time" style="width:100%" />
</td>	
	
<td valign="top" align="left" nowrap width="50">
           <select name="time2">
	    <option value="60">Minutes</option>
	    <option value="3600">Hour</option>
	    <option value="86400">Days</option>
	</select>
           </td>

In the second page, where I want this selection to be dispalyed, I created this code:
Code:

<td width="188" valign="top" align="left" nowrap>
<SCRIPT LANGUAGE="JavaScript">document.write(window.opener.document.form.elements["time"].value + " " + window.opener.document.form.elements["time2"].value);</SCRIPT>
				</td>

The issue I have with this is that the value dispalyed for the "time2" element is the actual attribute value (for instance 60) and not the actual value (for instance "Minutes").

If anyone have a clue what I'm doing wrong, I appreciate your help.

Regards,

Need a javascript function...

If a checkbox is checked, then corresponding dropdown selection is must...

Please help me with this...

Thanks
Reply With Quote