We Keep Coding

How to access value?

I can't access the variable value when using it in the if-statement if (#Produkt.KategoriID == value). It says "the name 'value' does not exist in current context". How can i make it so I can use the variable in the if-statement?
#if (Model != null)
{
<div style="margin-left: 30%; margin-right: 25%;">
<label> Choose: </label>
<select name="Choose" id="select">
<option value="1">None</option>
<option value="2">Bronze</option>
<option value="3" selected>Silver</option>
<option value="4">Gold</option>
</select>
</div>
<script type="text/javascript">
var choice = document.getelementbyid('select');
var value = choice.options[choice.selectedindex].value;
</script>
if (#Produkt.KategoriID == value)
{
}
}

Basically you are trying to reach js variable from razor script. You can not reach it because their life cycles are different. End of the day all C# scripts converted HTML, CSS and js codes and there is no more C# scripts.
Also, for similar situation you can check here:
How to pass a value to razor variable from javascript variable?

You can try to use js to add html:
#if (Model != null)
{
<div style="margin-left: 30%; margin-right: 25%;">
<label> Choose: </label>
<select name="Choose" id="select">
<option value="1">None</option>
<option value="2">Bronze</option>
<option value="3" selected>Silver</option>
<option value="4">Gold</option>
</select>
</div>
<script type="text/javascript">
var choice = document.getelementbyid('select');
var value = choice.options[choice.selectedindex].value;
</script>
<div>
</div>
<div id="content"></div>
}
js:
$(function () {
var choice = document.getElementById('select');
var value = choice.options[choice.selectedindex].value;
$("#content").innerHTML = "your html here";
if (1 == value) {
var content = "";
content += "your html here";
document.getElementById("content").innerHTML =content;
}
})

Remove href link after form reset

I have the following mock form and I'd like the link to either disappear, or reset to the default selection.
HTML :
<form name="formName" target="_blank">
<div style="margin: 0 auto; width:600px;">
<div style="float:left;"><span>Pick AAA</span><br>
<select id="AAA" onchange="showLink()">
<option value="11">Eleven</option>
<option value="12">Twelve</option>
<option value="13">Thirteen</option>
<option value="14">Fourteen</option>
</select>
</div>
<div style="float:right;"><span>Pick BBB</span><br>
<select id="BBB" onchange="showLink()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
<br><br>
<div style="float:left; margin-left:120px; margin-right: 40px; margin-top:70px;">
<input type="submit" value="Go to"><br><br>
<input type="reset" value="Reset Selection">
</div>
JS :
function generateLink()
{
var A = document.getElementById('AAA').value;
var B = document.getElementById('BBB').value;
if(B == "1" || B == "2")
link ='http://' + B + '.' + A + '.domain';
else if(B == "3" || B == "4")
link ='http://' + B + '.' + A + '.domain/link.jsp';
else
link ='/404.html';
return link;
}
function showLink()
{
var link = generateLink();
document.getElementById("link").href = link;
document.getElementById("link").innerHTML = link;
}
document.formName.onsubmit = function(){
this.action = generateLink();
}
What happens now is that when I hit Reset Selection, the select elements are being reset but the link itself doesn't disappear due to the onchange command. Does anyone know how I can reset the link as well?

Try:
document.formName.onreset = function(){
document.getElementById('link').innerHTML = ''
}

In General, Reset method restores a form element's default values. This method does the same thing as clicking the form's reset button.
Why Link is not reset to default?
Link is Anchor Tag which is not part of form Field. Form Reset Feature is to reset Form Fields not other elements like anchor, p, h1-h6.
Take a look at the working code.
function generateLink() {
var A = document.getElementById('AAA').value;
var B = document.getElementById('BBB').value;
if (B == "1" || B == "2")
link = 'http://' + B + '.' + A + '.domain';
else if (B == "3" || B == "4")
link = 'http://' + B + '.' + A + '.domain/link.jsp';
else
link = '/404.html';
return link;
}
function showLink() {
var link = generateLink();
document.getElementById("link").href = link;
document.getElementById("link").innerHTML = link;
}
document.formName.onsubmit = function() {
this.action = generateLink();
}
document.formName.onreset = function(){
document.getElementById('link').innerHTML = ''
}
<form name="formName" target="_blank">
<div style="margin: 0 auto; width:600px;">
<div style="float:left;"><span>Pick AAA</span><br>
<select id="AAA" onchange="showLink()">
<option value="11">Eleven</option>
<option value="12">Twelve</option>
<option value="13">Thirteen</option>
<option value="14">Fourteen</option>
</select>
</div>
<div style="float:right;"><span>Pick BBB</span><br>
<select id="BBB" onchange="showLink()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
<br><br>
<div style="float:left; margin-left:120px; margin-right: 40px; margin-top:70px;">
<input type="submit" value="Go to"><br><br>
<input type="reset" value="Reset Selection">
</div>
</form>
Other Improvments, if your code is not test code.
Avoid Inline Styles and keep it as styles.
Use Form Field label.
Instead of span tags. Avoid <br> element and manage with CSS Styles.
Use addEventListener method.

You're creating the link programmatically , so you need to remove it programmatically, too:
document.formName.onreset = function(){
let linkEl = document.getElementById("link");
linkElement.href = '';
linkElement.innerHTML= '';
}

reset() method only resets the data. You need to hide the link yourself.

How to get options element by id and output text

Could someone help me with this little javascript. I want the rersult to show in NA only when option value 2 is selected. I want 11" to show will show. Need a simple script to output custom text based on value text. I do know i have value="2" listed twice. I cannot use the value field.
<select id="sizing-change" onchange="myFunction()">
<option value="2">12"</option>
<option value="2" id="test">11"</option>
</select>
<div class="sizefinal">
Suggested Size: <span id="finalsize">NA</span>
</div>
<script>
function myFunction() {
if(document.getElementById("test").value == "11") {
document.getElementById("finalsize").innerHTML = "Size: 11";
}
}
</script>

You can check the text of the option like
function myFunction() {
var el = document.getElementById("sizing-change");
if (el.options[el.selectedIndex].text.trim() == '11"') {
document.getElementById("finalsize").innerHTML = "Size: 11";
} else {
document.getElementById("finalsize").innerHTML = "NA";
}
}
<select id="sizing-change" onchange="myFunction()">
<option value="2">12"</option>
<option value="2" id="test">11"</option>
</select>
<div class="sizefinal">
Suggested Size: <span id="finalsize">NA</span>
</div>

If you can alter the value field of option to different values(which you should) then you can try this:
<select id="sizing-change" onchange="myFunction()">
<option value="12">12</option>
<option value="11" id="test">11</option>
</select>
<div class="sizefinal">Suggested Size: <span id="finalsize">NA</span>
</div>
<script>
function myFunction() {
if (document.getElementById("sizing-change").value == 11) {
document.getElementById("finalsize").innerHTML = "Size: 11";
}
}
</script>
Demo: http://jsfiddle.net/GCu2D/784/

var finalsize = document.querySelector('#finalsize');
var sizingChange = document.querySelector('#sizing-change')
var testOption = sizingChange.querySelector('#test');
myFunction(sizingChange);
function myFunction(element) {
var checked = element.querySelector(':checked');
if (checked == testOption) {
finalsize.innerHTML = "Size: " + element.querySelector(':checked').text;
} else {
finalsize.innerHTML = 'NA';
}
}
<select id="sizing-change" onchange="myFunction(this)">
<option value="2">12"</option>
<option value="2" id="test">11"</option>
</select>
<div class="sizefinal">
Suggested Size: <span id="finalsize">NA</span>
</div>

javascript dropdown validation

I need to alert if you haven't selected anything and couldn't get it to work. It needs to show what is where wrong and alert with a window.
<!DOCTYPE html>
<html>
<head>
<select id="ddlView">
<option value="0">Select</option>
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
<input type="button" onclick="myFunction()" value="select" />
<script>
function Validate()
{
var e = document.getElementById("ddlView");
var strUser = e.options[e.selectedIndex].value;
var strUser1 = e.options[e.selectedIndex].text;
if(strUser==0)
{
alert("Please select a user");
}
}
</td></head>
</html>

I think you have multiple problems here.
You need to add a body tag
Set the correct function name in your button.
you need a closing script tag
Give this a try:
<!DOCTYPE html>
<html>
<body>
<select id="ddlView">
<option value="0">Select</option>
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
<input type="button" onclick="Validate()" value="select" />
<script type="text/javascript">
function Validate()
{
var e = document.getElementById("ddlView");
var strUser = e.options[e.selectedIndex].value;
var strUser1 = e.options[e.selectedIndex].text;
if(strUser==0)
{
alert("Please select a user");
}
}
</script>
</body>
</html>

This is not you asked for but you can still consider what i did.
Have an option with value 0 which is going to be the default option of the dropdown and add required attribute to the select element.
Once this select element is in a form and is submitted ,HTML is automatically going to take over the validation part.
<select required>
<option value="">Select</option>
<option value="1">Option1</option>
</select>

<body>
<div>
<span>Select the course : </span>
<select id="ddlView">
<option value="0">Select</option>
<option value="1">Java Script</option>
<option value="2">CSS</option>
<option value="3">JQuery</option>
<option value="3">HTML</option>
<option value="3">C#</option>
</select>
</div>
<br >
<input type="button" class="btn" value="Submit" id="btnSubmit" onclick="ddlValidate();" />
<script type="text/javascript">
function ddlValidate() {
var e = document.getElementById("ddlView");
var optionSelIndex = e.options[e.selectedIndex].value;
var optionSelectedText = e.options[e.selectedIndex].text;
if (optionSelIndex == 0) {
alert("Please select a Course");
}
else {
alert("Success !! You have selected Course : " + optionSelectedText); ;
}
}
</script>

That has to be in your form processing script, you can just add it to the top of your code and check if it has been submitted.
// Place this atop of your script.
if(isset($_POST)) {
if($_POST['member_id']) {
// Your codes here
}
}

call this function at a button click(OnClientClick=" return Validate()") you have to list an item for the 0'th positions(ddlView.Items.Insert(0, new ListItem("Select...", "0"));)
function Validate(){
var region = document.getElementById('<%=ddlView.ClientID%>').value;
if (region == 0) {
alert("Please select a user");
return false;
}
}

JavaScript Dropdown - Click on button and redirect to url based on selected value

I have this form and now needed create a redirection after the user select the game type and slots on press the image button called "buynow.png".
If the user select "public" he will be redirected to "www.domain.com/public.html", otherwise if its "private" go to "www.domain.com/private.html"
Here the actual code
<div>
<form name="f1">
<div>
<select name="server_type" onchange="change_selection()">
<option value="0" selected>Select</option>
<option value="1">Public</option>
<option value="2">Private</option>
</select>
</div>
<div>
<select name="server_slots">
<option value="-">-</option>
</select>
</div>
<div>
<a><img src="images/bBuyNow.png" border="0" /></a>
</div>
</form>
<script language="javascript" type="text/javascript">
var slots_1=new Array("10 Players","11 Players","12 Players")
var slots_2=new Array("10 Players","11 Players","12 Players")
function change_selection(){
var server_type
server_type = document.f1.server_type[document.f1.server_type.selectedIndex].value
if (server_type != 0) {
slots_selected=eval("slots_" + server_type)
cant_slots = slots_selected.length
document.f1.server_slots.length = cant_slots
for(i=0;i<cant_slots;i++){
document.f1.server_slots.options[i].value=slots_selected[i]
document.f1.server_slots.options[i].text=slots_selected[i]
}
}else{
document.f1.server_slots.length = 1
document.f1.server_slots.options[0].value = "-"
document.f1.server_slots.options[0].text = "-"
}
document.f1.server_slots.options[0].selected = true
}
</script>
</div>
Thanks in advance.

i do not know what you are doing with slots but for redirection you can use window.location.href
<div>
<form name="f1">
<div>
<select name="server_type" onchange="change_selection()">
<option value="0" selected>Select</option>
<option value="1">Public</option>
<option value="2">Private</option>
</select>
</div>
<div>
<select name="server_slots">
<option value="-">-</option>
</select>
</div>
<div>
<a><img src="images/bBuyNow.png" border="0" href="javascript:viod(0)" onclick="redirecturl();"/></a>
</div>
</form>
<script language="javascript" type="text/javascript">
var slots_1=new Array("10 Players","11 Players","12 Players");
var slots_2=new Array("10 Players","11 Players","12 Players");
function redirecturl(){
var server_type;
server_type = document.f1.server_type[document.f1.server_type.selectedIndex].value;
var selectedslot = document.f1.server_slots[document.f1.server_slots.selectedIndex].value;
if (server_type == 1) {
window.location.href="www.domain.com/public.html?slot="+selectedslot ;
}
}else if(server_type == 2){
window.location.href="www.domain.com/private.html?slot="+selectedslot;
}
else{
alert('please select a value');
return;
}
}
</script>
</div>