Simple dynamic list with checkbox

Simple dynamic list with checkbox - javascript

Looking for a way to make a dynamic list using checkbox "another item" with ability to remove if requested, like on this image:
It should support both adding and removing the items.
Edit:
My code is like:
<div id="contactdetails">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list"></i></span>
<input name="firstname" id="firstname" type="text" class="form-control" spellcheck="false" placeholder="First Name">
</div>
<p class="note">Example: Mike</p>
</div><!--row and col-->
<div class="col-lg-6 col-md-12">
<div class="form-group">
<div class="input-group"><span class="input-group-addon"><i class="fa fa-usd"></i></span>
<input name="familyname" id="familyname" type="text" class="form-control" spellcheck="false" placeholder="Family Name">
</div>
<p class="note">Example: Johnson</p>
</div>
</div>
</div> <!--row and col-->
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="checkbox" style="padding-left:10px; margin-top: 0px;">
<span>
<label>
<input name="addmore" id="addmore" type="checkbox" class="checkbox style-2">
<span> More contacts</span>
</label>
</span>
</div>
</div>
</div> <!--row and col-->
</div><!--contact details-->

You can append items to a container and remove each item if the checkbox is checked.
$("body").on("click","input[type='checkbox']",function()
{
if(!$(this).is(":checked"))
{
$(this).parent().remove();
}
else
{
$("#container").append('<div class="item"><input type="text" placeholder="Name"><input type="text" placeholder="Family Name"><input type="checkbox"></div>')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="item"><input type="text" placeholder="Name"><input type="text" placeholder="Family Name"><input type="checkbox"></div>
</div>

Try this. As i mentioned before, you can make use of $.clone() to achieve this.
<div>
<table>
<tr>
<td>
Item1
</td>
<td>
Item2
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
</tr>
</table>
</div>
<script>
$(document).on("click",":checkbox",function()
{
if($(this).is(":checked"))
{
var clonedItem = $(this).closest('table').clone();
$(clonedItem).find(":checkbox").removeAttr("checked");
$(clonedItem).appendTo("div");
}
else
{
if($(document).find(":checkbox").length > 0)
$(this).closest('table').remove();
}
});
</script>
Example : https://jsfiddle.net/DinoMyte/sgcrupm8/1/

Related

Jquery Ajax POST is not getting dynamically added inputs inputs have names and I have tried other solutions

Ajax Post request is only getting the first of the dynamically added input fields at the bottom all others are ignored
I have tried .on() .live() .submit() functions but get the same result. My php file consists of a print_r($_POST); and nothing else this is put into the console.
https://pastebin.com/CuAPSzKe - I have put the full code on the pastebin as the whole table and the script used to add the new inputs is included.
This is the code to make the call:
$('input#submitButton').on('click', function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $('form#orderForm');
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
console.log(data);
}
});
});
My expected result is to be able to post all dynamically added fields with their names as an array, alternatively all dynamically added fields in their own array.

It is having a major issue due to the way your html is arbitrarily structured and you are missing a end div tag for your item information container. Fix these issues and it will run. You also may want to go ahead and start your first item information with a start of 0 and set your counter to 1 so it is easier to aparse on the backend once you recieve the info.
Move your form tag under your first container:
<div class="container">
<form id="orderForm" method="POST" action="test.php">
<h2>Address Information</h2>
End tag
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</div>
</form>
</div>
Full example of cleaned up code running:
function test() {
var billName = document.getElementById('bill_name');
var shipName = document.getElementById('ship_name');
var billLine1 = document.getElementById('bill_line_1');
var shipLine1 = document.getElementById('ship_line_1');
var billLine2 = document.getElementById('bill_line_2');
var shipLine2 = document.getElementById('ship_line_2');
var billLine3 = document.getElementById('bill_line_3');
var shipLine3 = document.getElementById('ship_line_3');
var billLine4 = document.getElementById('bill_line_4');
var shipLine4 = document.getElementById('ship_line_4');
var billCounty = document.getElementById('bill_county');
var shipCounty = document.getElementById('ship_county');
var billPostcode = document.getElementById('bill_post');
var shipPostcode = document.getElementById('ship_post');
var billTele = document.getElementById('bill_telephone');
var shipTele = document.getElementById('ship_telephone');
var billEmail = document.getElementById('bill_email');
var shipEmail = document.getElementById('ship_email');
shipName.value = billName.value;
shipLine1.value = billLine1.value;
shipLine2.value = billLine2.value;
shipLine3.value = billLine3.value;
shipLine4.value = billLine4.value;
shipCounty.value = billCounty.value;
shipPostcode.value = billPostcode.value;
shipTele.value = billTele.value;
shipEmail.value = billEmail.value;
}
$('input#submitButton').on('click', function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $('form#orderForm');
var url = form.attr('action');
var test = form.serialize();
alert(test);
});
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td> <input type="text" class="form-control" name="sku' + counter + '" /></td> ';
cols += '<td> <input type="text" class="form-control" name="quantity' + counter + '" /></td> ';
cols += ' <td> <input type="text" class="form-control" name="price' + counter + '" /></td>';
cols += ' <td> <input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<form id="orderForm" method="POST" action="test.php">
<h2>Address Information</h2>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="bill_name"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Name</div>
</div>
<input id="bill_name" name="bill_name" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_1"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 1</div>
</div>
<input id="bill_line_1" name="bill_line_1" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_2"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 2</div>
</div>
<input id="bill_line_2" name="bill_line_2" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_3"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 3</div>
</div>
<input id="bill_line_3" name="bill_line_3" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_4"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 4</div>
</div>
<input id="bill_line_4" name="bill_line_4" type="text" aria-describedby="bill_line_4HelpBlock" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
<span id="bill_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span>
</div>
<div class="form-group">
<label for="bill_county"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing County</div>
</div>
<input id="bill_county" name="bill_county" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-globe"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_post"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Postcode</div>
</div>
<input id="bill_post" name="bill_post" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-area-chart"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_telephone"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Telephone Number</div>
</div>
<input id="bill_telephone" name="bill_telephone" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_email"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Email Address</div>
</div>
<input id="bill_email" name="bill_email" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-tablet"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="ship_name"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Name</div>
</div>
<input id="ship_name" name="ship_name" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_1"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 1</div>
</div>
<input id="ship_line_1" name="ship_line_1" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_2"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 2</div>
</div>
<input id="ship_line_2" name="ship_line_2" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_3"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 3</div>
</div>
<input id="ship_line_3" name="ship_line_3" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_4"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 4</div>
</div>
<input id="ship_line_4" name="ship_line_4" type="text" aria-describedby="ship_line_4HelpBlock" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
<span id="ship_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span>
</div>
<div class="form-group">
<label for="ship_county"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping County</div>
</div>
<input id="ship_county" name="ship_county" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-globe"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_post"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Postcode</div>
</div>
<input id="ship_post" name="ship_post" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-area-chart"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_telephone"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Telephone Number</div>
</div>
<input id="ship_telephone" name="ship_telephone" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_email"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Email Address</div>
</div>
<input id="ship_email" name="ship_email" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-tablet"></i>
</div>
</div>
</div>
</div>
<button type="button" onclick="test()" class="btn btn-primary pull-right"><i class="fa fa-copy"></i></button>
</div>
</div>
<br>
<div class="container">
<h2>Extra Information</h2>
<div class="row">
<div class="col-6">
<div class="form-group row">
<label for="ship_method" class="col-5 col-form-label">Shipping Method</label>
<div class="col-7">
<div class="input-group">
<input id="ship_method" name="ship_method" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-anchor"></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="extra_shipping" class="col-5 col-form-label">Extra Shipping</label>
<div class="col-7">
<div class="input-group">
<input id="extra_shipping" name="extra_shipping" type="text" class="form-control" aria-describedby="extra_shippingHelpBlock">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-money"></i>
</div>
</div>
</div>
<span id="extra_shippingHelpBlock" class="form-text text-muted">(Leave Blank For Free Shipping)</span>
</div>
</div>
<div class="form-group row">
<label for="mage_order_number" class="col-5 col-form-label">Magento Order Number</label>
<div class="col-7">
<div class="input-group">
<input id="mage_order_number" name="mage_order_number" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br>
<div class="container">
<h2>Item Information</h2>
<div class="row">
<div class="col-12">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>SKU</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="sku" class="form-control" />
</td>
<td>
<input type="number" name="quantity" class="form-control" />
</td>
<td>
<input type="number" name="price" class="form-control" />
</td>
<td>
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr></tr>
</tfoot>
</table>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</div>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

How To Display Selected HTML Table Row Values Into a div for purpose of an image

friends,
I hope all be fine. Actually, I face to this issue.
We can display HTML table row values into a text box, so if we want to take an image from table row and to show it in a div how we can do it? so with these codes, I can take the value from HTML table row to send for text box, so how I take for the image in jquery.
//HTML Codes
<div class="md-form mb-5" style="margin-top:-10px;">
<div class="down" >
<img src="images/IT.jpg">
</div>
</div>
<div class="md-form mb-5" style="margin-left:130px;">
<div class="input-group-prepend" >
<span class="input-group-text" style=" width:35px;">ID</span>
</div>
<input type="text" name="txtSId" id="txtSId" class="form-control"
aria-label="Amount (rounded to the nearest dollar)" aria-
describedby="basic-addon">
</div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Name</span>
</div>
<input type="text" name="txtSName" id="txtSName" class="form-control"
aria-label="Amount (rounded to the nearest dollar)">
</div>
</div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Position</span>
</div>
<input type="text" name="txtSPosition" id="txtSPosition" class="form-
control">
</div></div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Facebook </span>
</div>
<input type="text" name="txtSFacebook" id="txtSFacebook" class="form-
control">
</div></div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"> Twitter</span>
</div>
<input type="text" name="txtSTwitter" id="txtSTwitter" class="form-
control">
</div>
</div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">G<strong>+</strong></span>
</div>
<input type="text" name="txtSGoogleplus" id="txtSGoogleplus"
class="form-control">
</div>
</div></div>
<script>
// For View data
$(document).ready(function(){
$("#dtBasicExample tbody").on('click','tr',function(){
$("#txtSelect").text("1 row selected");
var rowData=$(this).children("td").map(function(){
return $(this).text();
}).get();
$("#txtSId").val(rowData[0]);
$("#txtSName").val(rowData[1]);
$("#txtSPosition").val(rowData[2]);
$("#txtSFacebook").val(rowData[4]);
$("#txtSTwitter").val(rowData[5]);
$("#txtSGoogleplus").val(rowData[6]);
});
});
</script>

Put an empty img element and copy the value at runtime from Table row data.
Use the below code snippet for reference.
$(document).ready(function() {
});
function copyImage() {
alert($("#imgS").find("img").attr("src"));
$(".down img").attr("src", $("#imgS").find("img").attr("src"));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="down">
<img src="" />
</div>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>
<img width="100px" src="https://vignette.wikia.nocookie.net/universeconquest/images/e/e6/Sample.jpg/revision/latest?cb=20171003194302">
</td>
<td>55577855</td>
</tr>
</table>
<button onClick="copyImage()"> Copy Image </button>
</body>

Use print button in modal

I am designing a receipt generator for client. The client add payment receipt using add button and after they click on submit they have option to convert it to pdf or print this. However since my form contains texxt field . It not printing it properly and only outputting the filled content.I tried using window.print but its dispalying boxes as well. Not sure how to proceed. below is the code:
I used the javascript but is unable to add classes
$('button[name="e_subPrint"]').click(function(){
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
var html = getPrintHtml("e_print");
mywindow.document.write(html);
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
});
function getPrintHtml(print){
var center = $('#'+print +' input[name="center"]').val();
var dated = $('#'+print +' input[name="dated"]').val();
var payment = $('#'+print +' input[name="payment"]').val();
var studname = $('#'+print +' input[name="studname"]').val();
var cnum = $('#'+print +' input[name="cnum"]').val();
var pnum = $('#'+print +' input[name="pnum"]').val();
var sum = $('#'+print +' input[name="sum"]').val();
var amt = $('#'+print +' input[name="amt"]').val();
var chnum = $('#'+print +' input[name="chnum"]').val();
var chdate = $('#'+print +' input[name="chdate"]').val();
var chbank = $('#'+print +' input[name="chbank"]').val();
var course = $('#'+print +' input[name="course"]').val();
var tfees = $('#'+print +' input[name="tfees"]').val();
var sgst = $('#'+print +' input[name="sgst"]').val();
var cgst = $('#'+print +' input[name="cgst"]').val();
var gtotal = $('#'+print +' input[name="gtotal"]').val();
var html = "<html><table>\n\
<tr><td>CENTER: </td><td>"+center+"</td></tr>\n\
<tr><td>DATED: </td><td>"+dated+"</td></tr>\n\
<tr><td>PAYMENT: </td><td>"+payment+"</td></tr>\n\
<tr><td>STUDENT NAME: </td><td>"+studname+"</td></tr>\n\
<tr><td>CONTACT NUMBER: </td><td>"+cnum+"</td></tr>\n\
<tr><td>PARENTAL CONTACT: </td><td>"+pnum+"</td></tr>\n\
<tr><td>TOTAL AMOUNT: </td><td>"+amt+"</td></tr>\n\
<tr><td>CHEQUE NUMBER: </td><td>"+chnum+"</td></tr>\n\
<tr><td>CHEQUE DATE: </td><td>"+chdate+"</td></tr>\n\
<tr><td>CHEQUE BANK: </td><td>"+chbank+"</td></tr>\n\
<tr><td>COURSE: </td><td>"+course+"</td></tr>\n\
<tr><td>TUITION FEES: </td><td>"+tfees+"</td></tr>\n\
<tr><td>SGST: </td><td>"+sgst+"</td></tr>\n\
<tr><td>CGST: </td><td>"+cgst+"</td></tr>\n\
<tr><td>GRAND TOTAL: </td><td>"+gtotal+"</td></tr>\n\
\n\
</table></html>";
return html;
}
});
This the HTMl
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Receipt</h4>
</div>
<div class="modal-body">
<form method="post" action="controller/pdf.php">
<div id="print">
<div class="row">
<div class="col-md-7">
<img src="asset/logo.png" alt="Edumentor">
</div>
<div class="col-md-5">
<p style="font-size:15px;">Head Office: 80 Defence Enclave Delhi-110092
<br>
Tel : +91 9650499917,9650499918 web:wwww.edumentor.co.in
<br>
GST No.07AACCE9830DIZS
</p>
<br>
<p><strong>Receipt Number:</strong>
<?php
$val = getReceiptNum();
echo $val;
?>
</p>
</div>
</div>
<br>
<div id="values">
<div class="row">
<div class="form-inline">
<div style="text-align:right;" class="col-sm-8">
<label for="centre">Centre: </label>
<input name="center" id="centre" type="text" class="form-control" name="centre">
</div>
<div class="col-sm-4">
<label for="date">Dated:</label>
<input id="dated" name="dated" type="date" class="form-control" name="date">
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label for="pcentre">Payment Centre:</label>
<input name="payment" id="payment" type="text" class="form-control" name="pcentre">
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-group">
<div class="col-sm-12">
<label for="stuname">Student Name:</label>
<input name="studname" id="stuname" type="text" class="form-control" name="stuname">
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-inline">
<div class="col-sm-12">
<div class="col-sm-6">
<label for ="stucont">Contact Number:</label>
<input name="cnum" id="cnum" type="text" class="form-control" name="stucont">
</div>
<div class="col-sm-6">
<label for="stupcont">Parental Contact:</label>
<input name="pnum" id="pnum" type="text" class="form-control" name="stupcont">
</div>
</div>
</div>
</div>
<br>
<table class="table table-bordered">
<tbody>
<tr>
<td>
<div class="form-inline">
<label for="sfees">Sum of Rupees(In Words)</label>
<input name="sum" id="sum" type="text" class="form-control" name="sfees" size="30">
</div>
</td>
<td>
<div class="form-inline">
<label for="">Total Amount :</label>
<input name="amt" id="amt" type="number" name="snumfees" class="form-control" size="10" placeholder="Enter Amount">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="col-sm-12">
<label>Paid by: </label>
<label class="radio-inline"><input id="cash" value="cash" type="radio" name="optradio">Cash</label>
<label class="radio-inline"><input id="cheque" type="radio" value="cheque" name="optradio">Cheque</label>
</div>
<div class="col-sm-4">
<input name="chnum" id="chnum" type="text" name="cheqno" class="form-control" placeholder="Enter cheque number">
</div>
<div class="col-sm-4">
<input name="chdate" id="chdate" type="date" name="cheqdate" class="form-control" placeholder="Enter cheque date">
</div>
<div class="col-sm-4">
<input name="chbank" id="chbank" type="text" name="cheqbank" class="form-control" placeholder="Enter cheque bank">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="cname">Course Name:</label>
<input name="course" id="course" type="text" name="cname" class="form-control" placeholder="Enter Course name">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="tutfees">Tution Fees:</label>
<input name="tfees" id="tfees" type="text" name="tutfees" class="form-control" readonly>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="stax">SGST:</label>
<input name="sgst" id="sgst" type="number" name="stax" class="form-control" readonly>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="ctax">CGST:</label>
<input name="cgst" id="cgst" type="number" name="ctax" class="form-control" readonly>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="gtfees">Grand Total:</label>
<input name="gtotal" readonly id="gtotal" type="number" name="gtfees" placeholder="Enter total fees" class="form-control">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<div><p><strong>Terms and Condition:</strong></p>
<br>
<p style="font-size:small; width:120%;margin-top:-4%;">
1.Any fees once paid shall not be refunded under any circumstances.<br>
2.We do not disclose any personal information of student before or after the announcement of the result.<br>
3.In case the cheque bounces, the student is liable to pay ₹500/- extra and deposit whole amount in cash within next 24-48 hours.<br>
4.In case of delay of installment from the due date, penalty # ₹250/- per day will be charged from the student.<br>
5.Tution fee inclusive of GST.<br>
6.All disputes are subject to exclusive juridsiction of Delhi Courts only.<br>
7.All cheque are to be drawn in favour of '<strong>Edumentor Educational Services Pvt. Ltd</strong>.'
</p>
</div>
I agree to the above terms and conditions
<br><br><br><br><br>
<div class="row">
<div class="col-md-8">
<label>Parents/Student Signature</label>
</div>
<div style="text-align:right;" class="col-md-4">
<label>Authorised Signatory</label>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-danger" name="pdf" id="pdf" value="Export To Pdf"/>
<button type="button" class="btn btn-primary" id="btnPrint" name="subPrint">PRINT</button>
<button type="button" class="btn btn-default" onclick="js:window.print()">print modal content</button>
<button type="button" class="btn btn-primary" id="submit">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>

