Tabular Form and Dynamic Add/Remove Rows w/ Input Elements

[steven.l]

First of all, outstanding plugin!

But I have a unique client requirement where a group of input fields needs to be:

1. In tabular form
2. Able to add / remove rows that contains input elements.

Something like this:

Keep it up guys 😉

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[steven.l]

Hi Ally,

That’s great. I can do Javascript using jQuery. But I need your help:

1. How can I add my own function when I hit the “submit” button?
2. Does the hidden element/field be a raw html code, like a table maybe?

I’ll share to you the code once it’s working.

Thanks,

Steve

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[steven.l]

As promised 🙂

<!-- the tabular flag -->
<input id="is_tabular" type="hidden" value="1"/>

<!-- the input table -->
<table id="tabular-input-form">
<tbody>
<tr id="row0">
<td><label>Location</label><input type="text" id="location" /></td>
<td><label>Temperature</label><input type="text" id="temp"/></td>
<td><button id="tabular-add-row-button" href="#tabular-input-wrapper">Add</button></td>
</tr>
</tbody>
</table>

<!-- the tabular data -->
<div class="tabular-input-wrapper">
<table class="tabular-data" id="tabular">
<thead>
<tr>
<th>Location</th>
<th>Temperature</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

<!-- the script -->
<script type="text/javascript">
var idx = 1;
jQuery(document).ready(function(){
	plug_datepicker();
});
jQuery('#tabular-add-row-button').click(function(){
	var new_row =  get_row_tpl();
	jQuery(new_row).appendTo('#tabular').show('fast');
	plug_datepicker();
	idx++;
	reset_form();
	return false;
});
function delete_row(row_id){
	jQuery('#'+row_id).fadeOut('slow',function(){
	jQuery('#'+row_id).remove();
});
}
function get_row_tpl(){
	var row_id = "row"+idx;
	var d1= jQuery('#location').val();
	var d2= jQuery('#temp').val();
	var tpl = [
		"<tr id='"+row_id+"' style='display:none;'>",
			"<td>"+d1+"</td>",
			"<td>"+d2+"</td>",
			"<td><a href='#tabular-input-wrapper' onclick=\"delete_row('"+row_id+"')\">Remove</a></td>",
		"</tr>",
	].join('\n');
	return tpl;
}
function reset_form(){
	jQuery('#location').val('');
	jQuery('#temp').val('');
}
function plug_datepicker(){
	jQuery('.datepicker').datepicker();
}
function call_tabular_processor(){
	jQuery('.iphorm_1_30').val(jQuery('.tabular-input-wrapper').html());
}
</script>

<!-- the style -->
<style type="text/css">
table#tabular th{
font-weight:bold;
}

</style>

Then, in jquery.iphorm.js:

At _this.submit...
....
process_tabular();
......

function process_tabular(){	
	if(jQuery('#is_tabular').length > 0){		
		call_tabular_processor();
	}else{
		//alert('grrr');
	}
}

I added a hidden field ‘is_tabular’ and set its default value to ‘1’.

• This reply was modified 8 years, 5 months ago by Ally.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[jerkski]

This would be excellent and very useful! Can you offer clarification as to where to put all of this code and what types of form elements are needed. I assume everything in the first part of steven.l’s post goes in an HTML element, and the process_tabular(); and its following code go in the jquery.iphorm.js file?

I have already added an HTML element, but am confused by the last statement also ‘I added a hidden field ‘is_tabular’ and set its default value to ‘1’’ How can I add a value to a hidden field?

Thank you!

[Author]

Posts