Develop Reference

Make 2 <select> statements work and dont crash the script

Im putting multiples select in my code that are hidden and got a principal select that makes visible the other selec depending in the value selected, but when you choose a value in the second select it changes the second visible select to another, how can I prevent that to happen
Its a catalog in a static html that interacts with a SQL Server via php, so I need the select to compare it with the ID´s and make inserts and updates
This is the script:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
function myFuction(){
//Getting Value
//var selValue = document.getElementById("singleSelectDD").value;
var selObj = document.getElementById("MENU");
var selValue = selObj.options[selObj.selectedIndex].value;
//Setting Value
document.getElementById("valorsel").value = selValue;
}
</script>
And this are the examples:
<select name="MENU" id="MENU" onchange="myFuction()">
<option value="" selected></option>
<option value="1">Area</option>
<option value="2">Bancos</option>
<option value="3">CFDI</option>
<option value="4">Departamentos</option>
<option value="5">Empresa</option>
<option value="6">Giro Comercial</option>
<option value="7">Negocio</option>
</select><br><br>
<p>Texto Global</p>
<input type="text" name="GLOBAL" id="GLOBAL" value="" placeholder="Texto global">
</div>
<div class="1 box">
<p>Seleccione el Area deseada</p>
<input type="text" name="Txt_Area" id="Txt_Area" value="" placeholder="AREA">
<select name="AREA" id="AREA" placeholder="Seleccione Area deseada>
<option value="" selected></option>
<option value="1">AREA 1</option>
<option value="2">AREA 2</option>
<option value="3">AREA 3</option>
</select>
I want to be able of having both select on screen to insert or update the information

Instead of having $("select").change(function(){, it's better that you have $("#MENU").change(function() { because otherwise it will detect all the select menus that are changing instead of just the first one like you want.
$(document).ready(function() {
$("#MENU").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else {
$(".box").hide();
}
});
}).change();
});
function myFuction() {
var selObj = document.getElementById("MENU");
var selValue = selObj.options[selObj.selectedIndex].value;
//Setting Value
//document.getElementById("valorsel").value = selValue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select name="MENU" id="MENU" onchange="myFuction()">
<option value="" selected></option>
<option value="1">Area</option>
<option value="2">Bancos</option>
<option value="3">CFDI</option>
<option value="4">Departamentos</option>
<option value="5">Empresa</option>
<option value="6">Giro Comercial</option>
<option value="7">Negocio</option>
</select><br><br>
<p>Texto Global</p>
<input type="text" name="GLOBAL" id="GLOBAL" value="" placeholder="Texto global">
</div>
<div class="1 box">
<p>Seleccione el Area deseada</p>
<input type="text" name="Txt_Area" id="Txt_Area" value="" placeholder="AREA">
<select name="AREA" id="AREA" placeholder="Seleccione Area deseada">
<option value=" " selected></option>
<option value="1 ">AREA 1</option>
<option value="2 ">AREA 2</option>
<option value="3 ">AREA 3</option>
</select>

Javascript, grading multiply options

I have read a lot of topics already but I still do not have a clue what I have to write to make my check() work.
When you choose an option, it will generate multiply questions ( 1 x 1 1 x 2 etc. ) then the user needs to fill in the right answer and when pressed on the submit button it needs to make the good answers green and the bad answers red.
I tried a lot of ways but this time I just can not see it haha. can anyone tell me or bring me in the right direction of what I need to write in my calc()
Thanks for helping :)
<div id="section">
<h2>De toets</h2>
<p>Welke toets wil je maken?</p>
<label for="toetsmenu"></label>
<select id="toetsmenu" onchange="toets()">
<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>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="toetsding"></div>
<script>
function toets() {
var x = document.getElementById("toetsmenu").value;
document.getElementById("toetsding").innerHTML = "";
for (i = 1; i < 11; i++) {
document.getElementById("toetsding").innerHTML += x + " x " + i +
" = <input type='text' id='test'>" + "<br>";
}
document.getElementById("toetsding").innerHTML += "<input type='submit' value='check' id='sub' onclick='calc()'>"
}
function calc() {
}
</script>
</div>

