I have a table with 2 columns: checkbox and quantity.
<form action="{% url 'create-order' %}" method="POST">
{% csrf_token %}
<table class="table table-responsive table-borderless">
<thead>
<th> </th>
<th>Quantity</th>
</thead>
<tbody>
{% for item in items %}
<tr class="align-middle alert border-bottom">
<td>
<input type="checkbox" id="check" name="item" value="{{ item.id }}" onclick={changeQuantityState(this)}>
</td>
<td>
<input class="input" name="quantity" id="qnt" min="0" value=0 type="number" disabled>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="submitButton">
<button type="submit" class="lgbtn green">Go to order</button>
</div>
</form>
I have a handler for the checkbox: if checkbox is checked, then I can select the quantity. Otherwise, the quantity disabled.
function changeQuantityState(checkbox) {
checkbox.addEventListener('change', function(event) {
var quantity = document.getElementById('qnt');
if (event.currentTarget.checked) {
quantity.disabled = false;
quantity.value = 1;
}
else {
quantity.disabled = true;
quantity.value = 0;
}
});
}
I need change this line: var quantity = document.getElementById('qnt'); because I need the quantity for the current row in the table, for the current checkbox, but this code line always return first quantity
Your document.getElementById('qnt') will always return the first element that matches the query. You should always have only one element that has a specific ID. If the ID is present multiple times change that to something else, like a class. IDs must be unique.
Here's a quick example on how to use event.currentTarget to get the input you need. I've used parentElement.parentElement to get the <tr> element on which I use querySelector to select the input that's next to the checkbox.
const checkboxes = document.querySelectorAll('.checkbox');
const handleCheckboxChange = (ev) => {
const quantityInput = ev.currentTarget.parentElement.parentElement.querySelector('.quantity');
if (ev.target.checked) {
console.log('Would enable input', quantityInput);
// enable input
} else {
console.log('Would disable input: ', quantityInput);
// disable input
}
}
checkboxes.forEach((c) => c.addEventListener('change', handleCheckboxChange));
<table>
<thead>
<tr>
<th> </th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="checkbox" /></td>
<td><input placeholder="Quantity" class="quantity" /></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox" /></td>
<td><input placeholder="Quantity" class="quantity" /></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox" /></td>
<td><input placeholder="Quantity" class="quantity" /></td>
</tr>
</tbody>
</table>
Related
I have two inputs one of them should have the value of Quantity and the other one have the value of Price the first input which is quantity of type number has disabled attribute when check the checkbox the disabled removed then; when changing it; it's calculating the total of price and quantity.
For example: quantity = 2 and price = 10 so the total should equals total=2*10=20
But the problem here when uncheck the checkbox I don't want the new calculation. It should get the default calculation that it saved in the database before including the quantity.
Based in that here is the sample code explaining my issue:
$(document).on('click', '.check_box', function(){
var price = $('.price').val();
if(this.checked){
$('.quantity').removeAttr('disabled');
$(document).on('change', '.quantity', function(){
var quantity = $(this).val();
total = quantity*price;
$('#total').text(total.toFixed(2));
});
} else {
$('.quantity').attr('disabled', 'disabled');
// What should I do in else statement?
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>#</td>
<td>Item name</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check_box" /></td>
<td>Pizza</td>
<td><input type="number" class="quantity" value="1" disabled/></td>
<td><input type="text" class="price" value="20.00" disabled /></td>
</tr>
</tbody>
</table>
Total: <p id="total">40.00</p> <!-- Let's say this total already saved in database before -->
An option is to save the original value from database using data-xxxx and show it when required.
<p id="total" data-original="40.00">40.00</p>
...
$('#total').text($('#total').data('original'));
It's better to move the change event handler out, otherwise it will attach multiple times when tick/untick the checkbox.
$(document).on('click', '.check_box', function(){
if(this.checked){
$('.quantity').removeAttr('disabled');
$('.quantity').trigger('change');
} else {
$('.quantity').attr('disabled', 'disabled');
$('#total').text($('#total').data('original'));
}
});
$(document).on('change', '.quantity', function(){
if (!this.disabled) {
var quantity = $(this).val();
var price = $('.price').val();
total = quantity*price;
$('#total').text(total.toFixed(2));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>#</td>
<td>Item name</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check_box" /></td>
<td>Pizza</td>
<td><input type="number" class="quantity" value="1" disabled/></td>
<td><input type="text" class="price" value="20.00" disabled /></td>
</tr>
</tbody>
</table>
Total: <p id="total" data-original="40.00">40.00</p> <!-- Let's say this total already saved in database before -->
I using ViewModel and I have table with checkboxes, I can only check one by one boxes, but I need check all option but I need my var values to be defined, because I pass that values to controller and do something.
$('.checktip').click(function () {
var idemployee = $('.idemployee').val();
var idtip= $(this).attr('idtip');
var chk = $(this).prop('checked');
$.ajax({
url: UrlSettingsDocument.Books,
data: { idemployee: idemployee, idtip: idtip, chk: chk },
type: "POST",
success: function (result) {
if (result.result == "Redirect") {
window.location = result.url;
}
}
});
});
My .cshtml
<table class="table table-striped grid-table">
<tr>
<th>Samp</th>
<th>Id of Book</th>
<th>
//Button for check all *(NOT IMPLEMENTED)*
<button type="button" class="checkall">Select/Deselect</button>
</th>
</tr>
#foreach (var item in (IEnumerable<cit.Models.getCheIdTip_Result>)Model)
{
<tr>
<td>#item.idtip</td>
<td>#item.tipname</td>
<td>
<div class="pure-checkbox">
<input type="checkbox" idtip="#item.idtip" class="checktip" checked="#(item.idemployee == ViewBag.idemployee ? true : false)" name="#item.id.ToString()" id="#item.id.ToString()" />
<label for="#item.id.ToString()"></label>
</div>
</td>
</tr>
}
</table>
<input type="hidden" value="#ViewData["idemployee"]" name="idemployee" id="idemployee" class="idemployee" />
</div>
Use check box to check all checkbox instead of button.
On check change, using the class check/uncheck all checkbox inside the table.
$('#checkall').on('change', function() {
$('.checktip:checkbox').prop('checked', $(this).is(":checked"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped grid-table">
<tr>
<td><input type="checkbox" id="checkall" />Check All</td>
<td><input type="checkbox" class="checktip" /></td>
</td>
</td>
</td>
<td><input type="checkbox" class="checktip" /></td>
</td>
</td>
<td><input type="checkbox" class="checktip" /></td>
</td>
<td><input type="checkbox" class="checktip" /></td>
</tr>
</table>
This is my code where if i put quantity then it will calculate it and show it in total amount. my problem is that if i change my quantity in between process my total amount is not change.
How to do it onchange quantity total amount have to different
<script>
function valid(obj)
{
var frm=document.getElementById("frm");
var qty=parseInt(document.getElementById("quantity").value);
var price=parseInt(obj.value);
var total=parseInt(document.getElementById("total").value);
if(isNaN(total))
{
total=0;
}
if(obj.checked==true)
{
total=total+(qty*price);
document.getElementById("total").value=total;
}
else
{
total=total-(qty*price);
document.getElementById("total").value=total;
}
/*for(var i=0;i<frm.length;i++)
{
if(frm[i].type=="checkbox")
{
if(frm[i].checked==true)
{
total=total+(parseInt(frm[i].value)*qty);
}
}
}*/
document.getElementById("total").value=total
}
</script>
<form action="abc.html" method="post" id="frm" onsubmit="return valid(this);">
<table>
<tr>
<th colspan="2">Qualification</th>
</tr>
<tr>
<td><input type="checkbox" name="check_list[]" value="1000" onClick="valid(this);" /></td><td>BCA</td>
<td><input type="checkbox" name="check_list[]" value="2000" onClick="valid(this);" /></td><td>MCA</td>
</tr>
<tr>
<td><input type="checkbox" name="check_list[]" value="1200" onClick="valid(this);" /></td><td>BBA</td>
<td><input type="checkbox" name="check_list[]" value="1000" onClick="valid(this);" /></td><td>MBA</td>
</tr>
<tr>
<td colspan="2"><input type="text" name="quantity" id="quantity" placeholder="Quantity"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="total" id="total" value="" placeholder="Total"></td>
</tr>
<tr>
<td colspan="2"><input type="button" onClick="valid();" name="submit" value="Send" /></td>
</tr>
</table>
</form>
Define var isFormSubimited = false;
Set isFormSubimited = true in valid function.
Add "onchange='onQuantityChange()'" to quantity input element.
Add following function.
function onQuantityChange()
{
if(isFormSubimited && $("input[type='checkbox']:checked").length > 0)
{
//var _form = document.getElementById('frm');
//_form.submit();
valid();
}
}
To do this, I have a javascript file that count how many checkboxes in my form are checked, then:
if nothing is checked, these buttons: Change, delete, reset password will be disabled.
if one is checked, those will be all enabled.
if two or more is checked, Change will be disabled, the rest will still be enabled.
But in reality all of them stay disabled no matter what I do, so I wonder what I did wrong here.
Here is my code:
html:
<form action="" name="tform" method="POST">
<table>
<tr>
<td colspan="2">
</td>
<td colspan="3" align="right">
<input type="text" name="search_value" size="35"/><input type="submit" name="Search_clicked" value="Search"/>
</td>
</tr>
<tr>
<td colspan="5">
<table class="sortable" id="sortable_example" border="2">
<tr>
<th class="unsortable">Select</th>
<th>UserID</th>
<th>User name</th>
<th>Enable/Disable</th>
<th>Start date</th>
<th>End date</th>
</tr>
<tr>
<td><input type="checkbox" name="userid[]" value="1"/></td>
<td>00001</td>
<td>trang</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="11"/></td>
<td>00011</td>
<td>trangnt00914#fpt.edu.vn</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="12"/></td>
<td>00012</td>
<td>apgs1104#gmail.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="13"/></td>
<td>00013</td>
<td>congchua_cambuagietchim#yahoo.</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="14"/></td>
<td>00014</td>
<td>apgs1234#gmail.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="15"/></td>
<td>00015</td>
<td>apgs1104#yahoo.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="16"/></td>
<td>00016</td>
<td>trang1104#gmail.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
<td><input type="submit" name="Add_clicked" value="Add"/></td>
<td><input type="submit" name="Add_massively_clicked" value="Add massively"/></td>
<td><input type="submit" name="Change_clicked" disabled value="Change"/></td>
<td><input type="submit" name="Delete_clicked" disabled onclick="return confirm('Are you sure?');" value="Delete"/></td>
<td><input type="submit" name="Reset_password_clicked" disabled onclick="return confirm('Are you sure?');" value="Reset password"/></td>
</tr>
</table>
</form>
and javascript:
var obj;
var count=0;
var Change = document.getElementsByName('Change_clicked')[0];
var Delete = document.getElementsByName('Delete_clicked')[0];
var Reset_password = document.getElementsByName('Reset_password_clicked')[0];
for (var i=0; i<tform.elements.length; i++) {
obj = tform.elements[i];
if (obj.type == "checkbox" && obj.checked) {
count++;
}
}
if(count==0){
Change.disabled=true;
Delete.disabled=true;
Reset_password.disabled=true;
}
if(count==1){
Change.disabled=false;
Delete.disabled=false;
Reset_password.disabled=false;
}
if(count>1){
Change.disabled=true;
Delete.disabled=false;
Reset_password.disabled=false;
}
Thank you for any help!
Your code is fine, the only thing you missed to wrap it to a function and add an event handler.
1) Using onchange event handler, for your checkboxes
example:
<input type="checkbox" onchange="fun()" name="userid[]" value="1"/>
2) Wrap your code to a function like
function fun() {
//add your code
}
See it is working in this JSFiddle
Try instead of using:
<input type="submit" name="Change_clicked" disabled value="Change"/>
just:
<input type="submit" name="Change_clicked" value="Change"/>
for each button and then on document.ready and onclick() event within a checkbox check the amount of enabled check boxes. Then apply your settings from your function.
Also instead of using
var Change = document.getElementsByName('Change_clicked')[0];
just use ids with your elements because they are present only once:
var Change = document.getElementsById('Change_clicked');
Edit: instead of onclick() trigger the function by onChange(), kudos to #Praveen
I am trying to show/hide text fields based on checked radio buttons checked. Here is my code; it works fine if I don't use table tags, when using table tags, Javascript doesn't work
<script type="text/javascript">
function onchange_handler(obj, id) {
var other_id = (id == 'personal')? 'corporate' : 'personal';
if(obj.checked) {
document.getElementById(id + '_form_fields').style.display = 'block';
document.getElementById(other_id + '_form_fields').style.display = 'none';
} else {
document.getElementById(id + '_form_fields').style.display = 'none';
document.getElementById(other_id + '_form_fields').style.display = 'block';
}
}
</script>
<table>
<tr>
<td colspan="2">
<input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important" onchange="onchange_handler(this, 'personal');" onmouseup="onchange_handler(this, 'personal');">
<strong>Individual Form</strong>
<input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important" onchange="onchange_handler(this, 'corporate');" onmouseup="onchange_handler(this, 'corporate');">
<strong>Corporation Form</strong>
</td><tr>
<!-- If Individual Form is checked -->
<div id="personal_form_fields">
<tr><td>First Name</td>
<td><input type="text" name="First_Name" value=""></td>
</tr>
<tr><td>Last Name</td>
<td><input type="text" name="Last_Name" value=""></td>
</tr>
</div>
<!-- If Corporation Form is checked -->
<div id="corporate_form_fields" style="display: none;">
<tr><td>Company</td>
<td><input type="text" name="company_name" value=""></td>
</tr>
</div>
</table>
What putvande might mean by "strange markup" is that your <div id="personal_form_fields"> is in the table, with its parent being a table tag. That's not right. The tr should contain the td, which contains the div, not the other way around.
If you're trying to change visibility, this syntax error could be the problem.
Simply add a class to the TR of each group and show / hide the class...
<script type="text/javascript">
function onchange_handler(obj, id) {
var other_id = (id == 'personal')? 'corporate' : 'personal';
if(obj.checked)
{
class_display(id + '_form_fields','block');
class_display(other_id + '_form_fields','none');
} else {
class_display(id + '_form_fields','none');
class_display(other_id + '_form_fields','block');
}
}
function class_display(tr_class,display)
{
var tr_ele = document.getElementsByClassName(tr_class);
for (var i = 0; i < tr_ele.length; ++i) {
var item = tr_ele[i];
item.style.display = display;
}
}
</script>
<table>
<tr>
<td colspan="2">
<input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important" onChange="onchange_handler(this, 'personal');" onmouseup="onchange_handler(this, 'personal');" checked>
<strong>Individual Form</strong>
<input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important" onchange="onchange_handler(this, 'corporate');" onmouseup="onchange_handler(this, 'corporate');">
<strong>Corporation Form</strong>
</td>
<tr>
<!-- If Individual Form is checked -->
<tr class="personal_form_fields">
<td>First Name</td>
<td><input type="text" name="First_Name" value=""></td>
</tr>
<tr class="personal_form_fields">
<td>Last Name</td>
<td><input type="text" name="Last_Name" value=""></td>
</tr>
<!-- If Corporation Form is checked -->
<tr class="corporate_form_fields" style="display: none;">
<td>Company</td>
<td><input type="text" name="company_name" value=""></td>
</tr>
</table>