i have a four radio buttons in a row.
so i have 10 rows in a table. all radio buttons in a row having same id.
in one time, only one radio button in a row can be selected.
some radio buttons are checked and some non checked.
i want to put a validation when submit the form. when i submit the form if all radio button is non selected in a row then a msg box can be appear.
i have found the radio button id but i am not able to get their value, either true or false.
it show me in a alert box: radiobutton Value is: undefined
here is the method:
function showValue() {
var radioID="radiobutton";
var radiobuttonName;
var radiobuttonValue;
for (var i=0;i<10;i++) {
radiobuttonName=radioID+i;
alert("radiobutton Name is:"+radiobuttonName);
if (radiobuttonName.checked)
{
radiobuttonValue=radiobuttonName.value
}
alert("radiobutton Value is:"+radiobuttonValue);
}
}
Edit:
i have four radio button in a row.
name and id is same of all four button in a row.
suppose, name and id for all buttons in first row is radiobutton0. for second row it is radiobutton1, for third row it is radiobutton2. thus i have 10 rows in a table.
my aim is when i submit the page, one button must be checked in a row else it show a msg box that please fill the corresponding radio button. .
i want to get the value of radio button either true or false.
i run the following code:function get_radio_value()
{
var radioID="radiobutton";
var radiobuttonName;
var radiobuttonValue;
for (var i=0;i<10;i++) {
radiobuttonName=radioID+i;
alert("radiobutton Name is:"+:"+radiobuttonName);
}
}
this method execute the loop and display all radiobutton Names.
How i find radiobuttonValue which is either true or false.
You're trying to alert the .value property of a string (radiobuttonName is just a string, not an element), which is undefined, instead you need something like this:
function showValue() {
var radioID="radiobutton", radiobuttonName, radiobuttonValue, rb;
for (var i=0;i<10;i++) {
radiobuttonName=radioID+i;
rb = document.getElementsByName(radiobuttonName)[0];
alert("radiobutton Name is:"+radiobuttonName);
if (rb.checked)
{
radiobuttonValue=rb.value
}
alert("radiobutton Value is:"+radiobuttonValue);
}
}
In the above we're getting the first element with that name (I'm guessing by your naming conventions), if it had an ID for example, you'd replace document.getElementsByName(radiobuttonName)[0] with document.getElementById(radiobuttonName).
Related
I am trying to get two buttons groups with checkboxes mutually exclusive.
Here's my current result on this JS Fiddle
As you can see, there are four divs (with id="UserVsComputer", id="User1VsUser2", id="PlayableHits" and id="button-new-game").
I want the two first <div> ( UserVsComputer and User1VsUser2 ) to be mutually exclusive when we click on the checkbox of concerning <input> (i.e corresponding to the right <div>).
In JavaScript part, I did:
// Select the clicked checkbox for game type
$('input.game').on('click',function(){
setGameType();
});
function setGameType() {
// Get state of the first clicked element
var element = $('#UserVsComputer input.game');
var checkBoxState = element.prop('checked');
// Set !checkBoxState for the sibling checkbox, i.e the other
element.siblings().find('input.game').prop('checked',!checkBoxState);
updateGameType();
}
function updateGameType() {
// Set type of game
if ($('#UserVsComputer input').prop('checked'))
gameType = 'UserVsComputer';
else
gameType = 'User1VsUser2';
}
I don't want the <div id="PlayableHits" class="checkbox"> to be concerned by this mutual exclusion on two first checkboxes.
For example, below a capture showing that I can set the two first checkbox to true without making them exclusive:
What might be wrong here?
Try the following - it uses the target of the click event to ascertain which checkbox was checked:
// Select the clicked checkbox for game type
$('input.game').on('click',function(e){
setGameType(e.target);
});
function setGameType(cb) {
var container = $(cb).parent().parent();
var checkBox = $(cb);
var checkBoxState = checkBox.prop('checked');
// Set !checkBoxState for the sibling checkbox, i.e the other
container.siblings().find('input.game').prop('checked', !checkBoxState);
updateGameType();
}
function updateGameType() {
// Set type of game
if ($('#UserVsComputer input').prop('checked')) {
gameType = 'UserVsComputer';
} else {
gameType = 'User1VsUser2';
}
}
There are other bits which could use some attention (the hardcoded .parent().parent() isn't pretty but works in this case..
I have two select boxes: the first contains all avaible items and the second one contains the items I've selected from the first select box.
$items=$this->Database->getItems();
$mySelect=form_multiselect('addedMaterials', $items, '1', 'id="addedMaterials" multiple="multiple"');
To submit all the items from the second select box I've put this:
function selectAll()
{
var selObj = document.getElementById('addedMaterials');
for (var i=0; i<selObj.options.length; i++) {
selObj.options[i].selected = true;
}
}
So now, I go to the controller, where I want to get the items from the box...
$stuff = $this->input->post('addedMaterials');
My problem is that it only gets the last selected item, not all. How can I get all the items of the select box?
I've found my solution here: Post values from a multiple select
When we declare the multiple select, the attribute "name" must be name='mySelect[]'. In my case it should be:
$mySelect=form_multiselect('addedMaterials[]', $items, '1', 'id="addedPrinters" multiple="multiple"');
In a form I have 4 radio buttons, under the label Q3. Also i have a text field labeled lictype Each radio button has its own respective Button Radio Choice Value
radio1 = Pre
radio2 = Pro
radio3 = Ult
radio4 = Uns
When a radio button is checked. I want the value of that button to be displayed in the lictype text field.
Here is the JS I tried in a calculation.
var q3 = this.getField("value")
if (q3.value == "Pre”){
{
lictype.value = “Pre";
}
elseif (q3.value == "Pro”)
{
lictype.value = “Pro";
}
elseif (q3.value == "Ult”)
{
lictype.value = “Ult";
}
else (q3.value == "Uns”)
{
lictype.value = “Uns";
}
If anyone is interested: I was able to accomplish this by using JS to do a SHOW/HIDE on elements in the ACROBAT properties menu.
Set a different text field for each of the radio buttons
Set the property of each radio button to SHOW and then HIDE the appropriate text field.
In the the text field: Stack all of them in the desired location and set each default value in the properties panel to their respective value names.
Problem solved!
I have an if else statement below where it turns on and off buttons depending if the other button is on or off. This deals with 2 buttons, "Yes" or "No".
function btnclick(btn)
{
var context = $(btn).parents('#optionAndAnswer');
if (context.length == 0) {
context = $(btn).parents('tr');
}
var $btn = $(btn);
var id = btn.id;
var $otherYNBtn = id === "answerYes" ? $("#answerNo") : $("#answerYes");
$(btn).toggleClass("answerBtnsOff");
$(btn).toggleClass("answerBtnsOn");
if ($("#answerYes", context).hasClass('answerBtnsOn')) {
$otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
}
else if ($("#answerNo", context).hasClass('answerBtnsOn')) {
$otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
}
return false;
}
Now this code works for these buttons below which are displayed at the top:
<table id="optionAndAnswer" class="optionAndAnswer">
...
<input class="answerBtns answers answerBtnsOff" name="answerYesName" id="answerYes" type="button" value="Yes" onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerNoName" id="answerNo" type="button" value="No" onclick="btnclick(this);"/>
Now the situation I have is that obviously it only works for the buttons above, but what happens is the user is able to add these buttons in a new row by appending them into a new row. The code which appends these buttons in a new row is below:
var $this;
$('#optionAndAnswer .answers').each(function() {
$this = $(this);
var $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this);' />".replace('%s',$this.is(':visible')?'inline-block':'none')).attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')).attr('id', $this.attr('id')+'Row');
$newBtn.appendTo($cell);
i++;
});
The above code copies all of the attributes (name, class, id) from the buttons on top into a new row, except the only difference is that the id for the appended buttons contain the string "Row" at the end of the id.
What my question is that what I want to do is change my if/else if function so that it works for all 2 buttons, no matter if they are on top, or in row 1 or row 2 or etc.
So for example:
If I have Yes and No buttons on top control, Yes and No buttons in row 1 and Yes and No buttons in row 2, All of these buttons having the "Yes" button turned on.
If I click on "No" button in top control, it should turn on the "No" button and turn off the "Yes" button in the top control only, it should not have any affect on row 1 or 2.
If I click on "No" button in row 1, it should turn on the "No" button and turn off the "Yes" button in row 1 only, it should not have any affect on row 2 or top control.
If I click on "No" button in row 2, it should turn on the "No" button and turn off the "Yes" button in row 2 only, it should not have any affect on row 1 or top control.
How can this be achieved, at the moment my if else statements only work for the buttons on the top control (because of its id), but not with any of the rows.
You could use context.find("input[value='NO']") in place of $("#answerNo")
Or if you want it more internationalizable and HTML5 way, you could try using the microdata attributes data-*:
<input data-value="yes" class="answerBtns answers answerBtnsOff"
type="button" value="Oui" onclick="btnclick(this);"/>
<input data-value="no" class="answerBtns answers answerBtnsOff"
type="button" value="Non" onclick="btnclick(this);"/>
and in jQuery, use context.find("input[data-value='no']")
when I click a button, popup window opens. There I get user detail from facebook. that data I have to pass to parent window form. this i can do using
opener.document.signup2.'.$key.'.value="'.$value.'";
but this is working for textbox. how to do for radio button.
example.
If gender is female in popup. corresponding option should be selected in parent form.
radio buttons are stored in an array, so you'd have to figure out what index in that array represents the option to check, then set that element's 'checked' attribute:
radioObject = opener.document.signup2.whateveryourradiobuttonnameis;
for (i = 0; i < radioObject.length; i++) {
if (radioObject[i].value == 'value you want to have selected') {
radioObject[i].checked = true; // check new radio button
} else {
radioObject[i].checked = false; // uncheck the others.
}
}