Dynamically inserted textbox values to be stored in a variable - codeigniter

<tr style="background: #D0CDCD;">
<td colspan='2'>
<input type="text" name="mytext1[]">
</td>
<td></td>
<td colspan='2' style="text-align:right;">
<input type="text" name="mytext2[]" id="txt1" onkeyup="sum();">
</td>
</tr>
This is my html code to add dynamic textboxes.
JS Script is follows
<script type="text/javascript">
$(document).ready(function() {
var max_fields= 3;
var x = 1;
$('a').click(function() {
if(x < max_fields){
x++;
$('#myTable #row').append('<tr class="child"><td class="child" colspan="2"><input type="text" name="mytext1[]"></td><td></td><td colspan="2" style="text-align:right;"><input type="text" name="mytext2[]"></td></tr>');
}
});
});
</script>
My problem is that I need to store the dynamically added textbox values to a variable so that I can perform some mathematical operations in that. I don't know how to achieve this. Please help me.

I got the result. I make use of javascript and jQuery
<tr style="background: #D0CDCD;">
<td colspan='2'><input type="text" name="mytext1[]"></td>
<td></td>
<td colspan='2' style="text-align:right;">
<input type="text" class="value_field" name="mytext2[]" >
</td>
</tr>
Function to append
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
$('#myTable #row').append('<tr class="child"><td class="child" colspan="2"><input type="text" name="mytext1[]"></td><td></td><td colspan="2" style="text-align:right;"><input type="text" name="mytext2[]" class="value_field"></td></tr>');
$("input.value_field").blur(function(){
check_value();
});
});
});
$("input.value_field").blur(function(){
check_value();
});

Related

Datatable column search with HTML Textbox

I am trying to enable column search with datatables. I set u Search textboxes with HTML :
<div class="col-lg-3 mb-lg-0 mb-6">
<label>Id:</label>
<input type="text" name="textbox[]" class="form-control datatable-input" placeholder="E.g: 1" data-col-index="0" />
</div>
<div class="col-lg-3 mb-lg-0 mb-6">
<label>Amount:</label>
<input type="text" name="textbox[]" class="form-control datatable-input" placeholder="E.g: 4500" data-col-index="1" />
</div>
And here is my search Ajax :
function addSearchControl(json) {
$("#searchTable thead");
$("#searchTable").each(function (index) {
var searchControl = $('input[name="textbox[]"]');
searchControl.on('keyup', function () {
var indexDataTable = searchControl.index( this );
alert( this.value + ', ' + indexDataTable );
empTable.column(indexDataTable).search(searchControl.val()).draw();
});
});
}
But only first textbox is working and when I type something on the second textbox I get the index which is 1 but cannot search on column 1
This is for Dropdown search I get the value but it doesnt search the table just renders table again :
$('#dropDownMenuKategorie :selected').text();
$("#dropDownMenuKategorie").on('change', function() {
var textSelected = $('#dropDownMenuKategorie option:selected').val();
alert(textSelected);
empTable.column(9).search(textSelected).draw();
});
Maybe you can change the column().search() method like this
empTable.column(indexDataTable).search(this.value).draw();
Sample:
<div class="col-lg-3 mb-lg-0 mb-6">
<label>Name:</label>
<input type="text" name="textbox[]" class="form-control datatable-input" placeholder="E.g: 1" data-col-index="0" />
</div>
<div class="col-lg-3 mb-lg-0 mb-6">
<label>Position:</label>
<input type="text" name="textbox[]" class="form-control datatable-input" placeholder="E.g: 4500" data-col-index="1" />
</div>
<div class="col-lg-12">
<table id="searchTable" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
</table>
</div>
#section scripts{
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script>
$(document).ready(function () {
var empTable = $("#searchTable").DataTable();
$("#searchTable").each(function (index) {
var searchControl = $('input[name="textbox[]"]');
searchControl.on('keyup', function () {
var indexDataTable = searchControl.index(this);
//alert(this.value + ', ' + indexDataTable);
empTable.column(indexDataTable).search(this.value).draw();
});
});
})
</script>
}
Result:

