Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Pffff -> linked form items 1

Status
Not open for further replies.

Bramvg

IS-IT--Management
Jan 16, 2001
135
BE
Hi,

I've been searching a whole day yesterday to achieve some very simple, I thought, but I don't succeed in doing it.

I have a form with 2 items that need to be linked with each other. But it's not that easy ;-)
First, I have a <select> item where people have to choose their postcal code. When they click on one of the elements I want to show a value (number) in a input type=text field.

eg:

select
<option value=5%> brussels
<option value=7%> antwerp
<option value=5,5%> bruges


When they click on Brussels I want to display the value, 5% in a input type=text field.
I know this must be possible,

but how???? ;-)

Any help more than welcome.

bram

 
Tada!

Code:
<form name=&quot;test&quot;>
<select name=&quot;testSelect&quot; onChange=&quot;javascript:test.displaySelect.value = test.testSelect.value&quot;>
<option value=&quot;5%&quot;> brussels</option>
<option value=&quot;7%&quot;> antwerp</option>
<option value=&quot;5,5%&quot;> bruges</option>
</select>
<input name=&quot;displaySelect&quot; type=&quot;text&quot; size=&quot;20&quot;>
</form>
 
Euh, that was SUPERFAST ! :)
Thank you very much !!! It works perfectomundo ;-)

Could I possibly ask you one more question?

I have a list with 3 checkboxes, each checkbox has 2 'subitems' (subcheckboxes).

Eg.:

checkbox 1
checkbox 1.1
checkbox 1.2

checkbox 2
checkbox 2.1
checkbox 2.2

checkbox 3
checkbox 3.1
checkbox 3.2

Now, when someone clicks on 'checkbox 2', 'checkbox 2.2' and 'checkbox 3.1' must be disabled.

Do you have an idea how to do this? E.g. when you click checkbox 'x' disable checkbox 'y'+'z'?

Again, many thanks in advance.
Bram




 
I don't think that will work correctly. The value attribute of a select list is an iffy thing. You should take the value of the selected element. And I think you should qualify the formname with &quot;document.&quot; as well. It should be:
Code:
document.test.displaySelect.value = document.test.testSelect[document.test.testSelect.selectedIndex].value
Tracy Dryden
tracy@bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
 
Tnx ! :)

I changed it.
Continuing on the first problem (linked form items), I forgot something.

When you selected an item of the <select> list it will display the value in the input type=text box.

BUT ;-)
Once you selected an item of the list, it actually has to contain 2 values. Value 1 is the one that will be displayed in the input type=text box, but the second item (which can be a '1' or a '0') needs to be checked as well.

When it's 1 a text must be displayed (can be printed in a input type=text box as well) saying 'This year', when the value is '0' a text 'Last year' must be displayed.


Sorry: but any help more than welcome ;-)
bram
 
Checkbox Solution (just cut and paste, should work)
Code:
<html>
<head>
	<title>Untitled</title>
	<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
	<!--
	function changeVal(form)
	{
	 if (form.group2.checked)
	 {
	  form.sub22.disabled=true;
	  form.sub31.disabled=true;
	 }
	 else if (!form.group2.checked)
	 {
	  form.sub22.disabled=false;
	  form.sub31.disabled=false;
	 }
	}
	-->
	</script>
</head>
<body>
<form name=&quot;test&quot;>
<br>
<input type=&quot;checkbox&quot; name=&quot;group1&quot; value=&quot;1.0&quot;>Group 1<br>
  <input type=&quot;checkbox&quot; name=&quot;sub11&quot; value=&quot;1.1&quot;>Group 1.1<br>
  <input type=&quot;checkbox&quot; name=&quot;sub12&quot; value=&quot;1.2&quot;>Group 1.2<br>
  <input type=&quot;checkbox&quot; name=&quot;sub13&quot; value=&quot;1.3&quot;>Group 1.3<br>
