We Keep Coding

function needs to wait until select tag's value selected

I have a function in my main.js needs to wait until some options selected on select tag. According to that, I will update the element. I tried to do it with addlistenerevent, but I could not succeed it. Any suggestions? Am I doing wrong?
var test = function() {
const langOptions = {
dummy: 0,
one: 5,
two: 8,
three: 2
};
var unit_1 = 1;
var selectSource ="";
var selectTarget = "";
var section = document.getElementById("unit");
var span_1 = '<span>Unit : </span>';
section.insertAdjacentHTML("beforeend", span_1);
var span_2 = '<span id= "span_2">' + unit_1 +'</span>';
section.insertAdjacentHTML("beforeend", span_2);
document.getElementById('source-lang').addEventListener('change', function() {
selectSource = $('source-lang').find('select').val();
for (const key of Object.keys(langOptions)) {
if (key === selectSource || key === selectTarget) { unitPrice *= langOptions[key];}
}
var element = document.getElementById('span_2').innerHTML = unit_1;
});
};
test();
<div id="langs">
<section class="container">
<div class="dropdown">
<select id="source-lang" style="background-color:#5e3080" name="source-lang">
<option value="">Select</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div class="dropdown">
<select id ="target-lang" style="background-color:#5e3080" name="target-lang">
<option value="">Select</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div class="dropdown">
<div id="unit"></div>
</div>
</section>
</div>

I think that what you are looking for, is the onchange Event
function selectOne() {
const id = 'selectOne';
console.log(id, document.getElementById(id).value);
}
document.getElementById('selectTwo').addEventListener("change", function() {
console.log(this.id, this.value)
});
<p>Select One</p>
<select id="selectOne" type="text" onchange="selectOne()">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<!-- Or using addEventListener -->
<p>Select Two</p>
<select id="selectTwo" type="text">
<option value=a>a</option>
<option value=b>b</option>
<option value=c>c</option>
</select>

Use onchange Event
<select id="source-lang" style="background-color:#5e3080" name="source-lang" onchange="test()">
<select id ="target-lang" style="background-color:#5e3080" name="target-lang" onchange="test()">

How to keep once changed data value on select options?

$('.sela').change(function(){
var obj = $('.sela:visible');
var uname = obj.find(':selected').data('x');
$('#inptest').val(uname);
})
$('#btn').click(function(){
$('.sela:visible').find(':selected').attr('data-x', 999)
var a = $('.sela:visible').find(':selected').attr('data-x')
$('#inptest').val(a);
});
#btn{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='sela'>
<option value='lorem1' data-x='left'>ADMIN</option>
<option value='lorem2' data-x='right'>AUTHS</option>
</select>
<br><br>
<select class='sela'>
<option value='lorem3' data-x='up'>SKY</option>
<option value='lorem4' data-x='down'>EARTH</option>
</select>
<br><br>
<input type='text' id='inptest'value='323'>
<br><br>
<div id='btn'>BUTTON</div>
Change first sela to AUTHS.
inptest becomes right
Click on btn - sela selected option data-x is 999 and inptest is 999
Now change sela back to ADMIN and again to AUTH.
I'm expecting it to keep 999 but it becomes right.
How to keep once changed data value on sela options?

Be consistent,
either use .attr('data-x')/.attr('data-x', newValue) or use .data('x')/.data('x',newValue)
So
$('.sela').change(function() {
var obj = $('.sela:visible');
var uname = obj.find(':selected').data('x');
$('#inptest').val(uname);
})
$('#btn').click(function() {
$('.sela:visible').find(':selected').data('x', 999)
var a = $('.sela:visible').find(':selected').data('x')
$('#inptest').val(a);
});
#btn {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='sela'>
<option value='lorem1' data-x='left'>ADMIN</option>
<option value='lorem2' data-x='right'>AUTHS</option>
</select>
<br><br>
<select class='sela'>
<option value='lorem3' data-x='up'>SKY</option>
<option value='lorem4' data-x='down'>EARTH</option>
</select>
<br><br>
<input type='text' id='inptest' value='323'>
<br><br>
<div id='btn'>BUTTON</div>
Or
$('.sela').change(function(){
var obj = $('.sela:visible');
var uname = obj.find(':selected').attr('data-x');
$('#inptest').val(uname);
})
$('#btn').click(function(){
$('.sela:visible').find(':selected').attr('data-x', 999)
var a = $('.sela:visible').find(':selected').attr('data-x')
$('#inptest').val(a);
});
#btn{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='sela'>
<option value='lorem1' data-x='left'>ADMIN</option>
<option value='lorem2' data-x='right'>AUTHS</option>
</select>
<br><br>
<select class='sela'>
<option value='lorem3' data-x='up'>SKY</option>
<option value='lorem4' data-x='down'>EARTH</option>
</select>
<br><br>
<input type='text' id='inptest'value='323'>
<br><br>
<div id='btn'>BUTTON</div>

