如何使用 onChange 提交表单答案

【问题标题】：How to submit a form using onChange如何使用 onChange 提交表单
【发布时间】：2009-08-17 15:41:27
【问题描述】：

我需要在一个表单中提交 3 个不同选项的值，但我在使用 ajax 方面非常缺乏经验。我有3个不同的选项/选择值列表，并且只要选择其中一个选项时，它将提交所有其他2个选项。我只提交了一个选项，但无法提交其余选项。我需要一些专家的建议。谢谢！

我仍然无法让它工作，但这是我正在努力实现的更具体的任务

<form method="POST" name="step01" action="">
  </select name="dayID" onChange="javascript:document.step01.submit()" size="1">
    <option value="  ">(please select a country)
    <option value="1">1 
    <option value="2">2 
    <option value="3">3

    <option value="4">4
    <option value="5">5
    <option value="6">6
    <option value="7">7
  </select>

  </select name="monthID" onChange="javascript:document.step01.submit()" size="1">
    <option value="  ">(please select a country)
    <option value="1">1 
    <option value="2">2 
    <option value="3">3

    <option value="4">4
    <option value="5">5
    <option value="6">6
    <option value="7">7
  </select>

  </select name="yearID" onChange="javascript:document.step01.submit()" size="1">
    <option value="  ">(please select a country)
    <option value="1">1 
    <option value="2">2 
    <option value="3">3

    <option value="4">4
    <option value="5">5
    <option value="6">6
    <option value="7">7
  </select>
</form>

请注意，每个都有 3 个不同的选择名称。我想提交所有 3 个值而不使用 onChange 方法刷新页面。谁能帮我做一个简单的 ajax sn-p？

【问题讨论】：

如果你想要一个有价值的回应，你需要展示你已经尝试过什么，而不是猜测你想要完成什么。
我花时间格式化您的 HTML，我注意到它的格式非常错误。你可能想解决这个问题。
我不知道我的浏览器发生了什么，它不允许我添加 cmets 并放在括号中。感谢您为我格式化我的 HTML，马特，干杯！

标签： php javascript html ajax

【解决方案1】：

您似乎是通过 URL 变量提交表单变量

url=url+"?"+name+"="+str;

无需通过该函数插入表单值，您可以在 javascript 中引用它们。在您的示例中，您只有一个附加到 URL 字符串，如果您想要更多，那就是他们会去的地方。

var url = "create_notice_request.php?name=" + document.myForm.name.value;
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);

但您可能应该考虑使用 jQuery ajax 来让这对您来说更简单。

这是一个从服务器端返回响应的完整 AJAX 函数的示例。

 function ajaxFunction(){
    var ajaxRequest; 
    try{
    // Opera 8.0+, Firefox, Safari
         ajaxRequest = new XMLHttpRequest();
     } catch (e){
         // Internet Explorer Browsers
         try{
             ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
             try{
                 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
             } catch (e){
                 // Something went wrong
                 alert("You do not support JavaScript, sorry!");
                 return false;
             }
         }
     }
     // Create a function that will receive data sent from the server
     ajaxRequest.onreadystatechange = function(){
         if(ajaxRequest.readyState == 4){
             document.getElementById("ordarea").innerHTML = ajaxRequest.responseText;
         }
     }
     var url = "return.php?order=" + document.myForm.order.value;
     ajaxRequest.open("GET", url, true);
     ajaxRequest.send(null);
 }

jQuery 只会使整个函数更紧凑、更易于阅读，并为您提供内置的所有浏览器兼容性。

121                 $.ajax({
122                    type: "GET",
123                    url: "tag.php",
124                    data: 'file=' + file + '&delete=' + todelete,
125                    success: function(){
126                         //do something on completion
128                    }
129                 });

【讨论】：