When creating the <input> elements you need to give them each a unique ID: id='test" + i + "
In the calc() function you can then simply access them by their ID in the loop and check the result
function toets() {
var x = document.getElementById("toetsmenu").value;
document.getElementById("toetsding").innerHTML = "";
for (i = 1; i < 11; i++) {
document.getElementById("toetsding").innerHTML += x + " x " + i +
" = <input type='text' id='test" + i + "'>" + "<br>";
}
document.getElementById("toetsding").innerHTML += "<input type='submit' value='check' id='sub' onclick='calc()'>"
}
function calc() {
var x = document.getElementById("toetsmenu").value
for (i = 1; i < 11; i++) {
var input = document.getElementById("test" + i)
var result = input.value
console.log(input.value)
if (result == x * i) {
input.className = "correct"
} else {
input.className = "wrong"
}
}
}
toets()
.wrong {
background-color: red;
}
.correct {
background-color: green;
}
<div id="section">
<h2>De toets</h2>
<p>Welke toets wil je maken?</p>
<label for="toetsmenu"></label>
<select id="toetsmenu" onchange="toets()">
<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>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="toetsding"></div>
</div>

disabled select field importing to mysql

I have a script where I am trying to only import fields that are not disabled to mysql.
my problem is that when its disabled it still imports the field that is in the selection
function toggleCatDisability()
{
document.getElementsByClassName('cat_border')[0].disabled = false;
document.getElementsByClassName('tech_border')[0].disabled = true;
document.getElementsByClassName('splatter_border')[0].disabled = true;
document.getElementsByClassName('fancy_border')[0].disabled = true;
}
function toggleTechDisability()
{
document.getElementsByClassName('tech_border')[0].disabled = false;
document.getElementsByClassName('cat_border')[0].disabled = true;
document.getElementsByClassName('splatter_border')[0].disabled = true;
document.getElementsByClassName('fancy_border')[0].disabled = true;
}
<center>
<input type="button" value="Update Tag" onClick="updateTagSettings()" />
</center><br /><br /><div id="ajax_spot" style="text-align:center;"></div>
<center><input type="text" id="tag_name" value="" maxlength="15"/>
<div>
</div>
<div>
Border Style:
<div>
<input type="button" value="Kitten"onclick="toggleCatDisability()"/>
</select>
Color:<select id="tag_border" class="cat_border" disabled="disabled">
<option value="Border_Cat_Black.png">Black</option>
<option value="Border_Cat_DBlue.png">Dark Blue</option>
<option value="Border_Cat_LBlue.png">Light Blue</option>
<option value="Border_Cat_Green.png">Green</option>
<option value="Border_Cat_Orange.png">Orange</option>
<option value="Border_Cat_Pink.png">Pink</option>
<option value="Border_Cat_Purple.png">Purple</option>
<option value="Border_Cat_Red.png">Red</option>
<option value="Border_Cat_Yellow.png">Yellow</option>
</select>
</div>
</div>
<div>
<input type="button" value="Tech"onclick="toggleTechDisability()"/>
Color:<select id="tag_border" class="tech_border" disabled="disabled">
<option value="Border_Cat_Black.png">Black</option>
<option value="Border_Cat_DBlue.png">Dark Blue</option>
<option value="Border_Cat_LBlue.png">Light Blue</option>
<option value="Border_Cat_Green.png">Green</option>
<option value="Border_Cat_Orange.png">Orange</option>
<option value="Border_Cat_Pink.png">Pink</option>
<option value="Border_Cat_Purple.png">Purple</option>
<option value="Border_Cat_Red.png">Red</option>
<option value="Border_Cat_Yellow.png">Yellow</option>
</select>
</div>
<div>
Background:<select id="tag_bg" >
<option>Choose Color</option>
<option value="BG_Black.png">Black</option>
<option value="BG_DBlue.png">Dark Blue</option>
<option value="BG_LBlue.png">Light Blue</option>
<option value="BG_Green.png">Green</option>
<option value="BG_Orange.png">Orange</option>
<option value="BG_Pink.png">Pink</option>
<option value="BG_Purple.png">Purple</option>
<option value="BG_Red.png">Red</option>
<option value="BG_Yellow.png">Yellow</option>
</select>
</div>
<div>
</div>
</center>
<div class="clear"></div>
</div>
</div>
Edit: PHP and Javascript-
PHP
function updateTagValues() {
global $logon;
$tag_name= mysql_real_escape_string($_POST['tagname']);
$tag_bg= mysql_real_escape_string($_POST['tagbg']);
$tag_border= mysql_real_escape_string($_POST['tagborder']);
$tag_decal= mysql_real_escape_string($_POST['tagdecal']);
mysql_query("UPDATE gamezove_deciet.groups SET leader_name = '" . $logon->username . "', name='" . $tag_name . "', bg='" . $tag_bg . "', border='" . $tag_border . "', decal='" . $tag_decal . "' WHERE `leader_name`='" . $logon->username . "'", $this->c) or die("Something went wrong, please try again!");
if (strlen($password) > 0){
echo "Your tag have been updated!";
if(strlen($password) > 0){
$logon->logout();
}
}
}
Javascript/jQuery
function saveTagSettings() {
var tagname = $("#tag_name").val()
var tagbg = $("#tag_bg").val()
var tagborder = $("#tag_border").val()
var tagdecal = $("#tag_decal").val()
$("#ajax_spot").html("<img src='theme/" + theme + "/images/ajax.gif' />")
$.post("inc/forum_ajax.php", { ajax: 19, tagname: tagname, tagbg: tagbg, tagborder: tagborder, tagdecal: tagdecal}, function(data) {
$("#ajax_spot").html(data)
});
}
I know that there is a way to do this I just don't know how.
I'm guessing I need to do more with the disable function but not exactly sure what.
any help would be greatly appreciated:)

