asked on

Javascipt causing form to be submitted with duplicate values

I need to show a form in table format with frozen headers and columns. I thought I could use the jquery multifreezer, but if the fields have default values in them, they are getting duplicated on submitting the form. So instead of ending up with the form value of 'Day', I get the value 'Day, Day'.

I am guessing this has to do with the cloning that is going on in the javascript.

Is there a way to not allow the values to duplicate? I really don't understand. Below is a link to the MultiFreezer and I have added the contents of the .js file which I believe is the culprit.

https://www.jqueryscript.net/table/Freeze-Headers-Columns-In-Table-jQuery-MultiFreezer.html

(Added)
Below is a very simplified version of my form. As soon as I comment out the line "<script src="multifreezer.js"></script>" it works fine. I also added screenshots of the results of the form.

<!DOCTYPE html> 

<html>
<head>
<title>Schedule Jobs</title>

<script>
function SaveIt()
{
document.form1.action = "add_jobs-simple.cfm?save=y";
document.form1.submit();
} 
</script>

<style>
#freezer-example { width: 100%; max-height: 800px; overflow: hidden; margin: 1em auto; font-family:arial;  font-size:14px;}
#freezer-example .table th,#freezer-example .table td { white-space: nowrap; }
#freezer-example .table th { outline: 1px solid #606060; padding: 20px 2px 20px 2px; }
#freezer-example .table td { outline: 1px solid silver; padding: 20px 2px 20px 2px; }
#freezer-example .table thead th { outline: 1px solid silver; }
</style>
  

<link href="multifreezer.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="multifreezer.js"></script>


<!--- BEGIN Add Jobs to Schedule if Date field is filled in --->

<cfif isDefined('URL.save')>
     	
     	<cfdump var="#form#" />

</cfif>

<!--- END Add Jobs to Schedule if Date field is filled in --->


 
</head>
<body  topmargin="0" bgcolor="#ebf5fb">

<cfform name="form1">
	<table>
	<tr>
	<td align="center"><img src="Images\save.png" onclick="this.disabled=true;SaveIt()" alt="Processing...."></td>
	</tr>
	</table>

<div id="freezer-example" style="margin:0">

<table class="table table-condensed table-freeze-multi table-bordered" 
    data-scroll-height="600"
    data-cols-number="7" >
      <colgroup>
      <col style="width:300px;">
      <col style="width:50px;">
      <col style="width:100px;">
      <col style="width:200px;">
      <col style="width:125px;">
      <col style="width:100px;">
      <col style="width:100px;">
      <col style="width:100px;">
      <col style="width:100px;">
      </colgroup>

<thead>
<tr>
<th bgcolor="#ebf5fb">Job</th>
<th bgcolor="#ebf5fb">M/P</th>
<th bgcolor="#ebf5fb">Part Code</th>
<th bgcolor="#ebf5fb">Desc 1</th>
<th bgcolor="#ebf5fb">Desc 2</th>
<th bgcolor="#ebf5fb">Start Date</th>
<th bgcolor="#ebf5fb">QOH</th>
<th bgcolor="#ebf5fb">On Demand</th>
<th bgcolor="#ebf5fb">Prod Qty</th>
<th bgcolor="#ebf5fb">Date</th>
</tr>
</thead>

<tbody>

<cfoutput>
<cfloop index="idx" from = "1" to = "5">

<tr>
<th bgcolor="gray">Test customer name that is long#idx#<cfinput type="hidden" value="Test Customer" name="txtCustomer#idx#"></th>
<th bgcolor="gray">M<cfinput type="hidden" value="M" name="txtMake_Pack_Code#idx#"></th>
<th bgcolor="gray">Part Code#idx#<cfinput type="hidden" value="Part Code#idx# " name="txtPart_Code#idx#"></th>
<th bgcolor="gray">			
	<cfselect name="txtShift#idx#"  style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;">
	<option value=""></option>
	<option value="Day" selected>Day</option>
	<option value="Night">Night</option>
	</cfselect>
</th>
<th bgcolor="gray">A#idx#</th>
<th bgcolor="gray">B#idx#</th>
<th bgcolor="gray">C#idx#</th>
<td bgcolor="gray">D#idx#</td>
<td bgcolor="gray">E#idx#</td>
<td bgcolor="gray">F#idx#</td>
<td bgcolor="gray">G#idx#</td>
<td bgcolor="gray">H#idx#</td>
<td bgcolor="gray">I#idx#</td>
<td bgcolor="gray">J#idx#</td>
</tr>
</cfloop>
</cfoutput>

</tbody>
</table>
</div>
</cfform>
</body>

</html>

Open in new window

https://www.jqueryscript.net/table/Freeze-Headers-Columns-In-Table-jQuery-MultiFreezer.html

