引导按钮状态

我正在用Twitter Bootstrap 3.1.1构建单页网站。这是一个基本的“联系我们”形式。我想实现的是，如果表单提交成功，提交按钮应该读取“成功”，如果有错误，应该读取“错误！”目前，提交的表单会转到一个新的不受欢迎的基本html页面。 HTML的按钮引导按钮状态

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

PHP提交是

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

能否程序中使用装载状态下的按钮？我对阿贾克斯一无所知，并认为可能会在这里得到一些帮助:)

编辑：我猜我的问题是，我使用单独的文件做php处理。所以输出显示在该页面上。但我真的想保持这种方式（即使用外部php文件），因为我在同一页面上有两种形式。现在想知道，如果我可以在同一个索引页面上以最少的模式/弹出/提醒获取输出吗？

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

来源

2014-06-15 TheAllSeeingI

只要把整个按钮的条件检查里面：

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

来源

2014-06-15 19:52:20 Jonathan

感谢这一点，但它仍然进入一个新的页面。我想要“提交”按钮来改变状态。 – TheAllSeeingI

需要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>

这是使用三元运营商evaulate的$_SESSION['msg']变量，如果为真，使用会话变量的值，否则，它使用“提交”。

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

然后，你需要修改你的条件语句中多次：

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

最后，您应生成按钮的文本之后，以确保如果重新加载页面，按钮复位删除会话变量

unset($_SESSION['msg']);

来源

2014-06-15 19:54:20 Ohgodwhy

我尝试了js/php选项，并在新页面上得到了这个输出{“msg”：“Success！”}。我是否需要更改按钮html？ – TheAllSeeingI

供参考：

@TheAllSeeingI等等，你说它打印了{{msg“： “成功！”}'到页面，而不是'成功！'使用Ajax？你确定dataType设置为'json'吗？ – Ohgodwhy

引导按钮状态

回答

相关问题