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!

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

Dynamic Form - but a bit different 1

Status
Not open for further replies.
junkboxmixky

junkboxmixky

MIS
Nov 2, 2005
9
0
0
US
I have seen many examples of dynamic form manipulation i.e select1 affects select2 affects select3... but what I am in need of is a little different. This is for a little ASP app we've been working on and I can't seem to find any JS examples of this function...

here we go>

select1 has two values: 'default' and 'User Defined'

The choice made for select1 has two effects:
a. 'default' brings up a dropdown with predefined values(easy enough)
b. 'User Defined' brings up a textbox<input> that allows the user to edit the value

these values are passed to the db as the title field(this is already done)

I don't even know if this is possible but it seems that trusty 'ol JS may be our only hope(Obi-Wan). Alas we are all JS illiterate...but would be happy to trade knowledge for those delving into ASP(vb)

Any help or a pointer to an existing script would be appreciated

cheers
-junkbox
 
Sort by date Sort by votes
kinda like this?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<script type="text/javascript"><!--
function showFieldSet( fsId ) {
    var fsCol = document.getElementsByTagName("fieldset");
    for ( var i = 0; i < fsCol.length; i++ ) {
        fsCol[i].style.display = (fsCol[i].id != "main" && fsCol[i].id != fsId) ? "none" : "";
    }
}
//--></script>

</head>

<body>

<form name="f">
<fieldset id="main">
    <select name="s1" onchange="showFieldSet(this.value);">
        <option></option>
        <option value="Default">Default</option>
        <option value="User-Defined">User-Defined</option>
    </select>
</fieldset>
<fieldset id="Default" style="display: none;">
    <label for="s2">Default:
    <select name="s2">
        <option></option>
        <option value="One">One</option>
        <option value="Two">Two</option>
        <option value="Three">Three</option>
    </select></label>
</fieldset>
<fieldset id="User-Defined" style="display: none;">
    <label for="t1">User-Defined:<input type="text" name="t1" /></label>
</fieldset>
</form>

</body>
</html>

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
No actually... ALOT like that.

thanks cLFlaVa. Prompt Shipping, Will definately do Business with again A+++++++

--

Was Jersey reallly that bad?
Good luck with the budget(assuming it's not already blown...it has been a day.) I tried a budget once.

-junkbox
 
Upvote 0 Downvote
haha thanks!

jersey was only bad cause i was lonely. at least i had tek-tips. god, what a frigging loser i am.

i am slightly over budget, i gotta make this tank of gas last the rest of the week...

thanks again...

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
Sorry for the lapse in the post I had to do real world things today (i.e. actually GO to a clients house.)

OK cLFlaVa, I got that code inserted and modified slightly...the functions actually work great but I'm getting interesting values on postback to the database.

firstly the modified code:
Code: 
<html>
<head>
<script type="text/javascript"><!--
function showFieldSet( fsId ) {
    var fsCol = document.getElementsByTagName("fieldset");
    for ( var i = 0; i < fsCol.length; i++ ) {
        fsCol[i].style.display = (fsCol[i].id != "main" && fsCol[i].id != fsId) ? "none" : "";
    }
}
//--></script>
</head>
<body>
    <select name="s1" onchange="showFieldSet(this.value);">
        <option></option>
        <option value="Default">Default</option>
        <option value="User-Defined">User-Defined</option>
    </select>
	</fieldset>
<fieldset id="Default" style="display: none;">
    <label for="s2">Default:
    <select name="title" id="title" edit="true">
          <option></option>
		  <option value="anOption1">anOption1</option>
          <option value="anOption2">anOption2</option>
          <option value="anOption3">anOption3</option>
     </select></label>
</fieldset>
<fieldset id="User-Defined" style="display: none;">
    <label for="t1">User-Defined:<input type="text" name="title" /></label>
</fieldset>

</body>
</html>
Now, when the record is either displayed or hits the db, it shows as ' ,UserInput ' if entered as a UDF choice OR displays ' anOption1, ' when choosing a default option.

notice the commas...now I can wrap my skull around WHY it's doing it...duplicate field names. Is there a way around this? A means of nullifying one of the 'title' if the other is blank or not activated?
 
Upvote 0 Downvote
ok, that's because your fields are both named the same thing. you have a select named "title" and a textbox named "title". so, it's being passed as an array to the server.

you could do two things:

1) based on the value of your first select, you could parse the appropriate value from the array (if it's user-defined, get the second value, otherwise grab the first).

2) you could parse this before-hand using javascript.

3) add a line or two of code to your javascript, and add a hidden field. name the hidden field something like "theRealDealTitle" or something, and then add an onchange even to both your title select and your title text field. fill the value of the hidden field with either of the select OR text value, whenever they change. then reference this hidden field on the server side.

i would definitely suggest #1 or #3.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
Once again, I narry had time to go to the liquor store before a reply.../me tips the bourbon soda to ye.

On the drive I thought of something similar to #3, #3 it is. I'll post back the modified code if anyone gives a shite.

thanks cFlaVa. have another star!

 
Upvote 0 Downvote
only one per post :(

good luck... let us know how it worked...

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
I ended up slaughtering a bit, but it works great

posting it for those who run across the post:

Code: 
<head>
function showFieldSet( fsId ) {
 var fsCol = document.getElementsByTagName("fieldset");
 var nmes=document.getElementsByName('title');
 for (zxc0=0;zxc0<fsCol.length;zxc0++){
  for (zxc1=0;zxc1<nmes.length;zxc1++){
   if (nmes[zxc1].parentNode.parentNode==fsCol[zxc0]){
    fsCol[zxc0].nme=nmes[zxc1];
   }
  }
 }
 nmes[0].name=null;
 nmes[1].name=null;
 for ( var i = 0; i < fsCol.length; i++ ){
  if (fsCol[i].id != "main" && fsCol[i].id != fsId){
   fsCol[i].nme.name=null;
   fsCol[i].style.display ="none";
  }
  else {
   fsCol[i].style.display ="";
   fsCol[i].nme.name='title';
  }
 }
 document.Show.Show1.value=nmes[0].name
 document.Show.Show2.value=nmes[1].name
}


//-->
</script>
[/head]

And the body

Code: 
<select name="s1" onchange="showFieldSet(this.value);">
        <option></option>
        <option value="Default">Default</option>
        <option value="User-Defined">User-Defined</option>
    </select>
<fieldset id="Default" style="display: none;">
    <label name="s2">Default:
    <select name="title" id="title" edit="true">
          <option></option>
          <option value="Option1">Optioin1</option>
          <option value="Option2">Option2</option>
          <option value="Option3">Option3</option>
          <option value="blah blah">etc.</option>

        </select>
     </select>
   </label>
</fieldset>
<fieldset id="User-Defined" style="display: none;">
    <label for="t1">User-Defined:<input type="text" name="title" /></label>
</fieldset>

condensed the header code etc. etc.

thanks again
been flippin through a few pages on here.. outta line guys! keep up the good work
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
269
Mike Lewis
Mike Lewis
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
155
malpa
malpa
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
136
Rayj0000
Rayj0000
amrmnabil
  • Locked
  • Question
Dynamic Control Name Access 1
Replies
2
Views
48
amrmnabil
amrmnabil
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
231
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top