Solved

javascript select box parsing value to URL

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Sending E-mail ASP.Net 3 55
MacOS and programming in React 7 27
reveal text field based on selected 10 24
Animated .jpg? 13 57
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

929 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

11 Experts available now in Live!

Get 1:1 Help Now