Question

我在html中有这样的表单：

<form class="well span9 offset1" action="/summary/" method="post">
    {% csrf_token %}
        <fieldset>
        <label class="control-label" for ="inputIcon">Type or paste your text into box:</label>
        </fieldset>
        <div class="controls">
            <div class="input-prepend">
                <textarea rows="15" class="span9"></textarea> 

            </div>
            </div>


        <fieldset>
        <input type="checkbox" name="input_text" />
        Send me the copy of summary by e-mail.

        </fieldset><br />
        <a href="#summaryModal" data-toggle="modal"><button type="submit" class="btn btn-primary offset3">Summarize</button></a>
    <button type="reset" class="btn btn-danger">Reset</button>
</form>

当用户提交表单时，我希望此表单在summary函数中处理，并将结果返回到bootstrap中的模式中的函数。但不是去功能它只是打开弹出窗口（模态）。我将从函数返回相同的模板与结果。我怎样才能做到这一点？我需要Ajax吗？

Answer 1

由于您尚未提供JavaScript函数，因此我假设您已将它们安装到位。是的，您必须使用AJAX才能工作。以下是您必须遵循的步骤：

您的按钮的语法必须如下：<button type="button" class="btn btn-primary offset3" onClick="summaryFunction()">Summarize</button>
单击按钮，激活JavaScript函数（在本例中，我们称之为summaryFunction（））。
该函数必须将表单中的详细信息发布到以JSON格式返回数据的PHP页面。（This might help）
使用$（'＃divId'）。innerHTML使用PHP页面返回的内容填充模态窗口的内容。
使用$（'＃divId'）来触发模态窗口.modal（）;

希望它有所帮助。

这是一个例子：让按钮使用上面的语法激活一个名为summaryFunction（）的JavaScript函数。 JavaScript函数如下所示：

<script>
function summaryFunction(){
$text = $('#textAreaId').val();
$.post("test.php", { "postedText": text },
function(data){
$('#modalInnerDiv').innerHTML = data.response;
$('#summaryModal').modal();
}, "json");
}
</script>

确保为textarea元素提供ID。用您的PHP文件替换test.php。它必须查找名称postedText的已发布值。将您的回复放入一个关键的“响应”数组中。示例$reply = array("response" => $response)然后使用json_encode（）将其序列化为JSON。您的PHP文件必须回显此JSON值。

在你的模态中有一个ID为#modalInnerDiv的空div。它的内容将填充PHP页面的回复，并将显示在模态窗口中。

在bootstrap框架中同时href到一个模态和一个函数？

1 个答案: