I have no idea where to start with this and came here to learn how to do it.
I have the following radio lists and textarea(#mcsound):
<input type="radio" name="skeleton" id="1mcskel1" value="Top" /> Top<br />
<input type="radio" name="skeleton" id="1mcskel2" value="Nose" /> Nose <br />
<input type="radio" name="skeleton" id="1mcskel3" value="Mouth" /> Mouth <br />
<input type="radio" name="skeleton" id="1mcskel4" value="Ribs" /> Ribs <br />
<input type="radio" name="skeleton" id="1mcskel5" value="Liver" /> Liver <br />
<input type="radio" name="skeleton" id="1mcskel6" value="Joints" /> Joints <br />
<input type="radio" name="skeleton" id="1mcskel7" value="Cap" /> Cap <br />
<input type="radio" name="skeleton" id="1mcskel8" value="Fibula" /> Fibula <br />
<input type="radio" name="skeleton" id="1mcskel9" value="Ball" /> Ball <br />
<input type="radio" name="skeleton" id="1mcskel1" value="Sea" /> Sea <br /><br /><br />
<input type="radio" name="skeleton2" id="2mcskel1" value="Top" /> Top<br />
<input type="radio" name="skeleton2" id="2mcskel2" value="Nose" /> Nose <br />
<input type="radio" name="skeleton2" id="2mcskel3" value="Mouth" /> Mouth <br />
<input type="radio" name="skeleton2" id="2mcskel4" value="Ribs" /> Ribs <br />
<input type="radio" name="skeleton2" id="2mcskel5" value="Liver" /> Liver <br />
<input type="radio" name="skeleton2" id="2mcskel6" value="Joints" /> Joints <br />
<input type="radio" name="skeleton2" id="2mcskel7" value="Cap" /> Cap <br />
<input type="radio" name="skeleton2" id="2mcskel8" value="Fibula" /> Fibula <br />
<input type="radio" name="skeleton2" id="2mcskel9" value="Ball" /> Ball <br />
<input type="radio" name="skeleton2" id="2mcskel0" value="Sea" /> Sea <br /><br />
<input type="radio" name="skeleton3" id="3mcskel1" value="Top" /> Top<br />
<input type="radio" name="skeleton3" id="3mcskel2" value="Nose" /> Nose <br />
<input type="radio" name="skeleton3" id="3mcskel3" value="Mouth" /> Mouth<br />
<input type="radio" name="skeleton3" id="3mcskel4" value="Ribs" /> Ribs <br />
<input type="radio" name="skeleton3" id="3mcskel5" value="Liver" /> Liver <br />
<input type="radio" name="skeleton3" id="3mcskel6" value="Joints" /> Joints <br />
<input type="radio" name="skeleton3" id="3mcskel7" value="Cap" /> Cap <br />
<input type="radio" name="skeleton3" id="3mcskel8" value="Fibula" /> Fibula <br />
<input type="radio" name="skeleton3" id="3mcskel9" value="Ball" /> Ball <br />
<input type="radio" name="skeleton3" id="3mcskel0" value="Sea" /> Sea <br /><br />
Sound:<br/> <textarea name="sound" type="text" rows="6" cols="30" id="mcsound"></textarea><br/><br/>
The JSFiddle can be found here https://jsfiddle.net/Lpm38noj/2/
Okay now what I'm trying to do is add the following to match the above values.
1. Top = Tah, Dah
2. Nose = Nah
3. Mouth = Mah
4. Ribs = Rah
5. Liver = Lah
6. Joints = Juh, Shuh, Chuh
7. Cap = Cah, Kah, Gah
8. Fibula = Fah, Vah
9. Ball = Bah, Pah
0. Sea = Sah, Zah
etc..
So if from the 3 radio lists I select 1 radio button from each and have 146 for example in the textarea it would say:
EDIT: Update I would like 1. 4. 6. Instead of 123 sorry, I did have the numbers below but stackoverflow numbered list changed my numbers.
Tah, Dah
Rah
Juh, Shuh, Chuh
3 rows for the 3 radio buttons within the textarea. I hope this makes sense?
I'm stumped as how to do this, I wouldn't even know where to start. :(
Cheers,
Dan
Here is how I did it using pure javascript:
Fiddle: https://jsfiddle.net/Lpm38noj/4/
// Holds currently selected radio values, initialized to empty strings
// Use the radio button names so we can have a dynamic function set them
var skeleton = {
"skeleton": "",
"skeleton2": "",
"skeleton3": ""
};
// Defines each radio values sound
var sounds = {
"Top": "Tah, Dah",
"Nose": "Nah",
"Mouth": "Mah",
"Ribs": "Rah",
"Liver": "Lah",
"Joints": "Juh, Shuh, Chuh",
"Cap": "Cah, Kah, Gah",
"Fibula": "Fah, Vah",
"Ball": "Bah, Pah",
"Sea": "Sah, Zah"
};
// Attaches event listener to each radio button
var radios = document.querySelectorAll('[type="radio"]');
var radio, index = 0, length = radios.length;
for ( ; index < length; index++) {
radio = radios[index];
radio.addEventListener('change', onChangeRadio);
}
// Updates selected value of radio button
function onChangeRadio (event) {
var radio = event.target;
// Use name to set currently selected object's property to radio value(sound)
skeleton[radio.name] = sounds[radio.value];
// Call function to update textarea value
updateTextArea()
}
// Updates textarea value
function updateTextArea () {
// Get text area
var textarea = document.getElementById('mcsound');
// Initialize new string
var newValue = "";
// For each selected value only set it if it has a value (\n for new lines)
if (skeleton["skeleton"] != "") {
newValue += "1. " + skeleton["skeleton"];
}
if (skeleton["skeleton2"] != "") {
newValue += "\n2. " + skeleton["skeleton2"];
}
if (skeleton["skeleton3"] != "") {
newValue += "\n3. " + skeleton["skeleton3"];
}
// Set built string to value of textarea
textarea.value = newValue;
}
And since your previous question had to do with simplifying code if you make the first radio name skeleton1 instead of just skeleton we can simplify the textarea update function to this:
function updateTextArea () {
var textarea = document.getElementById('mcsound'), newValue = "", index = 1;
for ( ; index < 4; index++) {
if (skeleton["skeleton" + index] != "") {
index > 1 ? newValue += "\n" : ""
newValue += index + ". " + skeleton["skeleton" + index];
}
}
textarea.value = newValue;
}
Fiddle: https://jsfiddle.net/Lpm38noj/5/
EDIT
So here is an update to display the radio button index so you get 146 as you want. I added a new function to determine the index of the radio button:
Fiddle: https://jsfiddle.net/Lpm38noj/7/
function getIndex (context) {
var index = 1;
while (context = context.previousElementSibling) {
if (context.type == "radio") {
index++;
}
}
return index;
}
Create a lookup for the sounds then use them.
I used jQuery for the input processing and events but the main idea is the lookup and using it:
var sounds = [
{'match': 'Top',sound: 'Tah, Dah'},
{'match': 'Nose',sound: 'Nah'},
{'match': 'Mouth',sound: 'Mah'},
{'match': 'Ribs', sound: 'Rah'},
{'match': 'Liver',sound: 'Lah'},
{'match': 'Joints', sound: 'Juh, Shuh, Chuh'},
{'match': 'Cap', sound: 'Cah, Kah, Gah'},
{'match': 'Fibula',sound: 'Fah, Vah'},
{'match': 'Ball', sound: 'Bah, Pah'},
{'match': 'Sea', sound: 'Sah, Zah'}
];
var lookup = {};
// create reference to list above and use it everywhere
lookup.list = sounds;
for (var i = 0, len = lookup.list.length; i < len; i++) {
lookup[lookup.list[i].match] = lookup.list[i];
}
var radioGroups = '#mc-skeleton-c,#mc-skeleton-c2,#mc-skeleton-c3';
function processRadios() {
$('#themcsound').find('textarea').text("");
$(radioGroups).find('input:checked').each(function(index) {
var skel = $(this).val();
var mychoice = lookup[skel];
var prior = $('#themcsound').find('textarea').text();
prior = prior ? prior + "\n" : prior;
$('#themcsound').find('textarea').text(prior +(index+1)+". "+ mychoice.sound);
});
}
$(radioGroups).on('change', 'input[type=radio]', function() {
processRadios();
});
Here you can find a working example implementing module pattern: Click here to watch the JS Bin
This is a piece of the Javascript code to accomplish the requirement:
var skeleton = (function(skeletonModule, document){
skeletonModule.soundHandle = (function(){
var textArea = document.getElementById('mcsound');
// Here you are saving which sounds to make depending on which value
var sounds =
{'Top': 'Tah, Dah',
'Nose': 'Nah',
'Mouth': 'Mah',
'Ribs': 'Rah',
'Liver': 'Lah',
'Joints': 'Juh, Shuh, Chuh',
'Cap': 'Cah, Kah, Gah',
'Fibula': 'Fa, Vah',
'Ball': 'Bah, Pah',
'Sea': 'Sah, Zah'};
// This function attachs the check event to the radio buttons
// according to the markup
function attachCheckEvent(){
var radios = document.querySelectorAll('[type="radio"]');
var radio;
for (var i = 0; i < radios.length; i++) {
radio = radios[i];
radio.addEventListener('change', function(){
var that = this;
return function(){
// May be here you must check if radio button is checked
// anyway, this is working for me
textArea.value += sounds[that.value] + '\n';
}();
});
}
}
// Here we are attaching the events to desired inputs
function initEvents(){
attachCheckEvent();
}
// This is the interface published by the skeletonModule.soundHandle module
return {
init: initEvents
}
}());
return skeletonModule;
}(skeleton || {}, document)); // We pass to the IIFE the skeleton object. If is null we pass an empty object literal
skeleton.soundHandle.init();
Hope this helps.
I am having trouble with getElementById returning null. I have tried putting the id directly into it, which works fine.
This function is called by the submit button, it retrieves the names of uploaded files and writes them to hidden fields.
function onSubmitting() {
try {
var AU = $('#uploader').data('AU');
var file_list = AU.files;
var i = 0;
while (i < 10) {
var tempName = "image" + i.toString();
if (!(typeof file_list[i] === "undefined")) {
document.getElementById(tempName).value = "test";
}
i++;
}
}
catch (err) {
alert(err.message);
}
}
The relevant html is here:
<input type="hidden" name="image1" id="image1" />
<input type="hidden" name="image2" id="image2" />
<input type="hidden" name="image3" id="image3" />
<input type="hidden" name="image4" id="image4" />
<input type="hidden" name="image5" id="image5" />
<input type="hidden" name="image6" id="image6" />
<input type="hidden" name="image7" id="image7" />
<input type="hidden" name="image8" id="image8" />
<input type="hidden" name="image9" id="image9" />
<input type="hidden" name="image10" id="image10" />
Thanks for any help
The first time through the loop the ID will be image0 which is not present in your HTML.
Your loop runs from 0 to 9, but your elements are named from 1 to 10. Change
for (var i=0; i<10; i++)
to
for (var i=1; i<=10; i++)
or use (i+1) everywhere in the loop body
As Bergi and Justin said, you're starting your loop with i=0. I've updated it to use i=1, and i <= 10, and it works as expected :)
See: http://jsfiddle.net/sAKJd/
Dear all I am using jQuery Grid to display data for user administration. When I click on '+' sign, I get a Dialog box that pops up, wherein I can create a new user. I use a server-side call to populate cascading lists.
When I submit the request: On failure, or even on success, the 'Loading...' button never seems to disappear. I fear that I am leaving some resource open, or worse. As I am inheriting this application, and have no jQuery experience whatsoever, I was hoping you could help me. I apologize in advance if this is something really simple; but, I could not find anything on the Web that help me resolve this issue.
I am using Struts 2 along with jQuery; however, I don't think we use the jQuery Struts 2 plugin. Thanks in advance.
Here is the code:
<%# include file="/WEB-INF/jsp/fragments/directive.jsp" %>
<s:if test="hasActionErrors()">
<div class="error">
<s:actionerror/>
</div>
</s:if>
<s:form action="userAdminCreateSubmit" namespace="/ti/tmsportal/ga" onsubmit="return false;" >
<s:textfield key="user.username" required="true" />
<s:textfield key="user.firstName" required="true" />
<s:textfield key="user.middleInitial" />
<s:textfield key="user.lastName" required="true" />
<s:textfield key="user.email" required="true" />
<s:textfield key="user.phone" required="true" />
<s:select key="user.organizationId" list="organizations" listKey="value" listValue="label" required="true" onchange="changeWorkgroups(this.value);changeRoles(this.value);" />
<s:select key="user.workgroupId" list="workgroups" listKey="value" listValue="label" onchange="changeLocations(this.value);" />
<s:select key="user.locationId" list="locations" listKey="value" listValue="label" />
<s:select key="user.portalRole" list="roles" listKey="value" listValue="label" emptyOption="true" required="true" onchange="changeLevels(this.value);" />
<s:select key="user.levelCode" list="levels" listKey="value" listValue="label" emptyOption="true" required="true" />
</s:form>
<s:url action="lookup" var="workgroupLookupUrl" >
<s:param name="type">workgroupsInOrganization</s:param>
</s:url>
<s:url action="lookup" var="locationLookupUrl" >
<s:param name="type">locationsInWorkgroup</s:param>
</s:url>
<s:url action="lookup" var="roleLookupUrl" >
<s:param name="type">rolesForOrg</s:param>
</s:url>
<s:url action="lookup" var="levelLookupUrl" >
<s:param name="type">levelsForRole</s:param>
</s:url>
<script>
function changeWorkgroups(key)
{
$('#userAdminCreateSubmit [name="user.workgroupId"]').load('<s:property value="#workgroupLookupUrl" />&key=' + key + ' option',
function(responseText, textStatus, XMLHttpRequest) {
changeLocations();
setVisibility();
}
);
}
function changeLocations(key)
{
$('#userAdminCreateSubmit [name="user.locationId"]').load('<s:property value="#locationLookupUrl" />&key=' + key + ' option',
function(responseText, textStatus, XMLHttpRequest) {
setVisibility();
}
);
}
function changeRoles(key)
{
$('#userAdminCreateSubmit [name="user.portalRole"]').load('<s:property value="#roleLookupUrl" />&key=' + key + ' option',
function(responseText, textStatus, XMLHttpRequest) {
changeLevels($('#userAdminCreateSubmit [name="user.portalRole"]').value());
});
}
function changeLevels(key)
{
$('#userAdminCreateSubmit [name="user.levelCode"]').load('<s:property value="#levelLookupUrl" />&key=' + key + ' option');
}
function setVisibility()
{
$('#userAdminCreateSubmit [name="user.workgroupId"]').parents('tr').toggle(
$('#userAdminCreateSubmit [name="user.workgroupId"] option[value!=""]').size() > 0
);
$('#userAdminCreateSubmit [name="user.locationId"]').parents('tr').toggle(
$('#userAdminCreateSubmit [name="user.locationId"] option[value!=""]').size() > 0
);
}
$(function()
{
$('.button').button();
setVisibility();
addFieldHint('user.receiveNotifications', '<s:text name="content.help.receiveNotifications" />');
addFieldHint('user.username', '<s:text name="content.help.username" />');
});
function submitUserAdminCreate()
{
$.post('<s:url action="userAdminCreateSubmit" namespace="/ti/tmsportal/ga" />', $('#userAdminCreateSubmit').serialize(),
function(data) {
$('#userAdminDialog').empty().append(data);
}
);
}
</script>
To fix your JS error, just change
$('#userAdminCreateSubmit [name="user.portalRole"]').value()
to
$('#userAdminCreateSubmit [name="user.portalRole"]').val()
I have combobox in grid itemtemplate how can i set the value in javascript
<telerik:GridTemplateColumn AutoPostBackOnFilter="true"
CurrentFilterFunction="Contains" DataField="FAULT" FilterControlWidth="100%"
HeaderStyle-Width="80px" HeaderText="Fault" ReadOnly="true" ShowFilterIcon="false"
SortExpression="FAULT" UniqueName="FAULT">
<ItemTemplate>
<telerik:RadComboBox ID="cmbFault" runat="server" AllowCustomText="false" HighlightTemplatedItems="true"
Skin="Outlook" Visible="true" Width="70px">
<Items>
<telerik:RadComboBoxItem runat="server" Text="NF" Value="N" />
<telerik:RadComboBoxItem runat="server" Text="VF" Value="V" />
<telerik:RadComboBoxItem runat="server" Text="CF" Value="C" />
<telerik:RadComboBoxItem runat="server" Text="DF" Value="D" />
</Items>
</telerik:RadComboBox>
</ItemTemplate>
<HeaderStyle Width="80px" />
</telerik:GridTemplateColumn>
My java script
function vishali(){
if (difference > 5) {alert("enter into if");
document.getElementById('<%=cmbFault.ClientID %>').value = 'C';
}
else {
alert("enter into else");
document.getElementById('<%=cmbFault.ClientID %>').value = 'S';
}
}
but it is not working it is saying that cmbFault is not found in the context error please help me on this
You can do below javascript code in order to set from javascript.
function setCombo() {
var combo = $find("<%= cmbFault.ClientID %>");
combo.set_text("S");
}
And also you can have a look http://www.telerik.com/help/aspnet-ajax/combobox-client-side-radcombobox.html
To get the control inside GridTemplateColumn do the following.
JS:
function setCombo() {
var grid = $find("<%=RadGrid1.ClientID%>");
var tableView = grid.get_masterTableView();
var items = tableView.get_dataItems();
for(var i = 0; i<items.length; i++){
var rowValues = items[i];
var Textvalue=rowValues.findElement("cmbFault");//access Combobox
}
}
1. <p:column align="center">
<f:facet name="header">
<h:outputLabel value="Select" />
</f:facet>
<h:selectBooleanCheckbox id="select">
<p:ajax event="click" update="CoverageList,select" />
</h:selectBooleanCheckbox>
</p:column>
2.<p:column align="center">
<f:facet name="header">
<h:outputLabel value="#{label.coverage}" />
</f:facet>
<h:selectManyCheckbox id="CoverageList" style="width: 120px"
value="#{policy.selectedCoverageCodes}">
<f:selectItems value="#{policy.coverageCodes}" />
</h:selectManyCheckbox>
</p:column>
Need to select multiple checkboxs on clicking of single checkbox....
This is a javascript version
var elements = document.getElementsByTagName('input');
for(var i = 0; i< elements.length; i++) {
if (elements[i].type == "checkbox") {
elements[i].checked = !elements[i].checked;
}
}
if you have jQuery use this
$("#CoverageList").click(function() {
var checked_status = this.checked;
$('#actions').find("input").each(function() {
$(this).prop("checked", checked_status);
});
});