自动选择下拉列表中的表单无需单击提交按钮？ AJAX / PHP

Question

I have the following HTML. 我有以下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.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/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文件内容：

// 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 complete:
  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. 非常感谢您在此提出的建议。

Answer 1

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() {

Answer 2

您可以尝试在select中使用：

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

自动选择下拉列表中的表单无需单击提交按钮？ AJAX / PHP

问题描述

2 个解决方案

解决方案1
3 已采纳 2012-02-15 06:44:06

解决方案2
1 2012-02-15 06:39:15

自动选择下拉列表中的表单*无需*单击提交按钮？ AJAX / PHP

问题描述

2 个解决方案

解决方案1 3 已采纳 2012-02-15 06:44:06

解决方案2 1 2012-02-15 06:39:15

自动选择下拉列表中的表单无需单击提交按钮？ AJAX / PHP

解决方案1
3 已采纳 2012-02-15 06:44:06

解决方案2
1 2012-02-15 06:39:15