提交表单后如何更改div？

Question

提交表单后如何更改div？

3

如何在提交表单后更改表单和结果的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>

- User014019

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vakho papidze · 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

- Doaa Magdy · Answer 2

我不确定我是否理解正确，但无论如何。

如果您需要更改任何元素的样式，您只需使用此jQuery css方法即可。例如：

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

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

为什么它不起作用，因为您在文本区域中编写了内联样式。

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

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

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

或者

使用内联样式并使用CSS方法进行更新

- Marco · Answer 3

你想要同步还是异步？如果是异步的话，你需要使用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或者你正在使用的任何语言。