<br>
<input type=&quot;checkbox&quot; name=&quot;group2&quot; value=&quot;2.0&quot; onClick=&quot;changeVal(this.form);&quot;>Group 2<br>
  <input type=&quot;checkbox&quot; name=&quot;sub21&quot; value=&quot;2.1&quot;>Group 2.1<br>
  <input type=&quot;checkbox&quot; name=&quot;sub22&quot; value=&quot;2.2&quot;>Group 2.2<br>
  <input type=&quot;checkbox&quot; name=&quot;sub23&quot; value=&quot;2.3&quot;>Group 2.3<br>
<br>
<input type=&quot;checkbox&quot; name=&quot;group3&quot; value=&quot;3.0&quot;>Group 3<br>
  <input type=&quot;checkbox&quot; name=&quot;sub31&quot; value=&quot;3.1&quot;>Group 3.1<br>
  <input type=&quot;checkbox&quot; name=&quot;sub32&quot; value=&quot;3.2&quot;>Group 3.2<br>
  <input type=&quot;checkbox&quot; name=&quot;sub33&quot; value=&quot;3.3&quot;>Group 3.3<br>
<br>
</form>
</body>
</html>

As for your expanded question, I'm a little unclear on what it is your trying to do?
 
As a footnote, I'd don't believe my solution to the checkbox question is the best one, Tracy, anyone have any better ideas?
 
Hello Bentley22,

Is there also a way to set e.g. sub22 on the start disabled?
When I tried to set:

<input type=&quot;checkbox&quot; name=&quot;sub21&quot; value=&quot;2.1&quot; DISABLED>

I couldn't get back into 'enabled'.

It would like to disable

sub21
sub22
when opening the page, but once you click on group2, sub21 and sub22 must be enabled.


T H A N K Y O U

bram
 
Paste the changes, that should work.


<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
function changeVal(form)
{
if (form.group2.checked)
{
form.sub21.disabled=false;
form.sub22.disabled=false;
}
else if (!form.group2.checked)
{
form.sub21.disabled=true;
form.sub22.disabled=true;
}
}
-->
</script>

<input type=&quot;checkbox&quot; name=&quot;group2&quot; value=&quot;2.0&quot; onClick=&quot;changeVal(this.form);&quot;>Group 2<br>
<input type=&quot;checkbox&quot; name=&quot;sub21&quot; value=&quot;2.1&quot; disabled>Group 2.1<br>
<input type=&quot;checkbox&quot; name=&quot;sub22&quot; value=&quot;2.2&quot; disabled>Group 2.2<br>
&quot;The surest sign that intelligent life exists elsewhere in the universe is that it has never tried to contact us&quot;
Bill Watterson, Calvin & Hobbes
 
IT DOES

Thank you very much !

It looks like you know pretty much about these scripts!
Do you have a website or good resources?
I'm curious to find out more ;-)

bram
 
Unfortunatly my website has fallen into disrepair:-(, mostly because I just keep forgetting to update it.

For resources, I just learn as I go, try out code, this forum has helped immensely, for example, your disable the form element's question, I haven’t had to do that before, so I learned how. Taking a problem and finding the solution is one of the best ways to learn.

Besides, when I'm bored at work, this gives me something to do that looks like I'm working!:cool: &quot;The surest sign that intelligent life exists elsewhere in the universe is that it has never tried to contact us&quot;
Bill Watterson, Calvin & Hobbes
 
Hi Bently22,


I have one more question for you ;-)

It's more or less the same problem, like you I tried it myself, but I've spent now 6 hours on it, and I still have something that does not work (I'm not a programmer and I know extremely little of javascript), but I'm learning ;-)

Anyway:

I have form with 3 fields on a row.
The first value should be a text box where someone can enter a value between 1 and 800. The second field is a normal text field, nothing specifiek. But the third field is again a text field (can also be a 'DIV'/...) where I need to print out some text. The text depends on the value entered in the first textbox.

For each number there is a text.

BUT: these these input type=text boxes have to be repeated on about 20 lines. Meaning: if you go to line nr. 2 again you must be able to enter a value and show the corresponding text at your right.

To make it more visible I've put this particular page online! Take a look at:
Whereas:

'Rubriek' = a text field where you must enter a number
'Bedrag' = a normal text field where people must enter a value
'Omschrijving'= here the text will be displayed according the number you entered into 'rubriek'.

