admin管理员组

文章数量:1379611

I have the following HTML.

Currently it relies on the user hitting the 'Go' button to Submit the Form.

Is it possible to change this so it submits each time the user selects a dropdown option?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        ".dtd">
<html xmlns="" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Employees by Department</title>
    <script src="ajax.js" type="text/javascript"></script>
    <script src="dept.js" type="text/javascript"></script>
    <style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<!-- dept_form_ajax.html -->
<p>Select a department and click 'GO' to see the employees in that department.</p>
<form action="dept_results.php" method="get" id="dept_form">
<p>
<select id="did" name="did">
<option value="1">Human Resources</option>
<option value="2">Accounting</option>
<option value="3">Marketing</option>
<option value="4">Redundancy Department</option>
</select>
<input name="go" type="submit" value="GO" />
</p>
</form>

<select id="results"></select>
</body>
</html>

For the record, here is my dept.js file contents:

// dept.js

/*  This page does all the magic for applying
 *  Ajax to an employees listing form.
 *  The department_id is sent to a PHP 
 *  script which will return data in HTML format.
 */

// Have a function run after the page loads:
window.onload = init;

// Function that adds the Ajax layer:
function init() {

  // Get an XMLHttpRequest object:
  var ajax = getXMLHttpRequestObject();

  // Attach the function call to the form submission, if supported:
  if (ajax) {

    // Check for DOM support:
    if (document.getElementById('results')) {

      // Add an onsubmit event handler to the form:
      document.getElementById('dept_form').onsubmit = function() {

        // Call the PHP script.
        // Use the GET method.
        // Pass the department_id in the URL.

        // Get the department_id:
        var did = document.getElementById('did').value;

        // Open the connection:
        ajax.open('get', 'dept_results_ajax.php?did=' + encodeURIComponent(did));

        // Function that handles the response:
        ajax.onreadystatechange = function() {
          // Pass it this request object:
          handleResponse(ajax);
        }

        // Send the request:
        ajax.send(null);

        return false; // So form isn't submitted.

      } // End of anonymous function.

    } // End of DOM check.

  } // End of ajax IF.

} // End of init() function.

// Function that handles the response from the PHP script:
function handleResponse(ajax) {

  // Check that the transaction is plete:
  if (ajax.readyState == 4) {

    // Check for a valid HTTP status code:
    if ((ajax.status == 200) || (ajax.status == 304) ) {

      // Put the received response in the DOM:
      var results = document.getElementById('results');
      results.innerHTML = ajax.responseText;

      // Make the results box visible:
      results.style.display = 'block';

    } else { // Bad status code, submit the form.
      document.getElementById('dept_form').submit();
    }

  } // End of readyState IF.

} // End of handleResponse() function.

Many thanks for any pointers here.

I have the following HTML.

Currently it relies on the user hitting the 'Go' button to Submit the Form.

Is it possible to change this so it submits each time the user selects a dropdown option?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Employees by Department</title>
    <script src="ajax.js" type="text/javascript"></script>
    <script src="dept.js" type="text/javascript"></script>
    <style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<!-- dept_form_ajax.html -->
<p>Select a department and click 'GO' to see the employees in that department.</p>
<form action="dept_results.php" method="get" id="dept_form">
<p>
<select id="did" name="did">
<option value="1">Human Resources</option>
<option value="2">Accounting</option>
<option value="3">Marketing</option>
<option value="4">Redundancy Department</option>
</select>
<input name="go" type="submit" value="GO" />
</p>
</form>

<select id="results"></select>
</body>
</html>

For the record, here is my dept.js file contents:

// dept.js

/*  This page does all the magic for applying
 *  Ajax to an employees listing form.
 *  The department_id is sent to a PHP 
 *  script which will return data in HTML format.
 */

// Have a function run after the page loads:
window.onload = init;

// Function that adds the Ajax layer:
function init() {

  // Get an XMLHttpRequest object:
  var ajax = getXMLHttpRequestObject();

  // Attach the function call to the form submission, if supported:
  if (ajax) {

    // Check for DOM support:
    if (document.getElementById('results')) {

      // Add an onsubmit event handler to the form:
      document.getElementById('dept_form').onsubmit = function() {

        // Call the PHP script.
        // Use the GET method.
        // Pass the department_id in the URL.

        // Get the department_id:
        var did = document.getElementById('did').value;

        // Open the connection:
        ajax.open('get', 'dept_results_ajax.php?did=' + encodeURIComponent(did));

        // Function that handles the response:
        ajax.onreadystatechange = function() {
          // Pass it this request object:
          handleResponse(ajax);
        }

        // Send the request:
        ajax.send(null);

        return false; // So form isn't submitted.

      } // End of anonymous function.

    } // End of DOM check.

  } // End of ajax IF.

} // End of init() function.

// Function that handles the response from the PHP script:
function handleResponse(ajax) {

  // Check that the transaction is plete:
  if (ajax.readyState == 4) {

    // Check for a valid HTTP status code:
    if ((ajax.status == 200) || (ajax.status == 304) ) {

      // Put the received response in the DOM:
      var results = document.getElementById('results');
      results.innerHTML = ajax.responseText;

      // Make the results box visible:
      results.style.display = 'block';

    } else { // Bad status code, submit the form.
      document.getElementById('dept_form').submit();
    }

  } // End of readyState IF.

} // End of handleResponse() function.

Many thanks for any pointers here.

  • php
  • javascript
  • html
  • ajax
  • forms
Share Improve this question asked Feb 15, 2012 at 6:35 michaelmcgurkmichaelmcgurk 6,53125 gold badges101 silver badges197 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

This might give you an idea.

replace:

 document.getElementById('dept_form').onsubmit = function() {

with this:

   $('#did').change(function () {

or rather with this:

document.getElementById('did').onchange = function() {

You can try to use in select:

<select id="did" name="did" onchange="this.form.submit();">

本文标签： javascriptAutosubmit Form on dropdown selection *without* clicking submit button AJAXPHPStack Overflow

版权声明：本文标题：javascript - Auto-submit Form on dropdown selection *without* clicking submit button? AJAXPHP - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744497828a2609137.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。