How to get val from fileds inside table inside div with JQuery - javascript

Can somebody help me how to collect data from input fields from tbl_number in one array array_tbl[number] and object_number in other arrays_object[number] with JQuery when HTML looks like
<div id="devices" style="width:95%;">
<div id="device_1" style="background-color:#858585;">
<table id="tbl_device_1">
<tbody>
<tr>
<th>Slave</th>
<th>Instance</th>
<th>Object Name</th>
<th>Model Name</th>
<th>Delete</th>
<th>Add Object</th>
</tr>
<tr>
<td>
<input id="slave_address_1" class="in" type="text"/>
</td>
<td>
<input id="instance_1" class="in" type="text"/>
</td>
<td>
<input id="object_name_1" class="in" type="text"/>
</td>
<td>
<input id="model_name_1" class="in" type="text"/>
</td>
<td>
<input class="btn_del" type="button" onclick="$('#device_1').remove();" title="Delete"/>
</td>
<td>
<input class="btn_add" type="button" onclick="add_object_row(1);" title="Add new object" style="float:none;"/>
</td>
</tr>
</tbody>
</table>
<br>
<div id="device_objects_1" style="width:100%;">
<table id="object_1" style="margin-left:30px;">
<tbody>
<tr>
<th>Type</th>
<th>Instance</th>
<th>Object Name</th>
<th>Val Type</th>
<th>Position</th>
<th>Units</th>
<th>Quot</th>
<th>Shift</th>
<th>Delete</th>
</tr>
<tr>
<td>
<input id="type_1" class="in_short" type="text"/>
</td>
<td>
<input id="instance_1" class="in_short" type="text"/>
</td>
<td>
<input id="object_name_1" class="in_short" type="text"/>
</td>
<td>
<input id="val_type_1" class="in_short" type="text"/>
</td>
<td>
<input id="position_1" class="in_short" type="text"/>
</td>
<td>
<input id="units_1" class="in_short" type="text"/>
</td>
<td>
<input id="quot_1" class="in_short" type="text"/>
</td>
<td>
<input id="shift_1" class="in_short" type="text"/>
</td>
<td>
<input class="btn_del" type="button" onclick="$('#object_1').remove();"/>
</td>
</tr>
</tbody>
</table>
<table id="object_1" style="margin-left:30px;">
<tbody>
<tr>
<th>Type</th>
<th>Instance</th>
<th>Object Name</th>
<th>Val Type</th>
<th>Position</th>
<th>Units</th>
<th>Quot</th>
<th>Shift</th>
<th>Delete</th>
</tr>
<tr>
<td>
<input id="type_2" class="in_short" type="text"/>
</td>
<td>
<input id="instance_2" class="in_short" type="text"/>
</td>
<td>
<input id="object_name_2" class="in_short" type="text"/>
</td>
<td>
<input id="val_type_2" class="in_short" type="text"/>
</td>
<td>
<input id="position_2" class="in_short" type="text"/>
</td>
<td>
<input id="units_2" class="in_short" type="text"/>
</td>
<td>
<input id="quot_2" class="in_short" type="text"/>
</td>
<td>
<input id="shift_2" class="in_short" type="text"/>
</td>
<td>
<input class="btn_del" type="button" onclick="$('#object_1').remove();"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="device_6" style="background-color:#C2C2C2;">
<table id="tbl_device_6">
<tbody>
<tr>
<th>Slave</th>
<th>Instance</th>
<th>Object Name</th>
<th>Model Name</th>
<th>Delete</th>
<th>Add Object</th>
</tr>
<tr>
<td>
<input id="slave_address_6" class="in" type="text"/>
</td>
<td>
<input id="instance_6" class="in" type="text"/>
</td>
<td>
<input id="object_name_6" class="in" type="text"/>
</td>
<td>
<input id="model_name_6" class="in" type="text"/>
</td>
<td>
<input class="btn_del" type="button" onclick="$('#device_6').remove();" title="Delete"/>
</td>
<td>
<input class="btn_add" type="button" onclick="add_object_row(6);" title="Add new object" style="float:none;"/>
</td>
</tr>
</tbody>
</table>
<br>
<div id="device_objects_6" style="width:100%;">
<table id="object_6" style="margin-left:30px;">
<tbody>
<tr>
<th>Type</th>
<th>Instance</th>
<th>Object Name</th>
<th>Val Type</th>
<th>Position</th>
<th>Units</th>
<th>Quot</th>
<th>Shift</th>
<th>Delete</th>
</tr>
<tr>
<td>
<input id="type_3" class="in_short" type="text"/>
</td>
<td>
<input id="instance_3" class="in_short" type="text"/>
</td>
<td>
<input id="object_name_3" class="in_short" type="text"/>
</td>
<td>
<input id="val_type_3" class="in_short" type="text"/>
</td>
<td>
<input id="position_3" class="in_short" type="text"/>
</td>
<td>
<input id="units_3" class="in_short" type="text"/>
</td>
<td>
<input id="quot_3" class="in_short" type="text"/>
</td>
<td>
<input id="shift_3" class="in_short" type="text">
</td>
<td>
<input class="btn_del" type="button" onclick="$('#object_6').remove();"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>


