Write a function that receives the form from the submit button, put the
function in the submit button's "onclick" attribute. Give names to the
options in the dropdowns
New options:
<option *name="dropdown"* value='where F <= 1969 and F >= 1965'>Between
1969 and 1965</option>
New Submit button:
<input id="button" type="button" value="Submit" onclick="reDraw(this.form)"
></input>
Function example, you might have to expand it a bit depending on how many
values you're passing:
function reDraw(formValues)
{
var item = formValues.dropdown.selectedIndex;
var value1 = formValue.dropdown.options[item].text;
setQuery(value1);
}
Hope this helps.
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/-/rAcfzhVZHbAJ.
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.
