Discuss "Text or List option plus" in the JavaScript Programming forum.

Rebelle · #1 (**permalink**) June 12th, 2008, 02:18 PM

Hi All,

This is similar to another thread i posted but it's taking it a step further.

I first put together the code below on a form with other fields,
which works to select a MatNum from a list then it gives any matching
descriptions to that matnum. I pick a MatNum from list, then I get all
descriptions in a list.

Code:

<td>Mat Num:</td>
                <td>
                    <select class="clrBg" size="1" name="MatNum" onChange="document.form.action='<%=request.servervariables("Script_Name")%>';document.form.submit();">
                        <%
                        strSQL = "Select Distinct MaterialNum from tblListMaster Order by MaterialNum"
                        set rs = conn.execute(strSQL)
                        do while not rs.eof  %>
			<option value="<%=rs("MaterialNum")%>" <%if rs("MaterialNum") = strMatNum then response.Write(" selected=""selected""") end if%>><%=rs("MaterialNum")%></option>
                            <%
                            rs.movenext
                        loop
                        %>
			
                    </select>
                </td>
            </tr>

	<tr>
                <td>Test Item Desc.:</td>
                <td>
                    <select size="1" name="ItemDescription">
                        <%
                        strSQL = "Select Distinct MaterialNum,ItemDesc from tblListMaster where MaterialNum='" & strMatNum & "' Order by ItemDesc"
                        set rs = conn.execute(strSQL)
                        do while not rs.eof  %>
			
			<option value="<%=checkOutTxt(rs("ItemDesc"))%>" <%if rs("ItemDesc") = strItemDesc then response.Write(" selected=""selected""") end if%>><%=rs("ItemDesc")%></option>
                            <%
                            rs.movenext
                        loop
                        %>
			
                    </select>
                </td>
            </tr>

Changed above to below because what I would like to do is....
1) make MatNum a textbox with option to Pick from
list...so if you don't want to type in a textbox you can select from list. (see function below does this)
2) if the textbox matnum is chosen then you should get a textbox for description
3) if you pick from the matnum list then you should get the description list.

I tried the below and I get the textbox and text reading Pick from list, so
I pick from list but it doesn't update my description list......

Here is the code:

Code:

objectType = 0;
function changeFormObject() {
	var object_span = "";
	var change_span = "";
	if (objectType != 1) {
		object_span += ("<input type='text' name='MatNum' />");
		change_span += ("Pick from List!");
		objectType = 1;
	}
	else {
		object_span += ("<select name='MatNum'>");
		
		object_span += ("<option value=''> - SELECT - </option>");
		//for (o=1;o<=10;o++) {
			<%
			strSQL = "Select Distinct MaterialNum from tblListMaster Order by MaterialNum"
                        set rs = conn.execute(strSQL)
			Do while not rs.eof
				response.write (vbcrlf&"object_span += ""<option value='" & rs("MaterialNum") & "'>" & rs("MaterialNum") & "</option>""")
				rs.movenext
			Loop
			%>
			//object_span += ("<option value='" + o + "'>ITEM " + o + "</option>");
		//}
		object_span += ("</select>");
		change_span += ("change to textbox.");
		objectType = 2;
	}

	document.getElementById("object_span").innerHTML = object_span;
	document.getElementById("change_span").innerHTML = change_span;
}

with load...

Code:

<BODY class="clrBg" onload="changeFormObject()">

in my form:

Code:

<TR>
	<TD>Mat Num:</TD><TD><span id="object_span"></span>&nbsp;&nbsp;<span id="change_span" onclick="changeFormObject()" onmouseover="this.style.cursor='pointer';"></span>
	</TD>
	</TR>
	
	<tr>
                <td>Test Item Desc.:</td>
                <td>
                    <select size="1" name="ItemDescription">
                        <%
                        strSQL = "Select Distinct MaterialNum,ItemDesc from tblListMaster where MaterialNum='" & strMatNum & "' Order by ItemDesc"
                        set rs = conn.execute(strSQL)
                        do while not rs.eof  %>
			
			<option value="<%=checkOutTxt(rs("ItemDesc"))%>" <%if rs("ItemDesc") = strItemDesc then response.Write(" selected=""selected""") end if%>><%=rs("ItemDesc")%></option>
                            <%
                            rs.movenext
                        loop
                        %>
			
                    </select>
                </td>
            </tr>

