submit form on select change not working!

Don't use the javascript: protocol when the script is not in an url.

Accessing elements as if they were global variables only works in some browsers and only in quirks mode. You can either access the form from the properties in the select element, or use the getElementById method:

onchange="this.form.submit();"

or

onchange="document.getElementById('form1').submit();"

stil not working.

this is my entire code. I am getting an object doesnt support this proerty or method error'

<cfif structkeyExists(form, 'brand')>
      <cfquery name="selectedBrand" datasource="puredenim">
            SELECT *
            FROM items
            WHERE brandid = '#form.brand#'
      </cfquery>
</cfif>


<cfquery name="brands" datasource="puredenim">
      SELECT *
      FROM BRANDS
</cfquery>
<link href="styles.css" rel="stylesheet" type="text/css" />


Please select a brand from the dropdown box.<br />
<cfform id="form1" name="form1" method="post" action="">
  <label>
  <select name="brand" id="brand" onchange="document.getElementById('form1').submit();">
  <cfif isdefined('selectedbrand.recordcount') and selectedbrand.recordcount EQ 0>
  <option value="" selected>Please Select</option>
  </cfif>
  <cfoutput query="brands">
    <option value="#ID#">#name#</option>
  </cfoutput>
  </select>
  </label>
</cfform>
<hr />
<cfif isdefined('selectedbrand.recordcount') and selectedbrand.recordcount GT 0>
<table width="700" border="0" cellspacing="2" cellpadding="2">
<cfoutput query="selectedbrand">
  <tr>
    <td width="116">
      <div class="thumbs"><p>&nbsp;</p><p>Photo here!</p></div></td>
    <td width="120">#name#&nbsp;</td>
    <td width="382">#description#&nbsp;</td>
    <td width="56">#Price#&nbsp;</td>
  </tr>
  </cfoutput>
</table>
<cfelseif isdefined('selectedbrand.recordcount') and selectedbrand.recordcount EQ 0>
No items found. Please try again.
</cfif>

Try clearing your browser cached and refreshing the page... that's the error I was getting when I was testing the form before I removed the hidden submit field. After the field was removed, the form worked.

http://www.shoppuredenim.com/site/shop.cfm

go to this link and click shop by brand and see what happens

if you notice, its passing the submit value into the url why???????

ok, here is the deal, I put a submit button beside it and it performs exactly like I want it to but I dont want it to use a submit button I want it to do the same exact action on the onChange event so what so I do then?

Change the id of the form. Your login form also has the id form1, and each id has to be unique. You can't use an id for more than one element.

didnt work. also this form is nested in an ajax apge so it shouldnt matter.

It didn't work because you named the form "brandform" and tried to submit the form "brandForm". Identifiers in Javascript are case sensetive.

Use:

onchange="document.getElementById('brandform').submit();"

And change the id and name of the submit button. It conflicts with the submit method of the form.

When you update part of a page using ajax, it's not a separate page that you are loading. The code is added as part of the page, so it has to play along with the rest of the code in the page.

ok I did what you said, but now that I am not using the button, it is opening a new page. I cant have this happen. What do I do?

judson

Go back and see what I mean.

Also, along with why is it not working, why is it putting all of that stuff up in the url?

J

Of course it's opening a new page. That's what happens when you submit the form. That is exactly what you asked for.

The stuff in the url is the url. The address of the page is what is shown in the address field.

Perhaps you are not at all trying to submit the form? Perhaps you are trying to update part of the page using ajax?

I am basically trying to run the queries at the top of the page when  users changes the select box. Is there another way?


Judson

well?

I still have not heard anything back, what do I do here?