Progress bar not working with Kendo Numeric Text Box

I have tried to implement a progress bar in my application. When I used a numeric text box the progress bar is not progressing forward. How to make it progress using a numeric text box. Thanks.
<form name="ContactInforForm" action="ContactInformation.html" onsubmit="return ValidateRequiredFields()" method="post">
<div>
<table class="forms" style="padding-left:9em">
<tr>
<td>
<h4>Profile Completeness: <span id="completed">20%</span></h4>
</td>
<td>
<div id="profileCompleteness"></div>
</td>
</tr>
<tr>
<td>
Employee Name:
</td>
<td>
<input type="text" name="FName" id="txtFname" />
</td>
</tr>
<tr>
<td>
Employee Id:
</td>
<td>
<input type="text" name="EmpID" id="txtEmpID" />
</td>
</tr>
<tr>
<td>
Age:
</td>
<td>
<input type="text" name="Age" id="txtAge" />
</td>
</tr>
<tr>
<td>
Contact Phone:
</td>
<td>
<input type="text" name="PrimaryPhone" id="txtPriPhone" />
</td>
<td><span id="PPhoneValidationMsg" style="color:red; font-size:smaller; font-weight:bold; "></span></td>
</tr>
<tr>
<td>
<button style="width:75px;" type="button" id="btnNext" onclick="ValidateRequiredFields();">Submit</button>
</td>
</tr>
</table>
</div>
</form>
<!--Make all the controls into kendo -->
<script>
$(document).ready(function() {
$("#txtFname").kendoMaskedTextBox({
});
$('#txtEmpID').kendoNumericTextBox({
});
$('#txtAge').kendoNumericTextBox({
});
$('#txtDob').kendoDatePicker({
});
$('#txtDesig').kendoMaskedTextBox({});
$('#txtAdd1').kendoMaskedTextBox({
});
$('#txtAdd2').kendoMaskedTextBox({
});
$('#drpStates').kendoDropDownList({
});
$('#drpCountry').kendoDropDownList({
});
$("#txtPriPhone").kendoMaskedTextBox({
mask: "(000)000-0000"
});
$("#btnNext").kendoButton();
var pb = $("#profileCompleteness").kendoProgressBar({
type: "chunk",
chunkCount: 10,
min: 0,
max: 10,
value: 2
}).data("kendoProgressBar");
$(".forms input").change(function() {
var completeness = 2;
$(".forms input").each(function() {
if (this.value != "") {
completeness++;
}
});
pb.value(completeness);
$("#completed").text((completeness * 10) + "%");
});
});
</script>
When I changed the kendo numeric text box to masked text box the code seems to work fine. But for my requirement I require numeric textbox.
The default value of a numeric textbox may not be "". Try something like this:
$(".forms input").change(function () {
var completeness = 2;
$(".forms input").each(function () {
if (this.hasClass("k-numerictextbox") && this.value != "0" && this.value != "") {
completeness++;
} else if (this.value != "") {
completeness++;
}
});
pb.value(completeness);
$("#completed").text((completeness * 10) + "%");
});
Would be pretty easy to set a break point and see what an empty numeric textbox looks like.

Ajax form redirect to another url