With this code u can get values of inputs that has class 'in' to in array_tbl array
var array_tbl = []
$('.in').each(function(){
array_tbl.push($(this).val())
})

Related

jQuery check all checkboxes in table

I have a table with a checkbox in the table head which I want to use to check/uncheck all the checkboxes in my table. This is my code, but it doesn't work.
$(document).on('change', '#select_products_checkbox', function() {
$('.form-control').toggleClass('selected');
var selectAllProductsIsChecked = $('#select_products_checkbox').prop('checked');
$('.form-control .form-control').each(function(i, v) {
$(v).prop('checked', selectAllProductsIsChecked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t}</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>

if you pass your event into the change function you can just use the currentTarget checked to set your checked prop on your other checkboxes:
$(document).on('change', '#select_products_checkbox', function(e) {
$('.form-control')
.toggleClass('selected', e.currentTarget.checked)
.prop('checked', e.currentTarget.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t}</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>

To do what you require you can use the closest() and find() methods to find the checkboxes in the tbody of the table related to the 'All' checkbox. Then you can use prop() to set their checked state to match. Similarly you can provide a boolean to toggleClass() to add or remove the class based on whether or not the 'All' was checked.
$(document).on('change', '#select_products_checkbox', function() {
$(this).closest('table').find('tbody :checkbox')
.prop('checked', this.checked)
.toggleClass('selected', this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t} - SELECT ALL</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>

Copy button not working on HTML template

Can I please ask for assistance, im new to html and css i barely know this things though im trying to learn, here's what i made so far but i cant seem to get the copy button fixed .. can someone help me out please
im trying to create a template, im sorry im really trying hard to learn but im clueless..
<form id="tickettemplate" name="tickettemplate">
<table width="700">
<tbody>
<tr>
<td colspan="4" align="center">
<div align="center">
<p style="font-size: 14pt;" align="center">
<strong>Shin's Template</strong>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table style="font-size: 12pt; height: 164px;" width="697">
<tbody>
<tr>
<td valign="middle">
D/SESA
</td>
<td>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Caller’s name:
</td>
<td>
<input id="Email" name="Email" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Callback number:
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
E-mail address:
</td>
<td>
<input id="ctystate0" name="E-mail Address" size="50"
type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Related case#s (history):
</td>
<td>
<input id="phonenumber_singleuser" name=
"phonenumber_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Location,remote/hotel/office:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
</tbody>
</table><br />
<div>
<br />
<table style=
"font-size: 12pt; border: 0px solid gray; height: 44px;" width=
"758" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="middle">
Application name:
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Number of Users Affected:
</td>
<td>
<select id="Number of Users Affected:0" name=
"Number of Users Affected:" size="1">
<option value="Single User">
Single User
</option>
<option value="Less than 5 users">
Less than 5 users
</option>
<option value="5 or more users">
5 or more users
</option>
</select>
</td>
</tr>
</tbody>
</table><br />
<table style="font-size: 12pt; height: 255px;" width="604">
<tbody>
<tr>
<td valign="middle">
What is the problem:
</td>
<td>
<p>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</p>
</td>
</tr>
<tr>
<td valign="middle">
When did the issue/problem begin:
</td>
<td>
<input id="Email" name="Email" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Logon id: :
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Error message (if any):
</td>
<td>
<input id="ctystate0" name="Error message (if any):"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
When was the last time it worked properly:
</td>
<td>
<input id="phonenumber_singleuser" name=
"phonenumber_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Have there been any changes to your PC since the last
time it worked properly:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="middle">
Have you changed your password recently:
</td>
<td>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</td>
</tr>
</tbody>
</table><br />
<table style="font-size: 12pt;">
<tbody>
<tr>
<td valign="middle">
Trouble shooting steps (Detailed):
<textarea cols="50" rows="2">
</textarea>
</td>
</tr>
<tr>
<td valign="middle">
Additional Detail (links, screenshots etc...):
<textarea cols="50" rows="2">
</textarea>
</td>
</tr>
</tbody>
</table>
<div>
<br />
<table style=
"font-size: 12pt; border: 1px solid gray; height: 92px;"
width="612" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">
Problem:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Cause:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Action:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Resolution:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td align="right" width="150">
<input name="Reset" type="reset" value=
"Clear Template" />
</td>
<td align="right" width="450">
<input name="copyform" type="button" value=
"Copy" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>

Here is a solution that uses a few lines of JS.
HTML
<p id="p1">Text</p>
<button onclick="copyToClipboard('#p1')">Copy TEXT</button>
JS
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}

input boxes value of table should not be greater then input box outside of table

Hello I have developed a form where input boxes value of table should not be greater then input box outside of table.
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>
in above jsfiddle all ENTER SANCTIONED SEATS sum will not be greater then "Enter total number of sanctioned seats" in onchange.

You need to use jquery keyup event as I mentioned in fiddle.
Please check this fiddle
Here I just made textbox value blank if sum of three sanctioned seats are greater than total.
Also i have cleare 3 textbox if you chane total textbox
Open this link : https://jsfiddle.net/5y6na3wr/7/

$(document).ready(function(){
$(".seats").on('keyup',function(){
var total = parseInt(0) ;
$( ".seats" ).each(function( index ) {
if($(this).val()){
total = total + parseInt($(this).val());
}
});
if(total > $("#sanctionedSeatsSummary").val()){
alert("total sanctioned Seats are greater then given sanctioned Seats");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>

check below snippet
$(document).ready(function(){
var ttl, val;
$("input[name=seats]").on('keyup', function(){
val = 0;
$("input[name=seats]").each(function(){
if(parseInt($(this).val().trim()) > 0)
val += parseInt($(this).val().trim());
});
ttl = parseInt($("#sanctionedSeatsSummary").val().trim());
if(val > ttl)
alert("your alert");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>

How can I hide/show a form when a button is clicked using javascript?

I actually need help to correct my code. I have watched a video from youtube but in that video, he use checkbox instead of button. so i'm having problem with the if else statement of the javascript. i have already checked the previous post that have same problem but couldn't find the one that can solve my problem. please help me. Thank you so much.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/tabMenu.css" rel="stylesheet" type="text/css" />
<style>
.hidden {
display:none;}
</style>
<script type="text/javascript">
function showHide()
{
var button = document.getElementById("butt");
var hiddeninput = document.getElementByClassName("hidden");
if(button.click)
{
hiddeninput.style.display = "block";
}
else
{
hiddeninput.style.display = "none";
}
}
</script>
</head>
<body>
<div id="navbar">
<div id="holder">
<ul>
<li>Employer Database</li>
<li>Company Presence</li>
<li>Company Promotion</li>
</ul>
</div><!--end of holder div -->
</div><!--end of navbar div -->
</br>
<p id="p1"><u>Employer List</u></p>
</br>
<table width="1345" height="113" border="1" id="table1">
<tr id="tr1">
<th width="46" height="35" scope="col">No.</th>
<th width="93" scope="col">Title</th>
<th width="157" scope="col">First Name</th>
<th width="171" scope="col">Last Name</th>
<th width="128" scope="col">Position</th>
<th width="130" scope="col">Sector</th>
<th width="178" scope="col">Company Name</th>
<th width="107" scope="col">Country</th>
<th width="97" scope="col">Email</th>
<th width="78" scope="col">Phone</th>
<th width="84" scope="col">Action</th>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
<input name="addbutton" type="button" value="Add Employer" id="butt" onclick="showHide()"/>
<br/>
<br/>
<br/>
<form id="form1" action="add_employer.php" method="post" class="hidden">
<p align="left"><u><strong>Add Employer Detail</strong></u></p>
<br/>
<br/>
<TABLE cellpadding="5" cellspacing="2" align="center">
<TR>
<td><strong>Title </strong></td>
<td><strong>:
<input name="title" value="" type="text" size="50" maxlength="50">
</strong></td>
</TR>
<TR>
<td><strong>First Name </strong></td>
<td><strong>:
<input name="first_name" value="" type="text" size="50" maxlength="50">
</strong></td>
</TR>
<TR>
<td><strong>Last Name</strong></td>
<TD><strong>:
<input name="last_name" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Position</strong></td>
<TD><strong>:
<input name="position" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Sector</strong></td>
<TD><strong>:
<input name="sector" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Company Name</strong></td>
<TD><strong>:
<input name="company_name" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Country</strong></td>
<TD><strong>:
<input name="country" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Email</strong></td>
<TD><strong>:
<input name="email" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Phone</strong></td>
<TD><strong>:
<input name="phone" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Action</strong></td>
<TD><strong>:
<input name="action" value="" type="text" size="50" maxlength="50">
</strong>
<input name="addbutton" type="button" value="Add Employer"/>
<input name="clear" type="button" value="Clear"/>
</TD>
</TR>
</TABLE>
<br/>
<br/>
</form>
</body>
</html>

You can target the form using id and add remove class to show hide the form.
<style>
.hidden {
display:none;}
</style>
<script type="text/javascript">
function showHide() {
var hiddeninput = document.getElementById("form1");
if (hiddeninput.classList.contains("hidden")) {
hiddeninput.classList.remove("hidden");
}
else {
hiddeninput.classList.add("hidden");
}
}
</script>

Given that you're hiding the element with a class, you can show and hide it by removing and re-adding the class. The classList.toggle method* will do that:
function hide(id) {
var el = document.getElementById(id);
if (el && el.classList) {
el.classList.toggle('hidden');
}
}
<style type="text/css">
.hidden {
display: none;
}
</style>
<body>
<input id="foo"><br>
<button onclick="hide('foo')">Hide input</button>
</body>
* Note that the reference to MDN includes a polyfill for Element.classList to support older browsers.

how about this... ??
function showHide() {
var button = document.getElementById("butt");
var hiddeninput = document.getElementsByClassName("hidden");
var form1 = document.getElementById("form1");
if (form1 && form1.style.display=="none") {
form1.style.display = "block";
} else {
form1.style.display = "none";
}
}
<div id="navbar">
<div id="holder">
<ul>
<li>Employer Database
</li>
<li>Company Presence
</li>
<li>Company Promotion
</li>
</ul>
</div>
<!--end of navbar div -->
</br>
<p id="p1"><u>Employer List</u>
</p>
</br>
<table width="1345" height="113" border="1" id="table1">
<tr id="tr1">
<th width="46" height="35" scope="col">No.</th>
<th width="93" scope="col">Title</th>
<th width="157" scope="col">First Name</th>
<th width="171" scope="col">Last Name</th>
<th width="128" scope="col">Position</th>
<th width="130" scope="col">Sector</th>
<th width="178" scope="col">Company Name</th>
<th width="107" scope="col">Country</th>
<th width="97" scope="col">Email</th>
<th width="78" scope="col">Phone</th>
<th width="84" scope="col">Action</th>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
<input name="addbutton" type="button" value="Add Employer" id="butt" onclick="showHide()" />
<br/>
<br/>
<br/>
<form id="form1" action="add_employer.php" method="post" style="display: none;">
<p align="left"><u><strong>Add Employer Detail</strong></u>
</p>
<br/>
<br/>
<TABLE cellpadding="5" cellspacing="2" align="center">
<TR>
<td><strong>Title </strong>
</td>
<td><strong>:
<input name="title" value="" type="text" size="50" maxlength="50">
</strong>
</td>
</TR>
<TR>
<td><strong>First Name </strong>
</td>
<td><strong>:
<input name="first_name" value="" type="text" size="50" maxlength="50">
</strong>
</td>
</TR>
<TR>
<td><strong>Last Name</strong>
</td>
<TD><strong>:
<input name="last_name" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Position</strong>
</td>
<TD><strong>:
<input name="position" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Sector</strong>
</td>
<TD><strong>:
<input name="sector" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Company Name</strong>
</td>
<TD><strong>:
<input name="company_name" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Country</strong>
</td>
<TD><strong>:
<input name="country" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Email</strong>
</td>
<TD><strong>:
<input name="email" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Phone</strong>
</td>
<TD><strong>:
<input name="phone" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Action</strong>
</td>
<TD><strong>:
<input name="action" value="" type="text" size="50" maxlength="50">
</strong>
<input name="addbutton" type="button" value="Add Employer" />
<input name="clear" type="button" value="Clear" />
</TD>
</TR>
</TABLE>
<br/>
<br/>
</form>

You can use jQuery for that.
For hiding do that in the onClick event on the button.
$( ".target" ).hide();
For showing
$( ".target" ).show();

Adding a row into my table which contain a select won't work

I want to add a row to my table to allow to the user to add data which will be inserted then into the data base.
I have imbricated tables (the coed given present just first row to simplify but it’s a long form given as a table).
My first problem is when I add the select to my getElementById it won’t work?
My second problem I don’t know if I can recuperate the fields added by the user and inserted them to my database?
I found the example that I have followed in ( Add table row in jQuery )
<html>
<head>
<script type="text/javascript">
function displayResult() {
document.getElementById("tabsalaire").insertRow(-1).innerHTML = '<td><input name="salaireparstatut4" id="salaireparstatut4" /></td>';
document.getElementById("tabtitulaire").insertRow(-1).innerHTML = '<td><input name="nbtitulaire4" id="nbtitulaire4" /></td>';
document.getElementById("tabfemale").insertRow(-1).innerHTML = '<td><input name="nbfemale4" id="nbfemale4" /></td>';
document.getElementById("tabsommeparstatut").insertRow(-1).innerHTML = '<td><input name="sommeparstatut4" id="sommeparstatut4" /></td>';
document.getElementById("selectstatus").insertRow(-1).innerHTML = '<td><select name="statutselect4" required> < option value = "" > choisir < /option> < option value = "Professeur" > Professeur < /option> < option value = "Assistant" > Assistant < /option> < /select> < input type = "hidden"
name = "EnseignementSuperieur"
value = "EnseignementSuperieur" / > < /td>';
}
</script>
</head>
<body>
<form method="post" action="processform.php">
<table border="1">
<tr>
<th>Add</th>
<th>Salaire annuel</th>
<th>nombre titulaire</th>
<th>Nombre femme</th>
<th>Somme</th>
<th>Statut</th>
<th>Type</th>
</tr>
<td>
<table>
<tr>
<td>
<button type="button" onClick="displayResult()">Insert new row</button>
</td>
</tr>
</table>
</td>
<td>
<table id="tabsalaire">
<tr>
<td>
<input name="salaireparstatut1" id="salaireparstatut1" />
</td>
</tr>
<tr>
<td>
<input name="salaireparstatut2" id="salaireparstatut2" />
</td>
</tr>
<tr>
<td>
<input name="salaireparstatut3" id="salaireparstatut3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabtitulaire">
<tr>
<td>
<input name="nbtitulaire1" id="nbtitulaire1" />
</td>
</tr>
<tr>
<td>
<input name="nbtitulaire2" id="nbtitulaire2" />
</td>
</tr>
<tr>
<td>
<input name="nbtitulaire3" id="nbtitulaire3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabfemale">
<tr>
<td>
<input name="nbfemale1" id="nbfemale1" />
</td>
</tr>
<tr>
<td>
<input name="nbfemale2" id="nbfemale2" />
</td>
</tr>
<tr>
<td>
<input name="nbfemale3" id="nbfemale3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabsommeparstatut">
<tr>
<td>
<input name="sommeparstatut1" id="sommeparstatut1" /> </td>
</tr>
<tr>
<td>
<input name="sommeparstatut2" id="sommeparstatut2" />
</td>
</tr>
<tr>
<td>
<input name="sommeparstatut3" id="sommeparstatut3" />
</td>
</tr>
</table>
</td>
<td>
<table id="selectstatus">
<tr>
<td>
<select name="statutselect1" required>
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre1" value="EnseignementSuperieur" /> </td>
</tr>
<tr>
<td>
<select name="statutselect2">
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre2" value="EnseignementSuperieur" /> </td>
</tr>
<tr>
<td>
<select name="statutselect3">
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="ProfesseurConf">ProfesseurConf</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre3" value="EnseignementSuperieur" /> </td>
</tr>
<tr></tr>
</table>
</td>
<th>
EnseignementSuperieur </th>
</tr>
<td> </td>
<td>
<input name="SubSommenbTitulaireTypeCadre" id="SubSommenbTitulaireProfChercheur" />
</td>
<td>
<input name="SubSommenbFemaleTypeCadre" id="SubSommenbFemaleProfChercheur" />
</td>
<td>
<input name="SubSommeNbProfTypeCadre" id="SubSommeNbProfChercheur" />
</td>
<td>
<input name="SubSommeSalaireAnnuelTypeCadre" id="SubSommeSalaireAnnuelProfChercheur" />
</td>
<th>Somme SUB</th>
<tr>
</tr>
<tr>
<td>
<input type="submit" name="Validate" value="Validate" />
</td>
</tr>
</table>
</body>
</html>

Categories