jQuery How To Add Form Validation Using 5-step Sliding Form

I'm a newbie and find very difficult to read and understand complex javascript from other's work.
I would like to ask some help in making a simplified jquery for me to use rather than using the complex code which I don't really understand.
First: this is a 5 step form consist of gender, first name, dob, email and password. There are validations in every steps.
See the complex code:
<script>
$(document).ready(function () {
var Fist = {
config: {
stepsSelector: $(".steps"),
nextSelector: $(".myButton"),
errorSelector: $(".error"),
indSelector: $(".steps-ind"),
form: "",
cur_step: 1,
max_step: 1,
offset: 278,
errorString: "This field is required",
clickEvent: "touchstart"
},
run: function(e) {
this.config.form = e;
var t = this;
var n = $(".regform").width();
t.config.offset = n;
if (typeof document.body.ontouchstart === "undefined") {
t.config.clickEvent = "click"
}
t.config.indSelector.find(".step-ind" + t.config.cur_step).addClass("step-ind-active");
t.config.nextSelector.on(t.config.clickEvent, function() {
t.process()
});
t.config.form.find("input").on("keypress", function(e) {
var n = e.keyCode ? e.keyCode : e.which;
if (n === 13) {
t.process()
}
});
t.config.indSelector.find("div").on(t.config.clickEvent, function() {
t.gotoStep($(this))
})
},
indicateStep: function(e) {
var t = this;
t.config.indSelector.find("div").removeClass("step-ind-active");
t.config.indSelector.find(".step-ind" + e).addClass("step-ind-active");
setTimeout(function() { $('.step'+e+' input, .step'+e+' select').focus() }, 500);
},
animateStep: function(e) {
var t = this;
t.config.stepsSelector.css({
transform: "translateX(-" + (e - 1) * t.config.offset + "px)"
}, function() {
t.config.form.find(".step" + e).find("input").focus()
})
},
process: function() {
var e = this;
var t = e.config.form.find(".step" + e.config.cur_step).find("input,select");
var n = false;
t.each(function() {
if (!e.validate($(this))) {
n = true
}
});
if (!n) {
e.config.cur_step++;
if (e.config.cur_step === 6) {
e.config.form.submit()
} else {
e.config.max_step = e.config.cur_step;
e.animateStep(e.config.cur_step);
e.indicateStep(e.config.cur_step);
if (e.config.cur_step === 5) {
e.config.nextSelector.val("Submit")
}
}
}
},
gotoStep: function(e) {
var t = e.text();
var n = this;
if (t < n.config.max_step) {
n.animateStep(t);
n.indicateStep(t);
n.config.cur_step = t;
if (t === 5) {
n.config.nextSelector.val("Submit")
} else {
n.config.nextSelector.val("Next")
}
} else {
n.process()
}
},
validate: function(e) {
var t = this;
t.config.errorSelector.hide();
e.removeClass("error-item");
var n = false;
if ($.trim(e.val()) === "") {
n = true;
t.config.errorString = "This field is required"
}
if (e.attr("name") === "email" && !t.validateEmail(e.val())) {
n = true;
t.config.errorString = "Invalid email address"
}
if (e.attr("name") === "firstname" && !t.validateName(e.val())) {
n = true;
t.config.errorString = "Invalid name"
}
if (n) {
t.config.errorSelector.empty().append(t.config.errorString).fadeIn("fast");
e.addClass("error-item");
return false
}
return true
},
validateEmail: function(e) {
var t = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return t.test(e)
},
validateInt: function(e) {
var t = /^\d{1,}$/;
return t.test(e)
},
validateName: function(e) {
var t = /^\w+(\s)?\w+(\s)?(\w+)?$/;
return t.test(e)
}
}
Fist.run($("#regform"));
});
Here is my HTML:
<div class="regform">
<div class="form-wrapper">
<form id="regform" method="post" action="http://www.test.com/signup">
<div class="steps step1">
<label>Your Gender?</label>
<div name="gender">
<div class="man-btn color" value="1">
<span>Man</span>
<div class="man" >
<i class="fa fa-male" aria-hidden="true"></i>
</div>
</div>
<div class="woman-btn" value="2">
<span>Woman</span>
<div class="woman">
<i class="fa fa-female" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="steps step2">
<label>First Name:</label>
<input type="text" name="firstname">
</div>
<div class="steps step3">
<label>What is Your Date of Birth?</label>
<select name="dobday" id="dobday" class="required">
<option value="">Day</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="dobmonth" id="dobmonth" class="required">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="dobyear" id="dobyear" class="required">
<option value="">Year</option>
<?php for($x=date("Y") - 18; $x >= 1918; $x--): ?>
<option value="<?php echo $x; ?>"><?php echo $x; ?></option>
<?php endfor; ?>
</select>
</div>
<div class="steps step4">
<label>Email:</label>
<input type="email" pattern="[^ #]*#[^ #]*" name="email">
</div>
<div class="steps step5">
<label>Password:</label>
<input type="password" name="password">
</div>
<div class="error">This field is required</div>
</form>
</div>
<div class="submit">
<input type="button" class="myButton" value="Next">
</div>
<div class="steps-ind">
<div class="step-ind1">1</div>
<div class="step-ind2">2</div>
<div class="step-ind3">3</div>
<div class="step-ind4">4</div>
<div class="step-ind5">5</div>
</div>
Please help me. Thank you so much for your help!

