Having trouble with the functionality of CSS and JavaScript on styled input buttons in modern browsers? (IE 8/9, FF 9)

I am currently developing a website that includes input buttons styled with CSS as part of a form. For example, check out the sample code below:

<input type="submit" name="buttonSave" value="save" id="buttonsavejs" class="button_image button_style"/>

An issue I've encountered is that when a user clicks on the button, it sometimes shifts a few pixels down before performing the expected action intermittently. By intermittent, I mean that the button works correctly at times (redirects to the next page) and other times, nothing happens.

The developer who previously worked on this has not documented much about his code, so I am starting from scratch here (apologies for the lack of details). Upon testing the code, it appears that the problem lies in how newer browsers are rendering the css and javascript.

Here's a snippet of the javascript responsible for the button's functionality:

$("#buttonsavejs").click(function(){
        $("#main").unbind("submit").submit();

And here is the CSS styling the button:

.button_style {
  height:28px;
  margin-left:10px;
  position:relative;
  right:10px;
  top:-23px;
  width:100px;
}

.button_image {
  background-image:url(http://some_image);
  border-bottom-width:0;
  border-color:initial;
  border-image:initial;
  border-left-width:0;
  border-right-width:0;
  border-style:initial;
  border-top-width:0;
  display:block;
  font-size:1px;
  line-height:1px;
  outline-color:initial;
  outline-style:none;
  outline-width:initial;
  overflow-x:hidden;
  overflow-y:hidden;
  position:relative;
  text-indent:-9999px;
}

I also came across a similar question on Stack Overflow: Why do mouse clicks not always work for styled input buttons?

Another observation I made is that when using IE 9's developer tools and changing the Document Mode to anything other than IE 8 or 9, the button functions correctly. This led me to consider setting X-UA-Compatible to IE 7 to see if that resolves the issue, as apparently, that's how the document mode in IE functions: IE8 browser mode vs document mode

Question: After testing in earlier versions of FF (< 9.0), IE 7, the button works fine. However, in FF 9, Chrome 16, IE 8/9, it exhibits the behavior described above. Has anyone faced a similar issue and can provide advice on what I should be mindful of?

Answer №1

Simple solution:

Instead of using :

<input type="button" />

try using

<button type="button">blah blah blah</button> // You can also use type="submit"

and in your script:

$("#buttonsavejs").click(function(e){
    e.preventDefault(); // This will prevent the button's default action, which is to submit.

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

Struggling with Responsiveness: Challenges with Detailed Information and Image Grid Design

Encountering challenges in achieving the desired responsiveness for a grid layout consisting of details and an image. The layout displays correctly on desktop screens, with details on the left and the image on the right. However, on mobile screens, the ima ...

Determine the exact beginning and ending positions of a word when dividing it using Javascript

After creating a special function that breaks down a word based on spaces while keeping punctuation marks intact, I was able to achieve the desired result. function tokenizeUtterance( utterance ) { let spilittedUserText = utterance.toString().match( /[& ...

Is there a way to utilize JavaScript in order to trigger a CSS animation to occur at a designated time during a video

I have a cool animated image element that I want to play at a specific point in time during a video using JavaScript. I'm not sure how to make it happen, but I know the .currentTime property could be the key. My goal is for the animation to only play ...

Dropzone.js: Creating a personalized file explorer to include files that have already been uploaded

Don't worry, this isn't your typical "can't load files from the server" query... I'm looking to allow users to view files on the server in a bootstrap modal and then select specific files. After selection, I want to close the modal and ...

Using CSS transform to enhance Flash content

I am currently working on a web application that is contained within an iframe. The iframe has been scaled using -webkit-transform:scale(0.8), which is functioning well. However, I am encountering an issue with the flash audio recorder within the iframe no ...

Is it possible to use the responseType arrayBuffer with jQuery's $.ajax or $.load methods?

I'm just starting to explore the Web Audio API and I have a question regarding the use of jQuery's $.ajax and $.load functions for making XMLHttpRequests to retrieve audio data. Can these jQuery functions support responseType=arrayBuffer? EDIT: ...

Transforming the table into a list by categorizing every 3 rows together

SharePoint tends to use nested tables excessively, causing issues when trying to implement a jQuery carousel on them. To resolve this, I discovered a piece of jQuery code that can convert a table into a list: var list = $("<ul/>"); $('#tab1&apo ...

Struggling to activate the link:hover transformation

At this link, you can find an example of using CSS transform to rotate links on hover, but I'm having trouble getting it to work as expected. <!DOCTYPE html> <html> <head> <style> a:hover{ ...

Looking to switch up the background color while scrolling, any tips?

I'm trying to change the background color of my navbar section on scroll, but I've had no luck so far. Below is the code I have been using: const [colorChange, setColorChange] = useState(false); const changeColor = () => { if (window.scro ...

What is the best way to add a title to a label using jQuery AJAX?

How can I display a title for the label on mouse enter and retrieve the title text using an ajax method? Here is my HTML code: <div id="class"> <label id="cost">@Html.DisplayFor(modelItem => item.PriceId)</label> </div> Be ...

Utilize Jquery to calculate the total sum of values associated with a particular key in a JSON object based on input

I am facing an issue with my script where I am trying to sum up the clientPrice keys in a JSON object assigned to a form text element. Here is what I have: <input id="clientList" type="hidden" value="[{"clientID":"1","clientType":"0","clientPrice":"450 ...

Identify and apply a special effect to the initial input element within a popup using jQuery

I have a variety of popups containing multiple input fields. I am aiming to emphasize the initial input element of each of my popups, without the utilization of ids: This is my current code snippet: function initializePopups(){ $('*[id*=Popup]&a ...

Javascript on-page scroll positioning

My current dilemma involves finding a solution to optimize in-page scrolling for mobile users. I have a sticky header on the page, which causes #section1 to place the scroll position behind the sticky header. Is there a way to adjust the scroll position b ...

Display user's name in navigation bar using asp.net mvc

When working on an ASP.NET MVC project, I wanted to include a short message for the user, such as 'Hello, username!' In the navigation bar, specifically when the user is signed in, I encountered some display issues with the standard bootstrap la ...

When the width is reduced to a certain point, the display will change to inline-block, preserving the layout structure

My goal is to maintain a two-column layout for my container boxes, even when the browser width is minimized to 600px in my fiddle. The issue arises with the CSS rule display: inline-block causing the boxes to stack into a single column. Important point: I ...

Creating a CSS scrollbar that mimics touchscreen behavior by allowing all text to be movable

The touch apps I developed work great in kiosk mode on HD-sized screens in fullscreen using Chromium. Now, I want to showcase the site to individuals who want to check the content and functionality. I can recommend that they use Chromium's dev mode, ...

struts2 not receiving full calendar json feed as expected

<script type="text/javascript"> $(function() { var date = new Date(); var d = date.getDate(), m = date.getMonth(), y = date.getFullYear(); $('#calendar').fullCalendar({ ...

Ways to send information back to a jquery ajax callback method?

How can I send data back to a jQuery AJAX callback function from a PHP MySQL query? <script language="javascript" type="text/javascript"> $(document).ready(function() { $.post("getMySqlData", function(data){ }); }); </scrip ...

What is the method for obtaining the width of a g element?

I am encountering an issue with retrieving the width of the <g></g> element using jQuery. Both .innerWidth() and width() methods are returning null for me. Is there a way to obtain the width of the <g></g> element using jQuery? I a ...

Ensure that x-editable fields are visible and activated when focused on

I recently encountered an issue with x-editable for bootstrap while working on a project that involves creating editable table fields with client data. Specifically, I faced a challenge with a comments field that can sometimes be quite long, causing the la ...