We Keep Coding

Show/hide div and clear filed value when change

I have some div that will show depending on the select value. Suppose there are two input fields name 'Apartment and Bechelor' If I select 'Apartment' some div and select field will show related to the apartment. The problem I am facing is, I can't clear the field value when selecting another. Like, after selecting 'Apartment', I will select Bachelor. Now it should be clear the value of the field which was under the apartment so that If I again select 'Apartment', I will get default values or clean fields.
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<div class="form-group " id="flat-type">
<div class="col-sm-12">
<select id="" class="form-control" name="flat-type">
<option value="">Select Flat Type</option>
<option value="sublet" >Sublet</option>
<option value="full-flat" >Full Flat</option>
</select>
</div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
<div class="col-sm-12">
<select id="room" class="form-control" name="room_type">
<option value="">Select Room Type</option>
<option value="seat">Seat</option>
<option value="room" >Room</option>
</select>
</div>
</div>
<div class="form-group " id="tenant">
<div class="col-sm-12">
<select id="" class="form-control" name="tenant">
<option value="">Select Member</option>
<option value="family" >Family</option>
<option value="student" >Student</option>
<option value="job-holder" >Job Holder</option>
</select>
</div>
</div>
<script>
$(document).ready(function(){
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-flat').hide();
$('#flat-type').hide();
$('.pretty input[type="radio"]').click(function(){
if($(this).attr('value') == 'apartment'){
$('#tenant-flat').show();
}
else{
$('#flat-type').hide();
}
});
var showDiv = document.getElementById("tenant-type");
showDiv.onchange = function(){
var hiddenDiv = document.getElementById("flat-type");
hiddenDiv.style.display = (this.value == "family") ? "block":"none";
var genderDiv = document.getElementById("gender");
genderDiv.style.display = (this.value == "bechelor") ? "block":"none";
};
$('.pretty input[type="radio"]').click(function(){
if($(this).attr('value') == 'bachelor' || $(this).attr('value') == 'sublet' || $(this).attr('value') == 'hostel' ){
$('#r-type').show();
$('#tenant').show();
$('#tenant-type').hide();
}
else{
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-type').show();
}
});
});
</script>

