Solved

javascript select box parsing value to URL

Posted on 2004-04-19
5
1,557 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Bootstrap Form 16 37
send email part1 9 39
Possible propagation problem 1 34
Asp response.write to clients 6 32
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

685 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