Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HDX-10024 preselect values and disable submit button #6405

Merged
merged 2 commits into from
Aug 2, 2024
Merged

HDX-10024 preselect values and disable submit button #6405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0575340
HDX-10024 preselect values and disable submit button
ccataalin Aug 2, 2024
1ec8350
HDX-10024 disable submit button if fields are empty
ccataalin Aug 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 65 additions & 9 deletions ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/landing_pages/hdx_signals.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,23 @@
$(document).ready(function () {
var $form = $('#mc_embed_signup form');
var DATASETS_GROUP = '[4389]';

var $form = $('#signals-form-card form');
var $button = $form.find('#mc-embedded-subscribe');
var $fields = $form.find('#mce-EMAIL, #mce-FNAME, #mce-ORG');

var DATASETS_GROUPS = [
'[4389]'
];
var LOCATIONS_GROUPS = [
'[4397]',
'[4405]',
'[4417]',
'[4409]',
'[4401]',
'[4421]',
'[4425]'
];
var DATASETS_LOCATIONS_GROUPS = DATASETS_GROUPS.concat(LOCATIONS_GROUPS);

var ALL_LOCATIONS = [
'[4397][16384]',
'[4405][8388608]',
Expand Down Expand Up @@ -38,24 +55,32 @@ $(document).ready(function () {
'[4421][8]',
];

function select_group(group) {
$form.find('input[name^="group' + group + '"]').prop('checked', true);
function select_groups(groups) {
groups.forEach(function (group) {
$form.find('input[name^="group' + group + '"]').prop('checked', true);
});
disable_submit_button();
}

function unselect_group(group) {
$form.find('input[name^="group' + group + '"]').prop('checked', false);
function unselect_group(groups) {
groups.forEach(function (group) {
$form.find('input[name^="group' + group + '"]').prop('checked', false);
});
disable_submit_button();
}

function select_values(values) {
values.forEach(function (value) {
$form.find('input[name="group' + value + '"]').prop('checked', true);
});
disable_submit_button();
}

function unselect_values(values) {
values.forEach(function (value) {
$form.find('input[name="group' + value + '"]').prop('checked', false);
});
disable_submit_button();
}

function add_select_buttons(group_label, group) {
Expand All @@ -66,15 +91,36 @@ $(document).ready(function () {
group_label.append(unselect_btn);

select_btn.click(function () {
select_group(group);
select_groups([group]);
});
unselect_btn.click(function () {
unselect_group(group);
unselect_group([group]);
});
}

function disable_submit_button() {
var dataset_checked = DATASETS_GROUPS.some(function (group) {
return $form.find('input[name^="group' + group + '"]:checked').length > 0;
});

var location_checked = LOCATIONS_GROUPS.some(function (group) {
return $form.find('input[name^="group' + group + '"]:checked').length > 0;
});

var fields_filled = $fields.toArray().every(function(field) {
return $(field).val().trim() !== '';
});

if(dataset_checked && location_checked && fields_filled) {
$button.removeClass('disabled').removeAttr('disabled');
}
else {
$button.addClass('disabled').attr('disabled', 'disabled');
}
}

$form.find('#select-all-datasets').on('click', function () {
select_group(DATASETS_GROUP);
select_groups(DATASETS_GROUPS);
});
$form.find('#select-all-locations').on('click', function () {
select_values(ALL_LOCATIONS);
Expand All @@ -97,4 +143,14 @@ $(document).ready(function () {
}
});

DATASETS_LOCATIONS_GROUPS.forEach(function (group) {
$form.find('input[name^="group' + group + '"]').on('change', function () {
disable_submit_button();
});
});

$fields.on('input', function() {
disable_submit_button();
});

});
35 changes: 18 additions & 17 deletions ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/signals.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
</div>
<div class="row">
<div class="col-12">
<div class="bem-card card my-3">
<div class="bem-card card my-3" id="signals-form-card">
<div class="card-body bem-card__body">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 mx-auto">
Expand Down Expand Up @@ -69,37 +69,37 @@
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4389][128]" class="form-check-input"
id="mce-group[4389]-4389-0" value="">
id="mce-group[4389]-4389-0" value="" checked>
<label class="form-check-label" for="mce-group[4389]-4389-0">Conflict-driven
displacement - IDMC</label>
</li>
<li class="form-check">
<input type="checkbox" name="group[4389][256]" class="form-check-input"
id="mce-group[4389]-4389-1" value="">
id="mce-group[4389]-4389-1" value="" checked>
<label class="form-check-label" for="mce-group[4389]-4389-1">Disaster-driven
displacement - IDMC</label>
</li>
<li class="form-check">
<input type="checkbox" name="group[4389][1024]" class="form-check-input"
id="mce-group[4389]-4389-2" value="">
id="mce-group[4389]-4389-2" value="" checked>
<label class="form-check-label" for="mce-group[4389]-4389-2">Armed conflict -
ACLED</label>
</li>
<li class="form-check">
<input type="checkbox" name="group[4389][2048]" class="form-check-input"
id="mce-group[4389]-4389-3" value="">
id="mce-group[4389]-4389-3" value="" checked>
<label class="form-check-label" for="mce-group[4389]-4389-3">Food insecurity -
IPC/CH</label>
</li>
<li class="form-check">
<input type="checkbox" name="group[4389][4096]" class="form-check-input"
id="mce-group[4389]-4389-4" value="">
id="mce-group[4389]-4389-4" value="" checked>
<label class="form-check-label" for="mce-group[4389]-4389-4">Agricultural hotspots
- JRC ASAP</label>
</li>
<li class="form-check">
<input type="checkbox" name="group[4389][8192]" class="form-check-input"
id="mce-group[4389]-4389-5" value="">
id="mce-group[4389]-4389-5" value="" checked>
<label class="form-check-label" for="mce-group[4389]-4389-5">Market monitoring -
WFP</label>
</li>
Expand All @@ -123,7 +123,7 @@
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4397][16384]" class="form-check-input"
id="mce-group[4397]-4397-0" value="">
id="mce-group[4397]-4397-0" value="" checked>
<label class="form-check-label" for="mce-group[4397]-4397-0">All locations in the
region</label>
</li>
Expand All @@ -147,7 +147,7 @@
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4405][8388608]" class="form-check-input"
id="mce-group[4405]-4405-0" value="">
id="mce-group[4405]-4405-0" value="" checked>
<label class="form-check-label" for="mce-group[4405]-4405-0">All locations in the
region</label>
</li>
Expand All @@ -166,7 +166,7 @@
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4417][8589934592]" class="form-check-input"
id="mce-group[4417]-4417-0" value="">
id="mce-group[4417]-4417-0" value="" checked>
<label class="form-check-label" for="mce-group[4417]-4417-0">All locations in the
region</label>
</li>
Expand Down Expand Up @@ -211,7 +211,7 @@
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4409][33554432]" class="form-check-input"
id="mce-group[4409]-4409-0" value="">
id="mce-group[4409]-4409-0" value="" checked>
<label class="form-check-label" for="mce-group[4409]-4409-0">All locations in the
region</label>
</li>
Expand Down Expand Up @@ -242,7 +242,7 @@
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4401][65536]" class="form-check-input"
id="mce-group[4401]-4401-0" value="">
id="mce-group[4401]-4401-0" value="" checked>
<label class="form-check-label" for="mce-group[4401]-4401-0">All locations in the
region</label>
</li>
Expand Down Expand Up @@ -281,7 +281,7 @@
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4421][549755813888]" class="form-check-input"
id="mce-group[4421]-4421-0" value="">
id="mce-group[4421]-4421-0" value="" checked>
<label class="form-check-label" for="mce-group[4421]-4421-0">All locations in the
region</label>
</li>
Expand Down Expand Up @@ -337,7 +337,7 @@
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4425][16]" class="form-check-input"
id="mce-group[4425]-4425-0" value="">
id="mce-group[4425]-4425-0" value="" checked>
<label class="form-check-label" for="mce-group[4425]-4425-0">All locations in the
region</label>
</li>
Expand All @@ -353,9 +353,10 @@
<input type="text" name="b_ea3f905d50ea939780139789d_e908cb9d48" tabindex="-1" value="">
</div>
<div class="clear text-center mb-3">
<input type="submit" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"
data-module="hdx_click_stopper" data-module-link_type="signals sign up"
data-module-just_send_event="true" data-module-label="Subscribe" value="Subscribe">
<input type="submit" name="subscribe" id="mc-embedded-subscribe"
class="btn btn-primary disabled" disabled data-module="hdx_click_stopper"
data-module-link_type="signals sign up" data-module-just_send_event="true"
data-module-label="Subscribe" value="Subscribe">
</div>
</div>
</form>
Expand Down
Loading