javascript - 如何在提交表单后仍留在模态窗口中

Question

模态窗口中有一个表单。我正在调用 ajax 在同一模式窗口上加载内容。但问题是它在提交表单后恢复到主页。如何在提交表单后仍停留在同一个模式窗口？下面的代码在模型窗口中...

<form action="" method="post">
<input type="submit" name="editgroupscript" class="btn green" value="Submit" />
</form>

模态窗口代码:

<!-- ### Modal ###   -->
     <div id="edit_script" class="modal hide">
        <div class="modal-header">
           <button data-dismiss="modal" class="close" type="button"></button>
           <h3>Edit Script</h3>
        </div>
        <div class="modal-body">
<!-- some content -->

有什么我们需要采取行动的吗？

Answer 1

你有两个选择-

选项 1:通过 Javascript 提交表单

<form action="http://www.yoursite.com/form.xxx" method="post">
<input type="button" name="editgroupscript" class="btn green" value="Submit" onclick="formSubmitFunction()" />
</form>

Javascript:
function ajax() {
  var obj;
  if(window.ActiveXObject) {
    try {
  obj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
  obj = new ActiveXObject("Microsoft.XMLHTTP");
}
  }
  else {
    obj = new XMLHttpRequest();
  }
  return (obj);
}

function formSubmitFunction() {
  // Creating the POST body
  var myForm = document.forms["myForm"];
  var value1 = myForm["value1"].value;
  var value2 = myForm["value2"].value;
  var parameters = "value1="+value1+"&value2="+value2;

  // Sending a POST via AJAX
  var ajax = ajax();
  ajax.onreadystatechange = function () {
    if((ajax.readyState == 4) && (ajax.status == 200)) {
      // Action on successful response
    }
  };
  ajax.send("POST", "yourURL", true);
  ajax.send(parameters);
}

选项 2:将表单定位到 iframe

<form action="http://www.yoursite.com/form.xxx" method="post" target="iframe">
<input type="submit" name="editgroupscript" class="btn green" value="Submit"/>
</form>
<iframe src="about:blank" style="display:none" id="iframe" name="iframe"></iframe>

Javascript:
var iframe = document.getElementById("iframe");
iframe.onload = function () { formSubmitResponse(iframe); };
function formSubmitResponse(iframe) {
  var idocument = (iframe.contentDocument || iframe.contentWindow.document);
  if(idocument) {
    var responseFromBackend = idocument.getElementsByTagName("body")[0].innerHTML;
  }
}

使用 iframe 时会发生以下情况:1. 点击提交按钮。2.表单参数提交给后台脚本。3. 页面不刷新。4. 后端脚本的输出被发送到 iframe。5. 这个方法模仿 AJAX!