Request for Quote form with add/delete rows facility

Looking for complete zencart fileset of a Request for Quote form, preferably one with jquery/javascript code for user to add/delete rows for multiple (eg length, width, qty) input fields per row.

The specific parts I need are:
jquery/javascript code for user to add/delete rows
code to push the added row inputs into an array
code to calculate the product of each row of inputs
code to calculate the sum of the products of each row of inputs and insertion into single db field
code to insert whole array into a single db field
code to extract the inputs from the array to display in an email.

Happy to turn this into a mod for the benefit of others.

dw08gm:

Looking for complete zencart fileset of a Request for Quote form, preferably one with jquery/javascript code for user to add/delete rows for multiple (eg length, width, qty) input fields per row.

The specific parts I need are:
jquery/javascript code for user to add/delete rows
code to push the added row inputs into an array
code to calculate the product of each row of inputs
code to calculate the sum of the products of each row of inputs and insertion into single db field
code to insert whole array into a single db field
code to extract the inputs from the array to display in an email.

Happy to turn this into a mod for the benefit of others.

There is a get a quote module I have stashed away, I'll try and post it on the forum today.
HOWEVER it doesn't have these additional options

Here is a link to the module once approved by the forum
https://www.zen-cart.com/downloads.php?do=file&id=2001

So far I have the add/delete rows part working in MyTemplate/templates/tpl_widgit_entry.php

<?php
/**
 * Template - WIDGIT ENTRY
 *
 * @version $Id: tpl_widgit_entry_default.php 2015-05-01
 */
?>

<script language="javascript" type="text/javascript"><!--

function addRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	if(rowCount < 5){ // limit the user from creating fields more than your limits
		var row = table.insertRow(rowCount);
		var colCount = table.rows[0].cells.length;
		for(var i=0; i<colCount; i++) {
			var newcell = row.insertCell(i);
			newcell.innerHTML = table.rows[0].cells[i].innerHTML;
		}
	} else {
	  alert("Maximum 5 rows per entry.");
	}
}

function deleteRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	for(var i=0; i<rowCount; i++) {
		var row = table.rows[i];
		var chkbox = row.cells[0].childNodes[0];
		if(null != chkbox && false == chkbox.checked) { // changed from true to only delete unchecked chkboxes
			if(rowCount <= 1) { // limit the user from removing all the fields
				alert("Cannot remove all rows.");
				break;
			}
			table.deleteRow(i);
			rowCount--;
			i--;
		}
	}
}

--></script>

<?php //include(DIR_WS_MODULES . zen_get_module_directory('widgit_entry.php')); ?>

<div>

  <h1 class="center"><?php echo HEADING_TITLE; ?></h1>


<?php //if ($messageStack->size('widgit_entry') > 0) echo $messageStack->output('widgit_entry'); ?>

<?php //echo zen_draw_form('widgit_entry', zen_href_link(FILENAME_WIDGIT_ENTRY, '', 'NONSSL'), 'post', 'onsubmit="return check_form(_widgit_entry);"') . zen_draw_hidden_field('action', 'process'); ?>
<?php echo zen_draw_form('widgit_entry', zen_href_link(FILENAME_WIDGIT_ENTRY, '', 'NONSSL'), 'post'); ?>

<!-- BOF ADD/DELETE ROWS-->
  <fieldset class="stdForm">
	<legend>Add/Delete Rows</legend>
	<div class="back">
	  <input type="button" value="Add Row" onClick="addRow('dataTable')" /> 
	  <input type="button" value="Remove Row" onClick="deleteRow('dataTable')" /> 
	  <span class="noWrap">(removes "checked" rows)</span>
	</div>
	<br clear="left" />

	<table id="dataTable" class="form" border="0">
	 <tbody>
	  <tr>
		<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
		<td>
		  <input type="text" required="required" maxlength=4 title="length (required)" placeholder="length" name="wgl[]" />
		</td>
		<td>
		  <input type="text" required="required" maxlength=4 title="width (required)" placeholder="width" name="wgw[]" />
		</td>
		<td>
		  <input type="text" required="required" maxlength=4 title="depth (required)" placeholder="depth" name="wgd[]" />
		</td>
	  </tr>
	 </tbody>
	</table>
	<br class="clearBoth" />
  </fieldset>
</form>