i want to redirect to another url when the form is submitted how can i do it
i am new to ajax so please tell where to add the code which can do it
here is my code
<script type="text/javascript">
function submitForm() {
if ($("#fields_fname").val() == "") {
$("#fields_fname").focus();
alert("The First Name field is required.");
return false;
}
if ($("#fields_lname").val() == "") {
$("#fields_lname").focus();
alert("The Last Name field is required.");
return false;
}
if ($("#fields_email").val() == "") {
$("#fields_email").focus();
alert("The Email field is required.");
return false;
}
if ($("#fields_phone").val() == "") {
$("#fields_phone").focus();
alert("The Phone field is required.");
return false;
}
if ($("#fields_zip").val() == "") {
$("#fields_zip").focus();
alert("The Postal Code field is required.");
return false;
}
if ($("#fields_suffix").val() == "") {
$("#fields_suffix").focus();
alert("The 'I'm Interested In' field is required.");
return false;
}
$.ajax({
url: 'zohoprocess.php',
type:'POST',
data:$('#ContactForm').serialize(),
success: function(){
$(".form_result").html('Form 1 submitted successfully');
$.ajax({
url: 'https://app.icontact.com/icp/signup.php',
type:'POST',
data:$('#ContactForm').serialize(),
success: function(){
$(".form_result").html('Form 2 submitted successfully');
},
error:function(){
alert("success");
$(".form_result").html('');
return false;
}
});
},
error:function(){
alert("failure");
$(".form_result").html('');
return false;
}
});
return false;
}
</script>
<form id="ContactForm">
<input type="hidden" name="redirect" value="http://tennispronow.com/thanks.html">
<input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html">
<div id="SignUp">
<table width="260" class="signupframe" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign="top" align="right">
<span class="required">*</span>Email
</td>
<td align="left">
<input type="text" name="fields_email" id="fields_email">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>First Name
</td>
<td align="left">
<input type="text" name="fields_fname" id="fields_fname">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Last Name
</td>
<td align="left">
<input type="text" name="fields_lname" id="fields_lname">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>What Level Player are you?
</td>
<td align="left">
<select name="fields_prefix" id="fields_prefix">
<option></option>
<option value="Beginner">Beginner</option>
<option value="Upper Beginner">Upper Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Advanced">Advanced</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>I am Interested in:
</td>
<td align="left">
<select name="fields_suffix" id="fields_suffix">
<option></option>
<option value="Private Lessons">Private Lessons</option>
<option value="Lessons & Equipment">Lessons & Equipment</option>
<option value="Classes">Classes</option>
<option value="Equipment">Equipment</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Other Info:
</td>
<td align="left">
<input type="text" name="fields_fax" id="fields_fax">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Phone
</td>
<td align="left">
<input type="text" name="fields_phone" id="fields_phone">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Postal Code
</td>
<td align="left">
<input type="text" name="fields_zip" id="fields_zip">
</td>
</tr>
<input type="hidden" name="listid" value="42670">
<input type="hidden" name="specialid:42670" value="D1CQ">
<input type="hidden" name="clientid" value="860526">
<input type="hidden" name="formid" value="4668">
<input type="hidden" name="reallistid" value="1">
<input type="hidden" name="doubleopt" value="0">
<tr>
<td></td>
<td><span class="required">*</span> = Required Field</td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit" value="Submit" onClick="return submitForm()">
</td>
</tr>
</table>
<div class="form_result"> </div>
</div>
</form>
please check it dont know what to write more
Just add action attribute to the form tag.

Wordpress Datatrans Ajax implementation

