I'm trying to write code to make a text box appear and disappear based on whether or not a checkbox is checked, but while it works exactly the way I want it to in chrome, .onclick and .onchange seem to do nothing in firefox.
Trigger code:
document.getElementById('Other').onclick = ChangeOtherState;
'Other' html code:
<p>
<label for="Other">Other</label>
<input type="checkbox" id="Other" class="Types[]" value="Other"/>
<textarea id="OtherText" name="Other">Please enter other types here</textarea>
</p>
State change function:
function ChangeOtherState() {
var otherCB = document.getElementById("Other");
var otherTB = document.getElementById('OtherText');
if (otherCB.checked) {
otherTB.style.display='block';
otherTB.removeAttribute('disabled');
} else {
otherTB.style.display='none';
otherTB.setAttribute('disabled','disabled');
};
}
Is there a way to make .onclick/onchange work? if not what can I use to get the same functionality without jQuery?
EDIT: For future readers, try to change the position of the trigger declaration to right after initialization.
Please find here others topics talking about the issue.
select onclick onchange not working
onchange / onclick in a checkbox doesn't work in IE
OnClick Dropdown works in FireFox but not Chrome or IE?
It seems to have workaround already discussed.
Regards,
Related
I'm not sure if this is a clicking issue, or specific to the jQuery fade functions.
I have the HTML structure like this: label > input(hidden) + div + label text
Example:
<label data-name="primary-residence" data-value="Yes">
<input type="hidden" id="primary-residence" name="Primary Residence" value="" />
<div class="big-check-box"></div>
Primary Residence
</label>
And the jQuery is as follows:
$('label').on('click', function(){
var name = $(this).data('name');
var value = $(this).data('value');
if($(this).find('.big-check-box').hasClass('checked')){
$(this).find('.big-check-box').removeClass('checked');
$('#'+name).val('');
$('#'+name+'-value, #'+name+'-loan-balance').fadeOut();
}else{
$('#'+name).val(value);
$(this).find('.big-check-box').addClass('checked');
$('#'+name+'-value, #'+name+'-loan-balance').fadeIn();
}
});
I have a big-box that acts as a checkbox and has data attributes that then populate a hidden field to be collected on form submission. It also applies a class to the checkbox and fades in two new input fields.
Everything works fine in Chrome and FF, but in IE, the class doesn't get applied to the box and the new input fields fade in, then immediately fade out once the fade in animation is complete. Unless they are clicked twice, then it seems to work, but that isn't very intuitive or user friendly.
Here's a fiddle to a working example: jsFiddle
Anyone know why this is happening?
I figured it out.
For some reason I needed to add preventDefault() for the IE fix. Not exactly why it works, but here's reference: <label> - HTML | MDN
Here's the updated lines:
$('label').on('click', function(e){
e.preventDefault();
.....
});
Hope this can help someone else in the future.
I know this is a common question and I understand why it isn't working. Problem is that the suggested answers are not working for me.
HTML code:
<label class="radio"><img id="boyImg" class="radio-img btn-boy" src="/wp-content/uploads/2016/09/boy.png"><input type="radio" name="Gender" value="Boy"></label>
<label class="radio"><img id="girlImg" class="radio-img btn-girl" src="/wp-content/uploads/2016/09/girl.png"><input type="radio" name="Gender" value="Girl"></label>
I have the following code:
$('input[type=radio]').on('change', function() {
$(this).closest("form").submit();
});
Which is working as expected the first time. Problem is that when I navigate back to the page with the radio button. It only works if I select a different radio buttons - selecting the same isn't working. Despite none of them are selected, when coming back to the page. In other words, I can't select e.g. Boy twice in a row, despite having navigate to another page in between my selections.
I've tried the following fix:
$('input[type=radio]').on('change', function() {
if($('input[value="Boy"]').is(':checked') || $('input[value="Girl"]').is(':checked')){
$(this).closest("form").submit();
}
});
But it still only works if I select a different checkbox than my original choice.
What am I doing wrong?
As a workaround, you can use click event. It has something to do probably with browser autocomplete. Try different browser.
That's an odd browser quirk that the selected radio button is stored but not displayed as selected. Simplest workaround for your purposes would be adding click.
$('input[type=radio]').on('change,click', function() {
$(this).closest("form").submit();
});
With HTML a checkbox is created like this:
<form>
<input type="checkbox" id="category1">Category1<br>
</form>
With javascript we can check the checkbox like this:
$("#category1")[0].checked = true
Now I am trying to create the same page with jquery-mobile. The checkbox looks like this:
<form>
<label>
<input name="checkbox-0 " type="checkbox">Check me
</label>
</form>
Why is there is no id here? Is the name the id? Should I delete the attribute name and create one with the name id?
How can I check this checkbox here with Javascript/jQuery?
I tried the code above, but it doesn't seem to work for this checkbox.
You need to refresh it after changing its' .prop, using .checkboxradio('refresh'). This is the correct way to check checkbox/radio in jQuery Mobile.
Demo
$('.selector').prop('checked', true).checkboxradio('refresh');
Reference: jQuery Mobile API
You can do:
$('input[name="checkbox-0"]').prop("checked", true).checkboxradio('refresh'); //sets the checkbox
var isChecked = $('input[name="checkbox-0"]').prop("checked"); //gets the status
Straight from the jQ Mobile docs:
$("input[type='checkbox']").attr("checked",true);
With the solution from #Omar I get the error:
Uncaught Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'
I actually had a flipswitch checkbox:
<div class="some-checkbox-area">
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-lesson-complete"
data-on-text="Complete" data-off-text="Incomplete" data-wrapper-class="custom-size-flipswitch">
</div>
and found the solution was:
$("div.ui-page-active div.some-checkbox-area div.ui-flipswitch input[type=checkbox]").attr("checked", true).flipswitch( "refresh" )
Notes
I don't usually specify ids for page content as jQuery Mobile loads multiple div.ui-page content into a single HTML page for performance. I therefore never really understood how I could use id if it might then occur more than once in the HTML body (maybe someone can clarify this).
If I use prop rather than attr the switch goes into an infinite flipping loop! I didn't investigate further...
I have a HTML 5 input (type="text") binded to a datalist which is populated after 3 characters are entered. Datalist is initially empty when page is loaded. I'm using AJAX calls from Jquery to update datalist based on search criteria. If I type "tes" in the text input, datalist that is refreshed is not showing unless I click in text input in Chrome and IE. Once I click in the text input element, list shows. Update list shows fine in Firefox if matching entries are found.
I tried to used focus and click events from javascript so list shows as text changes but nothing works. Any help will be greatly appreciated.
html (in gsp)
<input type="text" name="search" id="search" list="myList" autocomplete="off" autofocus="true" required="true"/>
<datalist id="myList"> </datalist>
Javascript (in gsp)
<r:script>
$('#search').on('input',function(e){
var searchFilter = $(this).val()
<g:remoteFunction action="searchMe" onSuccess="populateList(data)" params=" {searchFilter: searchFilter}"/>
});
function populateList(data) {
var searchFilter = $('#search').val();
var dataList = $("#myList");
dataList.empty()
if (searchFilter.length>2){
if(data.results.length) {
for(var i=0, size=data.results.length; i<size; i++) {
var option = $("<option></option>").attr("value", data.results[i].name);
dataList.append(option)
}
}
}
}
</r:script>
A workaround was posted here :
How do you refresh an HTML5 datalist using JavaScript?
It uses jquery focus() function to force datalist display when populated.
Just add this call at the end of your own populate function.
I think your problem is in this line:
$('#search').on('input',function(e){
'input' is not an event. I think what you're wanting is 'keyup' or 'keydown'. See the jquery api documentation for 'on' here http://api.jquery.com/on/
Firefox is great, but it's forgiving nature sometimes hides errors that other browsers will trip over. Firefox sometimes knows what you meant to say and just works anyway.
ok quick scenario:
html:
<span class="answer">blah<input type="radio" value="1"></span>
jquery:
$("span.answer").click(
function() {
check = $("input", this);
check.attr('checked', check.attr('checked') === true ? false : true);
);
Ok so this will check/uncheck the child radio input inside the selected span when I click inside it.
The problem I have is that I don't want to run this event when I actually click on the radio button itself (obviously because jquery will see the radio button as checked and uncheck - in effect the exact opposite of what should happen usually). Something along the lines of this:
$("span.answer:not(span input)").click
This of course doesn't work. Any ideas? Thanks in advance!
Leo
$("span.answer input").click(function(evt)
{
evt.stopPropagation();
});
Will prevent the click event from bubbling up (and triggering the handler on "span.answer".)
There is a specific html tag to accomplish what you try to do with jquery and javascript ..
it is the label tag
<label>blah<input type="radio" value="1" /></label>
this will have the effect you want
[update]
For Internet Explorer 6 to play nice use the complete syntax of the label by using the for attribute which targets the id of an form input/select/etc.. element..
<label for="radio_1">blah<input id="radio_1" type="radio" value="1" /></label>