<br />
  <div class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_WIDGIT_ENTRY, '', 'NONSSL') . '">' . zen_image_button(BUTTON_IMAGE_RESET, BUTTON_RESET_ALT) . '</a>'; ?></div>
  <div class="buttonRow forward"><?php echo zen_image_submit(BUTTON_IMAGE_SUBMIT, BUTTON_SUBMIT_ALT); ?></div>
  <br class="clearBoth" />

</div>

What I need now is the correct code to process the added rows. Not being a trained programmer, I have no idea what I should be doing.

My modules/pages/widgit_entry_success/header_php.php looks like this, but is not working.

<?php
/**
 * Module Page Header - WIDGIT ENTRY SUCCESS
 *
 * @version $Id: header_php.php 2015-05-01
 */

// This should be first line of the script:
$zco_notifier->notify('NOTIFY_HEADER_START_WIDGIT_ENTRY_SUCCESS');

require(DIR_WS_MODULES . zen_get_module_directory('require_languages.php'));
//require_once(DIR_WS_CLASSES . 'widgit_entry.php'); 
//include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_WIDGIT_ENTRY));


if(isset($_POST)==true && empty($_POST)==false) { 
  $chkbox = '';
  $wgl = '';
  $wgw = '';			
  $wgd = '';

  $chkbox = ($_POST['chk']);
  $wgl = ($_POST['wgl']);
  $wgw = zen_db_prepare_input($_POST['wgw']);			
  $wgd = zen_db_prepare_input($_POST['wgd']);

<!--
  <table id="dataTable" class="form" border="1">
    <tbody>
    <?php foreach($wgl as $a => $b) { ?>
      <tr>
	    <td ><?php echo $a+1; ?></td>
	    <td><input type="text" readonly="readonly" name="wgl[$a]" value="<?php echo $wgl[$a]; ?>" /></td>
	    <td><input type="text" readonly="readonly" name="wgw[]" value="<?php echo $wgw[$a]; ?>" /></td>
	    <td><input type="text" readonly="readonly" name="wgd[]" value="<?php echo $wgd[$a]; ?>" /></td>
	  </tr>
    <?php } // end foreach ?>
    </tbody>
  </table>
-->

<!--
<?php 
} else { 
?>
	 <p>Something went wrong, please try again.</p>
<?php } ?>

<?php
/**/
$breadcrumb->add(NAVBAR_TITLE);


// This should be last line of the script:
$zco_notifier->notify('NOTIFY_HEADER_END_WIDGIT_ENTRY');
?>

bislewl:

Here is a link to the module once approved by the forum
https://www.zen-cart.com/downloads.php?do=file&id=2001

Thanks, but not what I was looking for.

Have made progress, with only the last two points in first post to complete.

Form_Add_Delete_Rows_v1.0

Code for customer to add or delete rows of input in a form, calculate the product of the row inputs and calculate the sum of the products of the row inputs. The inputs and calculations are inserted into the database.

The code works but has a slight problem. If customer refreshes success page, inputs are again written to the database. Is this normal?

At the time of writing, I do not know how to fix this. When resolved, code will be submitted to Plugins.

There may be other problems I am not aware of, so use at own risk.

The fileset consists
\includes\extra_datafiles\widgit_entry_filenames.php
\includes\languages\english\YOUR_TEMPLATE\widgit_entry.php
\includes\modules\pages\widgit_entry\header_php.php
\includes\modules\pages\widgit_entry\jscript_row_add_del.js
\includes\modules\pages\widgit_entry_success\header_php.php
\includes\templates\YOUR_TEMPLATE\templates\tpl_widgit_entry_default.php
\includes\templates\YOUR_TEMPLATE\templates\tpl_widgit_entry_success_default.php

The key parts are enclosed in ADD/DELETE ROWS comments, so the code can be inserted into other forms.

The $wgd variable can be used as quantity (for area calculation) or as depth (for volume calculation). To include a quantities field for volume calculations, an extra variable and associated fields must be added (eg $wgq).

The inputs are inserted into the database as a json_encoded csv list ($dimdatajenc). To regurgitate the inputs, you may need to invoke json_decode.

The input fields are intended for numerical inputs only, and have validation code built-in.

Attachment #15344

The main files are:

1. Template File - tpl_widgit_entry_default.php

<?php
/**
 * Template - WIDGIT ENTRY
 *
 * @version $Id: tpl_widgit_entry_default.php 2015-05-01
 */
?>

<div id="widgitEntry">
  <h1 class="center"><?php echo HEADING_TITLE; ?></h1>


<?php 
  if ($messageStack->size('widgit_entry') > 0) echo $messageStack->output('widgit_entry'); 
?>

<?php echo zen_draw_form('widgit_entry', zen_href_link(FILENAME_WIDGIT_ENTRY_SUCCESS, 'action=send', 'SSL')); ?>



<!-- BOF ADD/DELETE ROWS-->
  <fieldset class="stdForm">
	<legend>Add/Delete Rows</legend>
	<div class="back">
	  <input type="button" value="Add Row" onClick="addRow('dataTable')" /> 
	  <input type="button" value="Remove Unchecked Rows" onClick="deleteRow('dataTable')" /> 
	</div>
	<br clear="left" />

	<table id="dataTable" class="form" border="0">
	 <tbody>
	  <tr>
		<td>
		  <input type="checkbox" required="required" name="chk[]" checked="checked" />
		</td>
		<td>
		  <input type="number" min="1" max="9999" step="1" maxlength=4 required="required" title="length (required)" placeholder="length" name="wgl[]" />
		</td>
		<td>
		  <input type="number" min="1" max="9999" step="1" maxlength=4 required="required" title="width (required)" placeholder="width" name="wgw[]" />
		</td>
		<td>
		  <input type="number" min="1" max="9999" step="1" maxlength=4 required="required" title="quantity (required)" placeholder="quantity" name="wgd[]" />
		</td>
	  </tr>
	 </tbody>
	</table>
	<br class="clearBoth" />
  </fieldset>
<!-- EOF ADD/DELETE ROWS-->

  <br />
  <div class="buttonRow forward"><?php echo zen_image_submit(BUTTON_IMAGE_SUBMIT, BUTTON_SUBMIT_ALT); ?></div>
  <br class="clearBoth" />

</form>

<br class="clearBoth" />
</div>

2. Template File - tpl_widgit_entry_success_default.php

<?php
/**
 * Template - WIDGIT ENTRY SUCCESS
 *
 * @version $Id: tpl_widgit_entry_success_default.php 2015-05-01
 */
?>
<div id="widgitEntry">
  <h1 class="center"><?php echo HEADING_TITLE; ?></h1>
  
<!-- BOF ADD/DELETE ROWS -->
  <table id="dataTableResults" class="form" border="0">
    <thead>
      <tr>
		<th>Item</th>
		<th>Length</th>
		<th>Width</th>
		<th>Qty</th>
		<th>Area</th>
	  </tr>
    </thead>
    <tbody>
    <?php foreach($wgl as $a => $b) { ?>
      <tr>
		<td>
		  <input type="text" readonly="readonly" size="4" value="<?php echo $a+1; ?>" />
		</td>
		<td>
		  <input type="text" readonly="readonly" size="4" name="wgl[$a]" value="<?php echo $wgl[$a]; ?>" />
		</td>
		<td>
		  <input type="text" readonly="readonly" size="4" name="wgw[]" value="<?php echo $wgw[$a]; ?>" />
		</td>
		<td>
		  <input type="text" readonly="readonly" size="4" name="wgd[]" value="<?php echo $wgd[$a]; ?>" />
		</td>
		<td>
		  <input type="text" readonly="readonly" size="12" name="wgp[]" value="<?php echo number_format($wgl[$a]*$wgw[$a]*$wgd[$a]); ?>" />
		</td>
	  </tr>
	<?php 
	  $prod = $wgl[$a]*$wgw[$a]*$wgd[$a];
	  $prodsum += $prod;
	} ?>
      <tr>
		<td colspan="4"><b>Total Area</b></td>
		<td><input type="text" readonly="readonly" size="12" value="<?php echo number_format($prodsum); ?>" /></td>
      </tr>
    </tbody>
  </table>
<br /><br />

<?php 
  $dimdatajenc = json_encode($dimdata);
  
  $db->Execute("insert into " . TABLE_WIDGITS . " (widgit_dims, widgit_calc, date_added) values ('" . $dimdatajenc . "', '" . $prodsum . "', now())");
  
?>
<!-- EOF ADD/DELETE ROWS -->
<br />

</div>

3. MODULES PAGE WIDGIT ENTRY header_php.php

<?php
/**
 * Module Page Header - WIDGIT ENTRY
 *
 * @version $Id: header_php.php 2015-05-01
 */

// This should be first line of the script:
$zco_notifier->notify('NOTIFY_HEADER_START_WIDGIT_ENTRY');

require(DIR_WS_MODULES . zen_get_module_directory('require_languages.php'));
$breadcrumb->add(NAVBAR_TITLE);


