Develop Reference

Javascript Update URL With Options From Multiple Form Checkboxes

I have a form with 2 sets of checkboxes with a view this could be 3 or 4 down the line.
For this question I have 2 which each have >5 checkboxes and multiple items can be selected in those check boxes.
When a user selects the checkboxes I want to update the URL and refresh with parameters which I'll be using to filter content.
URL I want:
example.com/category/?content=video_static&channel=facebook-ads_instagram-ads
URL I'm getting:
example.com/category/?content=video&content=static&channel=facebook-ads&channel=instagram-ads
I'm not currently changing the URL with javascript but just a form input and submit. I'm thinking I'll need to use Javascript to enable better URL handling.
I want to use undercores to then seperate the checkbox selections which at the minute I'm happy to just refresh the page.
I appreciate this may be very simple for some but Javascript isn't my thing and I have about 20 tabs open trying. Any help is appreciated.
Here is example form (please ignore the tweo different checkbox HTML formats, I hadn't updated the second before this):
<form id="abFilter" method="get" role="form" action="">
<div class="list-group">
<h3>Content Type</h3>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="static" name="content" value="static">
<label for="static">static</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="carousel" name="content" value="carousel">
<label for="carousel">carousel</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="video" name="content" value="video">
<label for="video">video</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="gif" name="content" value="gif">
<label for="gif">gif</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="dpa" name="content" value="dpa">
<label for="dpa">dpa</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="stories" name="content" value="stories">
<label for="stories">stories</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="influencer" name="content" value="influencer">
<label for="influencer">influencer</label>
</div>
</div>
<div class="list-group">
<h3>Channels</h3>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="facebook-ads">
facebook-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="instagram-ads">
instagram-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="google-ads">
google-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="microsoft-ads">
microsoft-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="tiktok-ads">
tiktok-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="snapchat-ads">
snapchat-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="youtube-ads">
youtube-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="pinterest-ads">
pinterest-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="podcast-ads">
podcast-ads
</label>
</div>
</div>
<button id="select">Apply Filter</button>
</form>

The following should do it:
document.querySelector("form").onsubmit=ev=>{
ev.preventDefault();
let o={};
ev.target.querySelectorAll("[name]:checked").forEach(el=>{
(o[el.name]=o[el.name]||[]).push(el.value)})
console.log(location.pathname+"?"+
Object.entries(o).map(([v,f])=>
v+"="+f.join("_")).join("&")
);
}
<form id="abFilter" method="get" role="form" action="">
<div class="list-group">
<h3>Content Type</h3>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="static" name="content" value="static">
<label for="static">static</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="carousel" name="content" value="carousel">
<label for="carousel">carousel</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="video" name="content" value="video">
<label for="video">video</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="gif" name="content" value="gif">
<label for="gif">gif</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="dpa" name="content" value="dpa">
<label for="dpa">dpa</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="stories" name="content" value="stories">
<label for="stories">stories</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="influencer" name="content" value="influencer">
<label for="influencer">influencer</label>
</div>
</div>
<div class="list-group">
<h3>Channels</h3>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="facebook-ads">
facebook-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="instagram-ads">
instagram-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="google-ads">
google-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="microsoft-ads">
microsoft-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="tiktok-ads">
tiktok-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="snapchat-ads">
snapchat-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="youtube-ads">
youtube-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="pinterest-ads">
pinterest-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="podcast-ads">
podcast-ads
</label>
</div>
</div>
<button id="select">Apply Filter</button>
</form>
Instead of only showing the new location string with console.log() you should of course use it to apply your filter settings, either through an AJAX call or simply by replacing the current document.location.href.

jQuery: show Div when check first radio button

In the example below, I'm trying to show a specific div only when i check the radio button "yes".
It's ok for one div but when I try to do this for two separate panes, checking the second radio button also expands the first field.
How can I fold/unfold each container separately?
https://jsfiddle.net/vsf7mph8/3/
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||$('.form-radio input:nth-child(2)').val() == $(this).val())
$('.otherRowinput').toggle('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>

Your mistake is that $('.otherRowinput').toggle('fast'); applies to all text fields. However, you only want to apply it to the nearest text field.
For this, don't use the $(selector) function which applies to all objects in the DOM, but traverse the DOM starting from the checkbox that was modified. Starting from the currently checked box, traverse the DOM upwards until you find a common parent of the checkbox and the textarea, then traverse it downwards to the text area and toggle that.
You find the parent that includes both the checkbox and the text field with $(this).closest(selector). Then, starting from that parent object, select the text area that is a child of that element using find(selector). In total:
$(this).closest(".row").find(".otherRowinput").toggle('fast');
Below is your updated example.
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||
$('.form-radio input:nth-child(2)').val() == $(this).val()){
$(this).closest(".row").find(".otherRowinput").toggle('fast');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>

How to make required be empty after selecting radio button

I am trying to change the name of required when it is not selected and I did it. When I click "Send" without selecting it first, it will show an error, but when I selected it again but not the first radio button where I put the required syntax it still shows the same error that forced me to select the first radio button. Is there a way to make it right, please? Thank you for the help.
This is my code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form method="post" action="" id="form">
<div class="container">
<div class="intro-text left-0 text-left text-black p-4 rounded " style="background-color: #ffbe76">
<div class="section-heading-upper">
<p class="mb-3 lead">1. ......?
</p>
</div>
<div class="row ml-2">
<div class="col-auto">
<div class="form-group mx-auto option">
<h2 class="section-heading mb-2">
<span class="text-center section-heading-upper">Layanan</span>
</h2>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting1" value="100.00" required="" oninvalid="this.setCustomValidity('Pick one')" oninput="this.setCustomValidity('')">
<label class="form-check-label" for="exampleRadios1">
Sangat Penting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting2" value="81.25">
<label class="form-check-label" for="exampleRadios2">
Penting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting3" value="62.50">
<label class="form-check-label" for="exampleRadios3">
Tidak Penting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting4" value="43.75">
<label class="form-check-label" for="exampleRadios4">
Sangat Tidak Penting
</label>
</div>
</div>
</div>
<div class="col-auto">
<div class="form-group mx-auto option">
<h2 class="section-heading mb-2">
<span class="text-center section-heading-upper">Kepuasan Layanan</span>
</h2>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas1" value="100.00" required oninvalid="this.setCustomValidity('Pick one')" oninput="setCustomValidity('')">
<label class="form-check-label" for="exampleRadios1">
Sangat Puas
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas2" value="81.25">
<label class="form-check-label" for="exampleRadios2">
Puas
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas3" value="62.50">
<label class="form-check-label" for="exampleRadios3">
Tidak Puas
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas4" value="43.75">
<label class="form-check-label" for="exampleRadios4">
Sangat Tidak Puas
</label>
</div>
</div>
</div>
</div>
<div class="text-center mt-2">
<input class="btn btn-primary btn-lg" value="Send" id="singlebutton" name="submit" type="submit" onclick="check()">
</div>
</form>

You can remove required attributes and test whether a specific one is checked using jQuery as follows:
if ($('input[name=penting1]:checked').length > 0) {
//selected
}
if ($('input[name=puas1]:checked').length > 0) {
//selected
}
it will work :)

