How can I alter the div once the form has been submitted?

Is there a way to change the background of a form and its results after submitting the form? I need to switch the image background to a plain color.

I attempted to use a solution I found, but it doesn't seem to be working as expected. You can view my attempt here: JSFiddle Attempt

For reference, you can check out another JSFiddle link here: JSFiddle Link

<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>
javascriptjqueryhtmlcssforms

Answer №1

Here is a suggested approach: 

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

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

Make sure to include the css classes and add background-image:none

Answer №2

Not entirely convinced, but I did get it right anyhow.

If you want to tweak the appearance of any element, simply employ the jQuery css method. For instance:

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

Alternatively, you can opt for the AddClass method, which is what you did on fiddle.

The reason it's not functioning is because you included inline styling in the textarea:

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

Inline styling takes precedence, overriding any styles defined in external CSS classes like ".success."

Therefore, you have the choice to either work with classes and utilize AddClass / removeClass methods without including styles in the tag itself,

OR

Utilize inline styling and the css method to make updates.

Answer №3

Are you more inclined towards synchronous or asynchronous processing? If asynchronous, AJAX is the way to go:

$("#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");
        }
    }
}); 
});

Essentially, what you are doing here is linking a function to the submit event and submitting it asynchronously using Ajax.

If synchronous processing is what you're after, then PHP or another appropriate programming language is the way to go.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Access to a custom Google Map via an API connection

I currently have multiple custom Google Maps that I created using and they are all associated with my Google account. Is it possible to access these maps using the Google Maps JavaScript API? It seems like the API does not work with manually created maps ...

javascriptjsongoogle-mapsgoogle-maps-api-3

Step-by-step guide on positioning an image to show at the bottom of a div

I am trying to create a div that covers 100% of the screen height, with a table at the top and white space below it for an image. However, when I add the image, it ends up directly under the table instead of at the bottom of the DIV. I have searched on G ...

javascriptjquerycss

After transitioning to TypeScript, the CRA app is encountering issues loading CSS files compiled by SASS

My React application was originally created using create-react-app and I had been successfully loading scss files with the node-sass package. However, after deciding to switch to TypeScript following the steps outlined in , my css files are no longer being ...

cssreactjstypescriptsass

What steps should I take to ensure that flex aligns the inner-divs on the same row?

I have observed that flex can easily align input tags, regular text, and other elements perfectly on a single line with the flex-direction:row; property. However, this alignment seems to get disrupted when one of the elements is a div. For example: <ht ...

cssflexbox

Aligning the .left position to make the border of a <div> synchronized

When working on my Jquery program, I encountered an issue with borders not aligning properly within the container. Specifically, in the execution (where the container is represented by a white box), the left border extends beyond the position().left proper ...

jqueryhtmlcsspositionborder

Techniques and Strategies for showcasing several images in close proximity

I am looking to arrange dummy images in a row next to each other, similar to the example shown here: https://i.sstatic.net/HUUGz.png Since my CSS skills are not very strong, I am seeking guidance on the proper way to achieve this. The images I have are a ...

cssbootstrap-4frontend

Unable to figure out a method to properly synchronize a vue.js asynchronous function

I am facing an issue with my code where everything works fine if I uncomment the "return" statement in fetchData. How can I make sure that I wait for the completion of this.fetchData before populating the items array? I have tried using promises, async/awa ...

javascriptasynchronousvue.js

Issue with jQuery.off when using a dynamic function name

I am currently implementing a modular pattern for writing my JavaScript code and it has been an enjoyable experience! However, I have encountered a challenging situation. My Namespace structure looks like this: var settings, handlers, objects, Namespace ...

javascriptjquery

Tips for ensuring an element is visible in CUCUMBER JS?

Whenever I run my code, it keeps returning the error message: NoSuchElementError: no such element: Unable to locate element Even though I have set up a wait function, it does not seem to actually wait. The step fails immediately without waiting for the s ...

javascriptselenium-webdrivercucumber

Refreshing data in a Django Form

I'm currently facing an issue with two forms in my application. The first form successfully updates the database with entered data, and the second form includes a dropdown field that should be populated with the latest information from the first form. ...

djangoformscaching

How can we leverage jQuery deferred within Backbone Marionette composite views, where each items view contains a form, to execute a task after each form submission is successful?

I am utilizing a Backbone Marionette composite view in which each child item view contains its own form. var DependentsFormFields = Backbone.Marionette.CompositeView.extend({ template: 'dependents_form_fields_wrapper', itemViewContainer: ...

javascriptjquerybackbone.jsmarionette

Implementing position sticky on a div depending on its content text - step by step guide

If the text inside the .newsDate matches the previous or next .newsDate, I want to make its position sticky when scrolling, until it reaches the next .newsMiddleCont div. What I'm trying to achieve: The same date on multiple news items should s ...

javascripthtmljquerycss

Guide to custom sorting and sub-sorting in AngularJS

If I have an array of objects like this: [ { name: 'test1', status: 'pending', date: 'Jan 17 2017 21:00:23' }, { name: 'test2', sta ...

javascriptangularjssortingangularjs-ng-repeat

I'm running into an issue where my API calls are being duplicated

Every time I refresh the page, the network preview displays a duplicate API call to (ipaddress)/(portnumber)/admin/user-group?page=1&page_size=10&query= twice. I've tried making changes to the useEffect() and handleSearch() functions without s ...

javascriptreactjstypescriptnext.js

Create a class for the grandparent element

Is there a way to dynamically add a class to a dropdown menu item when a specific child element is clicked? Here's the HTML structure I have: <ul id="FirstLevel"> <li><a href="#">FirstLevel</a></li> <li>< ...

javascriptjqueryhtmlcssdrop-down-menu

What is the best way to export two functions from a server-side module in JavaScript?

Working with Node/Express. In my project, I have an index.js server file and a separate js module called validmoves.js. Usually, to export a single function from a module, I can simply use the following syntax: module.exports = shuffleFunction; Then, i ...

javascriptnode.jsexpress

Upon the initial gallery load, the images are appearing on top of each

Currently, I am working on creating a gallery page for my website using the Isotop filtering plugin. To view the live gallery, you can visit: carroofies.com/gallery The main issue I am encountering is with the initial load of the page, where the images ov ...

htmlcssoverflow

Adjusting the vertical dimension of an Angular 17 Material Dropdown Field?

Check out this demo where I'm exploring ways to decrease the height of the select field. Here's the code snippet: <mat-form-field appearance="outline"> <mat-label>Toppings</mat-label> <mat-select [formControl]=& ...

htmlcssangularsassangular-material

Does the modularization of code impact the performance of the react-app?

The client provided me with a React app that includes an index.jsx file where 90% of the coding has been completed. To prevent getting stuck in Scroll Limbo, I have started breaking down the code into modules for each specific requirement. These include ...

javascriptreactjs

The Django view function is failing to add new records to the database

Whenever I attempt to create a record in the FinTransDetail table as an admin, I encounter errors. This is preventing me from adding records successfully. Any assistance in resolving these issues would be greatly appreciated. Additionally, since I am unabl ...

pythonhtmldjangoforeign-keysadmin