Display all selected value of multiple drop down list

Below is what I have...
<html>
<body>
<form name="myForm">
<select name="myOption" multiple>
<option value="0">0</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>
<option value="8">8</option>
</select>
<BR><BR>
<input type=submit value="Print First" onClick="printMe()">
<input type=submit value="Print All" onClick="printAll()">
</body>
<script>
function printMe() {
alert ("Selected option is " + myForm.myOption.value);
}
function printAll() {
var str = "";
// what should I write here??
alert("Options selected are " + str);
}
</script>
</html>
Please let me know what should I write in printAll() so that I can print all the values that I selected... I know how can I print the first selected value...

how about this??
function printAll() {
var str="",i;
for (i=0;i<myForm.myOption.options.length;i++) {
if (myForm.myOption.options[i].selected) {
str = str + i + " ";
}
}
alert("Options selected are " + str);
}
Good Luck!!!

You can do something like this:
function printAll() {
var obj = myForm.myOption,
options = obj.options,
selected = [], i, str;
for (i = 0; i < options.length; i++) {
options[i].selected && selected.push(obj[i].value);
}
str = selected.join();
// what should I write here??
alert("Options selected are " + str);
}
Demo: http://jsfiddle.net/n3cXj/1/

I would use jquery as it's easier
JQuery:
$("myOption:selected").each(function () {
alert($(this).text());
});

http://jsfiddle.net/XBDmU/2/
var selected = [];
$("#Mymutiple option").each(function(){
$(this).click(function(evt){
myvar = $(this).val();
if (evt.ctrlKey){
if(jQuery.inArray(myvar, selected) >-1){
selected = jQuery.grep(selected , function(value) {
return value != myvar;
});
}
else{
selected.push(myvar);
}
}
else{
selected = [];
selected.push(myvar);
}
});
})
$("#printMe").click(function(){
alert("First selected is:" + selected[0]);
return false;
});
$("#printAll").click(function(){
alert("Options selected are :" + selected);
return false;
});
html:
<form name="myForm">
<select name="myOption" id="Mymutiple" multiple>
<option value="0">0</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>
<option value="8">8</option>
</select>
<BR><BR>
<input type="submit" value="Print First" id="printMe">
<input type="submit" value="Print All" id="printAll">

