动态地用php添加内容到div

时间:2013-05-15 01:43:48

标签: php javascript html twitter-bootstrap

所以我正在联系表格。提交表单时,我想向Bootstrap模式添加成功或错误消息。

这是提交表单并打开模式的按钮。

<input class="btn btn-info" type="submit" value="Submit" name="Submit" data-toggle="modal" href="#contactModal"/>

因此,当单击按钮时,它会提交表单并打开模式。有没有办法在脚本的successfailure上动态地向模态添加一串文本?

这是目前的PHP成功/失败行动

if ($success){
print "<meta http-equiv="refresh" content="0;URL=contactthanks.html">";
}
else{
  print "<meta http-equiv="refresh" content="0;URL=error.html">";
}

但我希望它能够向模态添加内容,而不是添加重定向页面的<meta>标记

这是模态代码

<div id="contactModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Thanks!</h3>
  </div>
  <div class="modal-body">
    <p>I'm pretty busy sometimes but I'll try my best to message you back <strong>ASAP</strong>!</p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

那么,如果不刷新页面或重定向,我会如何print到模式中<div>的内部?

我不知道任何PHP或AJAX,我只是没有开始使用JS和jQuery(确切地说是两天)

1 个答案:

答案 0 :(得分:4)

您无法提交表单而无法刷新页面。您最有可能想要做的是对您的php使用AJAX请求,这将返回成功/失败状态为JSON,然后您将使用javascript有条件地向div添加内容。

而不是表单,您只需使用带有<input type="button" />的普通onclick="someFunction",其中someFunction会调用AJAX。

您将需要使用jQuery。

你的php看起来像

//do something with submitted values

if ($success){
    echo json_encode(True);
}
else{
    echo json_encode(False);
}

和AJAX调用类似

$.ajax({
    type: "POST",
    url: "dosomething.php",
    data: { formValue1 = <get value using jquery>, etc... }
    dataType: "json",
    success: processData,
    error: function(){ alert("failed"); }
});

function processData(data)
{
    if(data) {
        $("div#divid").html("what you want to add inside the div");
    }
}