I have a node that has javascript and a form for a calculator pasted onto the page that allows users to calculate a score based on the form fields they select.
This only works when I use the bypass cookie feature. I've tried adding ?advagg=0 to the url but that doesn't seem to work at all, the page just reloads.
Is there another way I can bypass only the one URL so that my calculator works?
This is what we pasted to the page:
<!-- APS Calculator Script start -->
<script>
function DetectEnterPressed(e) {
var characterCode;
if (e && e.which) {
e = e;
characterCode = e.which;
}
else {
e = event;
characterCode = e.keyCode;
}
if (characterCode == 13) return true;
else return false;
}
function validateform(thisform) {
with (thisform) {
var e = document.getElementById("FirstLanguage");
var strFirstLanguage = e.options[e.selectedIndex].value;
if (document.getElementById("FirstLanguage").options[document.getElementById("FirstLanguage").selectedIndex].value == "" || document.getElementById("FirstLanguageAPS").options[document.getElementById("FirstLanguageAPS").selectedIndex].value == "") {
alert("Please select your First language and mark");
document.getElementById("FirstLanguage").focus();
return false;
}
if (document.getElementById("SecondLanguage").options[document.getElementById("SecondLanguage").selectedIndex].value == "" || document.getElementById("SecondLanguageAPS").options[document.getElementById("SecondLanguageAPS").selectedIndex].value == "") {
alert("Please select your Second language and mark");
document.getElementById("SecondLanguage").focus();
return false;
}
if (document.getElementById("Maths").options[document.getElementById("Maths").selectedIndex].value == "" || document.getElementById("MathsAPS").options[document.getElementById("MathsAPS").selectedIndex].value == "") {
alert("Please select your Math type and mark");
document.getElementById("Maths").focus(); ;
return false;
}
if (document.getElementById("LO").options[document.getElementById("LO").selectedIndex].value == "" || document.getElementById("LOAPS").options[document.getElementById("LOAPS").selectedIndex].value == "") {
alert("Please select your LO mark");
document.getElementById("LOAPS").focus();
return false;
}
if (document.getElementById("Subject5").options[document.getElementById("Subject5").selectedIndex].value == "" || document.getElementById("Subject5APS").options[document.getElementById("Subject5APS").selectedIndex].value == "") {
alert("Please select a fifth subject and mark");
document.getElementById("Subject5").focus();
return false;
}
if (document.getElementById("Subject6").options[document.getElementById("Subject6").selectedIndex].value == "" || document.getElementById("Subject6APS").options[document.getElementById("Subject6APS").selectedIndex].value == "") {
alert("Please select a sixth subject and mark");
document.getElementById("Subject6").focus();
return false;
}
if (document.getElementById("Subject7").options[document.getElementById("Subject7").selectedIndex].value == "" || document.getElementById("Subject7APS").options[document.getElementById("Subject7APS").selectedIndex].value == "") {
alert("Please select a seventh subject and mark");
document.getElementById("Subject7").focus();
return false;
}
var APSscore;
var FirstLang = parseInt(document.getElementById("FirstLanguageAPS").options[document.getElementById("FirstLanguageAPS").selectedIndex].value)
var SecondLang = parseInt(document.getElementById("SecondLanguageAPS").options[document.getElementById("SecondLanguageAPS").selectedIndex].value)
var Maths = parseInt(document.getElementById("MathsAPS").options[document.getElementById("MathsAPS").selectedIndex].value)
var LO = parseInt(document.getElementById("LOAPS").options[document.getElementById("LOAPS").selectedIndex].value)
var Subject5 = parseInt(document.getElementById("Subject5APS").options[document.getElementById("Subject5APS").selectedIndex].value)
var Subject6 = parseInt(document.getElementById("Subject6APS").options[document.getElementById("Subject6APS").selectedIndex].value)
var Subject7 = parseInt(document.getElementById("Subject7APS").options[document.getElementById("Subject7APS").selectedIndex].value)
APSscore = FirstLang + SecondLang + Maths + LO + Subject5 + Subject6 + Subject7;
document.getElementById("showScore").innerHTML = "<p class='APSscore'>Your APS score is <strong>" + APSscore + "</strong></p><br />";
return false;
}
}
</script>
<!-- APS Calculator Script end -->
<form action="#" method="post" name="APSCalculator" onsubmit="return (validateform(this))">
<div class="HideTableBorders">
<table width="100%" class="table table-bordered">
<tbody>
<tr>
<td style="border: 1px solid #999;padding: 3px 5px;background-color: #999;color: #fff;border-right: 1px solid #bbb;">
</td>
<td style="border: 1px solid #999;padding: 3px 5px;background-color: #999;color: #fff;border-right: 1px solid #bbb;">
<strong>Subjects:</strong>
</td>
<td style="border: 1px solid #999;padding: 3px 5px;background-color: #999;color: #fff;border-right: 1px solid #bbb;">
<strong>Marks:</strong>
</td>
</tr>
<tr>
<td style="background-color: #e7ecf9">
<strong>First Language</strong></td>
<td style="background-color: #e7ecf9">
<select class="form-control" id="FirstLanguage" name="FirstLanguage">
<option selected="selected" value="">Select a subject.</option>
<option value="Afrikaans Home Language">Afrikaans Home Language</option>
<option value="English Home Language">English Home Language</option>
<option value="IsiNdebele Home Language">IsiNdebele Home Language</option>
<option value="IsiXhosa Home Language">IsiXhosa Home Language</option>
<option value="IsiZulu Home Language">IsiZulu Home Language</option>
<option value="Sepedi Home Language">Sepedi Home Language</option>
<option value="Sesotho Home Language">Sesotho Home Language</option>
<option value="Setswana Home Language">Setswana Home Language</option>
<option value="SiSwati Home Language">SiSwati Home Language</option>
<option value="Tshivenda Home Language">Tshivenda Home Language</option>
<option value="Xitsonga Home Language">Xitsonga Home Language</option>
</select>
</td>
<td style="background-color: #e7ecf9">
<select class="form-control" id="FirstLanguageAPS" name="FirstLanguageAPS">
<option selected="selected" value="">Select your mark.</option>
<option value="8">90% - 100% (Level 8)</option>
<option value="7">80% - 89% (Level 7)</option>
<option value="6">70% - 79% (Level 6)</option>
<option value="5">60% - 69% (Level 5)</option>
<option value="4">50% - 59% (Level 4)</option>
<option value="3">40% - 49% (Level 3)</option>
<option value="2">30% - 39% (Level 2)</option>
<option value="0">0% - 29% (Level 1)</option>
</select>
</td>
</tr>
<tr>
<td>
<strong>Second Language</strong></td>
<td>
<select class="form-control" id="SecondLanguage" name="SecondLanguage">
<option selected="selected" value="">Select a subject.</option>
<option value="Afrikaans First Additional Language">Afrikaans First Additional Language</option>
<option value="English First Additional Language">English First Additional Language</option>
<option value="IsiNdebele First Additional Language">IsiNdebele First Additional Language</option>
<option value="IsiXhosa First Additional Language">IsiXhosa First Additional Language</option>
<option value="IsiZulu First Additional Language">IsiZulu First Additional Language</option>
<option value="Sepedi First Additional Language">Sepedi First Additional Language</option>
<option value="Sesotho First Additional Language">Sesotho First Additional Language</option>
<option value="Setswana First Additional Language">Setswana First Additional Language</option>
<option value="SiSwati First Additional Language">SiSwati First Additional Language</option>
<option value="Tshivenda First Additional Language">Tshivenda First Additional Language</option>
<option value="Xitsonga First Additional Language">Xitsonga First Additional Language</option>
</select>
</td>
<td>
<select class="form-control" id="SecondLanguageAPS" name="SecondLanguageAPS">
<option selected="selected" value="">Select your mark.</option>
<option value="8">90% - 100% (Level 8)</option>
<option value="7">80% - 89% (Level 7)</option>
<option value="6">70% - 79% (Level 6)</option>
<option value="5">60% - 69% (Level 5)</option>
<option value="4">50% - 59% (Level 4)</option>
<option value="3">40% - 49% (Level 3)</option>
<option value="2">30% - 39% (Level 2)</option>
<option value="0">0% - 29% (Level 1)</option>
</select>
</td>
</tr>
<tr>
<td style="background-color: #e7ecf9">
<strong>Maths</strong></td>
<td style="background-color: #e7ecf9">
<select class="form-control" id="Maths" name="Maths">
<option selected="selected" value="">Select a subject.</option>
<option value="Mathematical Literacy">Mathematical Literacy</option>
<option value="Mathematics">Mathematics</option>
</select>
</td>
<td style="background-color: #e7ecf9">
<select class="form-control" id="MathsAPS" name="MathsAPS">
<option selected="selected" value="">Select your mark.</option><option value="8">90% - 100% (Level 8)</option><option value="7">80% - 89% (Level 7)</option><option value="6">70% - 79% (Level 6)</option><option value="5">60% - 69% (Level 5)</option><option value="4">50% - 59% (Level 4)</option><option value="3">40% - 49% (Level 3)</option><option value="2">30% - 39% (Level 2)</option><option value="0">0% - 29% (Level 1)</option></select></td>
</tr>
<tr>
<td>
<strong>Life Orientation (LO)</strong></td>
<td>
<select class="form-control" id="LO" name="LO"><option selected="selected" value="Life Orientation">Life Orientation</option></select></td>
<td>
<select class="form-control" id="LOAPS" name="LOAPS"><option selected="selected" value="">Select your mark.</option><option value="8">90% - 100% (Level 8)</option><option value="7">80% - 89% (Level 7)</option><option value="6">70% - 79% (Level 6)</option><option value="5">60% - 69% (Level 5)</option><option value="4">50% - 59% (Level 4)</option><option value="3">40% - 49% (Level 3)</option><option value="2">30% - 39% (Level 2)</option><option value="0">0% - 29% (Level 1)</option></select></td>
</tr>
<tr>
<td style="background-color: #e7ecf9">
<strong>Subject 5</strong></td>
<td style="background-color: #e7ecf9">
<select class="form-control" id="Subject5" name="Subject5"><option selected="selected" value="">Select a subject.</option><option value="Accounting">Accounting</option><option value="Afrikaans Second Additional Language">Afrikaans Second Additional Language</option><option value="Agricultural Management Practices">Agricultural Management Practices</option><option value="Agricultural Science">Agricultural Science</option><option value="Agricultural Technology">Agricultural Technology</option><option value="Arabic Second Additional Language">Arabic Second Additional Language</option><option value="Business Studies">Business Studies</option><option value="Civil Technology">Civil Technology</option><option value="Computer Applications Technology">Computer Applications Technology</option><option value="Consumer Studies">Consumer Studies</option><option value="Dance Studies">Dance Studies</option><option value="Design">Design</option><option value="Dramatic Arts">Dramatic Arts</option><option value="Economics">Economics</option><option value="Electrical Technology">Electrical Technology</option><option value="Engineering Graphics and Design">Engineering Graphics and Design</option><option value="English Second Additional Language">English Second Additional Language</option><option value="French Second Additional Language">French Second Additional Language</option><option value="Geography">Geography</option><option value="German Home Language">German Home Language</option><option value="German Second Additional Language">German Second Additional Language</option><option value="Gujarati First Additional Language">Gujarati First Additional Language</option><option value="Gujarati Home Language">Gujarati Home Language</option><option value="Gujarati Second Additional Language">Gujarati Second Additional Language</option><option value="Hebrew Second Additional Language">Hebrew Second Additional Language</option><option value="Hindi First Additional Language">Hindi First Additional Language</option><option value="Hindi Home Language">Hindi Home Language</option><option value="Hindi Second Additional Language">Hindi Second Additional Language</option><option value="History">History</option><option value="Hospitality Studies">Hospitality Studies</option><option value="Information Technology">Information Technology</option><option value="IsiNdebele Second Additional Language">IsiNdebele Second Additional Language</option><option value="IsiXhosa Second Additional Language">IsiXhosa Second Additional Language</option><option value="IsiZulu Second Additional Language">IsiZulu Second Additional Language</option><option value="Italian Second Additional Language">Italian Second Additional Language</option><option value="Latin Second Additional Language">Latin Second Additional Language</option><option value="Life Sciences">Life Sciences</option><option value="Mechanical Technology">Mechanical Technology</option><option value="Music">Music</option><option value="Physical Sciences">Physical Sciences</option><option value="Portuguese First Additional Language">Portuguese First Additional Language</option><option value="Portuguese Home Language">Portuguese Home Language</option><option value="Portuguese Second Additional Language">Portuguese Second Additional Language</option><option value="Religion Studies">Religion Studies</option><option value="Sepedi Second Additional Language">Sepedi Second Additional Language</option><option value="Sesotho Second Additional Language">Sesotho Second Additional Language</option><option value="Setswana Second Additional Language">Setswana Second Additional Language</option><option value="SiSwati Second Additional Language">SiSwati Second Additional Language</option><option value="Spanish Second Additional Language">Spanish Second Additional Language</option><option value="Tamil First Additional Language">Tamil First Additional Language</option><option value="Tamil Home Language">Tamil Home Language</option><option value="Tamil Second Additional Language">Tamil Second Additional Language</option><option value="Telegu First Additional Language">Telegu First Additional Language</option><option value="Telegu Home Language">Telegu Home Language</option><option value="Telegu Second Additional Language">Telegu Second Additional Language</option><option value="Tourism">Tourism</option><option value="Tshivenda Second Additional Language">Tshivenda Second Additional Language</option><option value="Urdu First Additional Language">Urdu First Additional Language</option><option value="Urdu Home Language">Urdu Home Language</option><option value="Urdu Second Additional Language">Urdu Second Additional Language</option><option value="Visual Arts">Visual Arts</option><option value="Xitsonga Second Additional Language">Xitsonga Second Additional Language</option></select></td>
<td style="background-color: #e7ecf9">
<select class="form-control" id="Subject5APS" name="Subject5APS"><option selected="selected" value="">Select your mark.</option><option value="8">90% - 100% (Level 8)</option><option value="7">80% - 89% (Level 7)</option><option value="6">70% - 79% (Level 6)</option><option value="5">60% - 69% (Level 5)</option><option value="4">50% - 59% (Level 4)</option><option value="3">40% - 49% (Level 3)</option><option value="2">30% - 39% (Level 2)</option><option value="0">0% - 29% (Level 1)</option></select></td>
</tr>
<tr>
<td>
<strong>Subject 6</strong></td>
<td>
<select class="form-control" id="Subject6" name="Subject6"><option selected="selected" value="">Select a subject.</option><option value="Accounting">Accounting</option><option value="Afrikaans Second Additional Language">Afrikaans Second Additional Language</option><option value="Agricultural Management Practices">Agricultural Management Practices</option><option value="Agricultural Science">Agricultural Science</option><option value="Agricultural Technology">Agricultural Technology</option><option value="Arabic Second Additional Language">Arabic Second Additional Language</option><option value="Business Studies">Business Studies</option><option value="Civil Technology">Civil Technology</option><option value="Computer Applications Technology">Computer Applications Technology</option><option value="Consumer Studies">Consumer Studies</option><option value="Dance Studies">Dance Studies</option><option value="Design">Design</option><option value="Dramatic Arts">Dramatic Arts</option><option value="Economics">Economics</option><option value="Electrical Technology">Electrical Technology</option><option value="Engineering Graphics and Design">Engineering Graphics and Design</option><option value="English Second Additional Language">English Second Additional Language</option><option value="French Second Additional Language">French Second Additional Language</option><option value="Geography">Geography</option><option value="German Home Language">German Home Language</option><option value="German Second Additional Language">German Second Additional Language</option><option value="Gujarati First Additional Language">Gujarati First Additional Language</option><option value="Gujarati Home Language">Gujarati Home Language</option><option value="Gujarati Second Additional Language">Gujarati Second Additional Language</option><option value="Hebrew Second Additional Language">Hebrew Second Additional Language</option><option value="Hindi First Additional Language">Hindi First Additional Language</option><option value="Hindi Home Language">Hindi Home Language</option><option value="Hindi Second Additional Language">Hindi Second Additional Language</option><option value="History">History</option><option value="Hospitality Studies">Hospitality Studies</option><option value="Information Technology">Information Technology</option><option value="IsiNdebele Second Additional Language">IsiNdebele Second Additional Language</option><option value="IsiXhosa Second Additional Language">IsiXhosa Second Additional Language</option><option value="IsiZulu Second Additional Language">IsiZulu Second Additional Language</option><option value="Italian Second Additional Language">Italian Second Additional Language</option><option value="Latin Second Additional Language">Latin Second Additional Language</option><option value="Life Sciences">Life Sciences</option><option value="Mechanical Technology">Mechanical Technology</option><option value="Music">Music</option><option value="Physical Sciences">Physical Sciences</option><option value="Portuguese First Additional Language">Portuguese First Additional Language</option><option value="Portuguese Home Language">Portuguese Home Language</option><option value="Portuguese Second Additional Language">Portuguese Second Additional Language</option><option value="Religion Studies">Religion Studies</option><option value="Sepedi Second Additional Language">Sepedi Second Additional Language</option><option value="Sesotho Second Additional Language">Sesotho Second Additional Language</option><option value="Setswana Second Additional Language">Setswana Second Additional Language</option><option value="SiSwati Second Additional Language">SiSwati Second Additional Language</option><option value="Spanish Second Additional Language">Spanish Second Additional Language</option><option value="Tamil First Additional Language">Tamil First Additional Language</option><option value="Tamil Home Language">Tamil Home Language</option><option value="Tamil Second Additional Language">Tamil Second Additional Language</option><option value="Telegu First Additional Language">Telegu First Additional Language</option><option value="Telegu Home Language">Telegu Home Language</option><option value="Telegu Second Additional Language">Telegu Second Additional Language</option><option value="Tourism">Tourism</option><option value="Tshivenda Second Additional Language">Tshivenda Second Additional Language</option><option value="Urdu First Additional Language">Urdu First Additional Language</option><option value="Urdu Home Language">Urdu Home Language</option><option value="Urdu Second Additional Language">Urdu Second Additional Language</option><option value="Visual Arts">Visual Arts</option><option value="Xitsonga Second Additional Language">Xitsonga Second Additional Language</option></select></td>
<td>
<select class="form-control" id="Subject6APS" name="Subject6APS"><option selected="selected" value="">Select your mark.</option><option value="8">90% - 100% (Level 8)</option><option value="7">80% - 89% (Level 7)</option><option value="6">70% - 79% (Level 6)</option><option value="5">60% - 69% (Level 5)</option><option value="4">50% - 59% (Level 4)</option><option value="3">40% - 49% (Level 3)</option><option value="2">30% - 39% (Level 2)</option><option value="0">0% - 29% (Level 1)</option></select></td>
</tr>
<tr>
<td style="background-color: #e7ecf9">
<strong>Subject 7</strong></td>
<td style="background-color: #e7ecf9">
<select class="form-control" id="Subject7" name="Subject7"><option selected="selected" value="">Select a subject.</option><option value="Accounting">Accounting</option><option value="Afrikaans Second Additional Language">Afrikaans Second Additional Language</option><option value="Agricultural Management Practices">Agricultural Management Practices</option><option value="Agricultural Science">Agricultural Science</option><option value="Agricultural Technology">Agricultural Technology</option><option value="Arabic Second Additional Language">Arabic Second Additional Language</option><option value="Business Studies">Business Studies</option><option value="Civil Technology">Civil Technology</option><option value="Computer Applications Technology">Computer Applications Technology</option><option value="Consumer Studies">Consumer Studies</option><option value="Dance Studies">Dance Studies</option><option value="Design">Design</option><option value="Dramatic Arts">Dramatic Arts</option><option value="Economics">Economics</option><option value="Electrical Technology">Electrical Technology</option><option value="Engineering Graphics and Design">Engineering Graphics and Design</option><option value="English Second Additional Language">English Second Additional Language</option><option value="French Second Additional Language">French Second Additional Language</option><option value="Geography">Geography</option><option value="German Home Language">German Home Language</option><option value="German Second Additional Language">German Second Additional Language</option><option value="Gujarati First Additional Language">Gujarati First Additional Language</option><option value="Gujarati Home Language">Gujarati Home Language</option><option value="Gujarati Second Additional Language">Gujarati Second Additional Language</option><option value="Hebrew Second Additional Language">Hebrew Second Additional Language</option><option value="Hindi First Additional Language">Hindi First Additional Language</option><option value="Hindi Home Language">Hindi Home Language</option><option value="Hindi Second Additional Language">Hindi Second Additional Language</option><option value="History">History</option><option value="Hospitality Studies">Hospitality Studies</option><option value="Information Technology">Information Technology</option><option value="IsiNdebele Second Additional Language">IsiNdebele Second Additional Language</option><option value="IsiXhosa Second Additional Language">IsiXhosa Second Additional Language</option><option value="IsiZulu Second Additional Language">IsiZulu Second Additional Language</option><option value="Italian Second Additional Language">Italian Second Additional Language</option><option value="Latin Second Additional Language">Latin Second Additional Language</option><option value="Life Sciences">Life Sciences</option><option value="Mechanical Technology">Mechanical Technology</option><option value="Music">Music</option><option value="Physical Sciences">Physical Sciences</option><option value="Portuguese First Additional Language">Portuguese First Additional Language</option><option value="Portuguese Home Language">Portuguese Home Language</option><option value="Portuguese Second Additional Language">Portuguese Second Additional Language</option><option value="Religion Studies">Religion Studies</option><option value="Sepedi Second Additional Language">Sepedi Second Additional Language</option><option value="Sesotho Second Additional Language">Sesotho Second Additional Language</option><option value="Setswana Second Additional Language">Setswana Second Additional Language</option><option value="SiSwati Second Additional Language">SiSwati Second Additional Language</option><option value="Spanish Second Additional Language">Spanish Second Additional Language</option><option value="Tamil First Additional Language">Tamil First Additional Language</option><option value="Tamil Home Language">Tamil Home Language</option><option value="Tamil Second Additional Language">Tamil Second Additional Language</option><option value="Telegu First Additional Language">Telegu First Additional Language</option><option value="Telegu Home Language">Telegu Home Language</option><option value="Telegu Second Additional Language">Telegu Second Additional Language</option><option value="Tourism">Tourism</option><option value="Tshivenda Second Additional Language">Tshivenda Second Additional Language</option><option value="Urdu First Additional Language">Urdu First Additional Language</option><option value="Urdu Home Language">Urdu Home Language</option><option value="Urdu Second Additional Language">Urdu Second Additional Language</option><option value="Visual Arts">Visual Arts</option><option value="Xitsonga Second Additional Language">Xitsonga Second Additional Language</option></select></td>
<td style="background-color: #e7ecf9">
<select class="form-control" id="Subject7APS" name="Subject7APS"><option selected="selected" value="">Select your mark.</option><option value="8">90% - 100% (Level 8)</option><option value="7">80% - 89% (Level 7)</option><option value="6">70% - 79% (Level 6)</option><option value="5">60% - 69% (Level 5)</option><option value="4">50% - 59% (Level 4)</option><option value="3">40% - 49% (Level 3)</option><option value="2">30% - 39% (Level 2)</option><option value="0">0% - 29% (Level 1)</option></select></td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input class="btn btn-default" onclick="return(validateform(this))" onkeypress="return(DetectEnterPressed(event))" type="submit" value="Calculate APS" /></td>
<td align="center" id="showScore">
</td>
</tr>
</tbody>
</table>
</div>
Related
Firefox 59.0 Project MVC.NET. Use https://select2.github.io js lib for select elements
On the View there are many elements such as:
<div class="control control_medium control_select">
<select name="#nameof(Model.Query.BudgetCycleIds)"
#Html.AjaxViewSubmitOnChange()
#Html.AsugfAutoComplete()
multiple="multiple">
<option value="0">Все</option>
#foreach (var budgetCycle in Model.BudgetCycles)
{
<option value="#budgetCycle.Id" #(Model.Query.BudgetCycleIds?.Contains(budgetCycle.Id) ?? false ? "selected" : "")>#budgetCycle.Name</option>
}
</select>
</div>
Same in the html:
<select name="BudgetCycleIds" ajaxview-submit-onchange="" asugf-select2="" multiple="" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
<option value="0">Все</option>
<option value="13" selected="">2010 - 2012</option>
<option value="14">2011 - 2013</option>
<option value="9">2012 - 2014</option>
<option value="5">2013 - 2015</option>
<option value="6">2014 - 2016</option>
<option value="7">2015 - 2017</option>
<option value="1">2016 - 2018</option>
<option value="2">2017 - 2019</option>
<option value="4">2018 - 2020</option>
</select>
Normal UI (before loading):
Not normal UI (in a second after loading):
Normal UI (in two second after loading):
The other browsers are the same, but very fast, and the user does not see the interface jumps.
How to make sure that the wrong interface does not appear
Not a good solution (because the layout is "jumps")
add hidden class
<option class="hidden" value="0">Все</option>
#foreach (var budgetCycle in Model.BudgetCycles)
{
<option class="hidden" value="#budgetCycle.Id" #(Model.Query.BudgetCycleIds?.Contains(budgetCycle.Id) ?? false ? "selected" : "")>#budgetCycle.Name</option>
}
I have a form built using contact form 7. I have 2 selects.
The first selects a number 1-7. It also has an option for "Not Started". If, an only if, "Not Started" is selected, then the second select should be made visible.
Select 1 = number
Select 2 = startYear
startYear is hidden to begin with.
If number option is selected as "Not started" then startYear select appears
Both fields should be required when visible. And startYear should be reset if number is changed to a different value
Below is what I have and it operates mostly as it should except for a couple of things. Primarily the fields are not required and can be submitted blank. Also, while the second select correctly appears and disappears, the value is not reset.
Any help would be most appreciated.
Thanks
<div style="display: inline-block;">
<p style="margin-bottom: 0;">Primary(at present)
<select name="number" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" onchange="showdiv(this.value);">
<option disabled selected value></option>
<option value="0">Not yet started</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</p>
</div>
<div id="div-two" style="display:none;">
<p>Year due to start, if not yet started[select startyear include_blank id:startyear "2018/19" "2019/20" "2020/21" "2021/22"]</p>
</div>
<script type="text/javascript">
function showdiv(element){
document.getElementById("div-two").style.display = element==0?"inline-block":"none";
}
</script>
Rather than loading a new template, is there a way to force Meteor to initiate an iteration (using {{#each}}) of an array in Meteor? For example, if the user selects a value in a pull down selector, to then initiate Meteor to iterate through an array within that template to populate another multiple selector list rather than load a whole new template with the new selector list.
Let's say this is within a template:
.
.
.
<form class="input-field col s6 card-selector">
<select multiple">
<option value="" disabled selected>Select Students</option>
{{#each StudentList1}}
<option value= '{{FullName}}'>{{formatName FullName}} ({{Level}}) {{RoomWk1}}</option>
{{/each}}
</select>
</form>
.
.
.
When a user selects a value in a different selector in that template:
<select class="week-selector">
<option value="" disabled selected>Week</option>
<option value="Week1">Week 1</option>
<option value="Week2">Week 2</option>
<option value="Week3">Week 3</option>
<option value="Week4">Week 4</option>
<option value="Week5">Week 5</option>
</select>
it will force a reiteration of the first #each to:
<form class="input-field col s6 card-selector">
<select multiple">
<option value="" disabled selected>Select Students</option>
{{#each StudentList1}}
<option value= '{{FullName}}'>{{formatName FullName}} ({{Level}}) {{RoomWk2}}</option>
{{/each}}
</select>
</form>
It would be more efficient than loading a new template that's the same except for the multi selector values.
Sessions are reactive and you can achieve this by using sessions (check if you have session package).
//we don't want the session value from the previous search/events
Template.templateName.onRendered(function(){
Session.set('sessionName', undefined);
});
//I'd probably use onDestroyed instead of onRendered
Template.templateName.onDestroyed(function(){
Session.set('sessionName', undefined);
});
//template events
'change .week-selector': function(){
var selected = $('.week-selector').find(":selected").text();
Session.set('sessionName', selected)
}
//template helper
StudentList1: function(){
var session = Session.get('sessionName');
if(session !== undefined){
//return some documents using the session value in your find()
} else {
//return documents without session value
}
}
EDIT: I found .text() of the selected option in the event but you are free to return value or do whatever you want with the found value/text.
For this portion of code
<label for="gender">I am:</label>
<select class="select" name="sex" id="sex">
<option value="0">Gender:</option>
<option value="1">Female</option>
<option value="2">Male</option>
</select>
W3C Validator giving this error reference to non-existent ID "gender"
How to solve this?
Edit
Getting here also
reference to non-existent ID "birthday"
<label for="birthday" class="birthday">Birthday:</label>
<div class="field_container">
<select name="birthday_month" id="birthday_month" class="">
<option value="-1">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
<select id="birthday_day" name="birthday_day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="birthday_year" name="birthday_year">
<option value="-1">Year:</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
</select>
</div>
Change the value of the for attribute in the label element:
<label for="sex">I am:</label>
Edit to add:
Your second example is more complicated, because you're using one label for three input fields.
I'd recommend something like the following:
Add the following CSS rule to your site:
.hidden_label {
font-size:1px;
height:0;
line-height:0;
margin:0 0 0 -1000px;
text-indent:-9999px;
}
Then update your form:
<div class="birthday">Birthday:</div>
<div class="field_container">
<label for="birthday_month" class="hidden_label">Birthday Month</label>
<select name="birthday_month" id="birthday_month" class="">
<option value="-1">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
<label for="birthday_day" class="hidden_label">Birthday Day</label>
<select id="birthday_day" name="birthday_day">
[...]
</select>
<label for="birthday_year" class="hidden_label">Birthday Year</label>
<select id="birthday_year" name="birthday_year">
[...]
</select>
You want to do two things:
Have a visually appealing form for your users, and then for those users that are using assistive technology, provide some additional helpers along the way. Using the CSS class I defined above, you are ensuring that screen readers will still see the elements and read their contents when the user moves into the form elements, while hiding all the additional labels from the visual site.
There is no id="gender" or name="gender". You are using sex. Either use sex or use gender. Keep it consistent.
In functions php, this works like a charm:
<textarea name="menu1anchor" id="menu1anchor" cols="40" rows="1"><?php echo get_option('menu1anchor'); ?></textarea>
How can i make this drop down list work? I want to be able to input my values and select a desired one later on.
Right now, it does not matter which value I select, after i press "save changes" it does not send my value thru the form to wordpress options.
<select name="menu1" id="menu1">
<option value="1">Microsoft</option>
<option value="2">Google</option>
<option value="3">Apple</option>
</select>
Thank u!
<select name="menu1" id="menu1">
<option value="1"<?php selected(get_option('menu1'),1); ?>>Microsoft</option>
<option value="2"<?php selected(get_option('menu1'),2); ?>>Google</option>
<option value="3"<?php selected(get_option('menu1'),3); ?>>Apple</option>
</select>
Try that instead.