Solved

JavaScript,  Radio Buttons and Oracle Webserver 2.1

Posted on 1997-11-24
10
573 Views
Last Modified: 2008-02-26
In my program, I need to do two things. One, select a choice from a series of radio buttons to get a value that the next page needs to perform a search thru a table repeating until the proper value is found, and Two, use that selected value to end the search procedure if desired and go to an update page. The table being searched contains parent, child, sub-child , etc values. The page contains two buttons, "Continue Search" and "Finish". The "Finish button will appear alone if there are no child values for the selected value meaning the lowest search level has been reached. The buttons each have their own form as well.
My current javascript is to use the onClick method(?) when the user selects a radio button which executes the script:
htp.p('  <SCRIPT LANGUAGE = "javascript">');
htp.p('  <!--  Hide script from non-java browsers');
htp.p('    function NewTarget(valuefrom, valueto)');
htp.p(' {');
htp.p('        valueto.value = valuefrom.value ');
htp.p('   alert(" new_target Value is " + valueto.value + " v_target = " + valueto.value)');
htp.p('        return valueto ');
htp.p(' }');
htp.p('   // End script hiding -->');
htp.p('  </SCRIPT>');
where valuefrom is the selected value and valueto is the value that I want to pass to the next page if the user ends the search. Obviously, the alert is just to show what is happening. What happens is on the first time thru the search I get an "undefined" value for each variable and if the user ends the search without going to the lowest search level, the passed value is always "undefined". Am i doing something wrong with Javascript?

Just to recap, what I want to do is use javscript to pass a value to another form to end the above described search routine.
Feel free to email if you have any questions for me.

Thanx,       George
0
Comment
Question by:gpequegn
  • 6
  • 4
10 Comments
 
LVL 2

Expert Comment

by:rigansen
Comment Utility
Posting the whole page would help a lot!!
but if you can't just post the part of your code (maybe the whole form) from where you're calling function NewTarget(...) and the code associated to the two buttons,

are you working with frames ?
will the new page that receives the value completly replace the current page that contains the radio buttons ?

rigansen.
0
 

Author Comment

by:gpequegn
Comment Utility
Thanx for the quick reply...Nope, no frames are involved on the page. To make things a bit simpler (because it is Monday morn and the coffee is not hot yet) all I want to do is to be able to select one value, save it in another variable for use when the user wants to terminate the search routine. I'm a total newbie at both javascript and Oracle Webserver.
Once the user has found the value they want and exit the procedure, the new page accepts the chosen value for use in a table updating routine. This is where my problem lies. How do I share the data between two forms on the same page????
When the user finds the lowest level in the search routine, the program forces them to use one of the listed values (radio buttons). No problem there.  Here is a bit of code that may help.
be gentle because I know not what i am doing (yet).
----------------------------------------------------------------
PROCEDURE search_area_1 (class_id IN VARCHAR2 DEFAULT NULL,
                  security_ID IN VARCHAR2 DEFAULT NULL,
                  user_id IN VARCHAR2 DEFAULT NULL,
                  v_search_level IN VARCHAR2 DEFAULT NULL,
                  v_entry  IN VARCHAR2 DEFAULT NULL,
                  v_target IN VARCHAR2 DEFAULT NULL,
                  new_target IN VARCHAR2 DEFAULT NULL)
is                            
cursor curs_area_name is select hr_area_name, area_id from dbo_area where hr_parent = '0'
            and hr_active = 'Y' order by hr_area_name;
