Develop Reference

show <div> with checkbox jquery

the script works and shows me the div, but only for one record, and I have 10 more records where it does nothing to select the check.
look:
It only works with the first check, but the rest is not possible, any solution?
the script
<script type="text/javascript">
function showContent() {
element = document.getElementById("content");
check = document.getElementById("check");
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>
the view
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Nombre del Ingrediente</td>
<td>Proveedor</td>
<td>Agregar</td>
<td>Cantidad</td>
</tr>
</thead>
<tbody>
#foreach($ingredientes as $ingrediente)
<tr>
<td>{{$ingrediente->id}}</td>
<td>{{$ingrediente->nombre}}</td>
<td>{{$ingrediente->proveedor}}</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent()" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" id="content" style="display:none;">
<input class="dvs" id="ex1" type="number" />
</div>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>

The attribute id must be unique in a document. You can pass this object to the function by which you can target the relevant div element by class.
function showContent(el) {
var element = el.parentNode.parentNode.nextElementSibling.querySelector('.dv');
if (el.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Nombre del Ingrediente</td>
<td>Proveedor</td>
<td>Agregar</td>
<td>Cantidad</td>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>mnl</td>
<td>Test.....</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent(this)" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" style="display:none;">
<input class="dvs" type="number" />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>222</td>
<td>xyz</td>
<td>Test..</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent(this)" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" style="display:none;">
<input class="dvs" type="number" />
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>

the problem with your code at the moment is that you are trying to bind everything to the same ID, IDs should be unique identifiers, meaning there should be no duplication of them in your code on any given page.
You are binding the event to the first box and then subsequently, the content to first instance of the id content and check, subsequent bindings are not taken into account.
To remedy this, you must either select by class (not recommended) or instead, select by ID but dynamically generate the ID, you could do this by replacing the line
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent()" />
with
<input type="checkbox" name="check" id="check-{{$ingrediente->id}}" value="" onchange="javascript:showContent('{{$ingrediente->id}}')" />
and again for the line <div class="dv" id="content" style="display:none;">
you can change this to
<div class="dv" id="content-{{$ingrediente->id}}" style="display:none;">
and then changing your showContent method to accept a parameter.
<script type="text/javascript">
function showContent(id) {
element = document.getElementById('content-' + id);
check = document.getElementById('check-' + id);
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>
Good luck :)

You are using duplicate id for checkbox and div content for all row.
You should add more specific info for div's id and pass argument for showConent() function
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent({{$ingrediente->id}})" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" id="content-{{$ingrediente->id}}" style="display:none;">
<input class="dvs" id="ex1" type="number" />
</div>
</div>
</div>
</td>
<script type="text/javascript">
function showContent(id) {
element = document.getElementById(id);
check = document.getElementById("check");
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>

how to list the selected options and remove the selected options by using jQuery?

Below is my HTML code and i have to add jquery for this how to do?
<div class="container">
<div class="row one">
<h4>Staff Re-Admission</h4>
</div><br>
<div class="row">
<p>Academic Year</p>
<select>
<option>2010/2011</option>
<option>2010/2011</option>
<option>2010/2011</option>
</select>
</div><br>
<div class="row">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table" style="width: 100%;">
<tbody>
<tr>
<td style="width: 250px"><p>Staff List</p></td>
<td></td>
<td><p>Continue</p></td>
<td><p>Discontinue</p></td>
</tr>
<tr>
<td><select size="14" class="Staff" multiple="multiple">
<option value="SJB2017NT021">SJB2017NT021--Vishu</option>
<option value="SJB2017NT022">SJB2017NT022--Naveen</option>
<option value="SJB2017NT023">SJB2017NT023--Uday</option>
<option value="SJB2017NT024">SJB2017NT024--Mohan</option>
<option value="SJB2017TS019">SJB2017TS019--Thejaswini</option>
<option value="SJB2017TS020">SJB2017TS020--Prasad</option>
</select></td>
<td>
<button type="submit" value="" id="Continue">Continue >>
</button><br><br>
<button type="submit" value="" id="Discontinue">Discontinue >>
</button><br><br>
<button type="submit" value="" id="Back">Back To List
<<</button>
</td>
<td><select size="14" multiple="multiple" class="Staff" ></select>
</td>
<td><select size="14" multiple="multiple" class="Staff" ></select>
</td>
<tr>
<td><button type="submit">submit</button>
<button type="submit">submit</button>
</td>
</tr>
</tr>
</tbody>
</table>
</div><!--end of .table-responsive-->
</div>
</div>
</div>
</div>
</div>
when i selcet the option and click on continue it has to be listed in continue box and same if i select discontinue then in discontinue box and if i select back entire thing has to come back how to do this please help me out.

just change the id of another two select with continue and discontinue
<td>
<select size="14" multiple="multiple" class="continue" ></select>
</td>
<td>
<select size="14" multiple="multiple" class="discontinue" ></select>
</td>
Here is jquery for add to continue and discontinue.
<script>
$("#Continue").on("click", function(){
var cont = $(".Staff").val();
$(".continue").append($(".Staff option:selected"));
$(".Staff option:selected").remove();
return false;
});
$("#Discontinue").on("click", function(){
var cont = $(".Staff").val();
$(".discontinue").append($(".Staff option:selected"));
$(".Staff option:selected").remove();
return false;
});
</script>

Make 2 methods for each button and on click of each move item to particular box...
on back button click take all items from both the box (Continue and Discontinue) and add them to <select> back..
also clear both boxes...

Clone a div containing form inputs

I have developed a form where a person is putting in a booking for a helicopter flight. As part of the form, I have a select element where they choose how many passengers are on the booking. I had a div on the page which I used JavaScript to clone as many times as selected from the select option. Here's the problem - every time I clone the div and submit the form, it only displays the user inputs from the last cloned div. I have used "[ ]" on the end of each of the input names, but still no avail. I believe the issues may be because the div (and then the inputs of the form in that div) are being cloned client-side instead of server-side. I have been searching forums and tutorials for weeks to try and find a solution, but again, no avail.
<tr><td class="form_label">Passengers</td><td valign="middle">
<select id="numpass" name="numpass" class="form_e"/>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td></tr>
<div id="passenger" class="passenger">
<div class="form_head">Passenger [] - Details</div>
<br />
<table width="100%" cellpadding="2" cellspacing="4">
<tr>
<td class="form_label">First Name: <input type="text" name="cust_fname[]" class="form_f" required="required"/> Last Name: <input type="text" name="cust_lname[]" class="form_f" required="required"/> Weight (kg): <input type="text" name="cust_kg[]" class="form_a" required="required"/></td>
</tr>
<tr>
<td class="form_label">Phone: <input type="text" name="cust_phone[]" class="form_g" required="required"/> Email: <input type="text" name="cust_email[]" class="form_d" /></td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="2" cellspacing="4">
<tr><td class="form_label">Address:</td></tr>
<tr>
<td class="form_label">Number: <input type="text" name="cust_addr_num[]" class="form_a" /> Street: <input type="text" name="cust_addr_street[]" class="form_b" /> Suburb/Town: <input type="text" name="cust_addr_sub[]" class="form_f" /></td></tr>
<tr><td class="form_label">State: <input type="text" name="cust_addr_state[]" class="form_b" /> Postcode: <input type="text" name="cust_addr_post[]" class="form_a" /> Country: <select class="form_c" name="cust_addr_country[]">
<option value="">--- Select Country ---</option>
<option value="Australia">Australia</option></select></td></tr></table>
</td></tr></table>
</div>
<div id="repeat" class="repeat"></div>
JS
function cpyDIV(val){
$("#repeat").empty();
for (var i = 0; i < val -1; i++){
var $clone = $("#passenger").clone();
$clone[0].id += i;
$clone.appendTo("#repeat");
}
}

Why the <div> is not getting removed after clicking on image and why the image is getting removed in following case?

I'm having many <div class="rbt"></div> present on my webpage and each of these <div>'s contains an icon to delete that <div> only from which the icon is clicked. But what's happening is the respective <div> is not getting deleted and the cross button image gets hide. I've created one jsFiddle to demonstrate my issue but in jsFiddle the image is not getting hide as well as the <div> is also not getting deleted. Can some one please help me in this regard?
HTML code is:
<div class="col-md-10 rebate_block">
<div class="rbt">
<div style="overflow:auto" class="well">
</br>
<div class="table-responsive">
<table id="blacklistgrid_1" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th style="vertical-align:middle">Products</th>
<th style="vertical-align:middle">Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody class="apnd-test">
<tr id="reb1_1">
<td>
<div class="btn-group">
<select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list">
<option value="" selected='selected'>Select Product</option>
</select>
</div>
</td>
<td>
<input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/>
</td>
<td>
<input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/>
</td>
<td>
<input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/>
</td>
<td>
<div class="btn-group">
<select name="units[1]" id="units_1" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td>
<input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/>
</td>
</tr>
</tbody>
<tfoot>
<tr id="reb1_2">
<td>
<button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick=""> Add</button>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
<div class="row">
<div class="col-xs-6">
<label for="name" class="col-lg-5">Rebate Start Date<span style="color:#FF0000">*</span></label>
<div class="col-lg-6">
<input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date[1]" id="rebate_start_date_1" value="">
</div>
</div>
<div class="col-xs-6">
<label for="name" class="col-lg-6">Rebate Expiry Date<span style="color:#FF0000">*</span></label>
<div class="col-lg-6">
<input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date[1]" id="rebate_expiry_date_1" value="">
</div>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-6">
<label for="name" class="col-lg-5">Applicable States</label>
<div class="col-lg-7">
<select class="states" multiple="multiple" name="applicable_states[1][]" id="applicable_states_1">
<option value="1">Alabama</option>
<option value="2">Alaska</option>
// ... other states as options
<option value="49">Wisconsin</option>
<option value="50">Wyoming</option>
</select>
</div>
</div>
<div class="col-xs-6">
<label for="name" class="col-lg-6">Rebate Total Count</label>
<div class="col-lg-6">
<input type="text" class="form-control" name="rebate_total_count[1]" id="rebate_total_count_1" value="">
</div>
</div>
</div>
<div style="float: clear;"></div>
<div class="row">
<div class="col-xs-5"></div>
<div class="col-xs-2"></div>
<div align="right" class="col-xs-5">
<button style='color:#C00; opacity: 2;margin-right: -12px;' type='button' class='close del_reb' data-dismiss='alert' aria-hidden='true'>×</button>
</div>
</div>
</div> <!-- /span8 --></div>
</div>
jQuery code is:
$(function () {
//function to delete rebate entry(i.e. entire rebate block) in add rebate by product
$(document).delegate('.del_reb','click',function (event) {
$(this).parents('.rbt').remove();
event.preventDefault();
});
});
js Fiddle link

Its happening because you have not attached any jquery library in your fiddle..just attach any of the jquery library from dropdown and try again
Demo :- http://jsfiddle.net/3Fkf3/6/
$(function () {
//function to delete rebate entry(i.e. entire rebate block) in add rebate by product
$(document).delegate('.del_reb','click',function (event) {
$(this).parents('.rbt').remove();
event.preventDefault();
});
});
According to ur comments you are using jquery 1.9 so I would request you to take a look here :- As suggested by official jquery site http://api.jquery.com/delegate/
As of jQuery 1.7, .delegate() has been superseded by the .on() method.
For earlier versions, however, it remains the most effective means to
use event delegation. More information on event binding and delegation
is in the .on() method. In general, these are the equivalent templates
for the two methods:
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

How to get the values in $_POST array from the fields which are appended to the HTML table using JQuery after form submission?

I've one HTML form. This form is containing HTML table. The actual HTML table is very large. For your reference I'm showing below the HTML code of a form with tablw containing only two records:
<form action="rebates.php" role="form" method="post">
<div style="margin-left: 12px" class="col-xs-4">
<div class="form-group">
<label for="company_name" class="col-lg-4">Manufacturer </label>
<div class="col-lg-7">
<select id="company_name" name="company_name" class="form-control">
<option value="" selected='selected'>Select Manufacturer</option>
<option value="33" >Eywa Solutions</option>
<option value="37" >Amazon</option>
<option value="40" >Test</option>
<option value="42" >RK</option>
<option value="46" >Santa Margherita</option>
</select>
</div>
</div>
</div>
<div style="margin-left: -61px" class="col-xs-4">
<div class="form-group">
<label for="product_id" class="col-lg-3">Product </label>
<div class="col-lg-7">
<select id="product_id" name="product_id" class="form-control">
<option value="" selected='selected'>Select Product</option>
<option value="5" >Chesse</option>
<option value="8" >Laptop an</option>
<option value="9" >Prosecco</option>
</select>
</div>
</div>
</div>
</div>
<br/>
<div class="col-lg-2"></div>
<div class="col-md-8">
<div style="overflow:auto" class="well">
<button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
<br/>
<div class="table-responsive">
<table id="blacklistgrid" class="table table-bordered table-hover table-striped">
<thead>
<tr id="Row1">
<th style="vertical-align:middle" >Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody>
<tr id="Row2">
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Units
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Microsecond</li>
<li>oz</li>
<li>ml</li>
<li>L</li>
<li>gms</li>
</ul>
</div>
</td>
<td>
<input type="text" name="amount[]" value="3.00" class="form-control" size="9"/>
</td>
</tr>
<tr>
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="4" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount[]" value="7.00" class="form-control" size="9"/></td>
</tr>
</tbody>
</table>
<button style="float:right" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div> <!-- /span8 -->
<div class="row">
<div class="col-xs-5"></div>
<div style="margin-left: -9px" class="col-xs-5">
<button type="button" class="btn btn-default">Go Back</button>
<button type="submit" class="btn btn-primary">Preview</button>
</div>
</div>
</div>
</form>
I'm dynamically appending rows to the table by clicking on a button(the button is present in a tag, you can see in above code). The jQuery code I writen for adding rows dynamically is as follows:
/*JQuery for appending rows at the end of table*/
<script language="javascript">
$( document ).ready(function() {
$('.btnAdd').click(function () {
var count = 1,
first_row = $('#Row2');
//while (count-- > 0) first_row.clone().appendTo('#blacklistgrid');
while (count-- > 0) first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
});
});
</script>
Now the issue I'm facing is if I append one or more rows at the end of table, fill data in the textfields from each appended row and submit the form by clicking on Submit button, in $_POST I'm not able to get the data from appended rows. I'm getting the data only from the rows which are previously present when the page loads. So can anyone help me in getting the values from the dynamically appended rows also?
The HTMl code of dynamically appended table row is as follows:
<tr>
<td>
<input class="form-control" type="text" size="8" value="" name="pack[]">
</td>
<td>
<input class="form-control" type="text" size="8" value="2" name="quantity[]">
</td>
<td>
<input class="form-control" type="text" size="8" value="750" name="volume[]">
</td>
<td>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
Units
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
Microsecond
</li>
<li>
oz
</li>
<li>
ml
</li>
<li>
L
</li>
<li>
gms
</li>
</ul>
</div>
</td>
<td>
<input class="form-control" type="text" size="9" value="3.00" name="amount[]">
</td>
</tr>

Well, you have done the right thing. Please see the name field of your input element.
<input type="text" name="pack[]" value="" class="form-control" size="8"/>
Please notice the name="pack[]" using an array of name as input. If you have cloned the table, the input element will be cloned. Since you aren't using an id, it's not a problem.
Now, when sending the data, in rebates.php check if the form data is present. It can be done by checking up the request method. It's a secure way. Once the check has succeeded, you can check if the field is present
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// handle the fields
$packs = null;
if (isset($_POST['pack']) {
$packs = $_POST['pack'];
}
}
Please notice that you are using pack without the [] to get input data from pack[] input fields. The variable $pack will contain an array. If you want to check the content, use var_dump($pack);. It should reveal all data from the available pack[] elements, either added dynamically or statically.
Then, if you have collected all data, you have to loop through it. It can be done with either for- or foreach-loop.
if ($packs != null) {
foreach($packs as $pack) {
// use the field $pack to do something
echo 'amount of pack : ' . $pack;
}
}
Do the same for other name fields which is also from array.

From jQuery Doc:
Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.
You are cloning table row with #Row2 id. To avoid it:
first_row.clone().removeAttr('id').appendTo('#blacklistgrid');

Alternatively, you could do something like...
while (count-- > 0) first_row.clone().appendTo('#blacklistgrid').attr('id','Row' + $('#blacklistgrid tr').length);