This will help you. It's in pure js. no jquery, mootools...
<!DOCTYPE html>
<html>
<body>
<script>
function get(){
var str="",i;
for (i=0;i<asa.cars.options.length;i++) {
if (asa.cars.options[i].selected) {
str += asa.cars.options[i].value + ",";
}
}
if (str.charAt(str.length - 1) == ',') {
str = str.substr(0, str.length - 1);
}
alert("Options selected are " + str);
}
</script>
<form name="asa">
<select name="cars" id="combo" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="button" onclick="get()">
</form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
</body>
</html>

In angular 4, instead of using angular multi-select dropdown I used the normal one.
Following is the code.
HTML file:
<select [ngModel]="DataValue" (change)="selectChangeHandler($event)"
id="multiple-select" name="multiple-select" class ="form-control" multiple>
<option *ngFor="let ref of Data" [value]="ref['title']">
{{ref['title']}}
</option>
</select>
Ts file:
selectChangeHandler (event: any) {
let oldvalue;
let mergedValue = "";
for ( let index = 0 ; index < event.currentTarget.selectedOptions.length; index++)
{
oldvalue = event.currentTarget.selectedOptions[index].value.replace(/["']/g, "");
oldvalue = oldvalue.split(': ')[1];
if (index ==`enter code here`= 0)
{ mergedValue += oldvalue; }
else
{ mergedValue += ", " + oldvalue; }
}
console.log(mergedValue);
}
Comments:
Using event.currentTarget.selectedOptions[index].value you can get multiple selected values of multi-select dropdown. In my case, mergedValue gives me proper multiple selected values.
I have used split and replace to format the string obtained as I wanted it common separated.
I hope this can help someone.

Changing one form value based on onChange of another with javascript

I can't seem to get this function to work out. I'm trying to change the "business" input value of my form based on an amount selected in the "amount" dropdown. What am I missing!!! I've been trying this for an hour.
<script type="text/javascript">
function chPy()
{
var businessvar = "paypals#ramatico.com";
if (document.forms['5'].amount.value > 11){
businessvar = "paypall#ramatico.com"
}
document.forms['5'].business.value = businessvar;
}
</script>
<form name="5">
<select name="amount" OnChange="chPy()">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>
Ok. The next step. I have about 100 of these forms on a page. Instead of creating one for each form, I'd like to have one script that changes based on which form is being changed with "onChange". Each of the forms on the page have values of the same name (but not ID) (they are for paypal). I think it will be ok if I can change the"formname" in the following: "document.forms['formname']" based on a variable populated by something like chPy("formname") etc..... I can't seem to get that to work either.

Removing the form reference would take care of both of your items.
<script type="text/javascript">
function chPy(oSelect)
{
var businessvar = "paypals#ramatico.com";
if (oSelect.form.amount.value > 11){
businessvar = "paypall#ramatico.com"
}
oSelect.form.business.value = businessvar;
}
</script>
<form name="5">
<select name="amount" OnChange="chPy(this)">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>

Problem is that you are using a number as form name.
Add some letters to the name and it will work:
<script type="text/javascript">
function chPy()
{
var businessvar = "paypals#XYZ.com";
if (document.forms['form5'].amount.value > 11){
businessvar = "paypall#XYZ.com"
}
document.forms['form5'].business.value = businessvar;
}
</script>
<form name="form5">
<select name="amount" OnChange="chPy()">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>

HTML:
<form name="form5">
<select name="amount">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input type="text" name="business">
</form>
JavaScript:
var form5 = document.forms['form5'];
form5.amount.onchange = function() {
form5.business.value =
(this.value > 11 ? 'paypall' : 'paypals') + '#ramatico.com';
}
Live demo: http://jsfiddle.net/Fx7zh/
For multiple forms, you can use this JavaScript code:
for (var i = 0, l = document.forms.length; i < l; i++) {
document.forms[i].amount.onchange = function(i) {
this.form.business.value =
(this.value > 11 ? 'paypall' : 'paypals') + '#ramatico.com';
}
}
Live demo: http://jsfiddle.net/Fx7zh/2/