I'm trying to implement a creditcard payment service (of datatrans.ch) into a wordpress based site. Datatrans offers an Ajax API, which you can take a look at here:
Datatrans Ajax API
Example Code
I copy/pasted the example code and saved it inside a html file on my machine. Running it works properly. In the next step I tried implementing it in wordpress by creating the following function:
function datatrans_payment_ajax($lang, $currency, $amount) {
$merchant_id = 101...; // ... on my machine it is numeric of course ;)
wp_deregister_script('datatrans-ajax');
wp_register_script('datatrans-ajax', 'https://pilot.datatrans.biz/upp/ajax/api.js?merchantId='.$merchant_id, false);
wp_enqueue_script('datatrans-ajax');
?>
<noscript>
<p class="err">
JavaScript is disabled in your browser.<br/>
This showcase requires JavaScript.
</p>
</noscript>
<div>
<h3>Step 1: Ajax UPP.paymentRequest(...)</h3>
<form id="uppform">
<fieldset>
<input type="hidden" name="language" value="<?php echo $lang; ?>"/>
<table cellspacing="0" cellpadding="3" width="550">
<tr>
<td align="left">Merchant Id :</td>
<td style="width: 10px"> </td>
<td align="left"><input type="text" size="20" name="merchantId" value="<?php echo $merchant_id; ?>"/>
</td>
</tr>
<tr>
<td align="left">Amount :</td>
<td> </td>
<td align="left"><input type="text" size="20" name="amount" value="<?php echo $amount; ?>"/> (= 10.00)
</td>
</tr>
<tr>
<td align="left">Currency :</td>
<td> </td>
<td align="left"><input type="text" size="20" name="currency" value="<?php echo $currency; ?>"/>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td align="left">Card Number :</td>
<td> </td>
<td align="left"><input type="text" size="24" name="cardNumber" value="4242424242424242"/>
</td>
</tr>
<tr>
<td align="left">Expiry :</td>
<td> </td>
<td align="left">
<input type="text" size="4" name="expm" value="12"/>
<input type="text" size="4" name="expy" value="15"/> (MM/YY)
</td>
</tr>
<tr>
<td align="left">CVV code :</td>
<td> </td>
<td align="left"><input type="text" size="4" name="cvv" value="123"/>
</td>
</tr>
<tr style="display: none;">
<td align="left">Process mode :</td>
<td> </td>
<td align="left">
<input type="radio" name="mode" id="auto" value="auto" checked="checked"/> <label for="auto">Automatic 3D ACS call using API</label>
<br/>
<input type="radio" name="mode" id="manual" value="manual"/> <label for="manual">Manual redirection to 3D ACS</label>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td align="left"><input type="button" class="button"
onclick="callPayment()" value="send"/><span class="buttend"></span>
</td>
</tr>
</table>
</fieldset>
</form>
<div id="frameHolder"></div>
<div id="response" style="width: 400px;"></div>
<div id="step2" style="display: none;">
<h3>Step 2: XML authorizeSplit (server-2-server request)</h3>
<form action="https://pilot.datatrans.biz/upp/jsp/XML_authorizeSplitEx.jsp" method="post" target="_parent">
<fieldset>
<textarea style="width: 400px; height: 150px;" name="xmlRequest"></textarea>
<div>
<input type="submit" class="button" value="send"/><span class="buttend"></span>
</div>
</fieldset>
</form>
</div>
<script type="text/javascript">
var mode;
var params;
function callPayment()
{
mode = $("input[name=mode]:checked").val();
// read form values
params = {
merchantId: $("input[name=merchantId]").val(),
cardNumber: $("input[name=cardNumber]").val(),
expy: $("input[name=expy]").val(),
expm: $("input[name=expm]").val(),
cvv: $("input[name=cvv]").val(),
currency: $("input[name=currency]").val(),
amount: $("input[name=amount]").val()
}
// call paymentRequest, response will be received in responseCallback
if ( mode == "auto" )
{
params.returnUrl = "https://pilot.datatrans.biz/upp/ajax/sample-merchant-return-page.html";
UPP.paymentRequest( params, responseCallback, frameCallback );
}
else
if ( mode == "manual" )
{
UPP.paymentRequest( params, responseCallback );
}
};
function frameCallback()
{
// create iframe and add it to document
var iframe = $("<iframe/>").attr( "id", "paymentIFrame" ).width( 390 ).height( 400 );
$("#frameHolder").append( iframe );
$("form#uppform").hide(); //hide the form
return iframe[0];
};
function responseCallback( response )
{
var responseElm = $("#response");
responseElm
.empty()
.append( "<h4>Ajax response:</h4>")
.append( $("<div/>").text("status: " + response.status) )
.append( $("<div/>").text("uppTransactionId: " + response.uppTransactionId) );
if ( JSON.stringify )
responseElm
.append( $("<div/>").html( "Complete JSON response: " + JSON.stringify( response ).replace( /,/g, ", ") ) )
if ( mode == "auto" )
{
if ( response.status == "success" )
{
// This step will be done server-2-server
$("#step2 textarea").val(
"<<?php?>?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n" +
"<authorizationSplit version=\"1\">\n" +
"<body merchantId=\"" + $("input[name=merchantId]").val() + "\">\n" +
"<transaction refno=\"to_be_filled\">\n" +
" <request>\n" +
" <uppTransactionId>" + response.uppTransactionId + "</uppTransactionId>\n" +
" <amount>" + $("input[name=amount]").val() + "</amount>\n" +
" <currency>" + $("input[name=currency]").val() + "</currency>\n" +
" </request>\n" +
" </transaction>\n" +
"</body>\n" +
"</authorizationSplit>"
);
$("#step2").show();
$("#uppform").hide();
}
if ( response.is3DEnrolled ) // close/remove the iframe
{
$("#paymentIFrame").remove();
}
}
else
if ( mode == "manual" ) // manual mode used, browser has to be redirected to ACSURL
{
if ( response.is3DEnrolled && response.status == "success" )
{
responseElm.append( $("<div/>").html( "Redirecting page to ACS in 3 seconds..." ) );
setTimeout( function() {
params.uppTransactionId = response.uppTransactionId;
params.errorUrl = "https://pilot.datatrans.biz/upp/merchant/errorPage.jsp";
params.returnUrl = "https://pilot.datatrans.biz/upp/merchant/successPage.jsp";
window.parent.location = response.ACSURL + "?" + $.param( params );
}, 3000 );
}
}
};
</script>
</div>
When I run it, I receive an error status code 1003, saying that the uppTransactionId is undefined which should result from the responseCallback. So I guess it has something to do with the usual processing of Ajax calls in wordpress which must go through the admin-ajax.php file in the wp-admin folder!? I am not sure how to cut this datatrans implementation into pieces to make it fit the wordpress Ajax processing. Furthermore I would like to know if you think that my guess is even right regarding what causes the error?
Thanks in advance.
Cheers,
Tim
Ask them to open test account for you, and then you could test with your MerchantID on pilot servers with all features. If you copy/paste code from their examples i think this will not work. Those are just examples of implementation.
You can try to use Merchant-ID:1000011011 but this is shared from all users, so you cannot set landing redirect pages (on success, on error)
Also check what encoding you use:
UTF-8 encoding: /jsp/upStart.jsp
ISO encoding: /jsp/upStartIso.jsp
And most common mistake is price format, if you price is 15.25 you need to send 1525.
Also if you wish to use 3D secure, you need to activate this in datatrans backend.

Event delegation in Firefox after Ajax

Below is example html, script and php to submit and reload two forms via jquery ajax. In the real application, the same forms will not be reloaded but a series of forms will be loaded after each is submitted.
In chrome, IE and safari; clicking submit results in the intended ajax request. The server responds as intended. Results (showing post variables for conformation) and new forms are loaded into the page as intended. Those new forms can then be submitted and all is good.
In firefox; everything works as intended until you try to submit the forms that were loaded via ajax. They will not submit. The original forms do work. It is only the ones added via ajax that don't submit.
I am guessing that this is an "event delegation" issue with the way firefox updates the DOM after the ajax. I have read the documentation at http://api.jquery.com/on/ and other places but I am at a loss...
Any help or suggestions would be greatly appreciated! My goal is to get this functional in the latest versions of chrome, IE, safari and firefox.
html page with script
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Ajax Form Submit</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="results"></div>
<div id="forms">
<div>
<table width="100%" cellspacing="0" cellpadding="0" class="ui-widget">
<form>
<tr>
<td width="100"></td><td width="300"></td><td></td>
</tr>
<tr>
<td class=""colspan="3"><h1>Form 1</h1></td>
</tr>
<tr>
<td>Input 1A</td><td colspan="2"><input type="text" name="1A" /></td>
</tr>
<tr>
<td colspan="3"><input type="hidden" name="1B" value="Form 1 was submitted" /></td>
</tr>
<tr>
<td colspan="3"><button type="submit" >Click Me!</button><input type="submit" value="Submit Form 1" /></td>
</tr>
</form>
</table>
</div>
<div>
<table width="100%" cellspacing="0" cellpadding="0" class="ui-widget">
<form>
<tr>
<td width="100"></td><td width="300"></td><td></td>
</tr>
<tr>
<td class=""colspan="3"><h1>Form 2</h1></td>
</tr>
<tr>
<td>Input 2A</td><td colspan="2"><input type="text" name="2A" /></td>
</tr>
<tr>
<td colspan="3"><input type="hidden" name="2B" value="Form 2 was submitted" /></td>
</tr>
<tr>
<td colspan="3"><input type="submit" value="Submit Form 2" /></td>
</tr>
</form>
</table>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#forms").on("submit", "form", function(e) {
e.preventDefault();
$.ajax({
url: "testAjax.php",
type: "POST",
cache: false,
data: $(this).serializeArray(),
success: function(jsonData) {
htmlData = jQuery.parseJSON(jsonData);
$.each(htmlData, function(id, data){
$("#"+id).html(data);
});
},
error: function(jqXHR, textStatus, errorThrown){
$("#results").html("<p>Somthing went wrong!</p>");
}
});
});
});
</script>
</body>
</html>
testAjax.php
<?php
$htmlOutput['forms'] =
'<div>
<table width="100%" cellspacing="0" cellpadding="0" class="ui-widget">
<form id="login" method="post" enctype="multipart/form-data" target="_self" action="_self">
<tr>
<td width="100"></td><td width="300"></td><td></td>
</tr>
<tr>
<td class=""colspan="3"><h1>Form 1</h1></td>
</tr>
<tr>
<td>Input 1A</td><td colspan="2"><input type="text" name="1A" /></td>
</tr>
<tr>
<td colspan="3"><input type="hidden" name="1B" value="Form 1 was submitted" /></td>
</tr>
<tr>
<td colspan="3"><button type="submit" >Click Me!</button><input type="submit" value="Submit Form 1" /></td>
</tr>
</form>
</table>
</div>
<div>
<table width="100%" cellspacing="0" cellpadding="0" class="ui-widget">
<form>
<tr>
<td width="100"></td><td width="300"></td><td></td>
</tr>
<tr>
<td class=""colspan="3"><h1>Form 2</h1></td>
</tr>
<tr>
<td>Input 2A</td><td colspan="2"><input type="text" name="2A" /></td>
</tr>
<tr>
<td colspan="3"><input type="hidden" name="2B" value="Form 2 was submitted" /></td>
</tr>
<tr>
<td colspan="3"><input type="submit" value="Submit Form 2" /></td>
</tr>
</form>
</table>
</div>';
$htmlOutput['results'] =
'<p>Form 1:<br> 1A = ' . $_POST['1A'] . '<br>1B = ' . $_POST['1B'] . '</p>' .
'<p>Form 2:<br> 2A = ' . $_POST['2A'] . '<br>2B = ' . $_POST['2B'] . '</p>';
echo json_encode($htmlOutput);
?>
Open Firebug DOM inspector and verify that your form indeed loaded. I am pretty sure you are not allowed to nest form element directly under table element, and FF is likely simply dropping it.
In general issues like this one are always due to broken HTML. Verify that your HTML is correct. Verify that loaded DOM is what you expect it to be.
Here is how your HTML is being parsed. As expected form has been mangled.

Resources