We Keep Coding

how can i change the value of checkbox when i select a value from select input with js

i want to learn that when i select a value from select input how can i change the value of checkbox.
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>

Why would you want to?
Anyway:
window.addEventListener("load", function() { // on page load
document.getElementById("myselectbox1").addEventListener("change", function() {
document.getElementById("mycheckbox1").value = this.value;
});
document.getElementById("mycheckbox1").addEventListener("change", function() {
console.log(this.value);
});
});
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>

function updateCheckbox() {
var val = document.getElementById("myselectbox1").value;
document.getElementById("mycheckbox1").checked = true;
document.getElementById("mycheckbox1").value = val;
}
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select onChange="updateCheckbox()" name="cat-1" id="myselectbox1">
<option selected disabled>Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>

may i ask one more question
i changed my checkbox value if i have one more select input which id cat-2
how can i change name of cat-2 to chosen value of cat-1
For example;
if i choose value1 ( its value=100)
i want to change name of cat-2 to cat-100
```
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
<select name="cat-2" id="myselectbox2">
<option value="">Choose</option>
<option value="300">Value3</option>
<option value="400">Value4</option>
</select>
```

Adding Comma To Javascript Output

I'm trying to run a function that will add commas to the results of a form that multiplies the values of two drop down boxes.
The function I have works on an html element such as p class="points" but it is not working on the output generated by id="results2"
Any idea what I'm doing wrong?
<form name="myForm" id="myForm">
<label>Select Amount</label>
<select id="box1" type="select" oninput="calculate()" />
<option value="choose" selected>Choose</option>
<option value="15000">$15,000</option>
<option value="20000">$20,000</option>
<option value="25000">$25,000</option>
<option value="30000">$30,000</option>
<option value="35000">$35,000</option>
</select>
<label>Select Type</label>
<select id="box2" type="select" oninput="calculate()" />
<option value="x" selected>Choose</option>
<option value=".21">1</option>
<option value=".40">2</option>
</select>
<input class="button" type="submit" value="Submit" id="multiply">
<p>
<strong>here are the results:</strong>
</p>
<h3>
<strong>$<span id="result2"></span></strong> a week
</h3>
</form>
<script>
$(document).ready(function(){
$('#multiply').click(function(event){
event.preventDefault();
var n1=$('#box1').val();
var n2=$('#box2').val();
var result=Math.round(n1*n2*25);
$('#resultholder4').fadeIn(200);
$('#number1').append(n1);
$('#number2').append(n2);
$('#result2').text(result);
});
});
</script>
<script type="text/javascript">
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
$('.points').each(function() {
var v_pound = $(this).html();
v_pound = numberWithCommas(v_pound);
$(this).html(v_pound)
})
</script>