Radio Button Conflict between Bootstrap And Angular js

<!-- Container -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-header text-center">
<h2>Radio Button Conclict between Bootstrap And Angular</h2>
</div>
</div>
</div>
<div class="row">
<!-- With data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has data-toggle property
</h4>
</div>
<div class="btn-group row" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection | json}}</p>
</div>
</div>
</div>
<!--/ With data-toggle -->
<!-- Without data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has NOT data-toggle property
</h4>
</div>
<div class="btn-group row">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection2 | json}}</p>
</div>
</div>
</div>
<!--/ Without data-toggle -->
</div>
</div>
<!--/ Container -->
" data-toggle="buttons" " tag does not allow the angular js to work properly as u can u see in this plnkr example too.. but if i remove then its working fine..
but i want ot keep it as it is..
http://plnkr.co/edit/l36UgnR7kltphXdEQLCk?p=preview

By hiding the radio buttons using the data-toggle="button" attribute on the btn-group, bootstrap is not allowing the click event to propagate down to the radio input. You can counter this effect by adding ng-click bindings to the .btn elements.
<div class="btn-group row" data-toggle="buttons">
<label class="btn btn-primary" ng-click="selection = 'option1'">
<input type="radio" data-ng-model="selection" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary" ng-click="selection = 'option2'">
<input type="radio" data-ng-model="selection" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary" ng-click="selection = 'option3'">
<input type="radio" data-ng-model="selection" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
PS. the reason you'll notice that clicking the top set of radio affects the bottom set is because they have the same name attribute. Change this as needed and you'll notice that each group works correctly/independently of the other

Because of same name for input this is happening.
<div class="row">
<div class="col-lg-12">
<div class="page-header text-center">
<h2>Radio Button Conclict between Bootstrap And Angular</h2>
</div>
</div>
</div>
<div class="row">
<!-- With data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has data-toggle property
</h4>
</div>
<div class="btn-group row" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="group1" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="group1" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="group1" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection | json}}</p>
</div>
</div>
</div>
<!--/ With data-toggle -->
<!-- Without data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has NOT data-toggle property
</h4>
</div>
<div class="btn-group row">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection2 | json}}</p>
</div>
</div>
</div>
<!--/ Without data-toggle -->
</div>
</div>
<!--/ Container -->
http://plnkr.co/edit/chzO8o7gx2STGkyQ8SNK?p=preview

How to get checkbox value through serializedarray()

how to get checkbox value in array format like [{abc:[1,2,3]}]
now i am getting like [{abc[]:1,abc[]:2,abc[]:3}]...
for getting serializedarray i am using var form = $('.wpc_contact').serializeArray();
here this is my html form which is get generating dynamic (i am using drag and drop for creating dynamic form)
<form method="POST" name="1" class="form-horizontal wpc_contact" novalidate="novalidate">
<fieldset>
<div id="legend" class="">
<legend class="">Demo</legend>
<div id="alert-message" class="alert hidden" style="color: red;"></div>
</div>
<div class="control-group">
<label class="control-label">Checkboxes</label>
<div class="controls" name="wpc_chkbox" req="yes">
<label class="checkbox">
<input type="checkbox" value="Option one" id="wpc_chkbox_0" name="wpc_chkbox[]" req="yes"> Option one
</label>
<label class="checkbox">
<input type="checkbox" value="Option two" id="wpc_chkbox_1" name="wpc_chkbox[]" req="yes"> Option two
</label>
</div>
<p class="help-blocksp" style="display:none;">wpc_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<label class="control-label">Inline Checkboxes</label>
<div class="controls" name="wpc_inline_chkbox" req="yes">
<label class="checkbox inline">
<input type="checkbox" value="1" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_0" req="yes"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" value="2" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_1" req="yes"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" value="3" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_2" req="yes"> 3
</label>
</div>
<p class="help-block" style="display:none;">wpc_inline_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-success">Button</button>
</div>
</div>
</fieldset>

To create an array use this -
var arr = $("input[name='checkboxname[]']:checked").map(function() {
return this.value;
}).get();
Alernate Solution :
<input type="checkbox" class="selector" value="{value}"/> //add as many as you wan't
JS
var checked='';
$('.selector:checked').each(function(){
checked=checked+','+$(this).val();
});
PHP
$ids=explode(',',substr($_GET['param_with_checked_values'],1));