Could you help me (again) on this?
Tnx


With kind regards
Bram
 
What bearing does Bedrag have on the output? Any?, or can I ignore it? &quot;The surest sign that intelligent life exists elsewhere in the universe is that it has never tried to contact us&quot;
Bill Watterson, Calvin & Hobbes
 
Well,

once a user has filled out, let's say 15 field, you're supposed to click on 'OK', than I will have to output the values like this:

15_12000
16_897897
18_32156
...

Where 15 and 16 and 18 are the values of the 'Rubriek' and 12000,... is the value (amount)

So, there has to be a 'link'. But I think, once you enter e.g. 250 as a value in 'Rubriek' and a user clicks on OK I can 'catch' that value on the next page.

Regards and many thanks
bram
 
Is this something of what your looking for? I'm only a novice in Coldfusion programming, so I'm not sure how compatiable it will be. From what you've posted, I think this is as close as I could get. You would just repeatedly call the form to display, with a variable for the form name (row1, row2, row3,... etc)

(oh, and I shortend Omschrijving to Omsch, for typing reasons, I hope I didnt' make an offensive word of something :p)

Code:
<html>
<head>
	<title>Untitled</title>
	
	<script language=&quot;JavaScript&quot;>
	var rubriekValue;
	var bedragValue;
	
	var numName = new Array(800)   //Populates name array
	for (x=0; x<=799; x++)
	{
	 numName[x]= &quot;textValue&quot; + x;
	}
	
	
	function setRubriek(form)
	{
	  var rubriekTxt = form.rubriek.value;
	  if (rubriekTxt = Number(rubriekTxt))  //Checks user value.  If it converts to a number, all is good, otherwise, error
	  {
	   rubriekValue = rubriekTxt;      //Sets Global variable for later use (output)
	  }
	  else
	  {
	   alert(&quot;Error&quot;);           //User entered a non-numeric value
	  }

	}

	function setBedrag(form)
	{

	  var bedragTxt = form.bedrag.value;
	  if (bedragTxt = Number(bedragTxt))  //Checks user value.  If it converts to a number, all is good, otherwise, error
	  {
	   bedragValue = bedragTxt;        //Sets Global variable for later use (output)
	  }
	  else
	  {
	   alert(&quot;Error&quot;);           //User entered a non-numeric value
	  }
	}
	
	function output(form)  //Combines all values together into Omschrijving
	{
	  form.omsch.value = rubriekValue + &quot;_&quot; + bedragValue + &quot;_&quot; + numName[rubriekValue]
	}

	</script>
</head>

<body>
<form name=&quot;row1&quot; >
<table border=&quot;0&quot; width=&quot;600&quot;>
<tr><td width=&quot;190&quot; >
<input name=&quot;rubriek&quot; type=&quot;text&quot; value=&quot;&quot; onChange=&quot;setRubriek(this.form)&quot;>
</td><td width=&quot;190&quot;>
<input name=&quot;bedrag&quot; type=&quot;text&quot; value=&quot;&quot; onChange=&quot;setBedrag(this.form)&quot;>
</td><td width=&quot;190&quot;>
<input name=&quot;omsch&quot; type=&quot;text&quot; value=&quot;&quot;>
</td><td width=&quot;30&quot;>
<input type=&quot;button&quot; value=&quot;submit&quot; onClick=&quot;output(this.form)&quot;>
</tr>
</table>

</form>
</body>
</html>
&quot;The surest sign that intelligent life exists elsewhere in the universe is that it has never tried to contact us&quot;
Bill Watterson, Calvin & Hobbes
 
Hi Bently22

one more question ;-)

now a user must click the 'submit' button in order to see the value in the 3rd field. But, I would like that to happen when they the &quot;Tab&quot; key.

The action now is set on: onChange=&quot;setRubriek(this.form)&quot;, but can I add the fuction 'output(this.form)' as well when they change of field?

This is because when they click the submit button, they are redirected to a new page, so they will never see the text in the 3rd field.....

Tnx!!

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top