i encounter like that when the checkbox is being select i want to pop up alert if that was you like here is the solution that i find. https://stackoverflow.com/a/30979941/12875957
Solution 1 :
Solution 2 :
I ought to state that I have little knowledge of jQuery nor of using the modal popups so can offer no guidance there. With respect to the selection of all checkboxes and then subsequent button click perhaps the following example might help. The HTML is a rough approximation of that from the question in that there are a selection of checkboxes that must can all be selected/deselected simply by clicking the master checkbox. Once that checkbox has been checked the accept button is enabled which, when pressed, uses the modal content somehow. In the below the modal content is inserted to the document body using insertAdjacentHTML
The modal content here is stored away in a template so that it is out of the regular flow of html for this demo… no doubt it would be hidden and it’s appearance & position controlled by CSS & possibly javascript.
document.addEventListener('DOMContentLoaded',(e)=>{
let modal;
const checked=[];
const minchecked=2;
const chkbox=document.querySelector('input[name="selectall"][type="checkbox"]');
const bttn=document.querySelector('button[name="btn_accept"]');
const template=document.querySelector('template#popup');
const colInput=document.querySelectorAll('[type="checkbox"]:not( [name="selectall"] )');
const changehandler=function(e){
Array.from( colInput ).forEach(chk=>{
chk.checked=this.checked;
bttn.disabled=!this.checked;
});
};
const clickhandler=function(e){
document.body.insertAdjacentHTML( 'beforebegin', template.innerHTML );
};
const updatehandler=function(e){
if( this.checked )checked.push( this );
else checked.splice( checked.indexOf( this ),1 );
/* If you want to enable the button */
bttn.disabled = checked.length <= minchecked;
/* if you want to popup the message automatically */
if( checked.length >= minchecked )clickhandler.call( this, e );
else {
if( modal=document.getElementById('common_accept_modal') ){
modal.parentNode.removeChild( modal )
}
}
};
chkbox.addEventListener( 'change', changehandler );
bttn.addEventListener( 'click', clickhandler );
Array.from( colInput ).forEach( chk=>{
chk.addEventListener('change',updatehandler)
})
});<form method='post'>
<label>Select All<input type='checkbox' name='selectall' /></label>
<div class='inv_chkboxes'>
<input type="checkbox" name="inv_chk[]" value="1" />
<input type="checkbox" name="inv_chk[]" value="2" />
<input type="checkbox" name="inv_chk[]" value="3" />
<input type="checkbox" name="inv_chk[]" value="4" />
<input type="checkbox" name="inv_chk[]" value="5" />
<input type="checkbox" name="inv_chk[]" value="6" />
<input type="checkbox" name="inv_chk[]" value="7" />
<input type="checkbox" name="inv_chk[]" value="8" />
<input type="checkbox" name="inv_chk[]" value="9" />
<input type="checkbox" name="inv_chk[]" value="10" />
<input type="checkbox" name="inv_chk[]" value="11" />
<input type="checkbox" name="inv_chk[]" value="12" />
<input type="checkbox" name="inv_chk[]" value="13" />
<input type="checkbox" name="inv_chk[]" value="14" />
<input type="checkbox" name="inv_chk[]" value="15" />
<input type="checkbox" name="inv_chk[]" value="16" />
<input type="checkbox" name="inv_chk[]" value="17" />
<input type="checkbox" name="inv_chk[]" value="18" />
<input type="checkbox" name="inv_chk[]" value="19" />
<input type="checkbox" name="inv_chk[]" value="20" />
</div>
<button type="button" name="btn_accept" class="btn btn-accept" disabled>Accept Application</button>
<template id='popup'>
<!-- Common Accept Modal -->
<div class="modal fade" id="common_accept_modal" tabindex="-1" role="dialog" aria-labelledby="common_accept_modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-popout modal-dialog-centered" role="document">
<div class="modal-content">
<div class="block block-themed block-transparent mb-0">
<div class="block-header bg-primary-dark pt-3">
<h3 class="block-title">Confirm Accept</h3>
</div>
<div class="block-content font-size-sm">
<form id="common_accept_form" action="process/osa_action.php" method="post">
<div class="row items-push p-0 m-0">
<p>Are you sure you want to accept this application?</p>
<input type="text" name="name" class="form-control input-sm bg-white mb-1 text-grey" disabled />
<input type="text" name="prog" class="form-control input-sm bg-white mb-1 text-grey" disabled />
<select class="form-control input-sm" name="oltype" required>
<option selected disabled hidden>Offer Type
<option value='1'>Letter of Offer (Foundation)
<option value='2'>Letter of Offer (Degree)
<option value='3'>Conditional Offer Letter
</select>
<input type="text" name="email" hidden/>
<input type="text" name="proc" hidden />
<input type="text" name="appid" hidden />
<input type="text" name="optid" hidden />
<input type="text" name="progid" hidden />
</div>
</form>
</div>
<div class="block-content block-content-full text-right">
<button type="submit" class="btn btn-sm btn-outline-secondary" form="common_accept_form">Continue</button>
</div>
</div>
</div>
</div>
</div>
</template>
</form>Problem :
i want to ask. does anybody know how to select all checkbox,
then click accept button, then pop up a message below. my friend said i need to bring the id. but i don’t know how to do it
I need to do javascript to pop up the message after i click a button. i already make the button, but i don’t know how to link all of it.
(THIS IS THE CODE FOR POP UP MESSAGE)
<!-- Common Accept Modal -->
<div class="modal fade" id="common_accept_modal" tabindex="-1" role="dialog"
aria-
labelledby="common_accept_modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-popout modal-dialog-centered"
role="document">
<div class="modal-content">
<div class="block block-themed block-transparent mb-0">
<div class="block-header bg-primary-dark pt-3">
<h3 class="block-title">Confirm Accept</h3>
</div>
<div class="block-content font-size-sm">
<form id="common_accept_form" action="process/osa_action.php"
method="post">
<div class="row items-push p-0 m-0">
<p class="">Are you sure you want to accept this application?</p>
<input type="text" name="name" class="form-control input-sm bg-
white mb-1 text-grey"
disabled />
<input type="text" name="prog" class="form-control input-sm bg-
white mb-1 text-grey"
disabled />
<select class="form-control input-sm" name="oltype" required>
<option value=''>Offer Type</option>
<option value='1'>Letter of Offer (Foundation)</option>
<option value='2'>Letter of Offer (Degree)</option>
<option value='3'>Conditional Offer Letter</option>
</select>
<input type="text" name="email" hidden/>
<input type="text" name="proc" hidden />
<input type="text" name="appid" hidden />
<input type="text" name="optid" hidden />
<input type="text" name="progid" hidden />
</div>
</form>
</div>
<div class="block-content block-content-full text-right">
<button type="submit" class="btn btn-sm btn-outline-secondary"
form="common_accept_form">Continue</button>
</div>
</div>
</div>
</div>
</div>
(This is the button and select all checkbox that i do)
<div>
<button type="button" name="btn_accept" id="btn_accept" class="btn btn-
accept">Accept Application</button>
<div class="float-right">
<div class="input-group">
<input type="text" id="btnSearch" placeholder="Search..">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-search fa-1x"></i>
</span>
</div>
</div>
</div>
<table class="table table-vcenter js-dataTable-buttons">
<thead class="thead-light">
<tr>
<th><input type='checkbox' id='select_all'
onclick="selectAll()">Select</th>
<th>#</th>
<th width="7%">Session</th>
<th width="25%">Applicant Details</th>
<th>Progress</th>
<th>Programme</th>
<th>Remarks</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<?php
$k=0;
for ($i=1; $i<=$total_app; $i++) {
if (isset($app_deptid[$i]) and $app_deptid[$i]==$sch[$m]
and $app_display[$i]==1) { $k++;
?>
<tr>
<td><input type="checkbox" name="selectall"
class="check_invoice"/></td>
<td><?=$k?></td>
<td><?=$app_acas[$i]?></td>
<td><?=$app_details[$i]?></td>
<td><?=$app_progres[$i]?></td>
<td><?=$app_program[$i]?></td>
<td><?=$app_remarks[$i]?><br><br><?
=$app_reasonremarks[$i]?></td>
<td class="text-center"><?=$app_btn[$i]?></td>
</tr>
<?php
}
}
for ($i=1; $i<=$total_app; $i++) {
if (isset($app_deptid[$i]) and
$app_deptid[$i]=="Unassigned" and $app_display[$i]==1) { $k++;
?>
<tr>
<td><input type="checkbox" name="selectall"
class="check_invoice"/></td>
<td><?=$k?></td>
<td><?=$app_acas[$i]?></td>
<td><?=$app_details[$i]?></td>
<td><?=$app_progres[$i]?></td>
<td><?=$app_program[$i]?></td>
<td><?=$app_remarks[$i]?><br><br><?
=$app_reasonremarks[$i]?></td>
<td class="text-center"><?=$app_btn[$i]?></td>
</tr>
<?php
(This is the javascript for select all checkbox)
<script>
function selectAll() {
var blnChecked = document.getElementById("select_all").checked;
var check_invoices = document.getElementsByClassName("check_invoice");
var intLength = check_invoices.length;
for(var i = 0; i < intLength; i++) {
var check_invoice = check_invoices[i];
check_invoice.checked = blnChecked;
}
}
</script>
so i don’t know how to continue. when i click the accept application button, it will pop up the message.
Comments
Comment posted by Professor Abronsius
Yes, this seems fairly straightforward but without code or seeing what you have tried so far it is impossible to provide definitive answer. Add your code would be a great start
Comment posted by how to ask
Please review
Comment posted by syuhada
@RamRaider I already make a correction to my question.
Comment posted by Professor Abronsius
I can’t see any checkboxes in the above HTML or an
Comment posted by syuhada
@RamRaider sorry. i already add that code.
Comment posted by syuhada
no. it not this way. i dont want a simple alert message. i want to pop up the message that i already create
Comment posted by syuhada
thank you very much. it really help me a lot. but how can i change when only select one or two then pop up the message?
Comment posted by Professor Abronsius
So you wish to ignore the
Comment posted by syuhada
not that i want to ignore. i mean that, even if the user only click one or two checkbox, they can still click the “accept” button. when i try to run the code, i just can only click select all button, then only after that i can click the accept button. so i want the user to able to click select all and a few checkbox, then they can click the “accept” button. thank you for helping me
Comment posted by syuhada
i still cannot popup the message
Comment posted by Professor Abronsius
you should try the modified version here (changed yesterday.) allows user to select 2 checkboxes and then invoke the modal or “select all” and click/….. how the