是否在下拉选择*时自动提交表单而不单击“提交”按钮?AJAX/PHP

Auto-submit Form on dropdown selection *without* clicking submit button? AJAX/PHP

本文关键字：提交 单击 按钮 PHP AJAX 表单 选择 是否      更新时间：2023-09-26

我有以下HTML。

目前，它依赖于用户点击"Go"按钮来提交表格。

是否可以更改此项，以便在用户每次选择下拉选项时提交？

<!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>

这里是我的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.

非常感谢您的指点。

这可能会给您一个想法。

替换：

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

这个：

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

或者更确切地说：

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

您可以尝试在select中使用：

<select id="did" name="did" onchange="this.form.submit();">
相关文章：