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。这种方法模仿了AJAX！

如何在提交表格后留在模态窗口中

1 个答案: