The CSS styles are failing to be applied to the submit button once it has been

When I have a form with a submit button that triggers a form submission on a PHP page, I want to have an onclick event on the submit button that changes its opacity using JavaScript. The issue I am facing is that after clicking the submit button, the opacity changes, the form submits, and then the button's opacity resets back to 100%. I want the opacity attribute to remain on the button even after the form submission. See my codes below:

<script type="text/javascript">
function fadebtn(){
document.getElementById('submitbtn').style.opacity="0.4";
}
</script>

<form method="post">
<input type="submit" value="Submit" id="submitbtn" name="submitbtn">
</form>

UPDATE: I have now resolved this issue. Please refer to the updated codes above and the additional codes below.

<?php
if(isset($_POST['submitbtn']))
{ 
echo '<script type="text/javascript">'
, 'fadebtn()'
, '</script>';
}

Answer №1

Utilizing a button with type="submit" and a form with method="post" will result in a post action and trigger a page refresh. Any styling modifications made with JavaScript will be erased upon the page reload.

Answer №2

It seems like your submit button is causing the page to refresh unexpectedly. To address this issue, you may want to consider adjusting the CSS stylesheets or clearing the post action field and using jQuery to reset the opacity after form submission.

Answer №3

Super easy to achieve using CSS:

#submitbtn:active {
opacity: 0.4;
}

or

#submitbtn:focus {
opacity: 0.4;
}

Choose the one that suits your preferences.

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

Using Bootstrap columns within a PHP while loop

Encountering an issue https://i.sstatic.net/twePb.png and the code in question is shown below: <div class="col-md-4 text-center animate-box"> <a href="work-single.html" class="work" style="background-image: url(images/port ...

Adjusting the transparency of the background without impacting the text itself

I've been struggling to create a loading screen with no luck. The animation itself looks fine, but the background is causing issues. Every time I try to adjust the opacity, it affects the text as well. @import url('https://fonts.g ...

Utilize Ajax to load an Ajax-driven page

Currently, I am in the process of developing a GreaseMonkey script for the ServiceNow CMS that includes jQuery/AJAX. The main purpose of this script is to retrieve the number of incidents using the filter option provided by ServiceNow for technicians throu ...

What could be causing the Ajax error to occur in my .Net Data table?

While trying to load a table, I encountered an ajax error in the datatable (.net). Below is the code for my data table: <table id="productsTable" class="table table-striped table-bordered"> <thead> <tr> <th>Name</th ...

Having difficulty establishing a connection between my node.js application and the database

I've been struggling to establish a connection between my application and the database. Despite attempting the code below, my models are still not being recognized. const MongoClient = require('mongodb').MongoClient; const assert = require(& ...

Updating webpage with the click of a button

How can I implement a button that refreshes the current page using JavaScript? Here is what I have so far: <button type="button" onClick="refreshPage()">Refresh</button> <script> function refreshPage() { // What should I in ...

Error with adaptable menu

I am attempting to develop a responsive menu similar to the Bootstrap nav bar using only CSS. I have managed to get the functionality working, but the positioning of the menu grabber is incorrect and I'm unsure how to correct it. The grabber should al ...

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

A div element designed to showcase a speedometer; <div class="outer"> <div class="needle" ></div> </div> The speedometer animates smoothly on hover; .outer:hover .needle { transform: rotate(313deg); transform-origin: ce ...

Using an imported material icon as a background in JSS styling

I have implemented a draggable dialog component in React-mui with a resizable box feature. const styles = theme => ({ resizable: { position: "relative", "& .react-resizable-handle": { position: "absolute" ...

The setting of the custom user agent in the Chrome Extension Manifest Version 3 is not functioning correctly

We currently have an extension that consists of only two files: manifest.json and background.js Despite the browser (Chrome version 112) not reporting any errors, we are facing an issue where the user agent is not being set to 'my-custom-user-agent&a ...

The $http service factory in Angular is causing a duplication of calls

After creating an angular factory that utilizes the $http service, I encountered a problem where the HTTP request is being made twice when checking the network tab in the browser. Factory: app.factory('myService', function ($http, $q) { var de ...

Utilizing Zustand state management with Next.js 13.4.12 for routing and server-side rendering, enhanced with local storage

My Zustand store code looks like this: import create from "zustand"; import { persist } from "zustand/middleware"; const useProjectStore = create( persist( (set) => ({ selectedProject: null, setSelectedProject: (pr ...

Generating custom reports based on specific data fields

My current approach involves displaying all the columns for the searched records in a div with the id of searchresults using AJAX. I then provide a print option to print those records. However, I now want to enhance this functionality by allowing users to ...

Prevent global CSS from being overridden in a production environment for a React Next.js application

Being new to REACT-NEXT and coming from an Angular background, I am struggling with fixing this issue. Here is the element I am using from another resource: import example-custom-ele-parent, {example-custom-ele-child} from 'custom-tags/example-custom& ...

What sets apart li.parent from ul?

I am facing some confusion with this parent keyword. Are li.parent and ul the same thing? If so, can someone please explain what this means? Thank you. (nav and sidebar are classes). .sidebar ul.nav .active > a:focus, .sidebar ul.nav li.parent a.active ...

Enable users to modify the URL in the window.open() function

In the code snippet below, a new window opens when a user clicks on a button: $('.loginButton').click(function () { var strString = $("#medlineSearch").val() var strSearch = "http://google.com&query="; var url = strSearch + strSt ...

Automatically copy any chosen selection on the page to the clipboard

Is there a way to copy any selection from a webpage to the clipboard, regardless of where it is located on the page (div, text input, password input, span, etc.)? I have created a function that can retrieve the selected text, but I am struggling with sett ...

Retrieving information from Node.js Serialport

I am interested in reading the data received after sending an ascii command to my lock controller. Here is the code that sends the command to the lock controller: var express = require('express'); var router = express.Router(); var SerialPort = ...

What is the best way to ensure webpacker compiled javascript only runs once the page has finished loading in a rails application

What is the best location to place window.onload for it to execute on every page within a Rails 6 application? ...

Distinguish a specific div within a group of divs by styling it uniquely using just CSS and HTML

I need assistance in selecting the first div with both "con" and "car" classes among all the divs using a CSS selector. <div class="box"> <div class="con">1</div> <div class="con be">2</div> <div class="con car">3& ...