We Keep Coding

javascript variable calling not working on this following code

Those following code isnot working...
Firstly i want these selected value (by sentvalue() and receivevalue())
and then want to use those selected value on another(sent()) function ..
this is html code--
<select class="form-control" id="sents" onchange="sentvalue(this) " >
<option value="0" >-- Select One --</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>
<select class="form-control" id="receives" onchange=" receivevalue(this); counter2(this); " >
<option value="0">-- Select One --</option>
<option value="1" onclick="i();">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>
<input type="number" id="sent2" onkeyup="sent()" class="form-control" name="number">
<p class="form-control" id="receive2" type="number" name="number" disabled>
i want to use receivevalue() and sentvalue() on sent() function but it does not work...
var x,y;
function receivevalue(selv) {
var y = selv.options[selv.selectedIndex].value;}
function sentvalue(selv) {
var x= selv.options[selv.selectedIndex].value;
}
function sent(){
receivevalue();
gett=y;
sentvalue();
putt=x;
if(gett==1 && putt==1){
var userinput=document.getElementById('sent2').value;
var news=(userinput/88).toFixed(2);
document.getElementById('receive2').innerHTML=news;
}
}
i want sentvalue() variable x and receivevalue() variable y on sent() function . please solve my problem..

function sent(){
rselv = document.getElementById('receives');
receivevalue(rselv);
get=y;
sselv = document.getElementById('sents')
sentvalue(sselv);
put=x;
if(get==1 && put==1){
var userinput=document.getElementById('sent2').value;
var news=(userinput/88).toFixed(2);
document.getElementById('receive2').innerHTML=news;
}
}

First of all there is typo in sentevalue. It should be sentvalue.
Then your x, y variables are global. You shouldn't re-declare them inside function.
var x,y;
function receivevalue(selv) {
y = selv.options[selv.selectedIndex].value;
}
function sentvalue(selv) {
x = selv.options[selv.selectedIndex].value;
}
Now since you have values x and y in global variables, sent function can simply be written like this.
function sent(){
if(x==1 && y==1){
var userinput=document.getElementById('sent2').value;
var news=(userinput/88).toFixed(2);
document.getElementById('receive2').innerHTML=news;
}
}
And Correct HTML is:
<select class="form-control" id="sents" onchange="sentvalue(this)">
<option value="0" >-- Select One --</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>
<select class="form-control" id="receives" onchange="receivevalue(this); counter2(this);">
<option value="0">-- Select One --</option>
<option value="1" onclick="i();">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>
<input type="number" id="sent2" onkeyup="sent()" class="form-control" name="number">
<p class="form-control" id="receive2" type="number" name="number" disabled>

Insert in 2 different select only the checked item of checkboxes

I have various checkboxes with the same name:
<input type="checkbox" name="convocati[]" value="A">A
<input type="checkbox" name="convocati[]" value="B">B
<input type="checkbox" name="convocati[]" value="C">C
<input type="checkbox" name="convocati[]" value="D">D
<select name="S1">
<option value=""></option>
</select>
<select name="S2">
<option value=""></option>
</select>
Every change status, I wish that in the two select there are only checked values.
Example:
If I check A and C, the 2 SELECT will be:
<select name="S1">
<option value=""></option>
<option value="A">A</option>
<option value="C">C</option>
</select>
<select name="S2">
<option value=""></option>
<option value="A">A</option>
<option value="C">C</option>
</select>
If I uncheck A and check D (So C remain):
<select name="S1">
<option value=""></option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select name="S2">
<option value=""></option>
<option value="C">C</option>
<option value="D">D</option>
</select>
and so on...

