Develop Reference

How to add another input field with increment of name value using JavaScript?

I have two dropdowns and two radio button groups. What I want is to add another dropdown and radio button with their updated name value.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
var i = 1;
function textBoxCreate(){
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("Placeholder", "Name_" + i);
y.setAttribute("Name", "Name_" + i);
document.getElementById("myForm").appendChild(y);
i++;
}
<label for="cars">Choose a car:</label>
<select name="cars" name="CARS_1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br>
<label for="cars">Choose a range:</label>
<input type="radio" name="RANGE_1" value="30">
<label for="range-1">0 - 30</label><br>
<input type="radio" name="RANGE_1" value="60">
<label for="range-2">31 - 60</label><br>
<input type="radio" name="RANGE_1" value="100">
<label for="range-3">61 - 100</label>
<br><br>
<label for="cars">Choose a car:</label>
<select name="cars" name="CARS_2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br>
<label for="cars">Choose a car:</label>
<input type="radio" name="RANGE_2" value="30">
<label for="range-1">0 - 30</label><br>
<input type="radio" name="RANGE_2" value="60">
<label for="range-2">31 - 60</label><br>
<input type="radio" name="RANGE_2" value="100">
<label for="range-3">61 - 100</label>
<br><br>
<button type="button" class="add-btn" onclick="addAnotherOne()">+ ADD ANOTHER DATA</button>
How do I increment the name value of the input field using JavaScript?
I don't want to use a clone.