It's simple enough to add a new button! You could either change the gender to a select dropdown or you could add a new div like this:
<div class="bro-btn" value="3">
<span>Bro</span>
<div class="bro">
<i class="fa fa-bro" aria-hidden="true"></i>
</div>
</div>
Few things you have to note: The fa fa-bro is a reference to a class in your CSS that adds an icon corresponding to whatever gender is selected. If you were to add new buttons like above, you would have to find an icon that matches from Font Awesome.

Using IF statements in a form to narrow choices down

I basically want to limit my choices in my form so that when a car is chosen as well as the transmission only certain colors may appear. I have created the form. The problem is creating the code in the Javascript file. I don't know how to make it so that if Car 1 is chosen as well as Automatic then for example only Black and blue appear as options. Im relatively new to coding and any help would be appreciated.
Thanks
HTML
<script src="Script\configurator.js" type="text/javascript"></script>
<form name="CarConfigurator">
<select name="Car_make" onchange="Transmission(this.value);">
<option value=" " selected="selected">None</option>
<option value="1">Audi RS6</option>
<option value="2">BMW M4</option>
<option value="3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select name="A_M" >
<option value="" selected="selected">None</option>
<option value="1" selected="selected">Automatic</option>
<option value="2" selected="selected">Manual</option>
</select>
<br>
<br>
<select name="Color">
<option value="" selected="selected">None</option>
<option value="1">Black</option>
<option value="2">Blue</option>
<option value="3">Red</option>
<option value="4">White</option>
<option value="5">Green</option>
</select>
</form>
Javascript
function Transmission(Car) {
var make = document.CarConfigurator.A_M;
make.options.length = 0;
if (Car == "1") {
make.options[make.options.length] = new Option('Automatic','1');
make.options[make.options.length] = new Option ('Manual','2');
}
if (Car =="2" ) {
make.options[make.options.length] = new Option('Manual','2');
}
if (Car == "3") {
make.options[make.options.length] = new Option('Automatic','3');
}
}

Is this what you want:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form name="CarConfigurator">
<select name="Car_make" onchange="Transmission();">
<option value=" " selected="selected">None</option>
<option value="1">Audi RS6</option>
<option value="2">BMW M4</option>
<option value="3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select name="A_M" onchange="Transmission();">
<option value="" selected="selected">None</option>
<option value="1" selected="selected">Automatic</option>
<option value="2" selected="selected">Manual</option>
</select>
<br>
<br>
<select name="Color" onchange="ChoicesMade();">
<option value="" selected="selected">None</option>
<option value="1">Black</option>
<option value="2">Blue</option>
<option value="3">Red</option>
<option value="4">White</option>
<option value="5">Green</option>
</select>
<div id="imageContainer" style="display: none;"><img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" /></div>
</form>
<script type="text/javascript">
function Transmission() {
var Car = document.CarConfigurator.Car_make.value;
var make = document.CarConfigurator.A_M.value;
var color = document.CarConfigurator.Color;
color.options.length = 0;
if (Car == "1" && make == '1') {
color.options.add(new Option('Black', '1'));
color.options.add(new Option('Blue', '2'));
}
else if(Car == '2' && make == '1')
{
color.options.add(new Option('Red', '3'));
color.options.add(new Option('White', '4'));
}
ChoicesMade();
}
function ChoicesMade()
{
var form = document.CarConfigurator;
var car = form.Car_make.value;
var make = form.A_M.value;
var color = form.Color.value;
if(car != ' ' && make != '' && color != '')
{
var imageContainer = document.querySelector('#imageContainer');
imageContainer.style.display = 'block';
}
}
</script>
</body>
</html>

