Hello Friends,
I have created a form which has by default 4 rows and 4 columns. Once the user click on More(which as bottom of the table) one more row will be added to the form. When the user click on submit their information will be submitted. Every student will access this form and submit or save it. But when the row is empty it shuld not be entered in the database. How should i insert this information in the database.
The table name is survey having fields
-survey_id
-student_id
-local
-duties
-skill
Also is it possible to make validation that if local is entered and duties and skill or vice versa is not entered than an alert message should come up.
Here is my code for more help
<html>
<head><body bgcolor='#F0F0F0'>
<script type="text/javascript">
function debug_ie ()
{
var body = document.getElementsByTagName('body').item(0);
var debug = document.createElement('textarea');
debug.setAttribute( 'rows', 30 );
debug.setAttribute( 'cols', 60 );
debug.setAttribute( 'wrap', 'off' );
debug.value = document.getElementsByTagName('html').item(0).innerHTML;
body.appendChild( document.createElement('br') );
body.appendChild( debug );
}
function delete_row ( target ) {
do {
if ( target.nodeName.toUpperCase() == 'TR' ) {
target.parentNode.removeChild(target);
break;
}
} while ( target = target.parentNode );
}
function add_row ( table ) {
if( typeof document.getElementById == 'undefined' ||
typeof document.createElement == 'undefined' ) {
return; // Only DOM browsers
}
var table = document.getElementById(table) ;
var pos = 0;
var authors = [];
for ( var i = 0; i < table.rows.length; i ++ ) {
var row = table.rows.item(i);
if ( /author/.test( row.className ) ) {
authors.push(row);
pos ++;
}
}
var tr = document.createElement('tr');
tr.setAttribute('class','author');
var td1 = document.createElement('td');
var field = document.createElement('select');
field.setAttribute('name','local[]');
field.setAttribute('id','local[]');
field.options[0] = new Option('--Select--','');
field.options[1] = new Option('Local','Local');
field.options[2] = new Option('Central','Central');
//field.setAttribute('value',pos); // testing purposes
td1.appendChild(field);
tr.appendChild(td1);
var td2 = document.createElement('td');
var field = document.createElement('textarea');
field.setAttribute('name','duties[]');
field.setAttribute('id','duties[]');
//field.setAttribute('type','textarea');
field.setAttribute('cols','25');
field.setAttribute('rows','4');
//field.setAttribute('value',pos); // testing purposes
td2.appendChild(field);
tr.appendChild(td2);
var td3 = document.createElement('td');
var field = document.createElement('textarea');
field.setAttribute('name','skills[]');
field.setAttribute('id','skills[]');
//field.setAttribute('type','textarea');
field.setAttribute('cols','25');
field.setAttribute('rows','4');
//field.setAttribute('value',pos); // testing purposes
td3.appendChild(field);
tr.appendChild(td3);
var td4 = document.createElement('td');
var button = document.createElement('input');
button.setAttribute('onclick','delete_row(this)');
button.setAttribute('value','Delete');
button.setAttribute('type','button');
button.onclick = function ()
{
delete_row( this );
};
td4.appendChild(button);
tr.appendChild(td4);
var next_node = authors[pos -1];
while ( next_node = next_node.nextSibling ) {
if ( next_node.nodeName.toUpperCase() == 'TR' ) {
break;
}
}
if ( table.tBodies.length ) {
if ( next_node ) {
table.tBodies[0].insertBefore( tr, next_node );
} else {
table.tBodies[0].appendChild( tr );
}
} else {
if ( table.tBodies.length ) {
table.insertBefore( tr, next_node );
} else {
table.appendChild( tr );
}
}
}
</script>
</head><br><br>
<body>
<form name="form1" method="post" action="add_submit.php">
<table align="center" cellpadding="4" cellspacing="0" id="tblView" border="1" >
<tr align="center">
<td valign="top">Local/Central</td>
<td>Duties</td>
<td>Skill Set</td>
<td>Action</td>
</tr>
<tr class="author">
<td ><select name="local[]">
<option VALUE="">--Select--
<option VALUE="Local">Local
<option VALUE="Central">Central
</select></td>
<td><textarea rows="4" cols="25" name="duties[]"></textarea></td>
<td><textarea rows="4" cols="25" name="skills[]"></textarea></td>
<td></td>
</tr>
<tr class="author">
<td><select name="local[]">
<option VALUE="">--Select--
<option VALUE="Local">Local
<option VALUE="Central">Central
</select></td>
<td><textarea rows="4" cols="25" name="duties[]"></textarea></td>
<td><textarea rows="4" cols="25" name="skills[]"></textarea></td>
<td><input type="button" value="Delete" onclick="delete_row(this)"></td>
</tr>
<tr class="author">
<td><select name="local[]">
<option VALUE="">--Select--
<option VALUE="Local">Local
<option VALUE="Central">Central
</select></td>
<td><textarea rows="4" cols="25" name="duties[]"></textarea></td>
<td><textarea rows="4" cols="25" name="skills[]"></textarea></td>
<td><input type="button" value="Delete" onclick="delete_row(this)"></td>
</tr>
<tr class="author">
<td><select name="local[]">
<option VALUE="">--Select--
<option VALUE="Local">Local
<option VALUE="Central">Central
</select></td>
<td><textarea rows="4" cols="25" name="duties[]"></textarea></td>
<td><textarea rows="4" cols="25" name="skills[]"></textarea></td>
<td><input type="button" value="Delete" onclick="delete_row(this)"></td>
</tr>
<tr>
<td valign="top" colspan="4" align="center">
<input name="cmdAddMore" type="button" id="cmdAddMore" value="More" onClick="add_row('tblView')" />
<input type="Submit" name="Submit" value="Submit" onclick="javascript:return submit_form();">
</td>
</tr>
</table>
</form>
</body>
</html>