You are just not calling numberWithCommas() on your result. Here is your code with one change (and I had to add the calculate function that is referenced by the select's oninput).
$(document).ready(function() {
$('#multiply').click(function(event) {
event.preventDefault();
var n1=$('#box1').val();
var n2=$('#box2').val();
var result=Math.round(n1*n2*25);
$('#resultholder4').fadeIn(200);
$('#number1').append(n1);
$('#number2').append(n2);
// added call to numberWithCommas, line had been:
//$('#result2').text(result);
// changed to:
$('#result2').text(numberWithCommas(result)); // <--------
});
});
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
$('.points').each(function() {
var v_pound = $(this).html();
v_pound = numberWithCommas(v_pound);
$(this).html(v_pound)
});
function calculate() {
// ?
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm">
<label>Select Amount</label>
<select id="box1" type="select" oninput="calculate()" />
<option value="choose" selected>Choose</option>
<option value="15000">$15,000</option>
<option value="20000">$20,000</option>
<option value="25000">$25,000</option>
<option value="30000">$30,000</option>
<option value="35000">$35,000</option>
</select>
<label>Select Type</label>
<select id="box2" type="select" oninput="calculate()" />
<option value="x" selected>Choose</option>
<option value=".21">1</option>
<option value=".40">2</option>
</select>
<input class="button" type="submit" value="Submit" id="multiply">
<p>
<strong>here are the results:</strong>
</p>
<h3>
<strong>$<span id="result2"></span></strong> a week
</h3>
</form>

Here is a quick dirty method:
function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
}
should add that this was provided by Peter Mortensen:
How to print a number with commas as thousands separators in JavaScript
here is a demo:
https://jsfiddle.net/keinchy/dx7qg4nk/1/
-cheers

Your event handler for #multiply never actually calls numberWithCommas. Replace
$('#result2').text(result);
with
$('#result2').text(numberWithCommas(result));
and it should work.

Assign value of radio button based on dynamic number of user selected values

After a user makes his/her selections of the five select dropdowns, I want to set the value of a radio button from field "radio_btn_name" based on up to 3 of the users selections. Think of each object as a "rule". If a combination of selections matches that rule, give "radio_btn_x" the "output" value.
In Part 1 of my question I achieved my desired result when the number of "selected_option_names_" is equal to the number of select dropdowns. However, I need to be able to check for a dynamic number of dropdowns against only up to 3 user selections.
I imagine the solution will be drastically different from part 1, as a result I feel a new question is warranted.
JSFiddle
$(document).ready(function() {
// A successful solution would render all these rules true, radio_button_4,
// radio_button_8 and radio_button_1 would get their respective new values
var objs = [{
selected_option_name_1: "select_1",
selected_option_name_2: "",
selected_option_name_3: "",
selected_option_value_1: "1-1",
selected_option_value_2: "",
selected_option_value_3: "",
radio_btn_name: "radio_button_4",
output: "5000-R"
}, {
selected_option_name_1: "select_1",
selected_option_name_2: "select_2",
selected_option_name_3: "select_5",
selected_option_value_1: "1-1",
selected_option_value_2: "2-2",
selected_option_value_3: "5-2",
output: "10000-R",
radio_btn_name: "radio_button_8"
}, {
selected_option_name_1: "select_4",
selected_option_name_2: "",
selected_option_name_3: "",
selected_option_value_1: "4-1",
selected_option_value_2: "",
selected_option_value_3: "",
output: "15000-R",
radio_btn_name: "radio_button_1"
}];
// Solution for part 1. Will only work if number of dropdowns == "selected_option_name_"
$("#submit").on("click", function() {
$("#wrapper").find("input[type='radio']").each(function(i, o) {
var btn = $(this);
var btn_name = $(this).attr("name");
$.each(objs, function(index, rule) {
if (btn_name == rule.radio_btn_name) {
if(rule.selected_option_value_1 == $('#select_1').val()
&& rule.selected_option_value_2 == $('#select_2').val()
&& rule.selected_option_value_3 == $('#select_3').val()) {
btn.val(rule.output);
console.log(rule.output);
}
}
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div>
<select class="group_1" name="select_1">
<option value=""></option>
<option value="1-1">Dropdown 1-1</option>
<option value="1-2">Dropdown 1-2</option>
<option value="1-3">Dropdown 1-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_1" value="r()">
<input type="radio" name="radio_button_2" value="o()">
<input type="radio" name="radio_button_3" value="n()">
</div>
<div>
<select class="group_1" name="select_2">
<option value=""></option>
<option value="2-1">Dropdown 2-1</option>
<option value="2-2">Dropdown 2-2</option>
<option value="2-3">Dropdown 2-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_4" value="r()">
<input type="radio" name="radio_button_5" value="o()">
<input type="radio" name="radio_button_6" value="n()">
</div>
<div>
<select class="group_1" name="select_3">
<option value=""></option>
<option value="3-1">Dropdown 3-1</option>
<option value="3-2">Dropdown 3-2</option>
<option value="3-3">Dropdown 3-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_7" value="r()">
<input type="radio" name="radio_button_8" value="o()">
<input type="radio" name="radio_button_9" value="n()">
</div>
<br>
<div>
<select class="group_1" name="select_4">
<option value=""></option>
<option value="4-1">Dropdown 4-1</option>
<option value="4-2">Dropdown 4-2</option>
<option value="4-3">Dropdown 4-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_10" value="r()">
<input type="radio" name="radio_button_11" value="o()">
<input type="radio" name="radio_button_12" value="n()">
</div>
<br>
<div>
<select class="group_1" name="select_5">
<option value=""></option>
<option value="5-1">Dropdown 5-1</option>
<option value="5-2">Dropdown 5-2</option>
<option value="5-3">Dropdown 5-3</option>
</select>
</div>
<br>
<button id="submit">Submit</button>
</div>

It turns out the solution wasn't as far off as I thought. I just needed to add an input type hidden with name equal to empty string to account for any empty strings in my objects.
I also updated my jQuery to find the value of names vs id's from part one of my post.
Updated fiddle
$(document).ready(function() {
$("#submit").on("click", function() {
$("#wrapper").find("input[type='radio']").each(function(i, o) {
var btn = $(this);
var btn_name = $(this).attr("name");
$.each(objs, function(index, rule) {
if (btn_name == rule.radio_btn_name) {
if(rule.selected_option_value_1 == $('[name="'+rule.selected_option_name_1 + '"]').val()
&& rule.selected_option_value_2 == $('[name="'+rule.selected_option_name_2 + '"]').val()
&& rule.selected_option_value_3 == $('[name="'+rule.selected_option_name_3 + '"]').val()) {
btn.val(rule.output);
console.log(rule.output);
}
}
});
});
});
});
<div>
<input type="hidden" name="" value="">
<button id="submit">Submit</button>
</div>

if choose this option and this option change to 3 option

I have a table rows (this is not real, this is only example for simple it):
id, cat, company, device.
for example some recordes:
1, computer, samsung, ativ
2, computer, lg, blabla
3, phones, samsung, s6
4, phones, sony, z5
I want that if I choose category (computer for example) this will open only the company that they have computer, In addition, when the user select the second select, this will give the option that remain.
I found here the answer for the first select but for the second I did find.
I dont want to do "if ..., if ..." because this is need to be from the database and automatic.
This is the example that i did:
http://jsfiddle.net/e464etcq/
HTML:
<select class="form-control" id="type" name="type">
<option value="">choose</option>
<option value="1">phones</option>
<option value="2">computers</option>
</select>
<select class="form-control" id="reason" name="reason">
<option value="">choose</option>
<option value="1" class="1">samsung</option>
<option value="2" class="1">lg</option>
<option value="3" class="2">samsung</option>
<option value="3" class="2">sony</option>
</select>
<input type="text" id="billing">
JQUERY:
jQuery(function($) {
var backupShipStates = $("#reason").html();
$("#type").change(function() {
var country = $(this).val();
var options = $(backupShipStates).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == country; });
$("#reason").html(options);
});
});
do you have any suggition how to do it?
Thank you,
Omry.

If I've understand you, you could add a new change event to handle when the second select is changed.
So your code would be:
HTML
<select class="form-control" id="type" name="type">
<option value="">בחר</option>
<option value="1">phones</option>
<option value="2">computers</option>
</select>
<select class="form-control" id="reason" name="reason">
<option value="">choose</option>
<option value="1" class="1">samsung</option>
<option value="2" class="1">lg</option>
<option value="3" class="2">samsung</option>
<option value="3" class="2">sony</option>
</select>
<select class="form-control" id="third" name="third">
<option value="">choose</option>
<option value="1" class="1">Option3.1</option>
<option value="2" class="1">Option3.2</option>
<option value="3" class="2">Option3.3</option>
<option value="3" class="2">Option3.4</option>
</select>
<input type="text" id="billing">
jQuery
jQuery(function($) {
var backupShipStates = $("#reason").html();
var backupOption3 = $("#third").html();
$("#type").change(function() {
var country = $(this).val();
var options = $(backupShipStates).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == country; });
$("#reason").html(options);
});
$("#reason").change(function(){
var reason = $(this).val();
var options = $(backupOption3).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == reason; });
$("#third").html(options);
});
});
Here is not necessary PHP.

Form Validation with Javascript (Validate input text by selected option)

I have this form:
<form accept-charset="UTF-8" action="type.php" id="form" method="post">
<label id="type" for="type" class="">Type</label>
<select class="" id="Type" name="type">
<option id="a" value="A">Type A</option>
<option id="b" value="B">Type B</option>
<option id="c" value="C">Type C</option>
<option id="d" value="C">Type D</option>
<option id="e" value="C">Type E</option>
</select>
<label for="type_number" class="inner_text">Type Number</label>
<input name="type_number" type="text" class="false" id="type_number">
<input type="submit" value="Confirm">
</form>
What I need to do is to validate the Type Number. Type Number must start with a number that I choose. For Example:
Type A - 1234
Type B - 2234
Type C - 3234
Type D - 4234
Type E - 5234
So Type A must start with 1, Type B with 2 and so on. I need to check only the first number.
I must to mention that I have a similar question here: Redirect to 3 pages depending of selected option with validation , it's not same thing, but is similar, also I don't get a good answer there to figure this out.
I apreciate any and all comments, thank you.
P.S. Please excuse my English.

Check below Code this will help you.
Page Code
<form accept-charset="UTF-8" action="verify.php" id="form" method="post">
<label id="type" for="type" class="">Type</label>
<select class="" id="Type" name="type">
<option id="a" value="1">Type A</option>
<option id="b" value="2">Type B</option>
<option id="c" value="3">Type C</option>
<option id="d" value="4">Type D</option>
<option id="e" value="5">Type E</option>
</select>
<label for="type_number" class="inner_text">Type Number</label>
<input name="type_number" type="text" class="false" id="type_number">
<input type="button" id="Confirm" value="Confirm" >
</form>
Script
document.getElementById('Confirm').onclick = function () {
var letter =document.getElementById("type_number").value.match(document.getElementById("Type").value);
if (letter !== null) {
letter = letter[0].toLowerCase();
this.value = letter + this.value.substring(1);
}
else {
alert('Number is not correct!');
}
}

You can do something like this.
var startNumbers = {'A': 1, 'B': 2, 'C': 3, 'D': 4, 'E': 5};
function validate() {
// get type
var type = document.getElementById('type').value;
// get number
var number = document.getElementById('number').value;
// get first digit
while (number > 0) {
nr = number;
number = Math.floor(number / 10);
}
// validate
if (nr != startNumbers[type])
return false;
else
return true;
}
Call validate when you need it (onkeyup, on submit, whatever).
Note... this script was directly written as an answer so it may need a few tweaks.