Please check below working snnipet.
$("input[type='checkbox']").on("change",function(){
if($(this). prop("checked") == true){
$("select[name='S1'],select[name='S2']").append('<option value="'+$(this).val()+'">'+$(this).val()+'</option>');
}else{
$("select[name='S1'] option[value='"+$(this).val()+"'],select[name='S2'] option[value='"+$(this).val()+"']").remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="convocati[]" value="A">A
<input type="checkbox" name="convocati[]" value="B">B
<input type="checkbox" name="convocati[]" value="C">C
<input type="checkbox" name="convocati[]" value="D">D
<select name="S1">
<option value=""></option>
</select>
<select name="S2">
<option value=""></option>
</select>

Try this example: https://jsfiddle.net/mccoe8v6/
$(document).ready(function(){
$(".convocati").click(function(){
var thisVal = $(this).val();
debugger;
if ($(this).is(":checked"))
{
$(".convatiSelect").append($("<option>").attr('value', thisVal).html(thisVal));
}
else{
var option = $(".convatiSelect").find("option[value='" + thisVal + "']").remove();
}
});
});
You may want to sort the options after adding them.

Try This -
$('input[type=checkbox][name^=convocati]').change(function() {
$('select').html('');
var option = new Option("", "");
$('select').append($(option));
$('input[type=checkbox][name^=convocati]:checked').each(function() {
var option = new Option($(this).val(), $(this).val());
$('select').append($(option));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="convocati[]" value="A">A
<input type="checkbox" name="convocati[]" value="B">B
<input type="checkbox" name="convocati[]" value="C">C
<input type="checkbox" name="convocati[]" value="D">D
<select name="S1">
<option value=""></option>
</select>
<select name="S2">
<option value=""></option>
</select>

You can use following script to make it work as expected
Please find comments in code below added on each step to get your output
$(function(){
//First bind a Change event for all checkbox
$("inputt[type='checkbox']").change(function(){
//We will create on array of values which will hold fresh values of all checkboxes on each change
var values =[];
// Now we will fill our values array and add values for checked checkboxes
$("inputt[type='checkbox']").filter(":checked").each(function(){
values.push($(this).val());
}
);
// Once we get all values which are checked, we just need to create option template like following
var options= "";
for(i=0; i< values.length;i++)
{
options+="<option>" + values[i] + "</option>";
}
// SET INNER HMTL of target select once with option template
$("select[name=S1]").html(options);
$("select[name=S2]").html(options);
});
});
<input type="checkbox" name="convocati[]" value="A">A
<input type="checkbox" name="convocati[]" value="B">B
<input type="checkbox" name="convocati[]" value="C">C
<input type="checkbox" name="convocati[]" value="D">D
<select name="S1">
<option value=""></option>
</select>
<select name="S2">
<option value=""></option>
</select>
Please check the working Fiddle

To achieve this you can use map() to build an array from the checked checkboxes which contains the required HTML and then set it as the html() of the select() elements. Try this:
$(':checkbox').change(function() {
var html = '<option value=""></option>';
html += $(':checkbox:checked').map(function() {
return '<option value="' + this.value + '">' + this.value + '</option>';
}).get().join('');
$('select').html(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="convocati[]" value="A">A
<input type="checkbox" name="convocati[]" value="B">B
<input type="checkbox" name="convocati[]" value="C">C
<input type="checkbox" name="convocati[]" value="D">D
<select name="S1">
<option value=""></option>
</select>
<select name="S2">
<option value=""></option>
</select>
Note that this is using generic selectors, such as :checkbox and select. In a production environment I'd strongly suggest you give your elements some classes which you can use to identify them more specifically.

javascript show or hide when option is changed

so i am trying to show or hide with javascript when option value K is pressed. When K is pressed div class "nobr" will appear. when option value K is not pressed "nobr" is hidden.
<select name="item[1502][additional_data] scustomg" style="width: 100%" onchange="setCustomPrice(1502, $(this))" id="select-custom-group">
<option value="1" data-price="300.0000">1 - €300.00</option>
<option value="2" data-price="210.0000">2 - €210.00</option>
<option value="4" data-price="189.0000">4 - €189.00</option>
<option value="6" data-price="210.0000">6 - €210.00</option>
<option value="8" data-price="210.0000">8 - €210.00</option>
<option value="9" data-price="0.0000">9 - €0.00</option>
<option value="K" data-price="0.0000">K - €0.00</option>
</select>
<div class="nobr">
<input type="checkbox" id="item_use_custom_price_1502" onclick="order.toggleCustomPrice(this, 'item_custom_price_1502', 'item_tier_block_1502');">
<label class="normal" for="item_use_custom_price_1502">Custom Price*</label>
</div>
I can get Javascript work and i See pop up box. but can get this when K is pressed.
<script>
var card = document.getElementById("select-custom-group");
if(card.selectedValue == "8") {
alert('select one answer');
}
else {
var selectedText = card.options[card.selectedIndex].text;
alert("Test");
}
</script>

with javascript you can add onchange function having the selected option as parameter, then check if the value is your required value, if it is the case then hide the div else show the div
<select name="item[1502][additional_data] scustomg" style="width: 100%" onchange="setCustomPrice('price_info_1', this)" id="select-custom-group">
<option value="1" data-price="">Pick a Price</option>
<option value="1" data-price="300.0000">1 - €300.00</option>
<option value="2" data-price="210.0000">2 - €210.00</option>
<option value="4" data-price="189.0000">4 - €189.00</option>
<option value="6" data-price="210.0000">6 - €210.00</option>
<option value="8" data-price="210.0000">8 - €210.00</option>
<option value="9" data-price="0.0000">9 - €0.00</option>
<option value="K" data-price="0.0000">K - €0.00</option>
</select>
<div class="nobr" id="price_info_1" style="display:none">
<input type="checkbox" onclick="">
<label class="normal" for="item_use_custom_price_1502">Custom Price*</label>
</div>
<br/>
<select name="item[1502][additional_data] scustomg" style="width: 100%" onchange="setCustomPrice('price_info_2', this)" id="select-custom-group">
<option value="1" data-price="">Pick a Price</option>
<option value="1" data-price="300.0000">1 - €300.00</option>
<option value="2" data-price="210.0000">2 - €210.00</option>
<option value="4" data-price="189.0000">4 - €189.00</option>
<option value="6" data-price="210.0000">6 - €210.00</option>
<option value="8" data-price="210.0000">8 - €210.00</option>
<option value="9" data-price="0.0000">9 - €0.00</option>
<option value="K" data-price="0.0000">K - €0.00</option>
</select>
<div class="nobr" id="price_info_2" style="display:none">
<input type="checkbox" onclick="">
<label class="normal" for="item_use_custom_price_1502">Custom Price*</label>
</div>
<script>
function setCustomPrice(div_to_toggle,selected){
if(selected.value=="K") document.getElementById(div_to_toggle).style.display = 'none';
else document.getElementById(div_to_toggle).style.display = 'block';
}
</script>

Obviously you need to listen to the change of the dropdown.
with jQuery, you can do
$('#select-custom-group').change(function () {
$('.nobr ').toggle($(this).val() === 'K');
});

How can I rewrite this javascript code, so that it will refer to every optionbox?

How can I rewrite this javascript code, so that it will refer to every optionbox (not only the first one)?
<html>
<div id="form123">
<select id="day" name="day">
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
<select id="day" name="day">
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
<select id="day" name="day">
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
<script type="text/javascript">
var selectmenu=document.getElementById("day")
selectmenu.onchange=function(){
var chosenoption=this.options[this.selectedIndex]
if (chosenoption.value=="other"){
var entered_date = window.prompt("Enter the date","");
document.getElementById('other').value = entered_date;
document.getElementById('other').text = entered_date;
}
}
</script>
</div>
</html>
So far, dialogbox shows up only when I choose the first optionbox.
I want to dialogbox show up even if I choose another optionbox.
In the future, optionboxes will be added dynamically.

ID must be unique. I suggest to use a function on every select on change event and pass this as parameter like:
function changeDate(obj) {
var chosenoption = obj.options[obj.selectedIndex];
if (chosenoption.value == "other") {
var winProVal = window.prompt("Enter the date", "");
if (winProVal != null) {
obj.options[obj.value].value = obj.options[obj.value].text = winProVal;
}
}
}
<select class="day" name="day" onchange='changeDate(this);'>
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
<select class="day" name="day" onchange='changeDate(this);'>
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
<select class="day" name="day" onchange='changeDate(this);'>
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
this refers to the element. Also change ID with class.

IDs are supposed to be unique (so are names). You may define class of elements and change your js accordingly..
<html>
<div id="form123">
<select id="day" name="day" class="day">
<option value="abc" name="abc1" id="abc1">abc</option>
<option value="other" name="other1" id="other1">other...</option>
</select>
<select id="day" name="day" class="day">
<option value="abc" name="abc2" id="abc2">abc</option>
<option value="other" name="other2" id="other2">other...</option>
</select>
<select id="day" name="day" class="day">
<option value="abc" name="abc3" id="abc3">abc</option>
<option value="other" name="other3" id="other3">other...</option>
</select>
<script type="text/javascript">
var selectmenu=document.getElementsByClassName("day");
for (var i = 0; i < selectmenu.length; ++i) {
selectmenu[i].onchange=function(){
var chosenoption=this.options[this.selectedIndex]
if (chosenoption.value=="other"){
var entered_date = window.prompt("Enter the date","");
this.options[1].value = entered_date;
this.options[1].text = entered_date;
}
}
}
</script>
</div>
</html>

onchange select box

Say we have 2 different select boxes with the same number of options:
<select id="box1">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select id="box2">
<option value="3" >3</option>
<option value="4" >4</option>
</select>
Is it possible when we select the first box to select the same option number in the second box automatically? Without jQuery if possible.
UPDATE: the values of 2 boxes are different! When we select the first value of box1 the box 2's value will automatically would be 3! and so on...

Yes. Add an onChange property to the first select, then use it to call a javascript function you have written elsewhere.
<select id="box1" onChange="changeBox2(this.selectedIndex);">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select id="box2">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
W3 Schools JavaScript Events
Example on Accessing SELECT properties in JS

The following JS would work:
document.getElementById("box1").onchange = function(){
document.getElementById("box2").value = this.value;
};
Not the most elegant code I've written but gets you what you need. Fiddle: http://jsfiddle.net/XZRKS/

A javascript snippet code:
var box1=document.getElementById("box1");
box1.onchange=function (){
document.getElementById("box2").value=box1.value;
}

Hope below is what you want...
<html>
<body>
<select id="box1" onChange="box2.value=box1.value">
<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>
<select id="box2" onChange="box1.value=box2.value">
<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>
</body>
</html>

var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.addEventListener("change", function(e){
var val = parseInt(this.value);
box2.querySelector("option:nth-child("+val+")").selected = true;
}, false);
This will only work in Gecko/Mozilla only
For IE use onChange instead of change and attachEvent instead of addEventListener, for more info visit
http://msdn.microsoft.com/en-us/library/ie/ms536343%28v=vs.85%29.aspx
for information on querySelector see this link
https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

$("#box1").on('change',function(){
document.getElementById("box2").value = this.value;
console.log($("#box2").val());
});
$("#box2").on('change',function(){
document.getElementById("box1").value = this.value;
});
<select id="box1">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select id="box2">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

yes it's simple in javascript. just one line.
function ch(){
document.getElementById("box2").value = document.getElementById("box1").value ;
}
you can call ch() on onchange event of box2