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;
}
})
Related
I am a beginner with Javascript.
I have written code for getting the values from selected option and it works fine.
My question is after selecting all the three options, if I click on "submit"
button it should go to the next page.
can someone please help on this?
Condition to be executed while redirecting to another page:
if(strUser == 'AAA') && (strUser1 == 'DDD') && (strUser1 == 'GGG'))
{
window.location.replace("sample4.html");
}
else if(strUser == 'BBB') && (strUser1 == 'EEE') && (strUser1 == 'HHH'))
{
window.location.replace("sample5.html");
}
else
{
alert("please select all the 3 options");
}
}
Code:
<body
style="background-image: url(./img/ford3.png); background-size: cover;">
<h3>welcome user!!</h3>
<button class="ssystem">System</button>
<button class="sub">Sub-System</button>
<button class="subsub">Sub-Sub-System</button>
<div class="box">
<select name="select1" id="sys" onchange="showData();">
<option value="1">AAA</option>
<option value="2">BBB</option>
<option value="3">CCC</option>
</select>
</div>
<div class="box1">
<select id="sub" onchange="showData();">
<option value="4">DDD</option>
<option value="5">EEE</option>
<option value="6">FFF</option>
</select>
</div>
<div class="box2">
<select id="sub1" onchange="showData();">
<option value="7">GGG</option>
<option value="8">HHH</option>
<option value="9">III</option>
</select>
</div>
<input type="submit" value="Submit" id="button">
<script>
function showData() {
var e = document.getElementById("sys");
var e1 = document.getElementById("sub");
var e2 = document.getElementById("sub1");
var strUser = e.options[e.selectedIndex].text;
alert(strUser);
//var value = e1.options[e1.selectedIndex].value; //for index
//alert(value);
var strUser1 = e1.options[e1.selectedIndex].text;
alert(strUser1);
var strUser2 = e2.options[e2.selectedIndex].text;
alert(strUser2);
</script>
</body>
Solution
There were a few things wrong with your code.
Firstly, you want to make your state variables (values that can change) of a higher scope so you can share them between your functions. These are the values of your <select> html elements.
Since all your default values are at index zero, we can just default to that selected index value upon initialisation of the page.
We can extract the <select> DOM element into a variable with document.getElementById() and then get the selected option value out of it like so:
var strUser = document.getElementById("sys").options[0].text;.
Another thing is that your IF statements were incorrectly written. I amended this for example here:
if (strUser == 'AAA' && strUser1 == 'DDD' && strUser2 == 'GGG')
I left the alerts in there so you can see the sequential flow of the code.
Additionally, I moved the Javascript to a separate file and imported it through the <script> tag. This is a nice separation of concerns.
A link to a JSFiddle is here for a more visual effect of how the code works.
I hope this helps.
HTML
<body
style="background-image: url(./img/ford3.png); background-size: cover;">
<h3>welcome user!!</h3>
<button class="ssystem">System</button>
<button class="sub">Sub-System</button>
<button class="subsub">Sub-Sub-System</button>
<div class="box">
<select name="select1" id="sys" onchange="showData();">
<option value="1">AAA</option>
<option value="2">BBB</option>
<option value="3">CCC</option>
</select>
</div>
<div class="box1">
<select id="sub" onchange="showData();">
<option value="4">DDD</option>
<option value="5">EEE</option>
<option value="6">FFF</option>
</select>
</div>
<div class="box2">
<select id="sub1" onchange="showData()">
<option value="7">GGG</option>
<option value="8">HHH</option>
<option value="9">III</option>
</select>
</div>
<input type="submit" value="Submit" id="button" onclick="goToNextPage()">
<script src="./script.js"></script>
</body>
Javascript
var strUser = document.getElementById("sys").options[0].text;
var strUser1 = document.getElementById("sub").options[0].text;
var strUser2 = document.getElementById("sub1").options[0].text;
function showData() {
var e = document.getElementById("sys");
var e1 = document.getElementById("sub");
var e2 = document.getElementById("sub1");
strUser = e.options[e.selectedIndex].text;
alert(strUser);
strUser1 = e1.options[e1.selectedIndex].text;
alert(strUser1);
strUser2 = e2.options[e2.selectedIndex].text;
alert(strUser2);
}
function goToNextPage() {
if (strUser == 'AAA' && strUser1 == 'DDD' && strUser2 == 'GGG') {
window.location.replace("sample4.html");
}
else if (strUser == 'BBB' && strUser1 == 'EEE' && strUser2 == 'HHH') {
window.location.replace("sample5.html");
}
else {
alert("please select all the 3 options");
}
}
My dropdown has a custom attributes and what I want to happen is to display the custom attributes value in a label tag.
Here is a code snippet:
function setDesignation(d){
var designation = d.getAttribute("data-designation");
if(designation != null){
document.getElementById('designation').innerHTML = designation;
}else{
document.getElementById('designation').innerHTML = 'Name';
}
//alert(d.getAttribute("data-designation"));
}
<div>
<select onchange="setDesignation(this)">
<option value="1" data-designation="President">Mathew</option>
<option value="2" data-designation="CEO">Mark</option>
<option value="3" data-designation="Manager">Luke</option>\
<option value="4" data-designation="">John</option>
</select>
</div>
<div>
<label id="designation">Designation</label>
</div>
The problem is that I can't get the value of the custom attributes which is the "data-designation". I tried to put it in an alert() method to see the value and it says "null". Even I remove the if else statement it still returns null. I don't know what wrong with the code so please help me.
I tried to find solution but all that I found are jQuery. I'm not good in jQuery so I would like a PURE JAVASCIPT solution.
P.S. if your solution is to store it in the value attribute then thats not what I'm looking for.
You dont want the selects data attribute, you want the selected options data attribute:
var designation = d.options[d.selectedIndex].getAttribute("data-designation");
'this' here refers to the select and not the option.
You may want to try this instead:
function setDesignation(d){
var designation = d.selectedOptions[0].getAttribute('data-designation');
if(designation != null){
document.getElementById('designation').innerHTML = designation;
}else{
document.getElementById('designation').innerHTML = 'Name';
}
}
Hope this will help.
Try this
function setDesignation(d) {
var designation = d.options[d.selectedIndex].getAttribute("data-designation");
if (designation != "") {
document.getElementById('designation').innerHTML = designation;
} else {
document.getElementById('designation').innerHTML = 'Name';
}
}
<div>
<select onchange="setDesignation(this)">
<option value="1" data-designation="President">Mathew</option>
<option value="2" data-designation="CEO">Mark</option>
<option value="3" data-designation="Manager">Luke</option>\
<option value="4" data-designation="">John</option>
</select>
</div>
<div>
<label id="designation">Designation</label>
</div>
You'll have to pass the option which is this.options[this.selectedIndex]:
function setDesignation(d){
var designation = d.getAttribute("data-designation");
if(designation != null){
document.getElementById('designation').innerHTML = designation;
}else{
document.getElementById('designation').innerHTML = 'Name';
}
//alert(d.getAttribute("data-designation"));
}
<div>
<select onchange="setDesignation(this.options[this.selectedIndex])">
<option value="1" data-designation="President">Mathew</option>
<option value="2" data-designation="CEO">Mark</option>
<option value="3" data-designation="Manager">Luke</option>\
<option value="4" data-designation="">John</option>
</select>
</div>
<div>
<label id="designation">Designation</label>
</div>
This should be fine. Change the != null to != '' so it display "Name" when data-designation is blank.
<div>
<select onchange="setDesignation(this)">
<option value="1" data-designation="President">Mathew</option>
<option value="2" data-designation="CEO">Mark</option>
<option value="3" data-designation="Manager">Luke</option>
<option value="4" data-designation="">John</option>
</select>
</div>
<div>
<label id="designation">Designation</label>
</div>
<script>
function setDesignation(d){
var designation = d.options[d.selectedIndex].getAttribute("data-designation");
var label = document.getElementById('designation');
if(designation != ''){
label.innerHTML = designation;
}else{
label.innerHTML = 'Name';
}
}
</script>
You can access data attributes using jQuery data() method:
var designation = d.options[d.selectedIndex].data("designation");
https://api.jquery.com/data/ - Jquery data() reference
You have to pick the selected option first before you get the option
function setDesignation(d){
var selectedDesignation = d.options[d.selectedIndex];
console.log(selectedDesignation);
var designation = selectedDesignation.getAttribute("data-designation");
console.log(designation);
if(designation != ""){
document.getElementById('designation').innerHTML = designation;
}else{
document.getElementById('designation').innerHTML = 'Name';
}
//alert(d.getAttribute("data-designation"));
}
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>
I have a div inside my form which is filled with a field based on the value of the select box above it. This field always comes back as 'null' when submitted, I put a div around other parts of the form to test if it was in fact the div itself and each field with a div around it kept coming back as 'null'.
<form>
<span id="writenode"></span>
<input type="button" value="Add language" onClick="addlanguage()" >
<input type="submit" value="Submit" >
</form>
<!--This div below is called every time I want to add a new 'instance' of this form
this div works fine, its when i add a div inside that one I get 'null'-->
<div id="readnode" style="display: none">
<select name="rank">
<option disabled="disabled" selected="selected">Rating</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0">0</option>
</select>
<select name="time">
<option disabled="disabled" selected="selected">Time</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0">0</option>
</select>
<input type="button" value="X"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>
So the code above works fine its when i add a div inside i get 'null' like below;
<form>
<span id="writenode"></span>
<input type="button" value="Add language" onClick="addlanguage()" >
<input type="submit" value="Submit" >
</form>
<!--This div below is called every time I want to add a new 'instance' of this form
this div works fine, its when i add a div inside that one I get 'null'-->
<div id="readnode" style="display: none">
<select name="rank">
<option disabled="disabled" selected="selected">Rating</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0">0</option>
</select>
<div id='testdiv'>
<select name="time">
<option disabled="disabled" selected="selected">Time</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0">0</option>
</select>
</div>
<input type="button" value="X"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>
Whats my best way around this? and how would I go about doing it?
EDIT: The Div 'readnode' is called and placed inside the form when needed, replacing the div 'writenode' which is seen inside the form above. This div works perfectly fine. When i add another div (testdiv) inside the 'readnode' any fields placed inside the new div (testdiv) always come back as null when using $_get.
EDIT2:
Function that puts the readnode in place of the writenode,
<script type="text/javascript">
/* Set the counter that will increase every time
the user adds a new language*/
var counter = 0;
function addlanguage()
{
// Ask the user for input
var language = prompt("Language Name","");
if (language == "" || language == null)
{
alert("Please enter a language.");
}
else
{
counter++;
// Find the element to be copied
var newNode = document.getElementById('readnode').cloneNode(true);
newNode.id = '';
newNode.style.display = 'block';
var newField = newNode.childNodes;
// Give all fields a unique value
for (var i=0;i<newField.length;i++)
{
var theName = newField[i].name;
var theId = newField[i].id;
if (theName)
{
newField[i].name = theName + counter;
}
if (theId == "languagename")
{
// Change the field to the user input
newField[i].innerHTML = language;
}
if (theName == "lang")
{
// Replace the hidden field with the correct language
newField[i].value = language;
}
}
// Insert the elements
var insertHere = document.getElementById('writenode');
insertHere.parentNode.insertBefore(newNode,insertHere);
}
}
</script>
and this is the php;
<?php
if ($_GET["time1"] == null)
{ ?>
<form>
<span id="writenode"></span>
<input type="button" value="Add language" onClick="addlanguage()" >
<input type="submit" value="Submit" >
</form>
<?php
}
else
{
$final = 0;
$i = 1;
while($final == 0)
{
$gettime = "time" . $i;
$getRank = "rank" . $i;
$time = $_GET[$gettime];
$rank = $_GET[$getRank];
if ($language == "")
{
$final = 1;
}
if ($final == 0)
{
// Show the user the input
echo("<p>Your <strong>$time</strong> is <strong>$rank</strong>.</p>");
}
$i++;
}
} ?>
When you put it inside a div, it's no longer part of newNode.childNodes, so you never get to set the name properly. You'll have to check childs of childs or use jQuery to simplify things.
for (var i=0;i<newField.length;i++)
{
var subField = newField.childNodes;
for (var i=0;i<subField.length;i++) {
var theName = subField[i].name;
var theId = subField[i].id;
// ...
}
}
This is how far I got:
<head>
<script type="text/javascript">
function showonlyone(thechosenone) {
var article = document.getElementsByTagName("div");
for(var x=0; x<article.length; x++) {
name = article[x].getAttribute("name");
if (name == 'article') {
if (article[x].id == thechosenone) {
article[x].style.display = 'block';
}
else {
article[x].style.display = 'none';
}
}
}
}
</script>
</head>
<form>
<select>
<option SELECTED>Choose one</option>
<option value="javascript:showonlyone(id1)">First</option> <!-- That's probably wrong -->
<option value="javascript:showonlyone(id2)">Second</option>
</select>
</form>
<div name="article" id="id1" style="display:none;">
First one selected
</div>
<div name="article" id="id2" style="display:none;">
Second one selected
</div>
Here is what it should do:
Create a dropdownlist (with 3 Values)
If you click on "First" it should only show the of the content of <div id="id1">
If you click on "Second" it should only show the of the content of <div id="id2">
I know that this can't work like this. But I do not know how I can get this working.
There might be a easier way than this javascript function but it has to be this way.
Thank you for your help
Use a onchange event handler instead:
Update your <select> to <select onchange="showonlyone(this)">.
Change your <option> values to only the IDs - not JavaScript calls.
Update your JavaScript to accept the HTMLSelectElement (which will be passed-in by the this, above). (Yes, you were correct here.)
From the chosen HTMLSelectElement, ask it for its value.
Here is a fixed, working version: http://jsfiddle.net/YRF6u/
Also included here:
<head>
<script type="text/javascript">
function showonlyone(selector) {
var thechosenone = selector.value;
var article = document.getElementsByTagName("div");
for(var x=0; x<article.length; x++) {
name = article[x].getAttribute("name");
if (name == 'article') {
if (article[x].id == thechosenone) {
article[x].style.display = 'block';
}else{
article[x].style.display = 'none';
}
}
}
}
</script>
</head>
<form>
<select onchange="showonlyone(this)">
<option SELECTED>Choose one</option>
<option value="id1">First</option>
<option value="id2">Second</option>
</select>
</form>
<div name="article" id="id1" style="display:none;">
First one selected
</div>
<div name="article" id="id2" style="display:none;">
Second one selected
</div>
I would not consider this production-ready code, but it should be sufficient enough to solve your current round of questions.