I'm having a problem with Radio buttons in a repeating section and macro buttons. Some Background: So, I'm doing some fun (for me) stuff with the Savage Worlds Character Sheet for the next round of enhancements. Most Savage Worlds Character sheets that PEG provides include dice icons for the Attributes and Skills; I wanted to incorporate that a bit, but given that the limitations of <select> and <radio> buttons, for CSS styling, I wanted to give people an option for what to use. So, I have the sheet working to show the dice icons or the normal drop down menu if that's what they prefer. Everything works beautifully for the all the static stuff. And, thanks to Brian, I have the visuals working for repeating sections except... The Problem: If I have the dice icons showing (i.e. using the radio buttons), it will only roll a d4, regardless of what I have selected, UNLESS I've changed the die type using the normal drop down menus, in which case the buttons will only roll that value regardless of what I have selected using the radio buttons. I'm sure it has something to do with the radio and selection options both being there, as when I remove one set everything works... Here's the code: <input type="checkbox" class="sheet-NewDieType" name="attr_DieTypeConfig" style="width: 15px; display: none;" />
<fieldset class="repeating_skills">
<div class='sheet-row'>
<div class='sheet-col' style='width:310px;'>
<div class="sheet-dtypedropdown">
<div class="sheet-dietype">
<input type="radio" name="attr_SkillNameRank" value="4" checked="true" style="width:10px;" /> <span>d4</span>
<input type="radio" name="attr_SkillNameRank" value="6" style="width:10px;"/> <span>d6</span>
<input type="radio" name="attr_SkillNameRank" value="8" style="width:10px;"/> <span>d8</span>
<input type="radio" name="attr_SkillNameRank" value="10" style="width:10px;"/> <span>d10</span>
<input type="radio" name="attr_SkillNameRank" value="12" style="width:10px;"/> <span>d12</span>
<div class="sheet-d4">d</div>
<div class="sheet-d6">f</div>
<div class="sheet-d8">h</div>
<div class="sheet-d10">k</div>
<div class="sheet-d12">l</div>
</div>
</div>
<input type="checkbox" class="sheet-NewDieType" name="attr_DieTypeConfig" style="width: 15px; display: none;" />
<div class="sheet-dtypeOrig">
<select name="attr_SkillNameRank" class="dtype" value="4" style='width:55px;'>
<option value="4">d4</option>
<option value="6">d6</option>
<option value="8">d8</option>
<option value="10">d10</option>
<option value="12">d12</option>
</select>
</div>+<input type="number" name="attr_SkillNameMod" class="sheet-short" value="0" style='width:50px;'/>
<input type="text" name="attr_SkillName" value="Skill Name" style='width:152px;'/>
</div>
<div class='sheet-col' style='width:198px;'>
<span style='text-align:bottom; font-weight:bold;'>d</span><input type="number" name="attr_LinkedSkillNameAttScore" class="sheet-short" value="@{LinkedSkillNameAtt}" disabled="true" />
<label style='width:130px;'>
<select name="attr_LinkedSkillNameAtt" class="atype">
<option value="@{agility}">Agility</option>
<option value="@{smarts}">Smarts</option>
<option value="@{spirit}">Spirit</option>
<option value="@{strength}">Strength</option>
<option value="@{vigor}">Vigor</option>
</select>
</label>
</div>
<div class='sheet-col' style='width:193px; text-align:center;'>
<input type="checkbox" name="attr_SkillEncumbrance" value="1" style="width:20px;" />
</div>
<div class='sheet-col' style='width:124px;'>
<button type='roll' name='roll_SkillName' value='/em @{character_name} attempts to do something with @{SkillName} and rolls: [[{1d@{SkillNameRank}![@{SkillName}], 1d@{wilddie}![Wild Die]}kh1 + @{SkillNameMod}[Skill Modifiers] + @{ttmod}[Situational Modifiers] +(@{SkillEncumbrance}*@{encumbrance})[Encumbrance Penalty] - @{wounds}[Wounds] - @{fatigue}[Fatigue]]]!'></button><button type='roll' class="sheet-GM-button" name='roll_gmSkillName' value='/w gm @{character_name} attempts to do something with @{SkillName} and rolls: [[{1d@{SkillNameRank}![@{SkillName}], 1d@{wilddie}![Wild Die]}kh1 + @{SkillNameMod}[Skill Modifiers] + @{ttmod}[Situational Modifiers] +(@{SkillEncumbrance}*@{encumbrance})[Encumbrance Penalty] - @{wounds}[Wounds] - @{fatigue}[Fatigue]]]!'></button>
<input type='hidden' name='attr_rollSkill' value='/em @{character_name} attempts to do something with @{SkillName} and rolls: [[{1d@{SkillNameRank}![@{SkillName}], 1d@{wilddie}![Wild Die]}kh1 + @{SkillNameMod}[Skill Modifiers] + @{ttmod}[Situational Modifiers] +(@{SkillEncumbrance}*@{encumbrance})[Encumbrance Penalty] - @{wounds}[Wounds] - @{fatigue}[Fatigue]]]!' />
</div>
</div>
</fieldset>
And, in case it's important, here's the CSS: .sheet-dtypeOrig {
width: 50px;
display:inline;
}
.sheet-NewDieType:checked + *.sheet-dtypeOrig,
.sheet-NewDieType:checked ~ [data-groupname=repeating_skills] > .repitem .sheet-dtypeOrig {
display: none;
}
.sheet-dtypedropdown {
/* fixed widths work best;*/
width: 50px;
display: none;
}
.sheet-dietype {
display:inline-block;
}
.sheet-dietype {
vertical-align: middle;
width: 50px;
height: 35px;
}
.sheet-dietype input,
.sheet-dietype input + span {
display:none;
z-index: 1;
}
.sheet-dietype:hover {
background: silver;
opacity: .9;
position:absolute;
width: 50px;
height: auto;
z-index: 1;
padding: 13px;
}
.sheet-dietype:hover > .sheet-d4 {
display: none;
}
.sheet-dietype:hover input ,
.sheet-dietype:hover input + span {
display:inline;
}
.sheet-dietype:hover input + span {
margin-right:10px;
}
.sheet-dietype:hover span {
display: inline-block;
}
.sheet-d4 {
/*background-position: -411px -1px;*/
width: 50px;
height: 35px;
/*background-image: url("<a href="https://i.imgur.com/zkgyBOi.png");*/" rel="nofollow">https://i.imgur.com/zkgyBOi.png");*/</a>
font-family: "dicefontd4";
font-size: 50px;
color: red;
line-height:25px;
text-align: right;
display: none;
}
.sheet-d6 {
/*background-position: -411px -1px;*/
width: 50px;
height: 35px;
/*background-image: url("<a href="https://i.imgur.com/zkgyBOi.png");*/" rel="nofollow">https://i.imgur.com/zkgyBOi.png");*/</a>
font-family: "dicefontd6";
font-size: 40px;
color: black;
line-height:35px;
text-align: right;
display: inline-block;
display: none;
}
.sheet-d8 {
/*background-position: -703px -1px;*/
width: 50px;
height: 35px;
/*background-image: url("<a href="https://i.imgur.com/zkgyBOi.png");*/" rel="nofollow">https://i.imgur.com/zkgyBOi.png");*/</a>
font-family: "dicefontd8";
font-size: 40px;
color: black;
line-height:35px;
text-align: right;
display: inline-block;
display: none;
}
.sheet-d10 {
/*background-position: -411px -1px;*/
width: 50px;
height: 35px;
/*background-image: url("<a href="https://i.imgur.com/zkgyBOi.png");*/" rel="nofollow">https://i.imgur.com/zkgyBOi.png");*/</a>
font-family: "dicefontd10";
font-size: 45px;
color: blue;
line-height:35px;
text-align: right;
display: inline-block;
display: none;
}
.sheet-d12 {
/*background-position: -411px -1px;*/
width: 50px;
height: 35px;
/*background-image: url("<a href="https://i.imgur.com/zkgyBOi.png");*/" rel="nofollow">https://i.imgur.com/zkgyBOi.png");*/</a>
font-family: "dicefontd12";
font-size: 40px;
color: green;
line-height:35px;
text-align: right;
display: inline-block;
display: none;
}
.sheet-dietype:not(:hover) input[value="4"]:checked ~ .sheet-d4 {
display: block;
}
.sheet-dietype:not(:hover) input[value="6"]:checked ~ .sheet-d6 {
display: block;
}
.sheet-dietype:not(:hover) input[value="8"]:checked ~ .sheet-d8 {
display: block;
}
.sheet-dietype:not(:hover) input[value="10"]:checked ~ .sheet-d10 {
display: block;
}
.sheet-dietype:not(:hover) input[value="12"]:checked ~ .sheet-d12 {
display: block;
}
.sheet-NewDieType:checked + *.sheet-dtypedropdown,
.sheet-NewDieType:checked ~ [data-groupname=repeating_skills] > .repitem .sheet-dtypedropdown {
display:inline-block;
}
My Question(s) : Why will they update the same field if both are present? Only one type of menu is visible at any one time. And if I comment out one menu type and reload the page, they both access and update the same field properly (i.e. if the value is a d6, both types of menus will see that d6 and be able to change it if the other type is commented out), so why can't they both update as it's coded above? Is it possible to see somehow what all the different repeating section attributes are to see if the radio buttons are conflicting with one another? I don't think this is the case, since commenting out one type of menu allows either one to see, interact and update the value in the repeating_skills_0_SkillNameRank Attribute. Any other thoughts on how I might get this to work, or do I just need to abandon this effort for repeating sections? Thanks all.
