I trying use pictures in radio button. But problem is when i running on IE9 it work fine but on IE 11 not. On my jQuery scripts i hide all radio buttons and for actions i using label's. On IE9 i can click on the picture (anywhere) and it is fine. But on IE11 i need click only on left bottom corner.
<div id="div_name">
<table class="tables">
<tr>
<td><input type="radio" name="name"[] id="H1" value="H1" class="me_radio"><label for="H1" class="radio_label"><img src="icons/1.gif"><br>One</label></td>
<td><input type="radio" name="name"[] id="H2" value="H2" class="me_radio"><label for="H2" class="radio_label"><img src="icons/2.gif"><br>Two </label></td>
<td><input type="radio" name="name"[] id="H3" value="H3" class="me_radio"><label for="H3" class="radio_label"><img src="icons/3.gif"><br>Three</label></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
$('#me_radio label').click(function() {
$('#other_div label').removeClass('selected');
.
.// remove classes from another
.
$(this).addClass('selected').siblings().removeClass('selected');
});
And CSS
.selected {
background-color: #ccc;
}
Might be kind of late for this, but the workaround I have been using is
<meta http-equiv="x-ua-compatible" content="IE=10">
You might have already solved this issue, but hope you found another way for it work.
Related
I have literally no experience. I'm a paramedic, and I have to fill out hundreds of patients forms using a redundant form with many superfluous fields.
I am trying to write a script to prefill some of the fields that stay the same for most patients, for example, "age units." Almost all of our patient's ages are in "years" but the software fields listed include "minutes, hours, days, weeks, months, years, cancel the selection, etc." The field is required for completion of a report, yet the default is set to "cancel selection", which will prevent completion of the report.
I have attached the code as it is. I literally had to google what (language?) this was even written in. First, I figured that I could inspect the default element, inspect the desired element, and just modify the values so that the desired element was checked. Then, I tried to use an autofill extension that allowed me to select a form field and modify the value. I tried to modify it as a checkbox/radio. I tried to use javascript. I yelled. I have been wildly unsuccessful. If someone could point me in the right direction, I'd be eternally grateful. I don't even know what I'm trying to modify. Is it a radio/checkbox? Is it a button? Is it text?
I have tried as much as my feeble brain is capable of.
This is what one of the offending elements of the form looks like.
<div class="radio_checkbox_div_container">
<table class="table_radio">
<tbody>
<tr>
<td class="td_radio ui-state-highlight"><input type="radio" name="ePatient_16" id="ePatient_16_cancel" value="" checked=""> Cancel Selection </td>
<td colspan="2"> </td>
</tr>
<tr>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_0" value="2516001"> Days </td>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_1" value="2516003"> Hours </td>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_2" value="2516005"> Minutes </td>
</tr>
<tr>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_3" value="2516007"> Months </td>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_4" value="2516009"> Years </td>
<td class="td_radio td_3col"><input type="radio" class="nil_option" name="ePatient_16" id="ePatient_16_5" value="7701001"> Not Applicable </td>
</tr>
<tr>
<td class="td_radio td_3col"><input type="radio" class="nil_option" name="ePatient_16" id="ePatient_16_6" value="7701003"> Not Recorded </td>
</tr>
</tbody>
</table>
</div>
I want to modify some form fields (all similar to above) so that my most used selections are the default values.
He Hi Hello,
I create one jsfiddle for you, just copy paste html tags and replace ids in script to select radio buttons and other elements
this will give you basic idea
https://jsfiddle.net/1efx59vn/
<div class="radio_checkbox_div_container"><table class="table_radio"><tbody><tr><td class="td_radio ui-state-highlight"><input type="radio" name="ePatient_16" id="ePatient_16_cancel" value="" > Cancel Selection </td><td colspan="2"> </td></tr>
<script>
$('#ePatient_16_cancel').attr('checked', 'true')
</script>
As i can see, you are new, have no knowledge about javascript, so this will be tough for you to understand. But try to understand just few things like in this script tag $('#ePatient_16_cancel').attr('checked', 'true') _ePatient_16_cancel_ is an id of radio button, id means your unique account number, that no one will have, find ids for other elemets too and put inside $('#') replace with element ID.
So the script will look like this
$('#ePatient_16_cancel').attr('checked', 'true')
open form in chrome browser and press F12 key, navigate to console tab and paste the script in console then press enter, this will select radio button for you
I am using a webkit browser and getting an bug as when I am trying to close the popup its not active only and the parent browser is active even after the pop up for uploading files is open.
I have to click on popup to activate it first and then again to make any selection on it.
How can I make the pop up active as soon as its open.
Is there a way to add event handler in the input tag only to make the pop up active and inactive the parent browser.
for eg
<form action="${ctx}/home/step11/uploadReport" method="POST" enctype="multipart/form-data" id="form_upload">
<table style="margin-left:25px">
<tr>
<td colspan="5" style="vertical-align:middle; font-size:100%">Demo Request Upload:</td>
</tr>
<tr>
<td style="vertical-align:middle"><input id="uploadFileId" name="fileName" type="file" multiple="true"/></td>
<td/>
<td>
<c:if test="${empty editable}">
<input id="btnImport" class="active small button" disabled="disabled" type="button" value="Import"/>
</c:if>
<c:if test="${not empty editable}">
<input id="btnImport" class="active small button" type="button" value="Import"/>
</c:if>
</td>
</tr>
</table>
</form>
Try creating an event which automatically clicks on the browser when its opened so it will be active after a couple of micro seconds
I am creating a website and there are some pages containing the <div> tags as the wrapper of <table>. A <tr> of each table contains a <form> and another <tr> contains some <a> tags. I am using these anchor tags to make buttons just to add hide and show functionality. Whenever some new data is fetched from database, the set of said html structure is created dynamically. Every <div> contains the same id and every <tr> also containing the <form> assigned the same id. Below is my example htmlfor the better explanation.
HTML
<div class='static_archive'> // First Wrapper
<table>
<tr>
<td>Some data</td>
<td>Some data</td>
<td>
<a id='show_hide_details' href='#'>Show/Hide Button</a>
</td>
</tr>
<tr id='form_container'>
<td colspan='3'>
<form>
<input type='text' name'first' />
<input type='text' name'second' />
<input type='text' name'third' />
</form>
</td>
</tr>
</table>
</div>
<div class='static_archive'> // Second Wrapper
<table>
<tr>
<td>Some data</td>
<td>Some data</td>
<td>
<a id='show_hide_details' href='#'>Show/Hide Button</a>
</td>
</tr>
<tr id='form_container'>
<td colspan='3'>
<form>
<input type='text' name'first' />
<input type='text' name'second' />
<input type='text' name'third' />
</form>
</td>
</tr>
</table>
</div>
jQuery
$(document).ready(function(){
$("#form_container").hide();
$("#show_hide_details").click(function(){
$("#form_container").toggle();
});
});
As soon as the page loads, $("#form_container").hide(); hides all the <tr> containing the <form>. By clicking hide/show button with the toggle effect, hides and shows the every content with the same id.
I want to show only one form at a time when a particular button is hide/show button is pressed. How can i control such behavior?
With a new record fetched, a new DIV is created with only one table inside it. And the table contains only one form. The table row containing the form needs to be hide/show.
Here is the jsfiddle with my code structure jsfiddle
Every clicked hide/show should effects the respective form.
I have edited my post. Please have a look now.
You can use $(this) to do the toggle with particular block.
$(this).closest('tr').next("#form_container").toggle();
You should not use same id for multiple elements, assign class and use that
$(this).closest('tr').next(".form_container").toggle();
I think u want this or may this help u.
You can not have same id's for different controls.So u can have id's staring with same string
You can use ^ here:
$(document).ready(function(){
$("[id^='form_container']").hide();
$("#show_hide_details").click(function(){
$(this).parents().next("tr").toggle();
});
});
jsfiddle
I assume you want to show all of them hidden first. Obviously, you have to replace the id's with class.
$(document).ready(function(){
$(".form_container").hide();
$(".show_hide_details").click(function(){
$(this).parents("tr").next().toggle();
});
});
I have the following HTML:
<table>
<tr class="row">
<td class="field">
<input type="text" />
</td>
<td class="field">
<input type="text" />
</td>
<td class="field">
<input type="text" />
</td>
</tr>
<tr>
...
...
</tr>
</table>
I want to be able to hide the <tr> with the class="row" but only when the input within the <td> with the class="field" is empty when the page loads.
I've tried this, but it doesn't work:
$('td.field:text[value=""]').parents('tr.row').hide();
However, for some reason, this DOES work:
$('td.field).parents('tr.row').hide();
(ie: it hides all of the rows with class="row")
Also, the following DOES work:
$('td.field:text[value=""]').val('test');
(ie: all empty inputs are populated with 'test' on page load)
I'm new to JQuery so I'm suspecting that I may have just misunderstood the way chaining works. can anyone give me any pointers? It semms like the two parts of what I am trying to do are correct when attempted separately, but don't work together as one.
I think it should be in this way:
$('td.field :text[value=""]').parents('tr.row').hide();
The reason: :text (input) is child from td.field. If you put td.field:text it's wrong because they are diferente selectors.
and why dont you go the oposite way - select the INPUT with empty value, and than go to its
parents().parents().hide()
first parents to get TD, the second one to get TR
Been using this site for ages and have never had to go as far as to ask my own question... cheers in advance.
I have a group of "questions" which are to be listed. The user then has to rank these questions as 1st, 2nd, and 3rd (there can be many more than three questions however).
The problem I have is that, if I make the radio button mutually exclusive in one direction - the user could rank all questions as #2, however if I make them mutually exclusive in the other direction, a user could rank the same question as #1, #2, AND #3.
Is there a way (maybe using jquery/Jscript) to make the radio buttons mutually exclusive in both directions?
EXAMPLE:
<table>
<tr>
<th>Question</th><th>Rank #1</th><th>Rank #2</th><th>Rank #3</th>
</tr><tr>
<td>QUESTION 1</td>
<td><input type="radio" name="rank1" value="1" id="1_1" /></td>
<td><input type="radio" name="rank2" value="1" id="1_2" /></td>
<td><input type="radio" name="rank3" value="1" id="1_3" /></td>
</tr><tr>
<td>QUESTION 2</td>
<td><input type="radio" name="rank1" value="3" id="3_1" /></td>
<td><input type="radio" name="rank2" value="3" id="3_2" /></td>
<td><input type="radio" name="rank3" value="3" id="3_3" /></td>
</tr>
In the above example, the value is the question's ID (from the DB)
Creative solution:
Why don't you use a widget?
you could put questions like layers you can drag and move, example:
http://jqueryui.com/demos/sortable/
http://jqueryui.com/demos/draggable/#sortable
The first to appear would be the first one.
You would have to use jQuery to get this effect working as I can't see a way of it working out of the box with HTML. Here is an example the gives the desired effect:
$(document).ready(function() {
$(':radio').click(function() {
$(this).parent().siblings().children(':radio').attr('checked', false);
});
});