I am trying to get the .focus() working in IE, it works in chrome etc. My form is called:
<form name="feedbackform" action="feedback.asp" target="_self" onsubmit="return
validate_txt(this)" method="post" style="margin: 0;">
my radio buttons:
<input type="radio" name="fb_commentype" value="Comment" />Comment
<input type="radio" name="fb_commentype" value="Complaint" />Complaint
<input type="radio" name="fb_commentype" value="Request" />Request
in my javascript I am trying to call using this line:
document.forms["feedbackform"].elements["fb_commentype"][0].focus();
As I said, it works in chrome, firefox blah blah blah but in IE 8 I am getting nada, zip and I don't know why, nor can I find a satisfactory answer, is there a way around it?
<input type="radio" name="fb_commentype" value="Comment" />Comment
<input type="radio" name="fb_commentype" value="Complaint" />Complaint
<input type="radio" name="fb_commentype" value="Request" />Request
Simple, look at your radio button as an array, you can focus any radio button of the array by pointing to the right index, see below.
document.getElementsByName('fb_commentype')[0].focus();
that way the "Comment" radio button will be focused...
Happy coding!!
Are you calling focus when the page just loads (e.g. body's onload)?
This thread might help - it may get called in your code before DOM finished loading
Also, this page has a good test for focus() behavior:
http://hardlikesoftware.com/projects/IE8FocusTest.html
This might be that IE does not understand the .[0].focus() syntax. You may want to try something like this:
document.forms["feedbackform"].elements["fb_commentype"][0].focus();
document.forms["feedbackform"].elements["fb_commentype"].focus();
Related
Since many years I have a website running (direct link to the table-page). Now, suddenly, I realise that the checkbox doesn't work anymore as one would expect (same for the "Completeness" button below): once the checkbox for "per capita"-calculation has been checked, it doesn't go off anymore. No idea why that is; really frustrating.
The page has two forms:
<form name="tableForm" action="">
Per Capita: <input type='checkbox' name='per_capita' onchange='
document.formGeneric.per_capita.value=document.tableForm.per_capita.value;
document.formGeneric.action="table.php";
document.formGeneric.submit()
'>
</form>
and
<form method="post" name="formGeneric" action="">
<input type='hidden' name='per_capita' value='on' />
</form>
Looks alright (although perhaps old-style writing) to me.
The "offing" off seems not to work at all. If I put a "alert(document.tableForm.per_capita.value)" in the onChange event, it still says "on".
I would very much appreciate any tip on what I am doing wrong here.
Ok, thanks to AdrianoRepetti's and Manurat's comments above, I realised that I had to work with two different "units": One is the information type="checkbox" is returning ("checked"); the other is how I store the information in a "hidden"-element in another form.
So, I changed the code to reflect this - it now parses the "checked" state of the checkbox over to the "value" part of the hidden element:
<form name="tableForm" action="">
Per Capita: <input type='checkbox' name='per_capita' onchange='
document.formGeneric.per_capita.value=document.tableForm.per_capita.checked;
document.formGeneric.action="table.php";
document.formGeneric.submit()
'>
</form>
<form method="post" name="formGeneric" action="">
<input type='hidden' name='per_capita' value='' />
</form>
Now, I use the PHP to check if the hidden parameter "per_capita" is "checked" or not.
I can't check a set of checkboxes programatically with jquery mobile, I have the following code:
<div data-role="fieldcontain" id="div_radio" class="radiogroup">
<fieldset data-role="controlgroup">
<input type="radio" name="radio-pieces" id="radio-choice-1" value="3" checked="checked" />
<label for="radio-choice-1">1 to 3</label>
<input type="radio" name="radio-pieces" id="radio-choice-2" value="5" />
<label for="radio-choice-2">4 to 5</label>
<input type="radio" name="radio-pieces" id="radio-choice-3" value="6" />
<label for="radio-choice-3">over 5</label>
</fieldset>
</div>
If I do: $("input[type='radio']:last").attr("checked",true).checkboxradio("refresh"); everything works perfect, but none of this work at all:
$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");
$("input[type='radio']:eq(0)").attr("checked",true).checkboxradio("refresh");
$("input[type='radio']:eq(1)").attr("checked",true).checkboxradio("refresh");
$("input[type='radio']:eq(2)").attr("checked",true).checkboxradio("refresh");
How can I properly manipulate these elements? Unselecting all checkboxes also works fine:
$("input[type='radio']").attr("checked",false).checkboxradio("refresh");
It seems that the only checkbox working is the last one.
They all work just fine. You just need to trigger refresh on all input radio in group.
$("input[type='radio']:first").attr("checked", "checked");
$("input[type='radio']").checkboxradio("refresh");
jsFiddle is here.
Nothing worked for me except:
$('#reset').click(function(){
$('#Store').trigger("click").trigger("click"); // yes... twice
});
On jQuery Mobile 1.4.2.
For me works this to uncheck the whole group of radios:
$(".my_class").removeAttr("checked");
$(".my_class").checkboxradio("refresh");
This doesn't seem right.
The single quote is not needed input[type=radio] is correct.
I'm using an outdated version (1.1.1).
It would be help to know what version you're using.
Keep in mind that those are radio buttons, only one selected at a time.
in Jquery mobile radio button refresh like this:
$(".iscfieldset input[type='radio']:first").attr("checked", "checked");
$(".iscfieldset input[type='radio']").checkboxradio().checkboxradio("refresh");
try this working fine for me
I have the following code setup:
http://jsfiddle.net/bABHU/2/
Had to change it a little bit to get it all on jsfiddle but the problem i'm having is the data from the first from gets put into the query string to send off to the ajax call, but the form elements generated after that (which comes from a JSON call) don't get submitted when clicking the next button again.
So when you get to the second question how can I submit the 'answer' input that was generated. - see the console for the outputs.
Hope that makes sense.
Any help is appreciated.
Thanks.
This is happening because you are replacing your entire <form> element with the new HTML content from question 2. Replace $('.FinderOptionsInner').html with $('#formStep').html
See http://jsfiddle.net/M3eZp/1/
When you replace the markup for findOptionsInner, you obliterate the form itself. Hence it not serializing. Also, you have no close tag for your form.
<form action="" method="post" name="formStep" id="formStep">
<div class="FinderOptionsInner">
<p>
<label class="label_check">
<input type="radio" name="answer" value="1" id="answer_0" />
Answer 1</label>
<br />
<label class="label_check">
<input type="radio" name="answer" value="2" id="answer_1" />
Answer 2</label>
<br />
</p>
</div>
</form>
<div class="nextButton-step1 nextButton">Next
</div>
Works just fine (notice that I've also fixed the close tags for form and the div at the bottom).
I've a list of checkboxes that get rendered out using javascript.
<input type="checkbox" name="sportType" id="sportType11" value="11" />Golf
<input type="checkbox" name="sportType" id="sportType12" value="12" />Tennis
<input type="checkbox" name="sportType" id="sportType13" value="13" />Football
<input type="checkbox" name="sportType" id="sportType14" value="14" />Cricket
On submitting the form I can pickup the selected values in ASP.NET by using:
Request.Form["sportType"]
In firefox this works and returns something like 11,12,13,14 (Assuming all are checked)
In IE however it returns on,on,on,on
Has anyone encountered this before and hopefully solved it?
Thanks
Having dug a little deeper I've discoved that in IE Jquery render the input box like so:
<input propdescname="sportType" id="sportType11" type="checkbox" jQuery1288622120804="10" value="on"/>
Which give explains the on,on,on value thats been retured? Can anyone shed any light on how to correct this, I assume jquery does this so it can consistantly keep track of selected checkboxes.
Thanks
Kevin
Solved, kind of
Value of jQuery generated checkbox in IE8 is stored as "on" rather than actual value?
Try changing the name to name="sportType[]" and see what happens, what I would do in PHP at least.
I have a series of checkboxes and input type="text" areas, wherein I need to have the state of the checkbox set to true when the value in the text area changes. Simple enough. I've done this successfully:
<input name="fixed" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed.checked=true">
Which works fine. You have to edit the field then click out of it, but that is fine for my needs:
...but when I switch to this:
<input name="fixed[0]" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed[0].checked=true">
<input name="fixed[1]" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed[1].checked=true">
I get no change to my checkboxes when I edit:
My only javascript know-how comes from googling this sort of thing, I'm afraid. Anyone have any better info on this than the Oracle of Google on The Mountain has in store?
thanks...
Switch from dot notation to bracket notation!
this.form['fixed[0]'].checked
It might be that you're mixing some shady practices in HTML, and when you do it in javascript, they're breaking.
So this.form.fixed[1] in javascript really says "The second item in the array this.form.fixed. So I think that's the problem. try naming your elements fixed0 and fixed1 and see if that works.
Edit: You could also use bracket notation, as illustrated by Peter, which should solve the problem without editing the names of the inputs.
Make life easier on yourself.
Create unique ID's for the elements you are trying to reference and refer to them from the elements to which you bind your events:
<input name="fixed[0]" type="checkbox" id="fixed_0">
<input name="stuff" type="text" onchange="document.getElementById('fixed_0').checked=true">
<input name="fixed[1]" type="checkbox" id="fixed_1">
<input name="stuff" type="text" onchange="document.getElementById('fixed_1').checked=true">