I am using jquery repeater to add a new amount, I would like to be able to add it up to get the total.
<div class="repeater">
<div data-repeater-list="detalle">
<div data-repeater-item>
<div class="row">
<div class="col-md-2">
<label for="">Precio</label>
<input type="number" placeholder="0.00" class="form-control" step="0.01" min="0" name="precio"/>
</div>
<div class="col-md-2">
<label for="">Cantidad</label>
<input type="number" placeholder="0.00" class="form-control" name="precio"/>
</div>
<div class="col-md-2">
<label for="">Importe</label>
<input type="number" placeholder="0.00" class="form-control" step="0.01" min="0" name="precio"/>
</div>
<div class="col-md-2">
<br>
<a data-repeater-delete type="button" class="btn btn-primary" value="Delete"> Eliminar </a>
</div>
</div>
</div>
</div>
<br>
<a data-repeater-create class="btn btn-primary" type="button" >Agregar</a>
</div>
How can I add and display the result?
javascript
var repeater = $('.repeater').repeater({
show: function() {
$(this).slideDown();
},
hide: function (deleteElement) {
$(this).slideUp(deleteElement);
},
});
How can I calculate the total and print it?
Related
I am generating a dynamic form. Upon adding checkboxes the following HTML is generated:
<div class='selected_checkboxes'>
<div class="clearfix"></div>
<div id="931022941" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="931022941" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="931022941" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="931022941">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="343" name="34[]" data-id="931022941" class="checkbox_item"
value="343"> <label class="ceheckbox_text" data-id="931022941"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
<div class="clearfix"></div>
<div id="867429714" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="867429714" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="867429714" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="867429714">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="3434" name="34[]" data-id="867429714" class="checkbox_item"
value="3434"> <label class="ceheckbox_text" data-id="867429714"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
</div>
I need to get all the checkboxes inside the HTML and use their data attribute, I have tried to use this:
var checkboxes = $('.selected_checkboxes :checkbox');
Then I loop on the checkboxes, but that did not work.
Can someone please advise to help me sort it out
Without (POJS) or with JQuery:
// POJS
document.querySelectorAll(".selected_checkboxes .checkbox_item")
.forEach( cb => console.log(`data-id: ${cb.dataset.id}`) );
// JQuery
$(".selected_checkboxes :checkbox")
.each( (i, cb) => console.log(`data-id: ${cb.dataset.id}`) )
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='selected_checkboxes'>
<div class="clearfix"></div>
<div id="931022941" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="931022941" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="931022941" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="931022941">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="343" name="34[]" data-id="931022941" class="checkbox_item" value="343"> <label class="ceheckbox_text" data-id="931022941"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
<div class="clearfix"></div>
<div id="867429714" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="867429714" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="867429714" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="867429714">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="3434" name="34[]" data-id="867429714" class="checkbox_item" value="3434"> <label class="ceheckbox_text" data-id="867429714"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
</div>
I am working on a form where a user selects an option from radio buttons.
Then depending on option, a view of text fields appears. The user then inputs the required data and submits the form.
The options have different options and such data submitted should be different.
My challenge is how to submit only data from the selected radio button fields.
Anyone kindly help. Thank you
$(function () {
$('input[type="radio"]').on("click",function () {
$(".selections").hide(); // hide them all
if (this.value=="both") $(".selections").show(); // show both
else $("#"+this.value).show(); // show the one with ID=radio value
});
$('.selections input[type="checkbox"]').on("click",function() {
$(this).next().toggle(this.checked); // hide if not checked
});
$('.selections input[type="text"]').each(function() { // initialise
$(this).toggle($(this).prev().is(":checked"));
});
});
.selections { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" name="bill_type" value="percentage">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<!-- flat_rate radio button option -->
<div id="flat_rate" class="selections">
<input type="hidden" name="bill_type" value="flat_rate">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at">
</div>
<!-- variable radio button option -->
<div id="variable" class="selections">
<input type="hidden" name="bill_type" value="variable">
<div class="form-group">
<label for="limit" class="col-md-4 control-label">Limit</label>
<div class="col-md-4">
<input id="limit" placeholder="10" type="number" class="form-control" name="limit" autofocus>
</div>
</div>
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" name="send_at">
<br/>
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>
You should try to use Bootstrap Tabs [imho], but if you want to go with radios...
Disabling all inputs will prevent them from being submited:
$("#div :input").attr("disabled", true);
or
$('#div').find('input, textarea, button, select').attr('disabled','disabled');
Code from this post
Firstly you don't need same field repeatedly.Try like this
$(function () {
$('input[name="billing"]').on('change',function(){
$('#bill_type').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" id="bill_type" name="bill_type" value="">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>
After submission you can do whatever based on the value of bill_type.
I am having a problem removing an element from a form when a select input option is changed. When the select input is placed to "Manually Specify" the javascript correctly adds to the form as i would expect. When the option is changed again to anything other than "Manually Specify i would like it to remove the form inputs previously added, but can not seem to get this to work.
$(function() { /* DOM ready */
$("#distanceSelect").change(function() {
if ($(this).val() == "Manually Specify") {
var html = $("#distanceSpecifyInput").html();
$("#distanceSelectInput").after(html);
} else {
var child = document.getElementById("distanceSpecifyInput");
if (child) {
child.parentNode.removeChild(child);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form>
<div class="form-group row" id="distanceSelectInput">
<div class="col-sm-3">
<label for="distanceSelect" class="control-label">Distance:</label>
<select class="form-control" id="distanceSelect">
<option>5km</option>
<option>10km</option>
<option>Half Marathon</option>
<option>Marathon</option>
<option>Manually Specify</option>
</select>
</div>
</div>
<div class="hide" id="distanceSpecifyInput">
<div class="form-group row">
<div class="col-sm-1">
<input type="number" class="form-control" step="0.1" id="distance">
</div>
<div class="col-sm-2">
<select class="form-control" name="distanceFormat" id="distanceFormat">
<option>miles</option>
<option>km</option>
<option>meters</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<label for="hours" class="control-label">Desired Finish Time:</label>
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="hours" required name="hours" id="hours">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="mins" required name="mins" id="mins">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="secs" required name="secs" id="secs">
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-default" onclick="calculateRacePace()">Submit</button>
</div>
</form>
</div>
Thanks for any help.
You should create a specific DIV to hold the content, rather than using .after(). That way you can clear it with .empty().
$(function() { /* DOM ready */
$("#distanceSelect").change(function() {
if ($(this).val() == "Manually Specify") {
var html = $("#distanceSpecifyInput").html();
$("#distanceOutput").html(html);
} else {
$("#distanceOutput").empty();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form>
<div class="form-group row" id="distanceSelectInput">
<div class="col-sm-3">
<label for="distanceSelect" class="control-label">Distance:</label>
<select class="form-control" id="distanceSelect">
<option>5km</option>
<option>10km</option>
<option>Half Marathon</option>
<option>Marathon</option>
<option>Manually Specify</option>
</select>
</div>
</div>
<div class="hide" id="distanceSpecifyInput">
<div class="form-group row">
<div class="col-sm-1">
<input type="number" class="form-control" step="0.1" id="distance">
</div>
<div class="col-sm-2">
<select class="form-control" name="distanceFormat" id="distanceFormat">
<option>miles</option>
<option>km</option>
<option>meters</option>
</select>
</div>
</div>
</div>
<div id="distanceOutput">
</div>
<div class="form-group row">
<div class="col-sm-12">
<label for="hours" class="control-label">Desired Finish Time:</label>
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="hours" required name="hours" id="hours">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="mins" required name="mins" id="mins">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="secs" required name="secs" id="secs">
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-default" onclick="calculateRacePace()">Submit</button>
</div>
</form>
</div>
Note that copying the HTML like this results in duplicate IDs distance and distanceFormat. IDs are supposed to be unique, so you should fix up the IDs after copying.
The following <div> section I am duplicating and below the JavaScript function, I want to use again and again. Share your ideas if this is possible.
<?php $new_material = ["a","b","c"]; //array to pass in foreach
foreach ($new_material as $mat) {
?>
<div class="row " id="row2">
<div class="row " id="row2.1">
<div class="col-xs-2">
<label>Material Name</label>
</div>
<div class="col-xs-3">
<label>Brand</label>
</div>
<div class="col-xs-2">
<label>Category</label>
</div>
</div>
<div class="row " id="row2.2">
<div class="col-xs-2">
<p id="material_select"><?=$mat?></p>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="brand" id="brand"/>
</div>
<div class="col-xs-2">
<input type="text" class="form-control" name="category" id="category"/>
</div>
<label class="col-xs-2">Total Quantity:</label>
<div class="col-xs-2">
<input type="text" class="form-control" name="totalquantity" id="totalquantity"/>
<br>
</div>
</div>
<div class="row " id="row2.3">
<label class="col-xs-1">Specification</label>
<label class="col-xs-1">Quantity</label>
<label class="col-xs-2">Unit</label>
<button type="button" onclick="duplicate()" class="btn btn-info col-xs-3" >Add Specification</button>
<label class="col-xs-2">Unit:</label>
<span id="units_div">
<p class="" name="units"/>
</span>
</div>
<div class="row " id="duplicater" >
<div class="col-xs-1">
<input type="text" id="specification" class="form-control" name="specification[]"/>
</div>
<div class="col-xs-1">
<input type="text" id="quantity" class="form-control" name="quantity[]"/>
</div>
<div class="col-xs-2" id="units1_div">
<p id="unit" name="unit[]"/>
</div>
<div class="col-xs-2" id="delete">
<button id="delete_btn"type="button" onClick="removeduplicate(this)" class="btn btn-xs btn-danger" style="visibility:hidden;">Delete</button>
</div>
</div>
</div>
<br>
<div>
<div class="row " id="row2.4">
<label class="col-xs-1">Tax</label>
<label class="col-xs-1">Tax%</label>
<label class="col-xs-2">Tax Amount</label>
<button type="button" onClick="duplicate1()" class="btn btn-info col-xs-3" >Add Tax</button>
<label class="col-xs-2">Rate</label>
<div class="col-xs-2">
<input type="text" class="form-control" name="rate" id="rate"/><br>
</div>
</div>
<div class="row " id="duplicater1" >
<div>
<input type="text" id="taxamt" class="form-control" name="taxamount[]"/> </div>
<div class="col-xs-1" id="tax_div">
<p id="unit" name="taxper[]"/>
</div>
<div class="col-xs-1">
<input type="text" id="taxamt" class="form-control" name="taxamount[]"/>
</div>
<div class="col-xs-2" id="delete">
<button id="delete_btn1" type="button" onClick="removeduplicate1(this)" class="btn btn-xs btn-danger" style="visibility:hidden;">Delete</button>
</div>
</div>
</div>
<div class="row" id="row 2.5">
<div class="col-xs-7">
</div>
<label class="col-xs-2">Total Amount</label>
<div class="col-xs-2">
<p id="totalamount" name="totalamount"></p>
<input type="hidden" value="" name="totalamount" id="totalamount" readonly/><br>
</div>
</div>
<?php
}
?>
JavaScript code: This is the JavaScript function, I want use whenever I'm duplicating the above code as I'm passing the material name in foreach() loop, so it is duplicating based on every material name.
function duplicate() {
document.getElementById('delete_btn').style.visibility = "visible";
var original = document.getElementById('duplicater');
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicetor" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
document.getElementById('delete_btn').style.visibility = "hidden";
document.getElementById('specification').value="";
document.getElementById('quantity').value="";
document.getElementById('unit').value="";
}
function removeduplicate(element){
element=element.parentNode.parentNode;//gets the id of the parent
element.parentNode.removeChild(element);
}
Natural place of javascript files/code loading is in the head so just place it there. Since you do not want your head to be duplicated anyways (invalid html).
I'm so confused how to add/remove multiple input fields in my code.
This is my code :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
<label class="col-sm-2 control-label">Kode Barang</label>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
<span class='glyphicon glyphicon-search'></span>
</a>
</div>
<input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Rp </div>
<input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Qty </div>
<input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<div class="input-group-addon">% </div>
<input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-0">
<button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
</div>
</div>
I want to add new group of input fields when i'm click the button.
Please advice, Thanks
Try this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
<label class="col-sm-2 control-label">Kode Barang</label>
<div class="input-div">
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
<span class='glyphicon glyphicon-search'></span>
</a>
</div>
<input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Rp </div>
<input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Qty </div>
<input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<div class="input-group-addon">% </div>
<input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
</div>
</div>
</div>
<div class="col-sm-0">
<button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
<button id="b2" class="btn btn-success add-more"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
</div>
And this is de jquery code:
$('#b1').click(function(){
var newGroup = $('.input-div').last().html();
$('.input-div').last().after('<div class="input-div">'+newGroup+'</div>');
});
$('#b2').click(function(){
$('.input-div').last().remove();
});