I am looking to generate a json string based on the button selection on a html page.
<div id="btnStudios" >
<button type="button" id="01" value="warner" class="btn btn-default">Warner</button>
<button type="button" id="02" value="tf1" class="btn btn-default">TF1</button>
<button type="button" id="03" value="gaumont" class="btn btn-default">Gaumont</button>
<button type="button" id="04" value="pathe" class="btn btn-default">Pathe</button>
<button type="button" id="05" value="studiocanal" class="btn btn-default">StudioCanal</button>
<button type="button" id="06" value="francetv" class="btn btn-default">FranceTV</button>
<button type="button" id="07" value="m6snd" class="btn btn-default">M6SND</button>
</div>
<div id = "btnplatforms" class="btn-group">
<button type="button" id = "11" value="orange" class="btn btn-default">Orange</button>
<button type="button" id = "12" value="itunes" class="btn btn-default">iTunes</button>
<button type="button" id = "13" value="sfr" class="btn btn-default">SFR</button>
</div>
$(".btn").click(function() {
$(this).toggleClass('active');
});
Based on the active state of the button i want the result to be for example {Studios : Warner, Gaumont Platform : Orange, iTunes}
Is this possible to achive this with javascript? If yes how? Thanks in advance for your help.
asked Mar 30, 2015 at 15:52
Tauseef Hussain
1,0894 gold badges17 silver badges29 bronze badges
2 Answers 2
You can try this :
var btn_active_array = {
"Studios" : [],
"Platform":[]
};
$('#btnStudios .btn.active').each(function(index,btn_active){
btn_active_array["Studios"].push($(btn_active).text());
});
$('#btnplatforms .btn.active').each(function(index,btn_active){
btn_active_array["Platform"].push($(btn_active).text());
});
jsfiddle link : https://jsfiddle.net/5kb5fdyz/
answered Mar 30, 2015 at 16:05
abdelouahed touimi
763 bronze badges
Sign up to request clarification or add additional context in comments.
3 Comments
Tauseef Hussain
Thank you :) Could i also set the string to a default value? I want all the options to be selected if no selection is made.
abdelouahed touimi
yes : if( btn_active_array["Platform"].length == 0 ) btn_active_array["Platform"].push("default"); OR if( ! btn_active_array["Platform"].length) btn_active_array["Platform"].push("default");
Tauseef Hussain
Thank you so much :) Would you mind if i ask you to do the whole thing on a jsfiddle?? I might be asking for too much but i am pretty new to all this and still getting a hang of it. Thank you is Advance :)
You can try this:
var output = {
Studios: $('#btnStudios button.active').map(function() {
return $(this).val();
}).get(),
Platform: $('#btnplatforms button.active').map(function() {
return $(this).val();
}).get()
};
here is jsFiddle.
answered Mar 30, 2015 at 16:00
jcubic
67.1k58 gold badges252 silver badges466 bronze badges
4 Comments
Tauseef Hussain
Thank you so much @jcubic. However i am also looing for the default to be all select. I tried ** (! output.Studios) { output.Studios = ["warner","tf1","gaumont","pathe","studiocanal","francetv","m6snd"]** Could you tell me how do i go about it preferably with the jsfiddle. Much appreciated :)
Tauseef Hussain
Works perfect. Cant thank you enough. Hope to be atleast half as good as you someday :)
Tauseef Hussain
Hi @jcubic, I was trying to do the same with list items this time and i am unable to add it to the json string. I get the output as "Reports":[0,0]. I want to do the exact same operations on the list as we did for the buttons. I want shrOv to be the default instead of all selected. The HTML code is: <li id="sr" class="dropdown"> <ul class = "dropdown-menu"> <li value="shrOv"><a href = "#">Overview</a></li> <li value="shrTi"><a href = "#">Titles</a></li> </ul> </li> How would i go about this? Hoping to get an amazing way out from you as usual :)
jcubic
@TauseefHussain maybe value don't work with li element. Try to use
.attr('value') or use data-value="shrOv" and .data('value')lang-js