$(document).ready(function () {
/*
jQuery MultiFreezer - scrollable tables with freezed thead and (n) first columns.
(c) 2017 Jan Renner (http://janrenner.cz, jan.renner@gmail.com)
*/
$('.table-freeze-multi').each(function () {

    var table = $(this),
        scrollbarWidth = freezerGetScrollbarWidth();

    //prepare
    table.css({
        margin: 0
    }).addClass('table-freeze-multi-original').find('tfoot').remove();

    //wrap
    table.wrap('<div class="freeze-multi-scroll-wrapper" />');
    var wrapper = table.closest('.freeze-multi-scroll-wrapper');
    table.wrap('<div class="freeze-multi-scroll-table" />');
    table.wrap('<div class="freeze-multi-scroll-table-body" />');
    var scroller = wrapper.find('.freeze-multi-scroll-table-body');

    //layout
    var headblock = $('<div class="freeze-multi-scroll-table-head-inner" />');
    scroller.before($('<div class="freeze-multi-scroll-table-head" />').append(headblock));
    var topblock = $('<div class="freeze-multi-scroll-left-head" />');
    var leftblock = $('<div class="freeze-multi-scroll-left-body-inner" />');
    wrapper.append(
        $('<div class="freeze-multi-scroll-left" />')
            .append(topblock)
            .append($('<div class="freeze-multi-scroll-left-body" />').append(leftblock))
    );

		//cloning
    var clone = table.clone(true);
    clone.addClass('table-freeze-multi-clone').removeClass('table-freeze-multi-original');
    var colsNumber = table.data('colsNumber') || table.find('tbody tr:first th').length;
    //head
    var cloneHead = clone.clone(true);
    cloneHead.find('tbody').remove();
    headblock.append(cloneHead);
    //top
    var cloneTop = cloneHead.clone(true);
    topblock.append(cloneTop);
    //left
    var cloneLeft = clone.clone(true);
    cloneLeft.find('thead').remove();
    leftblock.append(cloneLeft);

		//sizing
    var scrollHeight = table.data('scrollHeight') || wrapper.parent().closest('*').height();
    var headerHeight = table.find('thead').height();
    var leftWidth = (function () {
        var w = 0;
        table.find('tbody tr:first > *').slice(0, colsNumber).each(function () {
            w = w + $(this).outerWidth();
        });
        return w + 1;
    }());
    wrapper.css('height', scrollHeight);
    scroller.css('max-height', scrollHeight - headblock.height());
    headblock.width(table.width()).css('padding-right', scrollbarWidth);
    leftblock.add(leftblock.parent()).height(scrollHeight - scrollbarWidth - headerHeight);
    leftblock.width(leftWidth + scrollbarWidth);
    wrapper.find('.freeze-multi-scroll-left').width(leftWidth);

    //postprocess
    wrapper.find('.table-freeze-multi-original thead').hide();

		//scrolling
    scroller.on('scroll', function () {
        var s = $(this),
            left = s.scrollLeft(),
            top = s.scrollTop();
        headblock.css('transform', 'translate(' + (-1 * left) + 'px, 0)');
        leftblock.scrollTop(top);
    });
    leftblock.on('mousewheel', false);

	});
});

// @see https://davidwalsh.name/detect-scrollbar-width
function freezerGetScrollbarWidth () {
    // Create the measurement node
    var scrollDiv = document.createElement("div");
    scrollDiv.className = "freezer-scrollbar-measure";
    document.body.appendChild(scrollDiv);

    // Get the scrollbar width
    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
    //console.warn(scrollbarWidth); // Mac: 15, Win: 17

    // Delete the DIV 
    document.body.removeChild(scrollDiv);

    return scrollbarWidth;
}

Open in new window

Julian Hansen

Unfortunately what you have provided does not help us help you.
We need to see your implementation and your code and your data - not the plugins.

- Can you show us your code rather than the multi-freeze code (which we can get from the link you provided)
- What part of your script does the form submission?
- Do you have a link to the form?
- If not can you setup a test case that demonstrates the problem?
- Can you capture the RAW post sent by the form and post it here?

BonnieK

ASKER

Thanks Julian - I have added more information.

BonnieK

ASKER

I am wondering if the field names can be updated for the cloned version - maybe adding an "x" or "1" in front of each of the field names. Then my original field names would be unique.

The problem is that I am not very good with javascript at this level :(

If someone thinks it is possible, I will try harder :) I just don't want to waste anymore time on this if it is not possible.

Thanks!!!
Bonnie

BonnieK

ASKER

This looks similar to what I need, I am working on reading it since I do not understand it, so any translation would help...

https://www.experts-exchange.com/questions/27442241/jquery-change-name-and-id-of-input-after-clone.html

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

BonnieK

ASKER

It is part of the plugin multifreezer.js I am using. I am wondering if I can change the name of the form that is cloned to "form2" and then only submit the original form with the name "form1".

Yes, I am probably looking for an answer that is too easy :(

I tested removing the section below from the multifreezer.js.

The columns and headers did not freeze and the values were submitted properly "Day" instead of "Day,Day" so this must be the reason.

I have 29 fields on the real form so that is why I am hoping that I can just change the form name and submit it?

Thank you for responding!

//cloning
    var clone = table.clone(true);
    clone.addClass('table-freeze-multi-clone').removeClass('table-freeze-multi-original');
    var colsNumber = table.data('colsNumber') || table.find('tbody tr:first th').length;
    //head
    var cloneHead = clone.clone(true);
    cloneHead.find('tbody').remove();
    headblock.append(cloneHead);
    //top
    var cloneTop = cloneHead.clone(true);
    topblock.append(cloneTop);
    //left
    var cloneLeft = clone.clone(true);
    cloneLeft.find('thead').remove();
    leftblock.append(cloneLeft);

Open in new window

BonnieK

ASKER

I simplified my test more so that I could replace the cfform tags with form tags, and it looks like it is an issue with CF.

When I changed to form tags, it looks like the values were submitting properly as you said.

Unfortunately, I need my cfform tags...

BonnieK

ASKER

I am using a workaround of the listfirst function available in coldfusion to get the correct value. However, this is not a great solution.

Julian Hansen

I am not familiar with cfform tags - can you give me an example?

Ultimately these must end up as HTML - nothing from CF survives in the output to the browser - so something in the way those tags are rendered is important.

BonnieK

ASKER

I will submit the html that is rendered soon. Having to live with the work around for the moment. But I should have time today or tomorrow.

BonnieK

ASKER

I am using a work around where I grab the listfirst of the web page response. Coldfusion returns the field data in the form of a list. We are going to live with the workaround for now since we are transitioning to ASP.NET and will rebuild this app sometime within the year.

Thanks for helping me as I worked through this.

Julian Hansen

You are welcome.