You need to give unique id and name to each control. So based on your code, change id and name for uniqueness and check the below code. Wrap your code in any control( I take div) in which you append the html at the last.
Also you did not add for remove, if you want, then you can do the same for add, just pick the index and remove the content which has the current index no.
var indexToStart=3; //here we start with 3 as we already have 2 set of controls
function addAnotherOne(){
var strBuildHtml = '<label >Choose a car:</label> \
<select id="cars'+ indexToStart +'" name="cars'+ indexToStart +'"> \
<option value="volvo">Volvo</option> \
<option value="saab">Saab</option> \
<option value="opel">Opel</option> \
<option value="audi">Audi</option>\
</select><br>\
<label >Choose a car:</label>\
<input type="radio" id="age'+ indexToStart +'-1" name="age'+ indexToStart +'" value="30">\
<label for="range'+ indexToStart +'-1">0 - 30</label><br>\
<input type="radio" id="age'+ indexToStart +'-2" name="age'+ indexToStart +'" value="60">\
<label for="range'+ indexToStart +'-2">31 - 60</label><br> \
<input type="radio" id="age'+ indexToStart +'-3" name="age'+ indexToStart +'" value="100">\
<label for="range'+ indexToStart +'-3">61 - 100</label>\
<br><br>'
$("#dvHtml").append(strBuildHtml);
indexToStart = indexToStart+1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='dvHtml' >
<label >Choose a car:</label>
<select id="cars1" name="cars1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br>
<label >Choose a range:</label>
<input type="radio" id="age1-1" name="age1" value="30">
<label for="range1-1">0 - 30</label><br>
<input type="radio" id="age1-2" name="age1" value="60">
<label for="range1-2">31 - 60</label><br>
<input type="radio" id="age1-3" name="age1" value="100">
<label for="range1-3">61 - 100</label>
<br><br>
<label >Choose a car:</label>
<select id="cars2" name="cars2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br>
<label >Choose a car:</label>
<input type="radio" id="age2-1" name="age2" value="30">
<label for="range-1">0 - 30</label><br>
<input type="radio" id="age2-2" name="age2" value="60">
<label for="range-2">31 - 60</label><br>
<input type="radio" id="age2-3" name="age2" value="100">
<label for="range-3">61 - 100</label>
<br><br>
</div>
<button type="button" class="add-btn" onclick="addAnotherOne()">+ ADD ANOTHER DATA</button>

How do I increment the name value of the input field using JavaScript?
Get the value you want to increment. Currently you have several items with the same ids which makes it more difficult. If you fix that, you could easily access the value, e.g. document.getElementById("uniqueID").value
Extract number from and convert to int. "RANGE_2" parseInt(str.replace('RANGE_',''));
Add 1 and concat with "RANGE_" again "RANGE_"+(i+1)

3 jQuery Scripts Not working together in HTML page

I have an HTML code with 3 jQuery Scripts and they are not working together correctly can SomeOne Help me to solve this, please
I do to solve this problem as I don't have any experience in jQuery
and how can I fix this issue?
It works now but one drop-down menu at a time how can I make them work together
(function() {
var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="Fac"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList2").html(options);
$('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
})();
(function() {
var options = $("#DropDownList3").html();
$('#DropDownList3 :not([value^="Dip"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList3").html(options);
$('#DropDownList3 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
})();
(function() {
var options = $("#DropDownList4").html();
$('#DropDownList4 :not([value^="Dr"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList4").html(options);
$('#DropDownList4 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
})();
<script src = "https://code.jquery.com/jquery-latest.min.js"></script>
Availabe Restaurants:
<br> Burgers:
<label><input type="radio" name="test" value="Garage" /> Burger Garage</label>
<label><input type="radio" name="test" value="Burger" /> Hardee's</label>
<label> <input type="radio" name="test" checked="checked" value="Factory" /> Burger Factory & More</label>
<br>
<select ID="DropDownList2" Height="18px" Width="187px">
<option Value="Factory_Style_1">Turbo Chicken</option>
<option Value="Factory_Style_2">Twin Turbo Chicken</option>
<option Value="Factory_Style_3">Garage Burger</option>
<option Value="Burger_Style_1">Chicken Fille</option>
<option Value="Burger_Style_2">Grilled Chicken Fillet</option>
<option Value="Burger_Style_3">Jalapeno Chicken</option>
<option Value="Garage_Style_1">Original Burger</option>
<option Value="Garage_Style_2">Twin Turbo Chicken</option>
<option Value="Garage_Style_3">Shuwa Burger</option>
</select>
<br> Desserts:
<label><input type="radio" name="test1" checked="checked" value="Dip" /> Dip N Dip</label>
<label><input type="radio" name="test1" value="Camel" /> Camel Cookies</label>
<label> <input type="radio" name="test1" value="Ravenna" /> Ravenna Kunafa</label>
<br>
<select ID="DropDownList3" Height="18px" Width="187px">
<option Value="Dip_Style_1">Brownies Crepe</option>
<option Value="Dip_Style_2">Fettuccine Crepe</option>
<option Value="Dip_Style_3">Cream Puff Pyramid</option>
<option Value="Camel_Style_1">Brownie Fondant</option>
<option Value="Camel_Style_2">Lotus Pancake</option>
<option Value="Camel_Style_3">Camel Lava</option>
<option Value="Ravenna_Style_1">Konafa With Chocolate</option>
<option Value="Ravenna_Style_2">Konafa Mabrooma With Cheese</option>
<option Value="Ravenna_Style_3">Konafa Mabrooma With Cream</option>
</select>
<br> Beverages:
<option>Dr.Shake</option>
<option>Juice Lab</option>
<option>Aseer Time</option>
<label><input type="radio" name="test2" checked="checked" value="Dr" />Dr.Shake</label>
<label><input type="radio" name="test2" value="Juice" /> Juice Lab</label>
<label> <input type="radio" name="test2" value="Aseer" /> Aseer Time</label>
<br>
<select ID="DropDownList4" Height="18px" Width="187px">
<option Value="Dr_Style_1">Pressure Milkshake</option>
<option Value="Dr_Style_2">Thermometer Milkshake</option>
<option Value="Dr_Style_3">Brain Recovery Milkshake</option>
<option Value="Juice_Style_1">G Lab</option>
<option Value="Juice_Style_2">Summer Vimto</option>
<option Value="Juice_Style_3">Summer Bubble Gum</option>
<option Value="Aseer_Style_1">Hormone Happiness</option>
<option Value="Aseer_Style_2">The King</option>
<option Value="Aseer_Style_3">Berry Smothey</option>
</select>

Your issue here is that your radio button change events are overlapping each other so they don't have scope they just override each other, see the changes below where the radio input are now wrapped in a container and each event is scoped separately.
it's worth noting that using scope around each section of dropdown and radio button set you could refactor your code into a single function can handle all events.
(function() {
var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="Fac"])').remove();
$('.group1 input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList2").html(options);
$('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
})();
(function() {
var options = $("#DropDownList3").html();
$('#DropDownList3 :not([value^="Dip"])').remove();
$('.group2 input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList3").html(options);
$('#DropDownList3 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
})();
(function() {
var options = $("#DropDownList4").html();
$('#DropDownList4 :not([value^="Dr"])').remove();
$('.group3 input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList4").html(options);
$('#DropDownList4 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
})();
<script src = "https://code.jquery.com/jquery-latest.min.js"></script>
Availabe Restaurants:
<br> Burgers:
<div class="group1">
<label><input type="radio" name="test" value="Garage" /> Burger Garage</label>
<label><input type="radio" name="test" value="Burger" /> Hardee's</label>
<label> <input type="radio" name="test" checked="checked" value="Factory" /> Burger Factory & More</label>
</div>
<br>
<select ID="DropDownList2" Height="18px" Width="187px">
<option Value="Factory_Style_1">Turbo Chicken</option>
<option Value="Factory_Style_2">Twin Turbo Chicken</option>
<option Value="Factory_Style_3">Garage Burger</option>
<option Value="Burger_Style_1">Chicken Fille</option>
<option Value="Burger_Style_2">Grilled Chicken Fillet</option>
<option Value="Burger_Style_3">Jalapeno Chicken</option>
<option Value="Garage_Style_1">Original Burger</option>
<option Value="Garage_Style_2">Twin Turbo Chicken</option>
<option Value="Garage_Style_3">Shuwa Burger</option>
</select>
<br> Desserts:
<div class="group2">
<label><input type="radio" name="test1" checked="checked" value="Dip" /> Dip N Dip</label>
<label><input type="radio" name="test1" value="Camel" /> Camel Cookies</label>
<label> <input type="radio" name="test1" value="Ravenna" /> Ravenna Kunafa</label>
</div>
<br>
<select ID="DropDownList3" Height="18px" Width="187px">
<option Value="Dip_Style_1">Brownies Crepe</option>
<option Value="Dip_Style_2">Fettuccine Crepe</option>
<option Value="Dip_Style_3">Cream Puff Pyramid</option>
<option Value="Camel_Style_1">Brownie Fondant</option>
<option Value="Camel_Style_2">Lotus Pancake</option>
<option Value="Camel_Style_3">Camel Lava</option>
<option Value="Ravenna_Style_1">Konafa With Chocolate</option>
<option Value="Ravenna_Style_2">Konafa Mabrooma With Cheese</option>
<option Value="Ravenna_Style_3">Konafa Mabrooma With Cream</option>
</select>
<br> Beverages:
<option>Dr.Shake</option>
<option>Juice Lab</option>
<option>Aseer Time</option>
<div class="group3">
<label><input type="radio" name="test2" checked="checked" value="Dr" />Dr.Shake</label>
<label><input type="radio" name="test2" value="Juice" /> Juice Lab</label>
<label> <input type="radio" name="test2" value="Aseer" /> Aseer Time</label>
</div>
<br>
<select ID="DropDownList4" Height="18px" Width="187px">
<option Value="Dr_Style_1">Pressure Milkshake</option>
<option Value="Dr_Style_2">Thermometer Milkshake</option>
<option Value="Dr_Style_3">Brain Recovery Milkshake</option>
<option Value="Juice_Style_1">G Lab</option>
<option Value="Juice_Style_2">Summer Vimto</option>
<option Value="Juice_Style_3">Summer Bubble Gum</option>
<option Value="Aseer_Style_1">Hormone Happiness</option>
<option Value="Aseer_Style_2">The King</option>
<option Value="Aseer_Style_3">Berry Smothey</option>
</select>

How to get label text and selected value from checked radio button?

I am trying to get text and selected value from checked radio button and put it into variable. Trying to get something like "Is published" or if is other radio checked to be like "Is not In Review". This needs to be plain javascript - no jquery or any other framework.
<form>
<div class="filter-option">
<input type="radio" id="status" name="status" checked="checked"/>
<label for="status">Is</label>
<div class="searchFilter">
<select class="selectpicker" title="" data-size="false" multiple
data-live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
</div>
<div class="filter-option">
<input type="radio" id="is_not" name="status"/>
<label for="is_not">Is not</label>
<div class="searchFilter">
<select class="selectpicker" title="" data-size="false" multiple data-
live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
</div>
<div class="filter-option">
<input type="radio" id="contain" name="author"/>
<label for="contain">Contain</label>
<div class="searchFilter">
<input type="text" class="simpleSearch">
</div>
</div>
</form>

You give the select element an id, then use document.getElementById(id).value.
This should return the value of the selected option, which you can then use any way you want.
Using .text instead gives you the text shown to the user in the list (in this example they are the same).

How can i set selected value after submit form

I have a form with month and year to select. I want to save selected values after page reload. I have project in django and i don't have any idea how do it.
<form class="form-horizontal" method="post" action="show_incomes">{% csrf_token %}{{form}}
<div class="form-group ">
<label class="control-label col-sm-5" for="miesiac">Wybierz miesiąc</label>
<div class="col-sm-3">
<select class="select form-control" id="miesiac" name="miesiac">
<option value="01" >Styczeń</option>
<option value="02" >Luty</option>
<option value="03" >Marzec</option>
<option value="04" >Kwiecień</option>
<option value="05" >Maj</option>
<option value="06" >Czerwiec</option>
<option value="07" >Lipiec</option>
<option value="08" >Sierpień</option>
<option value="09" >Wrzesień</option>
<option value="10" >Październik</option>
<option value="11" >Listopad</option>
<option value="12" >Grudzień</option>
</select>
</div>
</div>
<label class="control-label col-sm-5" for="rok">Wybierz rok</label>
<div class="col-sm-2">
<select class="select form-control" id="rok" name="rok" >
<option value="2017" >2017</option>
<option value="2018" >2018</option>
<option value="2019" >2019</option>
<option value="2020" >2020</option>
<option value="2021" >2021</option>
<option value="2022" >2022</option>
<option value="2023" >2023</option>
<option value="2024" >2024</option>
<option value="2025" >2025</option>
</select><br>
<button type="submit" class="btn btn-large btn-info">Pokaż przychody</button>
</div>
</form>

You can use local storage/ session storage to save data
Check here

toggle div -jquery

I have this code:
<div>
<label id="hd" for="escol"">text</label> <select name="escol"
class="drop">
<option value="1" class="dr">show</option>
<option value="2" class="dr">hide</option>
</select>
</div>
<div>
<label id ="showHide" for="type"">Tipo de formação</label> <select name="area"
class="drop1">
<option value="1" class="dr">Universidade</option>
<option value="2" class="dr">Politécnico</option>
</select>
</div>
and
<script>
$("#hd").click(function () {
$(".drop1").slideToggle("slow");
});
</script>
How to show the second select if the first select have the first option selected, and hide the second dropdown if the second option of the first dropdown is selected?

First, you can restructure the HTML a wee bit by putting the <select> elements inside the labels. That way you don't have to use the for label attribute.
<div>
<label id="hd">
text
<select name="escol" class="drop">
<option value="1" class="dr">show</option>
<option value="2" class="dr">hide</option>
</select>
</label>
</div>
<div>
<label id="showHide">
Tipo de formação
<select name="area" class="drop1">
<option value="1" class="dr">Universidade</option>
<option value="2" class="dr">Politécnico</option>
</select>
</label>
</div>
Then, use the .change() event:
$('#hd > select').change(function ()
{
$('#showHide > select').toggle(this.selectedIndex === 0);
});
Demo: http://jsfiddle.net/mattball/EaQea/

You can add an on change event handler to the first drop down like this:
$("#escol").change(function(){
if($(this).val() == "1"){
$("#area").show();
}else{
$("#area").hide();
}
});
And change your HTML to this:
<div>
<label id="hd" for="escol">text</label> <select id="escol"
class="drop">
<option value="1" class="dr">show</option>
<option value="2" class="dr">hide</option>
</select>
</div>
<div>
<label id ="showHide" for="type">Tipo de formação</label> <select id="area"
class="drop1">
<option value="1" class="dr">Universidade</option>
<option value="2" class="dr">Politécnico</option>
</select>
</div>
Notice that you have some extra double quotes in your html that I removed and I changed name="area" to id="area" and name="escol" to id="escol".

$("select[name='escol']").change(function () {
$("#showHide").parent()['slide'+((this.value==2)?'Up':'Down')]("slow");
});