You can use objects in JavaScript and then loop through each array in object to change options. For example
var cars = {
"Audi_RS6":{
"name":"Audi RS6",
"Automatic":["color_1","color_2"],
"Manual":["color_1","color_2"]
},
"BMW_M4":{
"name":"BMW M4",
"Manual":["color_1","color_2"]
},
"Mercedes_C63_AMG":{
"name":"Mercedes C63 AMG",
"Automatic":["color_1","color_2"]
}
};
values can be accessed like this
var result = cars.Audi_RS6.Manual[1];

Here you go Duncher, this code does exactly what you want
<!DOCTYPE html>
<html><head>
<title></title>
</head>
<body>
<form name="CarConfigurator">
<select id="car" name="Car_make">
<option value="" selected="selected">Which car?</option>
<option value="car1">Audi RS6</option>
<option value="car2">BMW M4</option>
<option value="car3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select id="trans" name="A_M">
<option value="" selected="selected">What trans?</option>
<option value="auto">Automatic</option>
<option value="man">Manual</option>
</select>
<br>
<br>
<select id="color" name="Color">
<option value="" selected="selected">What Color?</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="green">Green</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="configurator.js"></script>
</body>
</html>
And the JavaScript:
$("#car").change(function () {
transmission();
});
$("#trans").change(function () {
transmission();
});
function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
$("option[value$='red']").hide();
$("option[value$='white']").hide();
$("option[value$='green']").hide();
} else {
$("option[value$='red']").show();
$("option[value$='white']").show();
$("option[value$='green']").show();
}
}
You will have to make a few tweaks to get your other car & trans combinations working how you want them to (i.e. displaying only the colors you want) by adding more if else statements in the transmission() method but this should get you on your way. This is using jQuery by the way.
Screen shot

Product Filtering PHP

Hello guys I'm doing a product filtering and I don't know how could I achieve it.
I used Javascript by getting the value of the selected values then alert it but the problem is that how could I display it also how can I remove the categories selected by clicking the x button. Here the sample page. Thank you very much for your help.
Here is my script code:
<script>
jQuery("#filter").val()
jQuery(function(){
jQuery( ".product-line" ).each(function( index ) {
var url = '<?php echo $upload_url; ?>';
var desc_id = jQuery(this).eq(0).find('.prod-desc').attr('id');
if(desc_id){
var file_url = url + desc_id + '/description.html';
jQuery('#'+desc_id).eq(0).load( file_url );
}
});
jQuery("#brand,#screen_size,#cpu,#memory,#price").change(function() {
        var brand = jQuery("#brand").val();
var screen_size = jQuery("#screen_size").val();
var cpu = jQuery("#cpu").val();
var memory = jQuery("#memory").val();
var price = jQuery("#price").val();
var categories =[];
if(brand)
{
categories.push(brand);
}
if(screen_size)
{
categories.push(screen_size);
}
if(cpu)
{
categories.push(cpu);
}
if(memory)
{
categories.push(memory);
}
if(price)
{
categories.push(price);
}
length = categories.length;
categories2 = categories.toString();
alert(categories2);
var categories3="";
for(var i = 0; i < length; i++){
categories3 += "<div class='filter_style'>"+categories[i]+"<span style='margin-left:15px;color:gray;'>x</span></div>";
jQuery("#filter").html(categories3);
}
      });
});
</script>
 My HTML Code:
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="brand" >
<option value="">Select a Brand</option>
<option value="Lenovo">Lenovo</option>
<option value="Acer">Acer</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="screen_size" style="margin-top:0px;">
<option value="">Select a Screen Size</option>
<option value="Small">Small</option>
<option value="Large">Large</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="cpu">
<option value="">Select a CPU</option>
<option value="Intel">Intel</option>
<option value="Amd">Amd</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="memory">
<option value="">Select a Memory</option>
<option value="500mb">500mb</option>
<option value="1tb">1tb</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="price">
<option value="">Filter by Price</option>
<option value="10000">10000</option>
<option value="20000">20000</option>
</select>
</div>
</div>

There is possibilities, I will UPDATE the answer if it wasn't correct.
But first can you help what will you get after you run this code?
jQuery("#brand,#screen_size").change(function() {
var brand = jQuery("#brand").val();
var screen_size = jQuery("#screen_size").val();
console.log(brand);
console.log(screen_size);
});