On developing a submition form, we will sometimes need a variable number of input for some options. In the case we usaully use jquery/js to dynamically add input fields to the form. However, today I face on a problem that the jquery added input does not post to the server side. Finally, I find the reason is related to the strcture of the html.

the html of my code

<table id="table">
	<form>
	<thead>
		<tr>
			<th>Title</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="text" name="dynamic[]"></td>
		</tr>
	<tbody>
	<tfoot>
		<tr>
			<td><input type="button" id="addmore"></td>
		</tr>
	</tfoot>
	</form>
</table>

JS:

$(document).ready(function() {
	$("#addmore").click(function() { $("tbody",$("#table")).append(''); });
});

The reason cost the problem is the order of form and table. In the case, I have put the form inside the table which will make the added input not catch by the form, simply change to the following and the problem solve:

	

		

			

				

					Title
			
		
		

			

				

					
			
		
		

			

				

					
			
		
		

		
	

header('Content-type: application/vnd.openxmlformats-officedocument.wordprocessingml.document');
header('Content-Disposition: attachment; filename="'.$filename.'"');
readfile($path);

Using a float span as the placeholder message instead change the value of the input

Firstly, make the form input as following style

<label><input type="text" placeholder="email" /></label>

Using CSS and a noise image to make a noise background
To make a image with noise pattern, we always directly using a png image to do so. However, if we have different color of noise background and want to have different opacity, we should make much more image. Here introduce a method that allow you to make a noise background with numerous different color which just use one image.

Firstly, we should create a background with some noise. Than apply a background color on it. CSS code as below:

background: url(noise.png) #F00

We have now made a red background with noise. If you need a transparent background, than we can use rgba instead:

background: url(noise.png) rgba(255,0,0,0.5)

This created a red noise background with opacity 50%
As lower version IE doesn't support rgba setting, so we need to do more:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#AAFF0000', endColorstr='#AAFF0000');

On the above case, #AAFF0000, FF0000 is the color code and AA represent the transparent gradient which FF means opaque and 00 means full transparent. Note that if rgba and the filter exists together, the noise will not work, so we would need to use CSS hack to handle different case, the full supported code as below  

background: url(noise.png) rgba(255,0,0,0.5);
background: url(noise.png) transparent \\\\9;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#77FF0000', endColorstr='#77FF0000');

Below is an example:

There are four case make the overlap exists
(ns, ne, es, ee) = (new_start, new_end, existing_start, existing_end):

1. ns - ne - es - ee: doesn't overlap and doesn't match (because ne < es)
2. ns - es - ne - ee: ovarlaps and matches
3. es - ns - ee - ne: ovarlaps and matches
4. es - ee - ns - ne: doesn't overlap and doesn't match (because ns > ee)
5. es - ns - ne - ee: ovarlaps and matches
6. ns - es - ee - ne: ovarlaps and matches

SQL Statment Below method is found from internet while the second method is my own way usally use.

SELECT * FROM tbl WHERE
existing_start BETWEEN '$newStart' AND '$newEnd' OR
existing_end BETWEEN '$newStart' AND '$newEnd' OR
'$newStart' BETWEEN existing_star AND existing_end

SELECT * FROM tbl WHERE
( existing_start<='$newStart' AND existing_end>'$newStart' )
AND ( existing_start<'$newEnd' AND existing_start>'$newStart' )