I am having a problem with HTML table layout. I have created an HTML form and layout the form using HTML table :
<form id="form1">
<table class="ui-widget">
<tbody>
<tr>
<td>
<label for="CreateName">Name</label>
</td>
<td>
<input type="text" id="CreateName" name="Name" />
</td>
</tr>
<tr>
<td>
<label for="CreateDate">Date</label>
</td>
<td>
<input type="text" id="CreateDate" name="Date" />
</td>
</tr>
..
...
</tbody>
</table>
</form>
I have inserted jquery validation on form fields. Now my problem is when validation error shown, than whole table layout is affected. I used :
table-layout: fixed;
But still it is not working. How can i get rid of this issue ?
Related
Using ng-repeat I'm displaying Item related textboxes and on click of SaveAll button I want to read all text box values based on ITEM ID and Save it to DB.
<tr>
<td>
<table ng-repeat="item in itemDtls">
<tr>
<td>
<label for="lblItemName">Item ID: </label> {{item.ITEM_ID}}
</td>
</tr>
<tr>
<td>
<label for="lblPriority">Item Priority </label>
<input type="text" id="inpPriority" ng-model="ValuesPriority" value="{{item.PRIORITY}}" />
</td>
</tr>
<tr>
<td>
<label for="lblComment">Comment</label>
<input type="text" id="inpComment" ng-model="ValuesComment" value="{{item.COMMENT}}" />
</td>
</tr>
<tr>
</table>
</td>
<tr>
<td>
<button type="submit" ng-click="SaveAll()">SaveAll</button>
</td>
</tr>
Do not use "value" tag instead use "ng-model" only.
Eg:
<td>
<label for="lblComment">Comment</label>
<input type="text" id="inpComment" ng-model="item.COMMENT" />
</td>
So whatever comments you change, it will update in that variable.
Later you can send "itemDtls" in backend to store in DB.
You must need a backend to store in DB.
I thought a basic (I mean basic) example of what I want to do would help with this. What I want to have happen is either have page A once completed load page B or page B loads over top page A with the input showing. I need to be able to do this without JQuery or PHP, so will be working with HTML, CSS and pure Javascript.
Page A (Form to fill in)
<html>
Name:<input type='text' ID="name" name='Name' />
Reference: <input type='text' ID="reference" name='reference' />
Address : <textarea name="Customers Address" ID="custadd" rows="7" cols="30"></textarea>
Item not received? <select>
<option value="0" ></option>
<option value="1" >Yes</option>
<option value="1">No</option>
</select>
<input type="button" Transfers input on this page into fields on prinatble form>
</html>
Page B (Output printable form)
<html>
<body>
<table id="myTable">
<tr>
<td>
Name:
</td>
<td>
*(name appears here)*
</td>
<tr>
<tr>
<td>
Reference:
</td>
<td>
*(Reference goes here)*
</td>
<tr>
<tr>
<td>
Address :
</td>
<td>
*(address goes here)*
</td>
<td>
Item not received?
</td>
<td>
*(Yes/no here)*
<style>
<style>
#myTable {
border: none;;
font color:#000000
font-size: 16px;
I have made the table structure below. How can I add a second column of this table dynamically whenever I click add1 link using javascript? The whole column from up to down.This same column must be repeated again and again
Here is my HTML:
<table id="datble" class="form" border="1">
<tbody>
<tr>
<td>Add1
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
<tr>
<td>Add2
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
<tr>
<tdAdd3
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
<tr>
<td>Add4
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
</tbody>
</table>
You need to bind a function to the link's click event. In that function, you need to iterate through each row, find the position where you want to add the column, and then insert it.
$(function(){
// bind the function to the click event
$("#add1").on("click", function(){
// iterate through each row
$("table tbody tr").each(function(){
// insert the column HTML at the desired point
$(this).children().first().after("<td>New Column</td>");
});
});
});
DEMO
If you want to make all of the links add the column when clicked, then just replace #add1 with .add in the jQuery.
I created a JavaScript function that adds a row to your table.
I also removed the <p> tag because it's not valid HTML and makes no visual difference.
<table id="datble" class="form" border="1">
<tbody>
<tr>
<td>Add 1</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]" />
</td>
</tr>
<tr>
<td>Add 2</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function addColumn(element) {
var tr = element.parentElement.parentElement;
var td = document.createElement("td");
td.innerHTML = '<label>Name</label>';
td.innerHTML += '<input type="text" required="required" name="BX_NAME[]" />';
tr.appendChild(td);
}
</script>
EDIT: Sorry, I misunderstood and thought you wanted to add a row. I changed the code to add a column instead.
EDIT 2: I changed the code so you can use it on multiple rows.
I have code which will dynamically create elements which works great.
But I have two forms on my page .. one to load an image and the other to input data which is ordered as follows
<form name=image>
</form>
<form name=data>
<div id="p_scents">
JavaScript elements are inserted here
</div>
</form>
Now if I have the image form and I submit the form, the javascript created elements are not submitted and do NOT appear in _POST.
But without the image form, these javascript created elements do appear in _POST
Any reason why?
See code below...
<table border=1 cellpadding="1" cellspacing="0" width=80%>
<tr>
<td>
Select image for new banner
</td>
<td>
<form method="post" action="/index.php/dashboard/create/" enctype="multipart/form-data" name=LoadImage>
<input type="file" name="image"/>
<input type="submit" value="upload"/>
</form>
</td>
</tr>
<tr><td colspan=2 align=center>
<form action="index.php/create" method="post" accept-charset="utf-8" name="CreateBanner">
Add Another Input Box
</td>
</tr>
<tr><td>
Give your banner a unique name</td>
<td>
<input type="text" name="name" value="" id="name" autofocus /></td></tr>
<tr><td>Specify email address or domain to brand</td>
<td>
<input type="text" name="domainName" value="" id="domain" /></td></tr>
<tr><td>Status</td>
<td>
<select name="status">
<option value="enabled">Enabled</option>
<option value="disabled">Disabled</option>
</select>
</td></tr>
<tr><td>Give you banner a default URL</td>
<td>
<input type="text" name="url" value="" id="url" /></td></tr>
<tr><td valign=top>Alternate Urls
</td>
<td>
<div id="p_scents">
</div>
<input type=submit>
</form>
</td>
</tr>
</table>
I have some this kind of structure
<table>
<tr>
<td valign="top" style="width: 48%;">
<fieldset>
<legend><b>Company Info:</b> </legend>
<table width="100%">
<tr>
<td>
<br />
dynamic data
<br />
dynamic data
<br />
dynamic data
<br />
dynamic data
</td>
</tr>
</table>
</fieldset>
</td>
<td valign="top" style="width: 48%;">
<fieldset id="crew">
<legend><b>Crew Company Info:</b> </legend>
<table width="100%">
<tr>
<td>
<br />
dynamic data
<br />
dynamic data
<br />
dynamic data
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>
Which produces two fieldsets side by side filled with dynamic data, I want to make sure that both fieldsets have same size I mean if one has more data than another one, the another one should increase it's size (height mainly) to overcome that difference so that they both look of same size,
Any suggestion how can I achieve this using CSS or JavaScript ??
I think you can place the fieldset with DIV and use equal size.
Refer Setting Equal Heights with jQuery