I want to disable the text box when the checkbox is checked for the appended text box. The hard coded text box is disabled when the checkbox is checked.
Run the code snippet to see the outcome or view the screenshots shown below.
Below is the main.js and main.html file
<!--main.js-->
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.innerHTML = '<div class="row"> <div class="3u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div>' + '<p class="12u$(xsmall)">OR</p>' + '<div class="3u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div>' + '<div class="2u 12u$(medium)"> <div class="12u$"> <input id="venueTB' + counter + '" type="text" value="" placeholder="Venue" /> </div> </div>' + '<div class="2u 12u$(medium)"> <input type="checkbox" id="venueChk' + counter + '"name="venueChk" onclick="checkBox()"> <label for="venueChk' + counter + '" >No Venue</label> </div>';
document.getElementById('newProg').appendChild(objNewDiv);
}
function removeProg() {
if (0 < counter) {
document.getElementById('newProg').removeChild(document.getElementById('addProg' + counter));
counter--;
} else {
alert("No boxes to remove");
}
}
function checkBox() {
var checkElement = document.getElementById('venueTB');
var checkDisabled = checkElement.disabled = true;
if (checkElement != null && checkDisabled) {
checkElement.value = "-NO VENUE-";
}
}
<!--main.html-->
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<p>OR</p>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input id="venueTB" type="text" value="" placeholder="Venue" />
</div>
</div>
<div class="2u 12u$(medium)">
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox()">
<label for="venueChk">No Venue</label>
</div>
</div>
<div id="newProg"></div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()">
<div style="font-size: 35px">+</div>
</a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()">
<div style="font-size: 35px">-</div>
</a>
</div>
</div>
actual outcome
expected outcome
it's because document.getElementById('venueTB') returns the first element in the DOM with id="venueTB".
Try to add classes to all the checkboxes, and get them by calling
document.querySelectorAll('.class-name')
Another thing, in checkBox() function, i think it should be:
var checkDisabled = checkElement.disabled == true;
instead of:
var checkDisabled = checkElement.disabled = true;
The IDs must be unique. Because you have inline js functions you can change from:
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox()">
To:
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox(event, this)">
In this way you will pass:
the event object
this: the current DOM object
In this way your function can be:
function checkBox(e, obj) {
var checkElement = obj.parentNode.previousElementSibling.querySelectorAll('input')[0];
var checkDisabled = checkElement.disabled = true;
if (checkElement != null && checkDisabled) {
checkElement.value = "-NO VENUE-";
}
}
The snippet:
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.innerHTML = '<div class="row"> <div class="3u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div>' + '<p class="12u$(xsmall)">OR</p>' + '<div class="3u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div>' + '<div class="2u 12u$(medium)"> <div class="12u$"> <input id="venueTB' + counter + '" type="text" value="" placeholder="Venue" /> </div> </div>' + '<div class="2u 12u$(medium)"> <input type="checkbox" id="venueChk' + counter + '"name="venueChk" onclick="checkBox(event, this)"> <label for="venueChk' + counter + '" >No Venue</label> </div>';
document.getElementById('newProg').appendChild(objNewDiv);
}
function removeProg() {
if (0 < counter) {
document.getElementById('newProg').removeChild(document.getElementById('addProg' + counter));
counter--;
} else {
alert("No boxes to remove");
}
}
function checkBox(e, obj) {
var checkElement = obj.parentNode.previousElementSibling.querySelectorAll('input')[0];
if (obj.checked) {
checkElement.disabled = true;
checkElement.value = '-NO VENUE-';
} else {
checkElement.disabled = false;
checkElement.value = '';
}
}
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<p>OR</p>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input id="venueTB" type="text" value="" placeholder="Venue" />
</div>
</div>
<div class="2u 12u$(medium)">
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox(event, this)">
<label for="venueChk">No Venue</label>
</div>
</div>
<div id="newProg"></div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()">
<div style="font-size: 35px">+</div>
</a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()">
<div style="font-size: 35px">-</div>
</a>
</div>
</div>
Related
I have the following form, in summary:
kingdom --> phylum --> class --> order --> family --> genus...
If the kingdom = Animalia then the phylum options should be a certain list.
Following on, if the phylum then = Chordata the next drop down input option should be a certain list.
To continue, if the class = Mammalia the next drop down input option should be a certain list... etc.
So a hierarchical form with many dependant levels.
I've looked and tried a few examples, but I can't find a way to do this. Any ideas/suggestions?
Here's the bootstrap html:
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>kingdom</label>
<!-- <input type='text' class='form-control' name='kingdom' value ='Animalia' placeholder='Animalia' > -->
<select class="form-control" name='kingdom'>
<option>Animalia</option>
<option>Plantae</option>
<option>Fungi</option>
<option>Protista</option>
<option>Monera</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>phylum/division</label>
<!-- <input type='text' class='form-control' name='phylum' value ='Chordata' placeholder='Chordata' > -->
<select class="form-control" name='phylum'>
<option>Chordata</option>
<option>Annelid</option>
<option>Arthropod</option>
<option>Bryozoa</option>
<option>Cnidaria</option>
<option>Echinoderm</option>
<option>Mollusc</option>
<option>Nematode</option>
<option>Platyhelminthes</option>
<option>Rotifer</option>
<option>Sponge</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>class</label>
<!-- <input type='text' class='form-control' name='class' value ='Mammalia' placeholder='Mammalia' > -->
<select class="form-control" name='class'>
<option>Mammalia</option>
<option>Aves</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>order</label>
<!-- <input type='text' class='form-control' name='order' value ='Artiodactyla' placeholder='Artiodactyla' > -->
<select class="form-control" name='order'>
<option>Artiodactyla</option>
<option>Aegotheliformes</option>
<option>Perissodactyla</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>family</label>
<!-- <input type='text' class='form-control' name='family' value ='Bovidae' placeholder=' Bovidae' > -->
<select class="form-control" name='family'>
<option>Bovidae</option>
<option>Aegothelidae</option>
<option>Equidae</option>
<option>Delphinidae</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>genus</label>
<input type='text' class='form-control' name='genus' value ='Capra' placeholder='Capra' >
<select class="form-control" name='genus'>
<option>Capra</option>
<option>Ovis</option>
<option>Aegotheles</option>
<option>Oreamnos</option>
<option>Equus</option>
<option>Orcinus</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>subgenus</label>
<input type='text' class='form-control' name='subgenus' value ='Capra (aegagrus) hircus' placeholder='Capra (aegagrus) hircus' >
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>elementName</label>
<!-- <input type='text' class='form-control' name='elementName' value ='a' placeholder='' > -->
<select class="form-control" name='elementName'>
<option>Cranium</option>
<option>Mandible</option>
<option>Teeth</option>
<option>Rib</option>
<option>Humerus</option>
<option>Ulna</option>
<option>Radius</option>
<option>Carpal</option>
<option>Metacarpal</option>
<option>Femur</option>
<option>Patela</option>
<option>Fibula</option>
<option>Tarsal</option>
<option>Metatarsal</option>
<option>Scapula</option>
<option>Vertebrae</option>
<option>Middle Phalanx</option>
<option>Phalanx</option>
<option>Tibia</option>
<option>Astragalus</option>
<option>Calcaneus</option>
<option>Proximal Phalanx</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
maybe little bit lazy, but it works
if you thought similar
<div class="form-group" >
<select class="form-control" id="sel0">
<option value="0">Choose</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
</select>
<br>
<select class="form-control dispnone" id="sel1_1">
<option value="0">Choose</option>
<option value="1">A4</option>
<option value="2">RS8</option>
</select>
<select class="form-control dispnone" id="sel1_2">
<option value="0">Choose</option>
<option value="1">E36</option>
<option value="2">X5</option>
</select>
<select class="form-control dispnone" id="sel2_1">
<option value="0">Choose</option>
<option value="1">120LE</option>
<option value="2">140LE</option>
</select>
<select class="form-control dispnone" id="sel2_2">
<option value="0">Choose</option>
<option value="1">cyl8</option>
<option value="2">cyl16</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
var select_nums = 3;
$("#sel0").change(function() {
var ch = $("#sel0").val();
if(ch==0){
for (var i = 1; i < select_nums; i++) {
$('#sel1_'+i).css({'display':'none'});
}
$('#sel1_'+ch).css({'display':'block'});
}else if(ch==1){
for (var i = 1; i < select_nums; i++) {
$('#sel1_'+i).css({'display':'none'});
}
$('#sel1_'+ch).css({'display':'block'});
}else if(ch==2){
for (var i = 1; i < select_nums; i++) {
$('#sel1_'+i).css({'display':'none'});
}
$('#sel1_'+ch).css({'display':'block'});
}
});
$("#sel1_1").change(function() {
var ch = $("#sel1_1").val();
if(ch==0){
for (var i = 1; i < select_nums; i++) {
$('#sel2_'+i).css({'display':'none'});
}
$('#sel2_'+ch).css({'display':'block'});
}else if(ch==1){
for (var i = 1; i < select_nums; i++) {
$('#sel2_'+i).css({'display':'none'});
}
$('#sel2_'+ch).css({'display':'block'});
}else if(ch==2){
for (var i = 1; i < select_nums; i++) {
$('#sel2_'+i).css({'display':'none'});
}
$('#sel2_'+ch).css({'display':'block'});
}
});
});
</script>
I extracted a portion of your html and got it working using an event listener to hide the unwanted options. I hope it helps:
I only considered the first two categories to show the example 'Animalia' and 'Plantae' and considered two subsets of options for each. The change event on the select tag triggers the code to hide and show as required.
function hideSubset(selectedValue){
let secondChoice = document.querySelector('#secondChoice');
let firstChoice = document.querySelector('#firstChoice');
if (selectedValue === 'Animalia'){
secondChoice.style.display = 'none';
firstChoice.style.display = 'block';
} else {
firstChoice.style.display = 'none';
secondChoice.style.display = 'block';
}
}
let mainChoice = document.querySelector('#mainChoice');
mainChoice.addEventListener('change', function(){
hideSubset(mainChoice.value);
}, false);
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>kingdom</label>
<!-- <input type='text' class='form-control' name='kingdom' value ='Animalia' placeholder='Animalia' > -->
<select class="form-control" name='kingdom' id="mainChoice">
<option>Choose one</option>
<option>Animalia</option>
<option>Plantae</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left' id="firstChoice">
<div class='form-group'>
<label for='uname'>Options for Animalia</label>
<!-- <input type='text' class='form-control' name='phylum' value ='Chordata' placeholder='Chordata' > -->
<select class="form-control" name='phylum'>
<option>Chordata</option>
<option>Annelid</option>
<option>Arthropod</option>
<option>Bryozoa</option>
<option>Cnidaria</option>
<option>Echinoderm</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left' id="secondChoice">
<div class='form-group'>
<label for='uname'>Options for Plantae</label>
<!-- <input type='text' class='form-control' name='phylum' value ='Chordata' placeholder='Chordata' > -->
<select class="form-control" name='phylum'>
<option>Mollusc</option>
<option>Nematode</option>
<option>Platyhelminthes</option>
<option>Rotifer</option>
<option>Sponge</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
It shows like this on my side. I use bootstrap 4
Looks like this when loading
When choosing Animalia
When choosing Plantae
I have following issue:
I have Jquery element Tournament.player with following data:
<div class="row mb-2">
<div class="col">
<input name="players[2][nickname]" type="text" class="form-control" id="p_nickname" placeholder="Nickname" value="Player3">
</div>
<div class="col p_region" style="">
<select name="players[2][region]" class="form-control">
<option value="" disabled="" selected="">Choose region</option>
</select>
</div>
<div class="col-2">
<button type="button" class="w-100 btn-sm btn-danger deleteRow">Delete</button>
</div>
</div>
I want to increment counter in name attribute of inner select and input elements.
That's what I tried so far:
var newPlayer = Tournament.player.clone().find('input, select').attr("name", function(i, name) {
return name.replace(/(\d+)/, function($0, $1) {
return +$1 + 1;
});
});
newPlayer.appendTo(".players");
It does what I need, but returns only select and input elements, like so:
<input name="players[3][nickname]" type="text" class="form-control" id="p_nickname" placeholder="Nickname" value="">
<select name="players[3][region]" class="form-control" disabled="">
<option value="" disabled="" selected="">Choose region</option>
</select>
What I do wrong? I want to get same element that I had before, but getting only part of it.
Big thanks in advance.
You mean this:
const Tournament = {
player: $(".mb-2")
}
var newPlayer = Tournament.player.clone();
newPlayer.find('input, select').attr("name", function(i, name) {
return name.replace(/(\d+)/, function($0, $1) {
return +$1 + 1;
});
});
newPlayer.find('input').attr("value", function(i, value) {
return value.replace(/(\d+)/, function($0, $1) {
return +$1 + 1;
});
});
newPlayer.appendTo(".players");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="players">
<div class="row mb-2">
<div class="col">
<input name="players[2][nickname]" type="text" class="form-control" id="p_nickname" placeholder="Nickname" value="Player2">
</div>
<div class="col p_region" style="">
<select name="players[2][region]" class="form-control">
<option value="" disabled="" selected="">Choose region</option>
</select>
</div>
<div class="col-2">
<button type="button" class="w-100 btn-sm btn-danger deleteRow">Delete</button>
</div>
</div>
</div>
i have select option with count of numbers so i need now when user choose any number clone div tag personal information by this number ex: - select 8 clone 8 time ..
i try do that by use( for loop )but i have problem when run i see clone over this number ex:- choose 8 clone 16 time
this is html code and my try js code
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</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>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>
The problem you are facing comes from this line: var clone = $('.rowClone').clone();
the first clone is fine because only 1 .rowClone exist, next time multiple .rowClone exist and it appends all of those.
You have 2 solutions, either use var clone = $('.rowClone:first').clone(); or move var clone = $('.rowClone').clone(); before your for loop
Demo of the problem, run it and look at the console
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
console.log("Number of .rowClone that exist = " + $('.rowClone').length)
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<option value="8">8</option>
</select>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>
</div>
</div>
</div>
I'm trying to add multiple product categories when "Add product" is clicked. I want the new product select box to remove the previously selected product category. I have this working for the first time the button is clicked, but it won't work a second or third time. Thanks for taking a look.
JSFiddle
HTML
<div id="products">
<div id="product-row-1" class="row">
<div class="small-6 columns">
<select id="product-category-1" name="product-category-1" class="text">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
</div>
<div class="small-6 columns">
<input type="number" step="0.01" min="0.01" class="text" name="product_amount-1" id="product-amount-1" placeholder="$$$" />
</div>
</div>
</div>
<div class="center row">
<button id="add-product">Add item</button>
</div>
JS
$(document).ready(function(){
var num = 1;
$('#add-product').click(function(){
var selVal = $('#product-category-'+num+'').val();
var clone = $('#product-row-'+num+'').clone();
$('#products').append(clone);
num++;
clone.attr("id", '#product-row-'+num+'');
clone.find('select').attr("id", 'product-category-'+num+'').attr("name", 'product-category-'+num+'');
clone.find('input').attr("id", 'product-amount-'+num+'').attr("name", 'product-amount-'+num+'');
$('#product-category-'+num+'').find("option[value='"+selVal+"']").remove();
return false;
});
});
When you update the ID of the cloned row, you keep the hash
clone.attr("id", '#product-row-' + num);
you have to remove the hash, otherwise you set the ID with the hash
clone.attr("id", 'product-row-' + num);
$(document).ready(function() {
var num = 1;
$('#add-product').click(function() {
var selVal = $('#product-category-' + num + '').val();
var clone = $('#product-row-' + num + '').clone();
$('#products').append(clone);
num++;
clone.attr("id", 'product-row-' + num + '');
clone.find('select').attr("id", 'product-category-' + num + '').attr("name", 'product-category-' + num + '');
clone.find('input').attr("id", 'product-amount-' + num + '').attr("name", 'product-amount-' + num + '');
$('#product-category-' + num + '').find("option[value='" + selVal + "']").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="products">
<div id="product-row-1" class="row">
<div class="small-6 columns">
<select id="product-category-1" name="product-category-1" class="text">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
</div>
<div class="small-6 columns">
<input type="number" step="0.01" min="0.01" class="text" name="product_amount-1" id="product-amount-1" placeholder="$$$" />
</div>
</div>
</div>
<div class="center row">
<button id="add-product">Add item</button>
</div>
<form name="myform" action="#" method="post">
<div class="col-md-4">
<div class="col-md-4 desc">Naziv marke: </div>
<div class="col-md-8">
<select class="form-control" id="brandovi">
<option value="AllBrands" selected>Sve marke</option>
<option value="Dunlop">Dunlop</option>
<option value="Fulda">Fulda</option>
<option value="Goodyear">Goodyear</option>
<option value="Sava">Sava</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<input type="radio" autocomplete="off" name="season" value="Summer"> <img width="20" src="img/ikone/summer.png" />
<input type="radio" autocomplete="off" name="season" value="AllSeason"> <img width="20" src="img/ikone/allSeason.png" />
<input type="radio" autocomplete="off" name="season" value="Winter"> <img width="20" src="img/ikone/winter.png" />
</div>
</div>
<div class="col-md-4">
<div class="col-md-4 desc">Tip vozila:</div>
<div class="col-md-8">
<select class="form-control">
<option value="AllTypes"> Sve vrste </option>
<option value="fourxfour"> 4x4</option>
</select>
</div>
</div>
<div class="col-md-2 text-right">
<input type="submit" name="submit" value="Traži"/>
</div>
</form>
I have this in HTML, so I need javascript code that will output custom URL depending on selected values
Url example
http://link.com/?brandovi=sava&sezona=zima&vrstaVozila=4x4
I tried several JS codes but I could not make it.
Please help.
I solved the problem :D
Here is the solution
<script type="text/javascript">
function submitUrl(form){
var brandovi = document.getElementById("brandovi");
var brand = brandovi.options[brandovi.selectedIndex].value;
var vrsteVozila = document.getElementById("vrsteVozila");
var vrsta = vrsteVozila.options[vrsteVozila.selectedIndex].value;
var radios = document.getElementsByName('season');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
var sezona = radios[i].value;
}
else{
var sezona = '';
}
}
window.location = 'http://localhost/wordpress/' + '?brandovi=' + brand + '&sezona=' + sezona + '&vrstaVozila=' + vrsta;
}