// BOF ADD/DELETE ROWS
  $chkbox = '';
  $wgl = '';
  $wgw = '';			
  $wgd = '';
  $prod = 0;
  $prodsum = 0;
  $dimdata = '';
  $dimdatajenc = '';
  
// Prepare Input
  $error = false;
  if (isset($_GET['action']) && ($_GET['action'] == 'send')) {
    $chkbox = ($_POST['chk']);
    $wgl = zen_db_prepare_input($_POST['wgl']);
    $wgw = zen_db_prepare_input($_POST['wgw']);		
    $wgd = zen_db_prepare_input($_POST['wgd']);
	
// bof put dim inputs into array **REQUIRED**
	$dimcount = max(count($wgl), count($wgw), count($wgd));
	$dimdata = array();
	for($i=0; $i < $dimcount; $i++) 
	{
	  if (isset($wgl[$i])) $dimdata[] = $wgl[$i];
	  if (isset($wgw[$i])) $dimdata[] = $wgw[$i];
	  if (isset($wgd[$i])) $dimdata[] = $wgd[$i];
	}
	return ($dimdata);
	  
	$prod = $wgl[$a]*$wgw[$a]*$wgd[$a];
	$prodsum += $prod;

	$dimdatajenc = json_encode($dimdata);

// EOF ADD/DELETE ROWS

  } // end action==send
?>

<?php

// This should be last line of the script:
$zco_notifier->notify('NOTIFY_HEADER_END_WIDGIT_ENTRY');
?>

4. MODULES PAGE WIDGIT ENTRY jscript_row_add_del.js

/**
 * Form_Add_Delete_Rows_v1.0 javascript file
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
**/

function addRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	if(rowCount < 5){ // limit number of new rows that can be added
		var row = table.insertRow(rowCount);
		var colCount = table.rows[0].cells.length;
		for(var i=0; i<colCount; i++) {
			var newcell = row.insertCell(i);
			newcell.innerHTML = table.rows[0].cells[i].innerHTML;
		}
	} else {
	  alert("Maximum 5 rows per entry.");
	}
}

function deleteRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	for(var i=0; i<rowCount; i++) {
		var row = table.rows[i];
		var chkbox = row.cells[0].childNodes[0];
//		if(null != chkbox && true == chkbox.checked) { // deletes checked chkboxes
		if(null != chkbox && false == chkbox.checked) { // deletes unchecked chkboxes
			if(rowCount <= 1) { // limit user from removing all the fields
				alert("Cannot remove all rows.");
				break;
			}
			table.deleteRow(i);
			rowCount--;
			i--;
		}
	}
}

5. MODULES PAGE WIDGIT ENTRY SUCCESS header_php.php

<?php
/**
 * Module Page Header - WIDGIT ENTRY SUCCESS
 *
 * @version $Id: header_php.php 2015-05-01
 */

// This should be first line of the script:
$zco_notifier->notify('NOTIFY_HEADER_START_WIDGIT_ENTRY_SUCCESS');

require(DIR_WS_MODULES . zen_get_module_directory('require_languages.php'));

<?php
// Prepare Input
  $error = false;
  if (isset($_GET['action']) && ($_GET['action'] == 'send')) {
  
// BOF ADD/DELETE ROWS
    $chkbox = ($_POST['chk']);
    $wgl = zen_db_prepare_input($_POST['wgl']);
    $wgw = zen_db_prepare_input($_POST['wgw']);		
    $wgd = zen_db_prepare_input($_POST['wgd']);
	
	$dimcount = max(count($wgl), count($wgw), count($wgd));
	$dimdata = array();
	for($i=0; $i < $dimcount; $i++) 
	{
	  if (isset($wgl[$i])) $dimdata[] = $wgl[$i];
	  if (isset($wgw[$i])) $dimdata[] = $wgw[$i];
	  if (isset($wgd[$i])) $dimdata[] = $wgd[$i];
	}
	return ($dimdata);
	  
	$prod = $wgl[$a]*$wgw[$a]*$wgd[$a];
	$prodsum += $prod;

	$dimdatajenc = json_encode ($dimdata);
// EOF ADD/DELETE ROWS

  } // end action==send

?>

<?php

  $breadcrumb->add(NAVBAR_TITLE);

  // This should be last line of the script:
$zco_notifier->notify('NOTIFY_HEADER_END_WIDGIT_ENTRY_SUCCESS');
?>