提交表单后如何更改div？

Question

提交表单后如何更改表单和结果的div背景？我想将表单的背景和结果从图像更改为颜色。

如何做到这一点？我正在尝试我找到的这个解决方案，但它不起作用，http://jsfiddle.net/tymeJV/YL6Da/

Jsfiddle

<form action="" method="post" name="locator">
    <div class="locator-div">
        <select name="locator1_list" id="filterby">
            <option name="default" class="filter_by" value="Select by">Select by</option>
        </select>
    </div>
    <span class="or">or</span>
    <div class="locator-div">
        <select name="locator1_list" id="filterby">
            <option name="default" class="filter_by" value="Select by">Select by</option>
        </select>
    </div>
    <input type="submit" value="List all locations" class="location-submit">
</form>

<div class="records"><div><span class="icons-tabbed-store icon-icon-stores"> Location 1</span></div></div>

Answer 1

试试这样：

$("form").submit(function(e) {

     e.preventDefault();
    var bool = false;
    
    if (bool) {
        $("form").addClass("success");
        $(".records").addClass("error");
    } else {
        $("form").addClass("error");
        $(".records").addClass("success");
    }
});

复制该 css 类并添加 background-image:none

Answer 2

我不确定，但无论如何我都猜对了。

如果你需要改变任何元素的样式，你需要做的就是使用这个jQuery css方法，例如：-

$("#message").css("background-color","green")

或者你可以使用 AddClass 方法，这就是你在 fiddle 上所做的

为什么它不起作用，那是因为您在 textarea 中编写了内联样式

style="color: white; background-color: grey; display: none

并且内联样式具有最高优先级，因此它将替换/覆盖任何用外部css类编写的样式，例如“.success”

因此，您可以选择使用类并使用 AddClass / removeClass 方法，并且不要在标签本身中编写样式

或

使用内联样式并使用 css 方法来更新它

Answer 3

您想要同步还是异步？如果是Asynch，则需要使用AJAX：

$("#id-of-form").submit(function(e) {
e.preventDefault();

$.ajax({
    url: 'url-of-form',
    type: 'post',
    success: function (response)
    {
        var bool = false;

        if (bool) {
            $("#message").fadeIn("slow").removeAttr("style").addClass("success").text("Successful!");
        } else {
            $("#message").fadeIn("slow").removeAttr("style").addClass("error").text("Failed");
        }
    }
}); 
});

基本上，您在这里所做的是将一个函数附加到提交事件并通过 Ajax 重新提交它，从而进行异步调用。

如果你想要同步，你需要使用 PHP 或任何你正在使用的语言。