Any help or suggestions is greatly appreciated. Thanks!

jmurrayhead · #2 (**permalink**) June 16th, 2008, 09:26 AM

Hmm...ya lost me on this. What exactly are you trying to do with this?

Rebelle · #3 (**permalink**) June 16th, 2008, 09:43 AM

sorry JMurrayhead...let me see if i can explain a little better.

I have field Mat Num which is a textbox when the page is loaded but have text next to it "Pick from list!", this will give a list instead of text box. If I pick a Mat num from the list, then I want to pull in all the matching Item Descriptions in a listbox in field called Item Description. Right now, it's pulling a list but it's not the list for the matching MatNum I pick.

Let me know if you need more info.

Thanks for your help!

jmurrayhead · #4 (**permalink**) June 16th, 2008, 09:49 AM

Do you have a url I could see this at? It sounds like you need to get some AJAX involved.

Rebelle · #5 (**permalink**) June 16th, 2008, 10:13 AM

ok, here is a sample i hope helps explain....but i want to use it with a recordset...pulling from my table(s).

also, something I just thought of....that's probably why you're confused....ok, if I don't pick from the list, then i would like Item Description to be a textbox, not a drop down list. Item description should only be a list if MatNum list is used.

jmurrayhead · #6 (**permalink**) June 16th, 2008, 10:30 AM

Am I missing something...the example doesn't do anything lol

Another thing to think about is if someone doesn't type anything into MatNum, how is the code going to know that it needs to display a textbox instead of a listbox? Maybe provide a checkbox or something, that when checked, will hide the dropdownlist and display a textbox. Or, if the form is submit, check if MatNum has a value or not, and if not, display the textbox and hide the dropdownlist.

Rebelle · #7 (**permalink**) June 17th, 2008, 11:17 AM

Ok, I stumbled upon this, with the code like below...I added if statement to handle the Item Descripton field...when page is loaded, my Item Description field is a textbox which is good, then I select a "Category" then select "Size" then choose "Pick from list!" for MatNum, I can pick from list but it doesn't display the value I pick and it doesn't change the ItemDescription field to list, but if I go back and change my select for "Category" (this re-runs the onChange on this field which refreshes the page), it then recognizes the MatNum I picked but still doesn't show the matnum value in the matnum field, but it does load the correct list for Item Desc.

1) How can I get to pass the value I select for MatNum in the javascript function?

When I attempted this yesterday, the forum was down so I posted the error at the other place.

2) Even though I can go back and use "Category" to refresh the page....how can I make it display the value I selected for MatNum?

function:

Code:

objectType = 0;
function changeFormObject() {
	var object_span = "";
	var change_span = "";
	if (objectType != 1) {
		object_span += ("<input type='text' name='MatNum' />");
		change_span += ("Pick from List!");
		objectType = 1;
	}
	else {
		object_span += ("<select name='MatNum'>");
		
		object_span += ("<option value=''> - SELECT - </option>");
		
			<%
			strSQL = "Select Distinct MaterialNum from tblListMaster Order by MaterialNum"
                        set rs = conn.execute(strSQL)
			Do while not rs.eof
				response.write (vbcrlf&"object_span += ""<option value='" & rs("MaterialNum") & "'>" & rs("MaterialNum") & "</option>""")
				rs.movenext
			Loop
			%>
			
		object_span += ("</select>");
		change_span += ("change to textbox.");
		objectType = 2;
	}

	document.getElementById("object_span").innerHTML = object_span;
	document.getElementById("change_span").innerHTML = change_span;
}


<BODY class="clrBg" onload="changeFormObject()">

Code:

<TR>
          <TD CLASS="fieldLblB" WIDTH="120"><B>Category:</TD>
          <TD>
            <SELECT CLASS="clrBg" name="Category" onChange="document.form.action='<%=request.servervariables("Script_Name")%>';document.form.submit();">
              <OPTION>
	<%= GetOptionList("vwCat_Size", "CatID", "Category", " Order by Category", strCatID) %>
	</OPTION>
          </SELECT> 
          </TD>
	</TR>

	<tr>
                <td>Size:</td>
                <td>
                    <select size="1" name="ALSize">
                        <%
                        strSQL = "Select Distinct ALSize from vwCat_Size where CatID='" & strCatID & "' Order by ALSize"
                        set rs = conn.execute(strSQL)
                        do while not rs.eof  %>
                            <option value="<%=rs("ALSize")%>"><%=rs("ALSize")%></option>
                            <%
                            rs.movenext
                        loop
                        %>
			
                    </select>
                </td>
            </tr>

<TR>
	<TD>Mat Num:</TD><TD><span id="object_span"></span>&nbsp;&nbsp;<span id="change_span" onclick="changeFormObject()" onmouseover="this.style.cursor='pointer';"></span>
	</TD>
	</TR>
	
	<tr>
                <td>Test Item Desc.:</td>

		<% if strMatNum = "" then%>

		<TD>
            <INPUT  CLASS="clrBg" type="text" name="ItemDescription" size="50" maxlength="50" VALUE="<%= strItemDesc %>">
          	</TD>

		<%else%>

                <td>
                    <select size="1" name="ItemDescription">
                        <%
                        strSQL = "Select Distinct MaterialNum,ItemDesc from tblListMaster where MaterialNum='" & strMatNum & "' Order by ItemDesc"
                        set rs = conn.execute(strSQL)
                        do while not rs.eof  %>
			
			<option value="<%=checkOutTxt(rs("ItemDesc"))%>" <%if rs("ItemDesc") = strItemDesc then response.Write(" selected=""selected""") end if%>><%=rs("ItemDesc")%></option>
                            <%
                            rs.movenext
                        loop
                        %>
			
                    </select>
                </td>
		
		<%end if%>
            </tr>

Rebelle · #8 (**permalink**) June 17th, 2008, 12:20 PM

a wittle closer...hehe

added text in red, so now it holds the value:

Code:

objectType = 0;
function changeFormObject() {
	var object_span = "";
	var change_span = "";
	if (objectType != 1) {
		object_span += ("<input type='text' name='MatNum' value='<%= strMatNum %>'/>");
		change_span += ("Pick from List!");
		objectType = 1;
	}
	else {
		object_span += ("<select name='MatNum'>"); 
		
		object_span += ("<option value=''> - SELECT - </option>");
		
			<%
			strSQL = "Select Distinct MaterialNum from tblListMaster Order by MaterialNum"
                        set rs = conn.execute(strSQL)
			Do while not rs.eof
				response.write (vbcrlf&"object_span += ""<option value='" & rs("MaterialNum") & "'>" & rs("MaterialNum") & "</option>""")
				rs.movenext
			Loop
			%>
			
		object_span += ("</select>");
		change_span += ("change to textbox.");
		objectType = 2;
	}

	document.getElementById("object_span").innerHTML = object_span;
	document.getElementById("change_span").innerHTML = change_span;
}

just need to figure out how to make it refresh MatNum field without having to use Category (onChange) to pass/refresh it....any ideas? is this even possible in the javascript function?

thanks everyone!

jmurrayhead · #9 (**permalink**) June 17th, 2008, 12:27 PM

Sounds like you need to either:

a.) Cause the page to post back to itself to refresh that data or...

b.) Utilize AJAX to refresh the data without refreshing the whole page

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
text display problem	todd2006	HTML & CSS Help	10	May 7th, 2008 08:14 PM

Discuss "Text or List option plus" in the JavaScript Programming forum.

JavaScript Programming - Javascript is a cross-browser client-side scripting language. Discuss Javascript and AJAX related scripts here.