Download printThis.js from the following link and include it in your html: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js
Wrap the content you want to print with the following div. Everything outside of this div will not be printed.
<div id="modalDiv">
..content to print..
</div>
Call the following jquery to print all the content including the content that is not viewable. You may include your css files in an array if you have multiple css files.
$("#modalDiv").printThis({
debug: false,
importCSS: true,
importStyle: true,
printContainer: true,
loadCSS: "../css/style.css",
pageTitle: "My Modal",
removeInline: false,
printDelay: 333,
header: null,
formValues: true
});

Dynamic multiselect feature

I am creating the fields dynamically in HTML using this JS, and in multiselect I'm using bootstrap multiselect here is the code https://bootsnipp.com/snippets/Ekd8P when I click on the add more button it creates the form dynamically.
js code for creating a form dynamically :
$(function() {
// Remove button
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="remove"]',
function(e) {
e.preventDefault();
$(this).closest('.form-horizontal').remove();
}
);
// Add button
var i = 1;
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="add"]',
function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-horizontal:first-child').clone();
new_field_group.find('input').each(function() {
if (this.name == 'tags[0]') {
$(this).tagsinput('destroy');
$(this).tagsinput('removeAll');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="form-group"]');
new_container.find(".bootstrap-tagsinput:first").remove();
} else {
$(this).val('');
}
});
new_field_group.find('select').each(function() {
if (this.name == 'addons[0]') {
$(this).multiselect('rebuild');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="multiselect-native-select"]');
new_container.find(".multiselect-native-select > .multi").remove();
} else {
$(this).val('');
}
});
i += 1;
container.append(new_field_group);
}
);
});
and html code for form elements:
<form action="" method="post" novalidate="novalidate" enctype="multipart/form-data">
{{ csrf_field() }}
<div data-role="dynamic-fields">
<div class="form-horizontal">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Name1" name="Name[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Price</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Price" name="Price[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Select Food Type</label>
<div class="col-sm-8">
<select id="select1" class="form-control" name="select[]" required>
#foreach($types as $type)
<option value="{{$loop->iteration}}">{{$type->food_type_name}}</option>
#endforeach
</select>
<p class="help-block" data-toggle="tooltip" data-placement="bottom" title="xyz"><i class="md md-info"></i></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Dish Description</label>
<div class="col-sm-8">
<textarea name="Description[]" id="field-value" class="form-control" rows="1"></textarea>
</div>
</div>
</div>
<div class="col-sm-4 contacts">
<div class="form-group">
<label class="col-sm-3" for="rolename">Add Addons</label>
<div class="col-sm-8">
<select id="dates-field2" class="multiselect-ak form-control" name="addons[0]" id="trigger3" data-role="multiselect" multiple="multiple">
#foreach($addons as $addon)
<option value="{{$addon->addonid}}">{{$addon->addon_name}}</option>
#endforeach
</select>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Tags</label>
<div class="col-sm-8">
<input type="text" value="" name="tags[0]" class="form-control" data-role="tagsinput" placeholder="e.g. spicy, healthy" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="col-sm-4">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" class="trigger2" id="trigger2" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields2" class="hidden_fields2" style="display:none;">
<input type="text" id="hidden_field2" name="Price2[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-5">
<div class="checkbox checkbox-styled">
<label><em>Quarter Plate Price</em>
<input type="checkbox" value="" class="trigger" id="trigger" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields" class="hidden_fields" style="display:none;">
<input type="text" id="hidden_field" name="Price3[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove">
Delete Item
</button>
<button class="btn ink-reaction btn-raised btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add">
Add More Items
</button>
</div>
<!-- /div.form-inline -->
</div>
<!-- /div[data-role="dynamic-fields"] -->
<div class="form-group">
<button type="submit" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary" style="margin-top: -62px;margin-left: 160px;">Submit Items</button>
</div>
<!--end .form-group -->
</form>
The issue is that when I click on the add more item it reflects the multiselect dropdown twice as you see in this image.
I want that if I click on the add more item button it restates the multiselect dropdown as in the first state.
see this jsfiddle.net/akshaycic/svv742r7/7 it will clear all your doubt. on click plus button it is not reflect to "none selected" state it will remain in its initial state.
Any leads would be helpful. Thank you in advance.

jQuery slideDown effect not working

I have a table with countries data. For each row there is an edit button, when clicked, the row disappears and a form wrapped in a div is to appear with a slide down effect. I am trying to apply slideDown() in this div. However, it is not working.
Here's an adapted fiddle.
My script:
$(document).on('click', '.glyphicon-pencil', function(event) {
var row = $(this).closest('tr');
var id = row.find("input[name='edit-id']").val();
$.get('/country/' + id + '/edit', function(data) {
row.html(data['html']).find('div').slideDown('400');
});
});
data['html'] contains the rendered form, .glyphicon-pencil is the edit button in each row.
HTML sample before pressing the edit button:
<table class="table table-striped table-responsive">
<thead>
<tr>
<th>Nombre</th>
<th>Continente</th>
<th>Capital</th>
<th>Lengua</th>
<th>Habitantes</th>
<th>Moneda</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>asdfasdfsdfsf</td>
<td></td>
<td></td>
<td></td>
<td>0</td>
<td></td>
<td>
<form method="POST" action="http://localhost:8000/country/all" accept-charset="UTF-8" class="pull-right"><input name="_token" value="uc1Sozi7LBtDGAxjCVQz1lDjv0bh963U1erlqMAv" type="hidden">
<span class="glyphicon glyphicon-pencil btn btn-xs btn-success"></span>
<input name="edit-id" value="1" type="hidden">
</form>
</td>
<td>
<form method="POST" action="http://localhost:8000/country/all" accept-charset="UTF-8" class="pull-right"><input name="_token" value="uc1Sozi7LBtDGAxjCVQz1lDjv0bh963U1erlqMAv" type="hidden">
<span class="glyphicon glyphicon-remove btn btn-xs btn-danger"></span>
<input name="id" value="1" type="hidden">
</form>
</td>
</tr>
</tbody>
</table>
HTML sample after the edit button is pressed:
<table class="table table-striped table-responsive">
<thead>
<tr>
<th>Nombre</th>
<th>Continente</th>
<th>Capital</th>
<th>Lengua</th>
<th>Habitantes</th>
<th>Moneda</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr><td colspan="0">
<div style="" class="row">
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="name" class="control-label">Nombre</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Nombre del país" id="update-name" name="name" value="asdfasdfsdfsf" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="continent" class="control-label">Continente</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Continente donde se encuentra" id="update-continent" name="continent" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="capital" class="control-label">Capital</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Ciudad capital" id="update-capital" name="capital" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="language" class="control-label">Lengua</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Lengua oficial" id="update-language" name="language" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="population" class="control-label">Habitantes</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Número total de habitantes" id="update-population" name="population" value="0" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="currency" class="control-label">Moneda</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Moneda que se usa" id="update-currency" name="currency" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<span class="glyphicon glyphicon-floppy-disk btn btn-success"></span>
<span class="glyphicon glyphicon-ban-circle btn btn-primary"></span>
<input name="update-id" value="1" type="hidden">
</div>
</div>
</td></tr>
</tbody>
</table>

slideDown() is used to display a selected element and will not apply effect on elements that are already displayed. You need to hide those desired elements before using slideDown():
$(document).on('click', '.glyphicon-pencil', function(event) {
var row = $(this).closest('tr');
var id = row.find("input[name='edit-id']").val();
$.get('/country/' + id + '/edit', function(data) {
row.html(data['html']).find('div.row').hide().slideDown('400');
});
});
http://jsfiddle.net/WD8X3/1/

Develop Reference

JavaScript is the programming language of the Web.

Simple dynamic list with checkbox - javascript

Related

Jquery Ajax POST is not getting dynamically added inputs inputs have names and I have tried other solutions

How To Display Selected HTML Table Row Values Into a div for purpose of an image

Use print button in modal

Dynamic multiselect feature

jQuery slideDown effect not working

Categories

Resources