to reset the dropdown options you can set the value of the select elements selectIndex property to 0 with this line:
$('.form-control').prop('selectedIndex', 0);
and in your code:
$(document).ready(function(){
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-flat').hide();
$('#flat-type').hide();
$('#residential input[type="radio"]').click(function(){
if($(this).attr('value') == 'apartment'){
$('#tenant-flat').show();
$('#flat-type').show();
$('#r-type').hide();
$('#tenant').hide();
}
else{
$('#r-type').show();
$('#tenant').show();
$('#flat-type').hide();
$('#tenant-flat').hide();
}
$('.form-control').prop('selectedIndex', 0);
});
$('#tenent-type').on('change', function() {
if($('#flat-type').val =='family') {
$('#flat-type').show();
} else {
$('#flat-type').hide();
}
if($('#gender').val =='bechelor') {
$('#gender').show();
} else {
$('#gender').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<div class="form-group " id="flat-type">
<div class="col-sm-12">
<select id="" class="form-control" name="flat-type">
<option value="">Select Flat Type</option>
<option value="sublet" >Sublet</option>
<option value="full-flat" >Full Flat</option>
</select>
</div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
<div class="col-sm-12">
<select id="room" class="form-control" name="room_type">
<option value="">Select Room Type</option>
<option value="seat">Seat</option>
<option value="room" >Room</option>
</select>
</div>
</div>
<div class="form-group " id="tenant">
<div class="col-sm-12">
<select id="" class="form-control" name="tenant">
<option value="">Select Member</option>
<option value="family" >Family</option>
<option value="student" >Student</option>
<option value="job-holder" >Job Holder</option>
</select>
</div>
</div>

JQUERY replace text on data-empty_label value

I tried to change the default empty value "" with friendly labels however I was not successful for subcategory and name selects since data is coming dynamically from django. category works fine since there is an empty option when page loads however subcategory and name load on select data-empty_label "----------" instead and no options are visible.
<div class="form-row">
<input type="hidden" name="csrfmiddlewaretoken" value="xxxxx">
<div class="form-group custom-control col-md-3">
<select name="category" class="custom-select custom-select-lg" required id="id_category">
<option value="" selected>---------</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="form-group custom-control col-md-3">
<select name="subcategory" disabled class="custom-select custom-select-lg chained-fk" required id="id_subcategory" data-chainfield="category" data-url="/chaining/filter/xxxxx" data-value="null" data-auto_choose="false" data-empty_label="--------" name="subcategory">
</select>
</div>
<div class="form-group custom-control col-md-3">
<select name="name" disabled class="custom-select custom-select-lg chained-fk" required id="id_name" data-chainfield="subcategory" data-url="/chaining/filter/xxxxx" data-value="null" data-auto_choose="false" data-empty_label="--------" name="name">
</select>
</div>
<div class="form-group col-md-3">
<input type="submit" value="Submit" class="btn-lg btn-success btn-block">
</div>
</div>
<script>
$(document).ready(function() {
$("select").on("change", function() {
if($("select[name='category']").val() == "") {
$("select[name='category'] > option:first-child").text('Category');
$("select[name='subcategory']").prop('disabled', 'disabled');
$("select[name='subcategory'] > option:first-child").text('Subcategory');
$("select[name='name']").prop('disabled', 'disabled');
$("select[name='name'] > option:first-child").text('Recipe');
} else {
$("select[name='subcategory']").removeAttr("disabled");
$("select[name='subcategory'] > option:first-child").text('Subcategory');
}
}).trigger('change');
$("select[name='subcategory']").on("change", function() {
$("select[name='subcategory'] > option:first-child").text('Subcategory');
if($(this).val() == "") {
$("select[name='name']").prop('disabled', 'disabled');
$("select[name='recipename'] > option:first-child").text('Recipe');
} else {
$("select[name='name']").removeAttr("disabled");
$("select[name='ename'] > option:first-child").text('Recipe');
}
}).trigger('change');
});
</script>

Get desired value of selectbox through jquery

Here i have three dropdowns with differents values and the code looks like as follows.
To get the value of the corresponding dropdown using jquery i had this but it always gets same value please have a look
$(".one").hide();
$(".two").hide();
$(".three").show();
var name_type=$("#abc_type_1").attr('name','type');
$("#abc_type_2").removeAttr('name');
$("#abc_type_3").removeAttr('name');
$("input[name=select_type]:radio").change(function () {
if($(this).val()=='1')
{
$(".one").show();
$(".two").hide();
$(".three").hide();
var name_type=$("#abc_type_1").attr('name','type');
$("#abc_type_2").removeAttr('name');
$("#abc_type_3").removeAttr('name');
}
else if($(this).val()=='2')
{
$(".one").hide();
$(".two").show();
$(".three").hide();
var name_type=$("#abc_type_2").attr('name','type');
$("#abc_type_1").removeAttr('name');
$("#abc_type_3").removeAttr('name');
}
else if($(this).val()=='3')
{
$(".one").hide();
$(".two").hide();
$(".three").show();
var name_type=$("#abc_type_3").attr('name','type');
$("#abc_type_1").removeAttr('name');
$("#abc_type_2").removeAttr('name');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left_1">
<input class="magic-radio" type="radio" name="select_type" id="1" value="1">
<label for="1">1</label>
<input class="magic-radio" type="radio" name="select_type" id="2" value="2">
<label for="2">2</label>
<input class="magic-radio" type="radio" name="select_type" id="3" checked value="3">
<label for="3">3</label>
</div>
<div class="left_2 one">
<select name="type" id="abc_type_1" class="form-control abc_type">
<option value="A">LSK-A</option>
<option value="B">LSK-B</option>
<option value="C">LSK-C</option>
</select>
</div>
<div class="left_2 two">
<select name="type" id="abc_type_2" class="form-control abc_type">
<option value="AB">LSK-AB</option>
<option value="AC">LSK-AC</option>
<option value="BC">LSK-BC</option>
</select>
</div>
<div class="left_2 three">
<select name="type" id="abc_type_3" class="form-control abc_type">
<option value="super">LSK-SUPER</option>
<option value="box">BOX-K</option>
</select>
</div>
Here i want to get the value of the selected select box but i can not get the correct value, please help me to solve.
var form_data={
agent_name: $('#agent_name').val(),
number: $('#number').val(),
number_from: $('#number_from').val(),
number_to: $('#number_to').val(),
quantity: $('#quantity').val(),
amount: $('#amount').val(),
date: $('#date').val(),
commision: $('#commision').val(),
profit: $('#profit').val(),
agent_amount: $('#agent_amount').val(),
user_id: $('#user_id').val(),
type: name_type.val(),
}

Problem with script is that you are not handling radio buttons and dropdown while extracting values for posting to server.
JS
var form_data = {
agent_name: $('#agent_name').val(),
number: $('#number').val(),
number_from: $('#number_from').val(),
number_to: $('#number_to').val(),
quantity: $('#quantity').val(),
amount: $('#amount').val(),
date: $('#date').val(),
commision: $('#commision').val(),
profit: $('#profit').val(),
agent_amount: $('#agent_amount').val(),
user_id: $('#user_id').val(),
type: $("#abc_type_"+$("input[name=select_type]:checked").val()).val()
};
Just replace your form_data with above script. If not works let me know.
This part getting checked value from the radio button.
$("input[name=select_type]:checked").val()
response is like this. 1 or 2 or 3.
$("#abc_type_"+$("input[name=select_type]:checked").val()).val()
Now jquery will get value by targeting the ID. eg #abc_type_1, #abc_type_2, #abc_type_3

You add a default value to the inputs and add function that runs when selects change like this Code:
$(".one").hide();
$(".two").hide();
$(".three").show();
var name_type = $("#abc_type_1").attr('name', 'type');
$("#abc_type_2").removeAttr('name');
$("#abc_type_3").removeAttr('name');
$("input[name=select_type]:radio").change(function() {
if ($(this).val() == '1') {
$(".one").show();
$(".two").hide();
$(".three").hide();
var name_type = $("#abc_type_1").attr('name', 'type');
$("#abc_type_2").removeAttr('name');
$("#abc_type_3").removeAttr('name');
} else if ($(this).val() == '2') {
$(".one").hide();
$(".two").show();
$(".three").hide();
var name_type = $("#abc_type_2").attr('name', 'type');
$("#abc_type_1").removeAttr('name');
$("#abc_type_3").removeAttr('name');
} else if ($(this).val() == '3') {
$(".one").hide();
$(".two").hide();
$(".three").show();
var name_type = $("#abc_type_3").attr('name', 'type');
$("#abc_type_1").removeAttr('name');
$("#abc_type_2").removeAttr('name');
}
});
$("select").change(function(e){
alert(e.target.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left_1">
<input class="magic-radio" type="radio" name="select_type" id="1" value="1">
<label for="1">1</label>
<input class="magic-radio" type="radio" name="select_type" id="2" value="2">
<label for="2">2</label>
<input class="magic-radio" type="radio" name="select_type" id="3" checked value="3">
<label for="3">3</label>
</div>
<div class="left_2 one">
<select name="type" id="abc_type_1" class="form-control abc_type">
<option value="">Select value</option>
<option value="A">LSK-A</option>
<option value="B">LSK-B</option>
<option value="C">LSK-C</option>
</select>
</div>
<div class="left_2 two">
<select name="type" id="abc_type_2" class="form-control abc_type">
<option value="">Select value</option>
<option value="AB">LSK-AB</option>
<option value="AC">LSK-AC</option>
<option value="BC">LSK-BC</option>
</select>
</div>
<div class="left_2 three">
<select name="type" id="abc_type_3" class="form-control abc_type">
<option value="">Select value</option>
<option value="super">LSK-SUPER</option>
<option value="box">BOX-K</option>
</select>
</div>

This is how you can get the current Select Box value
Simplest Example
HTML
<select class="select1_class_name" id="select1" data-userid="1">
<option value="1">1</option>
</select>
Jquery
$('#select1').change(function() {
var id = $(this).data('userid');
console.log(id); //you will get on change of selected dropdown
});

add others value to select option

I'm trying to make option value with others , which if the user need to write other values input text will being shows to him to add what he want , otherwise he can add from the option select box , I have an issue with that which it add only the input field and not adding the value from the optin box , Can any one help me with that the project is with laravel framework
here's my form :
<div class="row">
<div class="col-md-12 unit">
<label class="label float-ar">من فضلك اختر هوايات الطفل</label>
<div class="select " id="admDivChecktop">
<select name="childHoppy" class="col-md-12 sel-has-p" id="getFname" onchange="admSelectCheck(this);">
<option value="none" selected disabled>اختر هوايات الطفل</option>
<option value="القرأه">القراه</option>
<option value="الرياضة">الرياضة </option>
<option value="السباحه">السباحه</option>
<option value="الرسم">الرسم </option>
<option id="admOption" value="0">others</option>
</select>
</div>
</div>
</div>
<div class="row" id="admDivCheck" style="display:none;">
<div class="col-md-12 unit" >
<label class="label">أَضف بيانات أخري لهواية طفلك</label>
<div class="input" >
<input type="text" class="col-md-12 bg-hover" name="childHoppy" >
<label class="icon-left" >
<i class="fa fa-user"></i>
</label>
</div>
</div>
</div>
<script>
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = document.getElementById("getFname").value;
alert(admOptionValue);
if(admOptionValue == 0){
document.getElementById("admDivCheck").style.display = "";
document.getElementById("admDivChecktop").style.display = "none";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
</script>

I would add another hidden input and store the value there.
If your select has changed, catch the change with javascript and update hidden's value. Same for the text input.
What do you think about this?
Pseudo code:
<input type="hidden" name="childHoppy" id="childHoppy">
<select name="select" id="select">
<option>...</option>
</select>
<input type="text" name="text" id="text">
<script>
$document.on('change', '#select, #text', function() {
$('#childHoppy').val($this.val());
});
</script>

Reduce redundant function with javascript

I currently have the following Javascript running on my website, but I really feel like it is really redundant. So I am trying to condense it, since they are basically all the same thing, except different numbers appended. Is there a way I can wildcard the string?
$(document).ready(function() {
$('#type_1').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_1').show();
}else {
$('#dropdown_list_1').hide();
}
});
$('#type_2').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_2').show();
}else {
$('#dropdown_list_2').hide();
}
});
$('#type_3').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_3').show();
}else {
$('#dropdown_list_3').hide();
}
});
$('#type_4').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_4').show();
}else {
$('#dropdown_list_4').hide();
}
});
$('#type_5').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_5').show();
}else {
$('#dropdown_list_5').hide();
}
});
});
This is what I have tried so far, but I couldn't get it to work. I believe it's because the for loop only runs once, and not on each event.
for(var i = 1; i <= 15; i++){
$('#type_'+i).change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_'+i).show();
}else {
$('#dropdown_list_'+i).hide();
}
});
}
EDIT:
I uploaded a JSFiddle if you want to test the code out.
HTML:
<form>
<hr class="separate" />
<!-- Question 1 -->
<h3 class="question_title">Survey Question 1</h3>
<label for="question_1">Question 1</label>
<input type="text" name="question_1" value="" class="question_field" id="question_1">
<label for="type_1">Type for Question 1</label>
<div class="option_field">
<select name="type_1" id="type_1" onchange="" size="1">
<option value="oneline">One Line Text Field</option>
<option value="freeresponse">Free Response Text Field</option>
<option value="rating10">Rating (1-10)</option>
<option value="rating4">Poor, Fair, Good, Excellent</option>
<option value="dropdown">Drop-Down Menu</option>
</select>
</div>
<div id="dropdown_list_1" class="dropdown_list">
<label for="question_1_list">Question 1 List</label><input type="text" name="question_1_list" value="" class="question_list" id="question_1_list" placeholder="Option A,Option B,Option C,Option D">
</div>
<hr class="separate" />
<!-- Question 2 -->
<h3 class="question_title">Survey Question 2</h3>
<label for="question_2">Question 2</label><input type="text" name="question_2" value="" class="question_field" id="question_2">
<label for="type_2">Type for Question 2</label>
<div class="option_field">
<select name="type_2" id="type_2" onchange="" size="1">
<option value="oneline">One Line Text Field</option>
<option value="freeresponse">Free Response Text Field</option>
<option value="rating20">Rating (1-10)</option>
<option value="rating4">Poor, Fair, Good, Excellent</option>
<option value="dropdown">Drop-Down Menu</option>
</select>
</div>
<div id="dropdown_list_2" class="dropdown_list">
<label for="question_2_list">Question 2 List</label><input type="text" name="question_2_list" value="" class="question_list" id="question_2_list" placeholder="Option A,Option B,Option C,Option D">
</div>
<hr class="separate" />
<!-- Question 3 -->
<h3 class="question_title">Survey Question 3</h3>
<label for="question_3">Question 3</label><input type="text" name="question_3" value="" class="question_field" id="question_3">
<label for="type_3">Type for Question 3</label>
<div class="option_field">
<select name="type_3" id="type_3" onchange="" size="1">
<option value="oneline">One Line Text Field</option>
<option value="freeresponse">Free Response Text Field</option>
<option value="rating30">Rating (1-10)</option>
<option value="rating4">Poor, Fair, Good, Excellent</option>
<option value="dropdown">Drop-Down Menu</option>
</select>
</div>
<div id="dropdown_list_3" class="dropdown_list">
<label for="question_3_list">Question 3 List</label><input type="text" name="question_3_list" value="" class="question_list" id="question_3_list" placeholder="Option A,Option B,Option C,Option D">
</div>
</form>

Give your <select> a class, e.g.
<select name="type_2" class="type" size="1">
Then use DOM traversal functions to find the associated dropdown DIV from the type SELECT:
$(document).ready(function () {
$(".dropdown_list").hide();
$(".type").change(function () {
$(this).closest(".option_field").next(".dropdown_list")
.toggle($(this).val() == "dropdown");
});
});
DEMO
Also, you should use .val() to get an input value, not .attr("value").