Question

我正在使用Twitter Bootstrap 3.1.1建立一个单页网站。这是一个基本的＆＃34;联系我们＆＃34;形成。我想要实现的是如果表单提交成功，则提交按钮应该是＆＃34; success＆＃34;如果有错误，应该读取＆＃34;错误！＆＃34;目前，提交的表单将转到一个新的非约束基本html页面。按钮的HTML是

<button type="submit" class="btn btn-primary">Submit</button>

提交的PHP是

if($send_contact){
echo "Success!";
}
else {
echo "Error!";
}

我可以使用加载状态对按钮进行编程吗？我对ajax一无所知，思想可能会在这里得到一些帮助：）

编辑：我猜我的问题是我使用单独的文件来进行php处理。所以输出显示在那个php页面上。但我真的希望保持这种方式（即使用外部php文件），因为我在同一页面上有两个表单。现在想知道，如果我能在同一索引页面上获得模态/弹出/警报输出？

<form role="form" method="POST" action="contactusform.php" id="contactusform" data-parsley-validate>

Answer 1

您需要使用javascript，或者您需要使用会话。 JS首先（使用jQuery库）

$('form').on('submit', function(e){
    e.preventDefault(); //stop page from reloading
    var $this = $(this); //cache form element for use in ajax function
    $.ajax({
        url: '/',
        type: 'POST',
        data: $this.serialize(),
        dataType: 'json',
        success: function(data){
            $this.find('button[type="submit"]').text(data.msg);
        }
    });
});

然后在PHP脚本中，您将更改返回数据的方式：

   $ret = array();
   $ret['msg'] = 'Error!';
   if($send_contact){
       $ret['msg'] = 'Success!';    
   }
   echo json_encode($ret);

如果使用会话，您将按如下方式更改按钮状态：

<button type="submit" class="btn btn-primary"><?php isset($_SESSION['msg']) ?: 'Submit'; ?></button>

使用三元运算符来评估$_SESSION['msg']变量，如果为true，则使用会话变量的值，否则，它使用＆＃39;提交＆＃39;。

您还需要确保在页面顶部使用session_start();（在输出任何空格或其他错误数据之前）。

然后您需要再次修改条件语句：

$_SESSION['msg'] = 'Error!';
if($send_contact){
    $_SESSION['msg'] = 'Success!';    
}
header("Location: http://domain.tld/path/to/script.ext");

最后，您应该在生成按钮的文本后销毁会话变量，以确保在重新加载页面时重置按钮

unset($_SESSION['msg']);

Answer 2

只需将整个按钮放在条件检查中：

if($send_contact){
    echo '<button type="submit" class="btn btn-success">Success!</button>';
} else {
    echo '<button type="submit" class="btn btn-warning">Error!</button>';
}

Bootstrap按钮状态

2 个答案: