It's much easier to handle everything in javascript, rather than filling in the event handlers in HTML. I rewrote the script to do what you want: http://jsfiddle.net/asgallant/wQNDW/
Your data set here is fairly large, and the round-trip time for queries is noticeably long. You might be better served with one of two approaches: 1) set initial parameters for the query to limit how much data you pull from the server in the original query, or 2) make an initial query to the server to grab all of the data, and then use controls and filters<https://developers.google.com/chart/interactive/docs/gallery/controls#gallery>to allow your users to narrow the data set. 1 is faster on page load but the requeries will be slower than the filtering in 2. On Thursday, August 9, 2012 11:04:23 AM UTC-4, ERB wrote: > > I am trying to add a submit button to pass all the values selected in > the drop-downs at once and then display the results - rather than use the > onchange action which reloads the results every time a change is made one > by one ;[ > > For example a spreadsheet with age, gender, etc... as the columns - I > would want to select age = 25, gender = M, and hit submit for the results > all at once rather than have the chart re-draw when each one is selected! > > I know I can take the onchange='setQuery(this.value)' out, but how do I > use the submit button to pass all the values and re-draw the chart? > > Any help would be greatly appreciated. > > The Live Page - http://www3.govst.edu/ebrenes/pull.html > > The Code - > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " > http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="content-type" content="text/html; charset=utf-8"/> > <title>Credit Transfer</title> > <script type="text/javascript" src="http://www.google.com/jsapi > "></script> > <script type="text/javascript"> > google.load('visualization', '1', {packages: ['table']}); > </script> > <script type="text/javascript"> > var options = {'showRowNumber': false}; > var data; > var queryInput; > var query = new google.visualization.Query(' > http://spreadsheets.google.com/tq?key=0Ap9RqaTC2OT4dEFzWUk2Ymk3SXBmZ2xvbnJPRXBTeHc&pub=1' > ); > > function sendAndDraw() { > // Send the query with a callback function. > query.send(handleQueryResponse); > } > > function handleQueryResponse(response) { > if (response.isError()) { > alert('Error in query: ' + response.getMessage() + ' ' + > response.getDetailedMessage()); > return; > } > data = response.getDataTable(); > var table = new > google.visualization.Table(document.getElementById('querytable')); > table.draw(data, {'showRowNumber': false}); > } > > function setQuery(queryString) { > // Query language examples configured with the UI > query.setQuery(queryString); > sendAndDraw(); > queryInput.value = queryString; > } > google.setOnLoadCallback(sendAndDraw); > > </script> > </head> > <body style="font-family: Arial; border: 0 none;"> > <div style="margin-bottom: 10px; padding: 5px; border: 1px solid gray; > background-color: buttonface;"> > <span>Enter Your Search Criteria</span> > <form action=""> > <table style="font-size: 12px; "> > <tr> > <td>Colleges Transfering From:</td> > <td><select id='query-1' onchange='setQuery(this.value)'> > <option value=''>None</option> > <option value='where A = 1083'>COD</option> > <option value='where A = 1082'>Not COD</option> > </select></td> > <td>Start Date:</td> > <td><select id='query-2' onchange='setQuery(this.value)'> > <option value=''>None</option> > <option value='where F >= 2011'>Between Now and 2011</option> > <option value='where F <= 2010 and F >= 2005'>Between 2010 and > 2005</option> > <option value='where F <= 2004 and F >= 2000'>Between 2004 and > 2000</option> > <option value='where F <= 1999 and F >= 1995'>Between 1999 and > 1995</option> > <option value='where F <= 1994 and F >= 1990'>Between 1994 and > 1990</option> > <option value='where F <= 1989 and F >= 1985'>Between 1989 and > 1985</option> > <option value='where F <= 1984 and F >= 1980'>Between 1984 and > 1980</option> > <option value='where F <= 1979 and F >= 1975'>Between 1979 and > 1975</option> > <option value='where F <= 1974 and F >= 1970'>Between 1974 and > 1970</option> > <option value='where F <= 1969 and F >= 1965'>Between 1969 and > 1965</option> > </select></td> > <td><input id="button" type="button" value="Submit" onclick="" > ></input></td> > </tr> > </table> > </form> > </div> > <table style='width: 100%;'> > <tr style='font-size: 20px;'> > <td>Results</td> > </tr> > <tr> > <td style="width: 50%; padding: 10px; vertical-align: top;"> > <div id="querytable"></div> > <br></br> > </div> > </td> > </tr> > </table> > </body> > </html> > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/TisyVMO56gwJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
