提交表单后如何更改div？

Posted 2023-05-09

【中文标题】提交表单后如何更改div？

【英文标题】：How to change the div after submit the form?

【发布时间】：2017-03-08 17:35:18

【问题描述】：

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

【参考方案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

【参考方案2】：

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

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

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

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

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

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

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

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

或

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

【参考方案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 或任何你正在使用的语言。

【讨论】：

抱歉回复晚了。但我没有使用 ajax

当您提交表单时，它会向您提供的操作发送请求，您自己附加的代码并在发送请求之前被激活，它永远不会起作用。你需要使用你的服务器端语言，你的语言是什么？

提交表单时，我使用的是典型的if(isset($_POST['submit']))

好吧，你想要像<form action="" method="post" name="locator" class="<?php echo isset($_POST['submit']) && $_POST['your-var-name'] == 'something' ? 'success' : 'error' ?>">这样的东西，它被称为三元运算符，基本上是一个IF条件简写...