area_name curs_area_name%ROWTYPE;
-- ALL THE AREAS
cursor curs_all_areas is select hr_area_name,hr_parent, area_id, hr_city from dbo_area;
ALL_AREAS CURS_ALL_AREAS%rowtype;
CURSOR curs_target_area IS SELECT * FROM dbo_area WHERE hr_parent = v_target;
target_area curs_target_area%ROWTYPE;
area_display chosen_areas_array; --> TABLE TO HOLD AREAS FOR DISPLAY.
area_childless chosen_areas_array; --> TABLE TO HOLD childless AREAS FOR DISPLAY.
finished_array chosen_areas_array;
v_index                  BINARY_INTEGER := 0;
v_index_1            BINARY_INTEGER;
v_index_2            BINARY_INTEGER := 0;
v_last                  BINARY_INTEGER;
v_last_1            BINARY_INTEGER;
v_counter            BINARY_INTEGER;
v_children_found      BINARY_INTEGER := 0;
city_total            BINARY_INTEGER := 0;
v_target_hidden            VARCHAR2(12);
--new_target            VARCHAR2(12);
--
begin
-->>>> SOME NOTES: THIS ROUTINE CAN BE ACCESSED FROM SEVERAL ENTRY POINTS. FOR EX. A USER CAN SEARCH FOR A
-->>>> PROGRAM OR COURSE, A TP CAN USE THE SEARCH TO NARROW DOWN THE GEOGRAPHIC AREA AND THEREFORE THE #
-->>>> OF LOGIN NAMES IN THE DROP-DOWN LIST AND THE SUPER ADMIN USES THE SEARCH TO FIND AN AREA TO ASSIGN AS
-->>>> A PARENT AREA TO A NEWLY CREATED AREA OR TO FIND AN AREA TO MODIFY OR DELETE. THE USER IS FORCED TO
-->>>> PROCEDD UNTIL THERE ARE NO MORE CHILD AREAS. A TP OR ADMIN WILL BE ABLE TO EXIT THE ROUTINE WHEN
-->>>> THEY FIND THE VALUE THEY ARE LOOKING FOR. ALSO, THE ADMIN CAN ONLY SELECT ONE VALUE TO MODIFY, DELETE
-->>>> OR ASSIGN AS A PARENT AREA. THE USER WILL GO TO A SEARCH CRITERIA PAGE UPON EXIT AND THE OTHERS WILL
-->>>> RETURN TO THE CALLING PAGE.
htp.p('<html>');
htp.p('<head>');
htp.p('  <SCRIPT LANGUAGE = "javascript">');
htp.p('  <!--  Hide script from non-java browsers');
htp.p('    function NewTarget(valuefrom, valueto)');
htp.p(' {');
htp.p('        valueto.value = valuefrom.value ');
htp.p('   alert(" new_target Value is " + valueto.value + " v_target = " + valueto.value)');
htp.p('        return valueto ');
htp.p(' }');
htp.p('   // End script hiding -->');
htp.p('  </SCRIPT>');
htp.p('<title>HRDC Interactive Training Inventory</title>');
htp.p('</head>');
htp.p('<body bgcolor="#FFFFFF" link="#000000" vlink="#000000"
alink="#000000" topmargin="0">');
htp.p(' <center><font size="4"><strong>HRDC
            Interactive Training Inventory - Select HRDC Region</strong></font>');    
htp.p('<hr>
<p>Select the region(s) in which you would like to search. If
you would like to use a map of Canada to make your selection,
click here. <a href = /iti/owa/common.select_prov_from_map>&lt;&quot;USE MAP&quot;&gt;</a>.
Otherwise, select Area(s) from the list below. </p>
<hr></center>');
--      ERROR CHECKING HERE. IF ARRAY LENGTH IS 1 AND NOT THE FIRST TIME THRU THE ROUTINE, NO CHOICES HAVE BEEN MADE.
IF v_search_level  IS NOT NULL AND v_target IS NULL THEN --> NO CHOICES MADE ON PREVIOUS SCREEN. WILL SKIP IF FIRST SCREEN
      htp.fontopen (csize => '4');
      htp.p('<br>');
      htp.strong('You must make at least one choice to continue. Use the "BACK" button
                  on your browser to return to the previous screen.');
      htp.fontclose;
      htp.p('<br>');
      htp.p('<br>');
      htp.hr;
ELSE
--**** IF THIS IS NOT THE FIRST SEARCH,
--**** CHECK EACH ELEMENT IN THE ARRAY TO LOOK FOR CHILDREN. IF THE AREA HAS NO CHILDREN, PUT IT
--**** INTO THE ARRAY AND ADD IT TO THE DISPLAY AS CHECKED. IF THE AREAS HAS CHILDREN, DISPLAY THEM.
--**** THE FIRST ELEMENT IS DUMMY TO PREVENT A NULL TABLE, BUT WILL NOT BE DISPLAYED BECAUSE IT
--**** HAS NO MATCHING AREA IN THE DATABASE.
 IF v_search_level IS NULL THEN   --> ONLY FOR THE HIGHEST-LEVEL AREAS. PREVENTS SKIPPING ALL OTHER AREAS
      V_CHILDREN_FOUND := 1;    --> BECAUSE THESE AREAS WILL NOT SHOW AS HAVING CHILDREN THIS TIME
     END IF;                         --> THROUGH THE PROCEDURE
--
--
 IF  v_children_found >= 1  AND city_total <> (v_index - 1) THEN  --> CHILDREN HAVE BEEN FOUND, ALLOW ANOTHER SEARCH **** NEW RULES --- DO NOT
                         --> ALLOW THE USER TO SEE CITIES BECAUSE A CTIY CANNOT BE A PARENT
      htp.formopen('/iti/owa/sup_admin.search_area_1','post', cattributes => 'name="searchform"');
 ELSE
      IF v_entry = 'ADD_AREA' THEN      -->>> DEPENDS ON THE ENTRY PROCEDURE. OTHER CALLING PROCEDURES WILL RETURN TO
      htp.formOpen('/iti/owa/sup_admin.area_add','post', cattributes => 'name="searchform"');  --> THE CALLING PAGE FOR ADDING AN AREA
      ELSIF
      v_entry = 'MODIFY_AREA' THEN
      htp.formOpen('/iti/owa/sup_admin.area_modify','post', cattributes => 'name="searchform"');  --> THE CALLING PAGE FOR MODIFYING AN AREA      
      END IF;
 END IF;
--***************************      
 IF v_search_level IS NULL THEN
--*****************************LOOP FOR LISTING HIGHEST-LEVEL AREAS******************************/
--THIS CALL TO PROCEDURE WILL LIST ALL AREA WITH NO PARENT AREAS
      OPEN curs_area_name;
      loop
            FETCH curs_area_name INTO area_name;
            EXIT WHEN curs_area_name%NOTFOUND;
              v_index := v_index + 1;
            htp.formradio('v_target',area_name.area_id, cattributes =>
                        'onClick ="NewTarget(document.searchform.v_target, document.searchform.new_target)"');
            htp.print(area_name.hr_area_name);
            htp.nl;
      end loop;
      CLOSE curs_area_name;
ELSE                   --> THIS IS AFTER THE HIGHEST-LEVEL SEARCH
      v_index := 0;
      city_total := 0;
           OPEN curs_target_area; --> THIS RESETS THE CURSOR COUNTER TO 0 EACH TIME THRU
         LOOP    --> LOOP THRU CURSOR ONE AREA AT A TIME      
            FETCH curs_target_area INTO target_area;        
            EXIT WHEN curs_target_area%NOTFOUND;
                  v_index := v_index + 1;      
                  IF target_area.hr_city <> 'Y' THEN
                  htp.formradio('v_target',target_area.area_id, cattributes =>
                        'onClick ="NewTarget(document.searchform.v_target, document.searchform.new_target)"');
                  htp.p(target_area.hr_area_name);
                  htp.nl;
                  city_total := city_total + 1;
                  END IF;
        END LOOP;
       CLOSE curs_target_area;  --> CURSOR FINISHED
END IF; -->  SEARCH LEVEL PARAMETER
htp.formHidden('new_target',v_target);
--*********************************************************************************************************
htp.p('<br>');
htp.p('<div align="center"><center>');
htp.p('<table border="0" cellpadding="5" cellspacing="0" width="250">');
 htp.p('<tr>');
  IF v_children_found > 0  AND city_total <> (v_index - 1) THEN
        htp.formhidden('class_id',class_id);
        htp.formhidden('user_id',user_id);
          htp.formhidden('security_id',security_id);
        htp.formhidden('v_entry',v_entry);
         htp.formhidden('v_search_level','X'); --> ONLY NEED A FILLER TO GET RID OF A NULL VALUE
        htp.tableData(htf.formsubmit(NULL,'Enter Selected Region'), calign => 'left');
          htp.p('</form>');
    END IF;
        htp.formopen('/iti/owa/sup_admin.area_add','post');
      htp.formhidden('class_id',class_id);
      htp.formhidden('security_id',security_id);
      htp.formhidden('user_id',user_id);
--        htp.formhidden('v_target',new_target);
      htp.TableData(htf.formsubmit(NULL,'Finish'), calign => 'left');      
        htp.p('</form>');
    htp.p('</tr>');
htp.p('</table>');
htp.p('</center></div>');
END IF; --> IF NO CHOICES HAVE BEEN MADE
htp.br;
htp.br;
--
htp.p('<center>');
common.toolbar(class_id, security_id, user_id);
htp.p('</center>');
htp.p('</body>');
htp.p('</html>');
END search_area_1;
---------------------------------------------------------------
A quick explanation:
1. The first time thru this procedure lists all areas with no parents.
2. All subsequent times thru only the child areas will be listed depending on the radio button selected.
3. User must choose on value before continuing with the search.
This table consists of five fields: area_id, hr_area_name, hr_parent, hr_city and hr_active.
4. If the desired area is found, the "Finish" button should exit the program with the last radio button value selected passed as a parameter.
All areas with parents will have the parents area_id in the hr_parent field. Area with no parents have 'none' in that field.
Confused yet? If you want my personal email address just let me know....
0
 
LVL 2

Accepted Solution

by:
rigansen earned 300 total points
Comment Utility
I think the main problem is that you have two forms with the same name "searchform", I've created a couple of forms from the code you supplied, some names were kept the same for you to easily understand, I hope so!!

so, this is an example of how your forms should be coded:

<form action=/iti/owa/sup_admin.search_area_1 method=post name="searchformFROM">
<input type=radio name=v_target value="Area01" onClick ="NewTarget(this, document.searchformTO.new_target)">
<input type=submit value='Enter Selected Region'>
</form>

<form action=/iti/owa/sup_admin.area_add method=post name="searchformTO">
<input type=hidden name='new_target' value="new_target">
<input type=submit value='Finish'>
</form>


any problem ??
well, as it's hard to guess what the output of the code supplied would be, just post some example of an HTML script that shows the problem.

about your e-mail address, I think it would be better for you if everybody know what's going on with your question, that way anybody will be able to help you.

regards, rigansen.
0
 

Author Comment

by:gpequegn
Comment Utility
Sorry for posting in Oracle Stored procedures instead of HTML. Here is the HTML generated by those procedures.
This is a search page that is supposed to take the selected value on searchformFROM, transfer it to searchformTO, then allow the user to exit to the database update page if desired.
***************************************************************
<html>
<head>
  <SCRIPT LANGUAGE = "javascript">
  <!--  Hide script from non-java browsers
    function NewTarget(valuefrom, valueto)
 {
        valueto.value = valuefrom.value
   alert("v_target = " + valuefrom.value +  "   new_target = " + valueto.value)
 }
   // End script hiding -->
  </SCRIPT>
<title>HRDC Interactive Training Inventory</title>
</head>
<body bgcolor="#FFFFFF" link="#000000" vlink="#000000"
alink="#000000" topmargin="0">
 <center><font size="4"><strong>HRDC
            Interactive Training Inventory - Select HRDC Region</strong></font>
<hr>
<p>Select the region(s) in which you would like to search. If
you would like to use a map of Canada to make your selection,
click here. <a href = /iti/owa/common.select_prov_from_map>&lt;&quot;USE MAP&quot;&gt;</a>.
Otherwise, select Area(s) from the list below. </p>
<hr></center>
<FORM ACTION="/iti/owa/sup_admin.search_area_1" METHOD="post" name="searchformFROM">
<INPUT TYPE="radio" NAME="v_target" VALUE="10000000001" onClick ="NewTarget(document.searchformFROM.v_target, document.searchformTO.new_target)">
Manitoba
<BR>
<INPUT TYPE="radio" NAME="v_target" VALUE="10000000000" onClick ="NewTarget(document.searchformFROM.v_target, document.searchformTO.new_target)">
Ontario
<BR>
<br>
<div align="center"><center>
<table border="0" cellpadding="5" cellspacing="0" width="250">
<tr>
<INPUT TYPE="hidden" NAME="class_id" VALUE="S">
<INPUT TYPE="hidden" NAME="user_id" VALUE="10000001">
<INPUT TYPE="hidden" NAME="security_id" VALUE="4525938">
<INPUT TYPE="hidden" NAME="v_entry" VALUE="ADD_AREA">
<INPUT TYPE="hidden" NAME="v_search_level" VALUE="X">
<TD ALIGN="left"><INPUT TYPE="submit" VALUE="Enter Selected Region"></TD>
</form>
<FORM ACTION="/iti/owa/sup_admin.area_add" METHOD="post" name="searchformTO">
<INPUT TYPE="hidden" NAME="class_id" VALUE="S">
<INPUT TYPE="hidden" NAME="security_id" VALUE="4525938">
<INPUT TYPE="hidden" NAME="user_id" VALUE="10000001">
<INPUT TYPE="hidden" NAME="new_target" VALUE="">
<TD ALIGN="left"><INPUT TYPE="submit" VALUE="Finish"></TD>
<BR>
</form>
</tr>
</table>
</body>
</html>
***************************************************************
My problem seems to be that if there is more than one radio button in the list, the valueto and valuefrom in the J'Script are always "undefined". On the next page, this appears if the user has reached the end of the search (no more areas) and must make one selection to send to the update page. It appears to have the same difficulty. I hate to keep bothering you, but if I can gain a bit of knowledge then I can pass it on to other people. Your help is greatly appreciated here at work as we are all rather new to Web programming.
Anyway, here is the final search page.
**************************************************************
<html>
<head>
  <SCRIPT LANGUAGE = "javascript">
  <!--  Hide script from non-java browsers
    function NewTarget(valuefrom, valueto)
 {
        valueto.value = valuefrom.value
   alert("v_target = " + valuefrom.value +  "   new_target = " + valueto.value)
 }
   // End script hiding -->
  </SCRIPT>
<title>HRDC Interactive Training Inventory</title>
</head>
<body bgcolor="#FFFFFF" link="#000000" vlink="#000000"
alink="#000000" topmargin="0">
 <center><font size="4"><strong>HRDC
            Interactive Training Inventory - Select HRDC Region</strong></font>
<hr>
<p>Select the region(s) in which you would like to search. If
you would like to use a map of Canada to make your selection,
click here. <a href = /iti/owa/common.select_prov_from_map>&lt;&quot;USE MAP&quot;&gt;</a>.
Otherwise, select Area(s) from the list below. </p>
<hr></center>
<FORM ACTION="/iti/owa/sup_admin.search_area_1" METHOD="post" name="searchformFROM">
<INPUT TYPE="radio" NAME="v_target" VALUE="10000000003" onClick ="NewTarget(document.searchformFROM.v_target, document.searchformTO.new_target)">
Toronto
<BR>
<INPUT TYPE="radio" NAME="v_target" VALUE="10000000020" onClick ="NewTarget(document.searchformFROM.v_target, document.searchformTO.new_target)">
Oshawa
<BR>
<BR>
<br>
<div align="center"><center>
<table border="0" cellpadding="5" cellspacing="0" width="250">
<tr>
</form>
<FORM ACTION="/iti/owa/sup_admin.area_add" METHOD="post" name="searchformTO">
<INPUT TYPE="hidden" NAME="class_id" VALUE="S">
<INPUT TYPE="hidden" NAME="security_id" VALUE="4525938">
<INPUT TYPE="hidden" NAME="user_id" VALUE="10000001">
<INPUT TYPE="hidden" NAME="new_target" VALUE="">
<TD ALIGN="left"><INPUT TYPE="submit" VALUE="Finish"></TD>
<BR>
</form>
</tr>
</table>
</body>
</html>
***************************************************************
Thanks again
0
 
LVL 2

Expert Comment

by:rigansen
Comment Utility
don't worry about Oracle Stored procedures, it was just that you know better than anybody what you're trying to do, and looking at a *clean* code is also helpful.

and about "bothering", let me tell that once upon a time I didn't know anything about HTML and JS, and all I had to do was ask other people!!

I'll be in touch...

rigansen.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 2

Expert Comment

by:rigansen
Comment Utility
So you're all rather new to Web programming !?
well, let's do this step by step... ok??

let's change the script so the alert() shows what you're expecting, change this in your "searchformFROM":

<INPUT TYPE="radio" NAME="v_target1" VALUE="10000000001" onClick ="NewTarget(this, document.searchformTO.new_target)">
Manitoba
<BR>
<INPUT TYPE="radio" NAME="v_target2" VALUE="10000000000" onClick ="NewTarget(this, document.searchformTO.new_target)">
Ontario

if we use the same name for every "radio", they become a group, so you'd only be able to select *one* of them.
if we use different names for every "radio", you'd be able to select as many as you want.

you're going to have to modify the actual htp.formradio() in order to have different names.  That's piece of cake, so be my guest!! :)

I guess the next problem to solve is that we have several "FROM" values and only *one* "TO" value to store'em, but it's almost midnight here and I ZZZZzzzzzzzz.....

rigansen.
0
 

Author Comment

by:gpequegn
Comment Utility
A little clarification....I want the user to make only ONE choice....that is the reason for the radio buttons...also, you solved my problem without knowing!!!!!(I think)...Explanation-->>> I was using the wrong data type or something for the valuefrom variable. My code was "NewTarget(document.searchformFROM.v_target, document.searchformTO.new_target)". I changed to first parameter to the keyword "this". Now, everything works. My ignorance re JavaScript is exposed. My training book is in the mail, but the #%$$#@#$%^%$@! posties are on strike until who knows when. Anyways, thanks for the help....


George
0
 
LVL 2

Expert Comment

by:rigansen
Comment Utility
"without knowing", I think you underestimate me!! :)

I thought you needed more than one because of the "Select the region(s)".

Anyways, any time...

regards, rigansen.
0
 

Author Comment

by:gpequegn
Comment Utility
Whoopsie!!! I guess I should have said that this is "borrowed" code from another program where another function is performed and I haven't got around to doing the detail work yet. The other function uses checkboxes for multiple selections and I will get to work on that as soon as this is done. I don't think I underestimated you, it's just some newbie ignorance showing, but rapidly fading in the last few days. Funny, though that in the slim little volume of J'Script stuff I do have there is no mention of the keyword "this". Ah well, live and learn.

L8R
George
0
 
LVL 2

Expert Comment

by:rigansen
Comment Utility
then lucky me it was midnight, I could have been trying to solve the problem the whole day... :)

besides, "this" is like "self" !!

Ah well, learn and teach.

see ya!!

rigansen.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now