Question

我需要在表单中提交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片段吗？

Answer 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                 });

如何使用onChange提交表单

1 个答案: