I have 3 radio button inputs in three separate divs:
<div class="box1">
<input type="radio" name="paymentOption" checked="checked" value="creditcard_on_file" />
<!-- related subfields for that chosen option -->
</div>
<div class="box2">
<input type="radio" name="paymentOption" value="newCard" />
<!-- related subfields for that chosen option -->
</div>
<div class="box3">
<input type="radio" name="paymentOption" value="check" />
<!-- related subfields for that chosen option -->
</div>
on page load, the first one is default selected. and in IE9, when another is clicked, the first one stays selected! whoa.
what can I do to make it behave properly?
it works fine for me.. but if its a compatibility issue. try using JavaScript to clear out the other items.
try this:
How to reset radiobuttons in jQuery so that none is checked
There was a typo in some other html surrounding the given markup. I've learned that IE seems to handle the situations of invalid markup a bit differently that other browsers in that it either duplicates a section, or will hide a section. Since in this case neither of those issues occurred, the markup within incorrect html has misbehaved.
We had the same problem on IE 9.0.8112 64-bit ONLY but for different reasons. We had forgotten to assign a name to associate the inputs together. The funny thing is that this worked on every other browser, because we were using AngularJS's ng-checked to set the radio button state (even the non-64 bit version of IE 9).
Related
I have a website with an anchor tag at the bottom I want to jump to from the top. But I want to put the jump link inside a form element.
<form name=sortby onClick='submit()' method='get'>
<div>
<input type=radio name=sortby value=name onClick='submit()'>
Sort By Name
</div>
<div>
<a href='#bottom'>There are 587 entries on this page</a>
</div>
<div>
<input type=radio name=sortby value=date onClick='submit()'>
Sort By Date
</div>
<input type=hidden name=artist value=''>
</form>
<a id='bottom' href='#top'>Back to the top</a>
I have done a test where I place the anchor link outside the form code and it works. Is there some no-no about putting it within the element?
What I'm experiencing is that the page jumps to the bottom and immediately back to the top using each of Chrome, Firefox, Internet Explorer browsers in windows 7. Note that in Firefox, there is a delay before it jumps to the top as if the browser is processing something.
The link itself won't do anything to affect the form functionality, if that's the question. This is more or less a case of semantics. It's not a great practice but it's also not going to break anything.
I found my problem... The top line should be changed to this:
<form method='get'>
Getting rid of the onClick='submit()' was the key. Basically clicking anywhere in the form element submitted the form. It never let me actually click the link which was "behind/under" the form element.
I've code like given below:
<label>
<input type="hidden" name="styless" value="9">
<input type="radio" style="display:none" >Qwerty
</label>
This is working fine on all browsers except Internet Explorer. How do I display the radio button in the IE browser, and make it remain hidden on other browsers?
What happens in IE is when I click on "Qwerty", the click event is not fired.
So i want to remove display:none in IE only.
Generally you shouldn't try to make page behavior browser-specific. I would argue that a much better solution would be to make the "Qwerty" text click act the same way on all browsers.
You can do it with JavaScript - wrap the text in a <span> element, and give it an onclick event which would check your radio button. To find the radio button reliably, you should give it an id attribute. Then call preventDefault on the click event, to avoid any unwanted behavior which may or may not happen otherwise.
Your final HTML should look like this:
<label>
<input type="hidden" name="styless" value="9">
<input type="radio" style="display:none" id="qwerty-radio-box">
<span onclick="document.getElementById('qwerty-radio-box').checked = true; event.preventDefault();">Qwerty</span>
</label>
In your question, you didn't mention whether or not your project already has a JavaScript codebase. If it does, you should move the JavaScript code there, instead of keeping it in this onclick event attribute. If it doesn't, and this is the only usage, I'd say it's fine leaving it here.
You can use $.browser property, you can do it using jQuery Migrate plugin (for JQuery >= 1.9 - in earlier versions you can just use it) and then do something like this:
if (!$.browser.msie){
// do something
}
We have a web page generated by an ASP.NET web application. In this page there are several groups of radio buttons. For some users, one of these groups do not work. The first button is checked when the page loads, as expected, but nothing happens when the user clicks on one of the others. The other groups of radio buttons all work.
Here is the relevant code:
<div class="fjerdedel">
Oprettelse <input id="Oprettelse" type="radio" name="type" value="Oprettelse" checked="checked" />
</div>
<div class="fjerdedel">
Ændring <input id="Ændring" type="radio" name="type" value="Ændring" />
</div>
<div class="fjerdedel">
Tilføjelse <input id="Tilføjelse" type="radio" name="type" value="Tilføjelse" />
</div>
<div class="fjerdedel">
Nedlæggelse <input id="Nedlæggelse" type="radio" name="type" value="Nedlæggelse" />
</div>
There are javascript event handlers on some controls on the page, but not on these buttons.
It works in Firefox and Chrome. It works for some users using Internet Explorer 11.0.9600.14914, but not for others. It is not a question of 64 vs. 32 bits.
It does not work for me when the page is served from our production webserver, but it does work when served from a test server. The webapps on the two servers are identical. The HTML code received by the browser is identical, save for three things produced by the ASP.NET framework:
There is a hidden input containing viewstate. This content differs between production and test.
And there are two script tags, where the scr-attribute includes what looks like random characters. These also differ.
I have used Fiddler to check if there is a request that fails when contacting one or the other of the servers. There is not.
I have tried clearing everything in the browser. It makes no difference.
One difference between these radio buttons and the other radio buttons on the page is that these are inclosed in a floated div:
.fjerdedel {
width: 25%;
float:left;
}
Double clicking on a word in these divs causes the browser to highligt the next word following the divs. When the page is served from the text server, it highlights the word clicked on, as expected.
The problem proved to be browser setup. Some users had the checkbox show intranet sites in compatability view checked. The test site URL is different enough that the browser does not consider this an intranet site.
Just a suggestion. Make sure your Radio-Button does not contain any (Value="text") in aspx code section.
I encountered the same situation. After deleting (Value="text") from the aspx code, it is working fine now.
I want the user to be able to select an image from a set of images. I want to do it in a way that is a) both part of a form element and b) works well for older browsers/browsers without javascript enabled.
I thought about overwriting the css to make a set of radio buttons display the images, but that looks like it's really hard to hide the bullet.
Another option was to overwrite the css in an option...select structure to display images, but that only worked on some browsers.
Is there any easy way to do this? Or should I create two options: one for browsers with Javascript and one for browsers without?
You could make the image part of a <label> for each radio button, and hide the radio button with visibility: hidden or something.
<label>
<img src="image1.png" alt="Some image" />
<input type="radio" name="image" value="1" />
</label>
… come to think of it, that’s pretty much the only way you can give a radio button an image, and it should work as expected. (Unless you were going to use background-image?)
on this page in IE 8, there is the famous phantom element bug. I have researched for two days all possible things I can find that might cause this, including hidden inputs (present) floated elements (not present) and HTML comments <!--...--> (present).
The "phantom element" is the grey div between the login div and the "ny kunde" button.
When trying to view this is the IE dev tools (F12) it cannot be selected, nor viewed. I believe it is because of a rendering issue in IE8.
Removing these did not help at all. Plus we apparently need the hidden input for form validation.
It's worth mentioning that this eCommerce solution doesn't validate out of the box.
I have exhausted every solution I can think of, and it is still present.
Does anyone have any suggestions?
Thanks :)
Starting at line 348, there is this code:
<input type="hidden" name="return" value="/checkout/selectAddress" />
</form>
</div>
If I change it to this:
<input type="hidden" name="return" value="/checkout/selectAddress" />
</div>
</form>
Then the problem is solved.
Simplifying (removing stuff from) your HTML:
<div id="user-wrapper">
<form action="/user/doLogin" method="post" id="loginForm" />
<div id="user-kundelogginn">
</form>
</div>
</div>
You can clearly see the form tag is being closed inside the div.
How did I figure this out?
I used the W3C Validator, which got me on the right track with this:
Line 350, Column 7: end tag for
element "form" which is not open