concatenating form inputs to submit in one onsubmit string

[dwdog]

I am trying to customize the search function provided by Volusion shop cart. The cart is written in ASP, but the search function is executed in Javascript. I have successfully built the form elements to fit into the space needed for the search function.

The problem is formatting the submit string to be a concatenation of the three form inputs into one string without the input ID's.

The result I currently get is:

mywebsite/SearchResults.asp?CartType=cartridge&Mfr=HP&Search=56

What I need to get is:

mywebsite/SearchResults.asp?Search=cartridge+hp+56

The wrinkle is that "Search" is the only variable that the search function reads, so somehow I have to get the other inputs added to the Search input before the search function is invoked.

The code that I am working with follows. The issue starts at "CUSTOM CODE STARTS". The form action is set to "SearchResults.asp" which I cannot directly modify. It accepts only the "Search" variable values, hence the need to concatentate the inputs.

<%
'*************************************
'CUSTOM CODE START
'*************************************
%>
[COLOR=blue]<form id="CustomSearch" name="Search" method="get" action="<%=(Config_FullStoreURL)%>SearchResults.asp">[/color]
  <table bgcolor="#FFFFFF" width="155" border="1">
  <tr>
    <th width="10" bgcolor="#66FF66" scope="row"><span>1</span></th>
    <td width="145"><p align="center">
    <label>
      <input type="radio" name="CartType" value="cartridge" checked="true" /><strong>
      Inkjet</strong></label>	
    <label>
      <input type="radio" name="CartType" value="toner" /><strong>
      Laser</strong></label>
  </p></td>
  </tr>
  <tr>
    <th bgcolor="#66FF66" scope="row"><span>2</span></th>
    <td><br /><p align="center"><strong>Printer Manufacturer:</strong></p>
    <select name="Mfr">
      <option>Select Printer Mfr</option>
      <option value="Brother">Brother</option>
      <option value="Canon">Canon</option>
      <option value="Dell">Dell</option>
      <option value="Epson">Epson</option>
      <option value="HP">HP</option>
      <option value="IBM">IBM</option>
      <option value="Lexmark">Lexmark</option>
      <option value="Okidata">Okidata</option>
      <option value="Panasonic">Panasonic</option>
      <option value="Pitney Bowes">Pitney Bowes</option>
      <option value="Ricoh">Ricoh</option>
      <option value="Samsung">Samsung</option>
      <option value="Sharp">Sharp</option>
      <option value="Xerox">Xerox</option>
      <option value="Other">Other</option>
    </select>
    <br />
  </td>
  </tr>
  <tr>
    <th bgcolor="#66FF66" scope="row"><span>3</span></th>
    <td><div align="center"><br />
        <span><strong>Cartridge Number: </strong><br />
        </span>	
    <table width="90%" border="0" cellspacing="0" cellpadding="0">
                <tr> 
                  <td valign="middle" width="1%" align="right"><img src="<%=SEOImage(Config_ImagesFolder & "/clear1x1.gif")%>" width="5" height="30" align="absmiddle"></td>
                  <td width="40%" valign="middle">
				<script language=Javascript>
				// convert all characters to lowercase to simplify testing 
				var agt=navigator.userAgent.toLowerCase(); 
				// *** BROWSER VERSION *** 
				// note: on IE5, these return 4, so use is_ie5up to detect IE5. 
				var is_major = parseInt(navigator.appVersion); 
				var is_minor = parseFloat(navigator.appVersion); 
				var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1) 
				            && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1) 
				            && (agt.indexOf('webtv')==-1)); 
				var is_nav4 = (is_nav && (is_major == 4)); 
				var is_nav4up = (is_nav && (is_major >= 4)); 
				var is_navonly      = (is_nav && ((agt.indexOf(";nav") != -1) || 
				                      (agt.indexOf("; nav") != -1)) ); 
				var is_nav5 = (is_nav && (is_major == 5)); 
				var is_nav5up = (is_nav && (is_major >= 5)); 
				var is_ie   = (agt.indexOf("msie") != -1); 
				var is_ie3  = (is_ie && (is_major < 4)); 
				var is_ie4  = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")==-1) ); 
				var is_ie4up  = (is_ie  && (is_major >= 4)); 
				var is_ie5  = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) ); 
				var is_ie5up  = (is_ie  && !is_ie3 && !is_ie4); 
				</script>
				[COLOR=blue]<script language=Javascript>
				if (is_nav4) {
					document.write('<input type=text name=Search value="<%=Replace(Request.QueryString("Search"),"'","\'")%>" size=7 maxlength=50>');
				} else if (is_nav5up) { 
					document.write('<input type=text name=Search value="<%=Replace(Request.QueryString("Search"),"'","\'")%>" size=12 maxlength=50>');
				} else { 
					document.write('<input type=text name=Search value="<%=Replace(Request.QueryString("Search"),"'","\'")%>" size=12 maxlength=50>'); 
				}    
				</script>[/color]				  </td>
                  <td width="1%" valign="middle"><img src="<%=SEOImage(Config_ImagesFolder & "/clear1x1.gif")%>" width="3" height="1" align="absmiddle"></td>
                  <td width="40%" valign="middle">
                  [COLOR=blue]<input type="image" border="0" name="Search" src="<%=SEOImage(Config_ImagesFolder & "/buttons/btn_go.gif")%>">[/color]                  </td>
                </tr>
            </table>

    
  </div></td>
  </tr>
</table>
</form>
<%
'*************************************
'CUSTOM CODE END
'*************************************
%>

I do appreciate any suggestions or solutions gratefully.

Dan

 

[feherke]

Hi

First of all, I would remove that huge mess of browser detection. ( For more read "Object detection" by Peter-Paul Koch. )

Then I would put the Search [tt]input[/tt] as :

<input type="hidden" name="Search" value="">

And finally I would use JavaScript only to set the [tt]value[/tt] for the Search [tt]input[/tt] in the [tt]form[/tt]'s [tt]onsubmit[/tt] event handler :

document.Search.Search.value=
  document.Search.CartType[document.Search.CartType[1].checked+0].value+'+'+
  document.Search.Mfr.options[document.Search.Mfr.selectedIndex].value+'+'+
  [gray]// whatever the third control requires[/gray]

By the way, I would use distinct names for the [tt]form[/tt] and the [tt]input[/tt].

I suppose the ASP script will ignore the GET parameters which does not understand. If not, just set the [tt]input[/tt]'s [tt]name[/tt] to empty string ( '' ) and they will not be submitted.

Next time please cut off the ASP code. And if possible also cut off the HTML with pure decorative purpose.

Feherke.

http://rootshell.be/~feherke/

 

[dwdog]

Thanks, Feherke. I got it running with your help.

Dan