Solved

javascript select box parsing value to URL

Posted on 2004-04-19
5
1,544 Views
Last Modified: 2012-05-04
I am building website for my office intranet and using WebFX javascript custom select box  (http://webfx.eae.net/dhtml/select/jsGenerated.html)

My problem is I am not familiar with javascript and I am confuse on how to make this 2 select box parsing values to URL (GET method) when form submited.
 
Here's my code:
 
<FORM action="test.asp" name="form1" method="get">
 
SELECT BOX 1
 
<SCRIPT type=text/javascript>
 
var optionArray1 = new Array();
optionArray1[0] = new Option("Item 1", "value1");
optionArray1[1] = new Option("Item 2", "value2");

writeSelectBox(optionArray, "select1", 1, "alert(this.options[this.selectedIndex].value)");

 
</SCRIPT>
 
 
SELECT BOX 2
 
<SCRIPT type=text/javascript>
 
var optionArray2 = new Array();
optionArray2[0] = new Option("Item 3", "value3");
optionArray2[1] = new Option("Item 4", "value4");
 
writeSelectBox(optionArray2, "select2", 1, "alert(this.options[this.selectedIndex].value)");

 
</SCRIPT>
 
SUBMIT BUTTON
 
<INPUT title="submit" type=image src="Image/test.gif">
 
 
</FORM>
 
My question is what I must do on statement   "alert(this.options[this.selectedIndex].value)"  
to make this 2 select box parsing values into test.asp URL
so URL on browser address will be  
http://127.0.0.1/test.asp?select1=value1&select2=value3
 
I try to learn javascript basic to solve this parsing problem, but I realize that javascript is not as simple as vbscript or ASP.
 
Please I really need your help.
 
Thanks and sorry for my English.
0
Comment
Question by:wieb18
  • 3
  • 2
5 Comments
 
LVL 6

Expert Comment

by:Lord_McFly
ID: 10862439
Normal behaviour when you use GET would be that the values from your <select> would be naturally in the URL (as you http://127.0.0.1/test.asp?select1=value1&select2=value3)

I had a quick look through the *'js files that are used for making the dropdown - from what I gather it is made up of complete tables or layers, this means that it isn't a true <form> object and probably the reason why its not passing any values.

Have you tried using POST instead?
0
 

Author Comment

by:wieb18
ID: 10865143
Using GET or POST will not passing value because the javascript command on WebFX custom select box is  "alert(this.options[this.selectedIndex].value)"

I had look around on WebFX site about this select box, there  is only two example, one is using command    "alert(this.options[this.selectedIndex].value)"    and the other using command    "window.open(this.options[this.selectedIndex].value, '_top')"

As I know, javascript  "alert"  command will be launch message box that contains value from  "this.options[this.selectedIndex].value" which is the value on selected area in select box
and javascript "window.open" command will be launch a new window which contain URL from value on selected area in select box.

My question, what is command in javascript for passing values (to replace that  "alert"  or "window.open" command)?

Please help.
0
 
LVL 6

Accepted Solution

by:
Lord_McFly earned 50 total points
ID: 10885445
Do you need any more assistance on this question?
0
 

Author Comment

by:wieb18
ID: 10885989
Comment from lil_puffball
Date: 04/20/2004 04:51PM PDT
 Comment  


Try this:

writeSelectBox(optionArray, "select1", 1, "var val1=this.form.select1.value,val2=this.form.select2.value;location.href='test.asp?select1='+val1+'&select2='+val2;");
 


Comment from wieb18
Date: 04/21/2004 12:35AM PDT
 Your Comment  


I try your sugestion and edit my script like this:

<FORM action="test.asp" name="form1" method="get">
 
SELECT BOX 1
 
<SCRIPT type=text/javascript>
 
var optionArray1 = new Array();
optionArray1[0] = new Option("Item 1", "value1");
optionArray1[1] = new Option("Item 2", "value2");

</SCRIPT>
 
SELECT BOX 2
 
<SCRIPT type=text/javascript>
 
var optionArray2 = new Array();
optionArray2[0] = new Option("Item 3", "value3");
optionArray2[1] = new Option("Item 4", "value4");

writeSelectBox(optionArray, "select1", 1, "var val1=this.form.select1.value,val2=this.form.select2.value;location.href='test.asp?select1='+val1+'&select2='+val2;");
 
</SCRIPT>
 
SUBMIT BUTTON
 
<INPUT title="submit" type=image src="Image/test.gif">
 
</FORM>


It is produce error  "OptionArray is undefined".
I tried edit OptionArray  to   OptionArray1   and   OptionArray2   to match with array in 2 select box above, but also error   "Object expected".

Please help, I am new in javascript.


 
Comment from lil_puffball
Date: 04/21/2004 12:43PM PDT
 Comment  


Could you post the code for the writeSelectBox function?
 


Comment from wieb18
Date: 04/21/2004 06:56PM PDT
 Your Comment  


Here is the code for the writeSelectBox function :

function writeSelectBox(matrix, id, size, onchange, css) {
     var d = window.document;

     var ie4 = (document.all != null);

     if (ie4) {
//          alert("Before!");
          var s = createIEString(matrix, id, size, onchange, css);
          document.write(s);
//          alert("After!");
//          alert(s);
     }

     else {
          document.write(createXString(matrix, id, size, onchange, css));
     }
}

function createIEString(matrix, id, size, onchange, css) {
     var str = "";
     // Span startTag    
          str += '<span class="select"';
          if (size == null)
               size = 1;
          str += ' size="' + size + '"';    
          if (id != null)
               str += ' id="' + id + '"';
          if (onchange != null)
               str += ' onchange="' + onchange + '"';
          if (css != null)
               str += ' style="' + css + '"';
          str += '>\n';
     
     // Table Tag
          str += '<table class="selectTable" cellspacing="0" cellpadding="0"\n';
          str += ' onclick="toggleDropDown(this.parentElement)">\n';
          str += '<tr>\n';
          str += '<td class="selected">&nbsp;</td>\n';
          str += '<td align="CENTER" valign="MIDDLE" class="Button"\n';
          str += ' onmousedown="this.style.border=\'2 inset buttonhighlight\'"\n';
          str += ' onmouseup="this.style.border=\'2 outset buttonhighlight\'">\n';
          str += '<span style="position: relative; left: 0; top: -2; width: 100%;">6</span></td>\n';
          str += '</tr>\n';
          str += '</table>\n';
         
     // DropDown startTag
          str += '<div class="dropDown" onclick="optionClick()" onmouseover="optionOver()" onmouseout="optionOut()">\n';
         
          for (var i=0; i<matrix.length; i++) {
               html     = matrix[i].html;
               value    = matrix[i].value;
               css      = matrix[i].css;
               selected = matrix[i].selected;
               
          // Write option starttag
               str += '<div class="option"';
               if (value != null)
                    str += ' value="' + value + '"';
               if (css != null)
                    str += ' style="' + css + '"';
               if (selected != null)
                    str += ' selected';
               str += '>\n';
               
          // Write HTML contents
               str += html;
          // Write end tag
               str += '</div>\n';
          }
     
     //DropDown endtag
          str += '</div>\n';
         
     // Span endTag
          str += '</span>\n';
         
     return str;
}

function createXString(matrix, id, size, onchange, css) {
//     var str = "\n";
     // form startTag
     var str = '<form>\n';
     // Select startTag
     str += '<select';
     if (size == null)
          size = 1;
     str += ' size="' + size + '"';    
     if (id != null)
          str += ' id="' + id + '"';
     if (onchange != null)
          str += ' onchange="' + onchange + '"';
//     if (css != null)
//          str += ' style="' + css + '"';
     str += '>\n';
     // write options
     for (var i=0; i<matrix.length; i++) {
          html     = matrix[i].html;
          value    = matrix[i].value;
          css      = matrix[i].css;
          selected = matrix[i].selected;
         
     // Write option starttag
          str += '\n<option';
          if (value != null)
               str += ' value="' + value + '"';
//          if (css != null)
//               str += ' style="' + css + '"';
          if (selected != null)
               str += ' selected';
          str += '>';
         
     // Write HTML contents
          str += stripTags(html);
     // Write end tag
          str += '</option>\n';
     }
     str += '\n</select>\n';
     str += '</form>\n';

     return str;
}

function stripTags(str) {
     var s = 0;
     var e = -1;
     var r = "";

     s = str.indexOf("<",e);    

     do {
          r += str.substring(e + 1,s);
          e = str.indexOf(">",s);
          s = str.indexOf("<",e);
     }
     while ((s != -1) && (e != -1))

     r += str.substring(e + 1,str.length);

     return r;
}

function Option(html, value, css, selected) {
     this.html = html;
     this.value = value;
     this.css = css;
     this.selected = selected;
}
 

Please I still need help.
0
 

Author Comment

by:wieb18
ID: 10910291
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

705 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

18 Experts available now in Live!

Get 1:1 Help Now