I am creating a page in jsp. Basically converting my html design into jsp page.Using Apache tomcat as a server.
My problem is I am trying to load a result page through Ajax call on form submit.I am getting "Error: Precondtion Failed" error.
Could any one resolve this error.
My code as follows
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./css/asp.css"/>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js" charset="utf-8"></script>
<title>Authorize Service Provider Search Page</title>
<script>
$(document).ready(function(){
$("form").submit(function(e) {
alert("hello");
e.preventDefault();
$.ajax({
type: "POST",
url: "aspSearchResultPage.html",
success: function()
{
$("#information").load("aspSearchResultPage.html");
},// success
error : function(xhr, textStatus, errorThrown) {
alert("Error: " + (errorThrown ? errorThrown : xhr.status));
}
});
return false;
});
});
</script>
</head>
<body class="COMPO">
<!-- Wrapper -->
<div id="wrapper">
<!-- Container -->
<div id="container" class="resolution_800x600">
<!-- Colonnage -->
<div id="colonnes" class="clear">
<!-- Page title -->
<h2 class="title_n1_orange">ASP Search Page</h2>
<!--/Page title-->
<!-- Form Page-->
<div class="form">
<form name="asp_search_page" id="form_asp_search_id" action="" method="post">
<p class="mandatory">Fields marked with asterisks (<span class="mandatory_code">*</span>) are mandatory.</p>
<table class="tables" summary="ASP Search Page" cellpadding="0" cellspacing="3">
<tbody>
<!-- First Row -->
<tr>
<th scope="row"><label for="asp">ASP <b>:</b></label></th>
<td><select id="asp" name="asp" class="field_size_e"><!--<optgroup label="Groupe 1">--><option value="ABC">ABC</option><option value="DEF">DEF</option><option value="GHI">GHI</option><option value="JKL">JKL</option><!--</optgroup><optgroup label="Groupe 2">--><!--</optgroup>--></select></td>
<th scope="row" colspan="2"><label for="region">Region <b>:</b></label></th>
<td><select id="region" name="region" class="field_size_e"><!--<optgroup label="Groupe 1">--><option value="ABC">APAC</option><option value="DEF">AME</option><option value="GHI">EUMA</option><!--</optgroup><optgroup label="Groupe 2">--><!--</optgroup>--></select>
</td>
<th scope="row" colspan="3"><label for="asp">Cluster <b>:</b></label></th>
<td><select id="cluster" name="cluster" class="field_size_e"><!--<optgroup label="Groupe 1">--><option value="ABC">INDIA&CHINA</option><option value="DEF">CHINA&JAPAN</option><option value="GHI">INDIA&HONGKONG&JAPAN</option><option value="JKL">UNITED STATES&CHILE</option><option value="MNO">CANNADA & BRAZIL</option><option value="PQR">DENMARK&EGYPT&FINLAND</option><option value="STU">EGYPT&FRANCE</option><!--</optgroup><optgroup label="Groupe 2">--><!--</optgroup>--></select>
</td>
</tr>
<!--/First Row-->
<!-- Second Row -->
<tr>
<th scope="row"><label for="asp">Country <b>:</b>
</label>
</th>
<td><select id="country" name="country" class="field_size_e"><!--<optgroup label="Groupe 1">--><option value="ABC">INDIA</option><option value="DEF">CHINA</option><option value="GHI">FRANCE</option><option value="JKL">PARIS</option><option value="MNO">EGYPT</option><option value="PQR">CARIO</option><option value="STU">BRAZIL</option><option value="VWX">CANNADA</option><!--</optgroup><optgroup label="Groupe 2">--><!--</optgroup>--></select></td>
<th scope="row" colspan="2"><label for="asp">SSC
Support <b>:</b> </label>
</th>
<td><select id="cluster" name="cluster" class="field_size_e"><!--<optgroup label="Groupe 1">--><option value="ABC">ABC</option><option value="DEF">DEF</option><option value="GHI">GHI</option><option value="JKL">JKL</option><!--</optgroup><optgroup label="Groupe 2">--><!--</optgroup>--></select>
</td>
<th scope="row" colspan="3"><label title="Oracle_Code" for="Oracle_Code">Oracle Code <b>:</b>
</label>
</th>
<td><input maxlength="10" name="Oracle_Code" id="Oracle_Code_id" class="field_size_e" type="text" />
</td>
</tr>
<!--/Second Row-->
<!-- Third Row -->
<tr>
<th scope="row"><label title="CC_ID" for="CC_ID">Clarify
Contract ID <b>:</b>
</label>
</th>
<td><input maxlength="10" name="CC_ID" id="CC_ID" class="field_size_e" type="text" /></td>
</tr>
<tr><td> </td></tr>
<!--/Third Row-->
<!-- Fourth Row -->
<tr>
<td colspan="2"> </td>
<td colspan="2">
<button type="submit" class="button_action_standard">
<span>Search</span>
</button></td>
<td>
<button type="reset" class="button_action_standard">
<span>Reset</span>
</button>
</td>
</tr>
<!--/Fourth Row-->
</tbody>
</table>
</form>
<!-- Content to be displayed-->
<div id="information"></div>
<!--/Content to be displayed-->
</div>
<!--/Form-->
</div>
<!--/Colonnage-->
</div>
<!--/container-->
</div>
<!--/wrapper-->
</body>
</html>
#Priya I hope you are using struts. Send your request via action and forward the request to the jsp page which you needs to be loaded. Return the same jsp page as response as data (here) and fill your div with that data. Find the code snippet below for your purpose. You need to modify the code according to your needs.
$.ajax({
url : "yourAction.do?method=yourMethod",
type : "POST",
async : false,
success : function(data) {
$("#information").html(data);
}
});
Let me know if this helps..
Related
I hope some of you have an idea about this. I'm still new to Spring but till this point I could figured out every problem myself. I'm using also Thymeleaf for the templates.
In the Controller the function for #GetMapping works as intended, but the #PostMapping function doesnt return the template which I specified in the return parameter and so the browser shows the wrong page.
The #PostMapping function gets triggered by the ajax statement in the html script.
I get no errors or warnings on server side as well as on client side. So I have no idea were the spot the mistake.
Hope some of you can spot the mistake. Thanks in advance anyway.
Controller:
#Controller
public class SpringController {
#RequestMapping(value="/tank", method = RequestMethod.GET)
public String loadData(Model model){
Tankstelle[] data = TankerAPI.getTankData(lat, lng, 5, sort, type);
model.addAllAttributes(convertdata("name", data));
model.addAllAttributes(convertdata("dist", data));
model.addAllAttributes(convertdata("price", data));
return "home";
}
#RequestMapping(value = "/tank", method = RequestMethod.POST)
public String getChangedData(#RequestBody JSONObject incomingjson) {
lat = Float.parseFloat(incomingjson.get("lat").toString());
lng = Float.parseFloat(incomingjson.get("lng").toString());
BigDecimal biglat = new BigDecimal(lat).setScale(3, RoundingMode.HALF_UP);
BigDecimal biglng = new BigDecimal(lng).setScale(3, RoundingMode.HALF_UP);
lat = biglat.floatValue();
lng = biglng.floatValue();
sort = "price"; //for seeing a difference
System.out.println(incomingjson.get("lat")+" "+incomingjson.get("lng"));
return "test"; //here it should return the template "test" but it return "home"
}
home.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
<meta charset="UTF-8"/>
<title>guenstigertanken.de</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>...
</style>
</head>
<body onload="getLocation()">
<div class="ueberschriftbox"></div>
<h2 class="header">guenstigertanken.de</h2>
<h2 class="subheader">Wir finden die günstigsten Spritpreise für Sie</h2>
<div class="backrounding">
<div class="steuerelementebox"></div>
<div class="steuerelementespritsorteueberschrift">
<h2>Spritsorte</h2>
<label class="container1">Super E5
<input type="radio" id="E5" name="radio1" onclick="autoSubmit()">
<span class="checkmark1"></span>
</label>
<label class="container1">Super E10
<input type="radio" id="E10" name="radio1" onclick="autoSubmit()">
<span class="checkmark1"></span>
</label>
<label class="container1">Diesel
<input type="radio" id="Diesel" name="radio1" onclick="autoSubmit()">
<span class="checkmark1"></span>
</label>
</div>
<div class="steuerelementesortierennachueberschrift">
<h2>Sortieren nach</h2>
<label class="container2">Preis aufsteigend
<input type="radio" checked="checked" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
<label class="container2">Preis absteigend
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
<label class="container2">Distanz aufsteigend
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label> <label class="container2">Distanz absteigend
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
<label class="container2" id="alph">Name alphabetisch
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
</div>
<div class="buttonsbox"></div>
<div class="tabellenbox"></div>
<div class="ueberuns">
<p>Über uns</p>
</div>
<div class="agb">
<p>AGB</p>
</div>
<div class="datenschutz">
<p>Datenschutz</p>
</div>
<div class="impressum">
<p>Impressum</p>
</div>
<div class="left show">
<table id="datatable">
<thead>
<tr> <th>Name</th> <th>Entfernung</th> <th>Preis</th> <th>Favorit</th> </tr>
</thead>
<tbody>
<tr> <td th:text="${name1}">AGIP</td> <td th:text="${dist1}">7km</td> <td th:text="${price1}">1,20€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name2}">Aral</td> <td th:text="${dist2}">12km</td> <td th:text="${price2}">1,23€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name3}">Esso</td> <td th:text="${dist3}">2km</td> <td th:text="${price3}">1,25€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name4}">Esso</td> <td th:text="${dist4}">10km</td> <td th:text="${price4}">1,25€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name5}">Esso</td> <td th:text="${dist5}">5km</td> <td th:text="${price5}">1,25€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name6}">BP</td> <td th:text="${dist6}">13km</td> <td th:text="${price6}">1,35€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name7}">BP</td> <td th:text="${dist7}">13km</td> <td th:text="${price7}">1,35€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name8}">BP</td> <td th:text="${dist8}">13km</td> <td th:text="${price8}">1,35€</td> <td><input type="checkbox"></td> </tr>
</tbody>
</table>
</div>
</div>
<a class="cssbuttonfavoriten" href="test.html">Favoriten></a>
<a class="cssbuttonleaderboard" href="test.html">Leaderboard></a>
<a class="cssbuttonstatistiken" href="test.html">Statistiken></a>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
}
}
function showPosition(position) {
var posdata = '{"lat":"'+position.coords.latitude+'","lng":"'+position.coords.longitude+'","typeselect":"'+type+'"}';
$.ajax({
type: 'post',
url: '/tank',
data: JSON.stringify(posdata),
contentType: "application/json; charset=utf-8",
traditional: true,
success: function(posdata) {
//alert("ajax success: refresh page to sort after price[prob current setting]")
},
error: function(){
alert("ajax error")
}
});
}
</script>
</body>
</html>
When you make any request through ajax you just receive corresponding response in your callback function:
success: function(posdata) {
//alert("ajax success: refresh page to sort after price[prob current setting]")
},
So browser will not show you a new template page. Your page is in "postdata" response
In my view i'm importing jsp components based on a boolean that is passed from the Spring controller. A list of objects are also passed from the controller and those should populate the fields in the imported components.
The controller :
List<LeadUser> leadUsersList = null;
leadUsersList = businessApiClient.getUsersBySignUpType(type, id);
if (leadUsersList != null || leadUsersList.size() != 0) {
model.addAttribute("leadUsersList", leadUsersList);
model.addAttribute("displayTable", true);
if("webinars".equals(type)){
model.addAttribute("displayWebinarTable", true);
} else if("events".equals(type)){
model.addAttribute("displayEventTable", true);
} else if("info".equals(type)){
model.addAttribute("displayInfoTable", true);
} else if("booklets".equals(type)){
model.addAttribute("displayBookletTable", true);
}
The view :
<c:when test="${displayTable}">
<div class="tab-content">
<div class="tab-pane fade in active">
<div class="container-fluid">
<div class="row">
<div class="col-md-11 col-md-offset-1">
<div class="page-card">
<div class="page-card__body">
<c:choose>
<c:when test="${displayBookletTable}">
<jsp:include page="components/report-table-comopnents/booklet_signup.jsp" />
</c:when>
<c:when test="${displayEventTable}">
<jsp:include page="components/report-table-comopnents/event_signup.jsp" />
</c:when>
<c:when test="${displayInfoTable}">
<jsp:include page="components/report-table-comopnents/info_signup.jsp" />
</c:when>
<c:when test="${displayWebinarTable}">
<jsp:include page="components/report-table-comopnents/webinar_signup.jsp" />
</c:when>
</c:choose>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</c:when>
The importing table components :
booklet_signup.jsp (other three are also similar to this one):
<div class="table-responsive">
<table id="bookletLeadsTable"
class="table table-bordered table-striped dataTable">
<thead>
<tr>
<th>Email</th>
<th>Business Name</th>
<th>Contact Name</th>
<th>Phone Number</th>
<th>Ref Page</th>
<th>Created Date & Time</th>
</tr>
</thead>
<tbody>
<c:forEach items="${leadUsersList}" var="item">
<tr>
<td>${item.email}</td>
<td>${item.businessName}</td>
<td>${item.contactName}</td>
<td>${item.phoneNo}</td>
<td>${item.refPage}</td>
<td>${item.createdTime}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#bookletLeadsTable').DataTable({
"paging": false,
"info": false
})
});
</script>
Now the issue id the jstl tags in the importing components (booklet_signup.jsp) are not populated by the modelAttribute leadUsersList. When its not being imporetd and stays in the main view, its getting populated fine. What may have been gone wrong here?
How to send this post without the submit?
I need that as I point to the this html page the form is posted without any button submission.
I am not so expert then please the example should be as simple as possible.
Many thanks for your help.
This is my Post base code:
<html>
<hr>
<b>Send sms text</b>
<br>
<br>
<form method=POST action="http://111.111.111.111:1111/smssend.cgi">
<table>
<tr>
<td> Destination number </td>
<td><input type=text name=num value="+39111111111" </td>
</tr>
<tr>
<td> Message text </td>
<td> <textarea name=text value="My message"></textarea></td>
</tr>
<tr>
<td> Password </td>
<td> <input type=text name=Pwd value="SMSxxx"></td>
</tr>
</table>
<input type=submit value=Send>
</form>
<hr>
</html>
Try the following code:
<html>
<head>
<script type="text/javascript">
function send() {
document.getElementById('myForm').submit();
}
</script>
</head>
<body>
<hr>
<b>Send sms text</b>
<br>
<br>
<form id="myForm" method=POST action="http://111.111.111.111:1111/smssend.cgi">
<table>
<tr>
<td>Destination number</td>
<td><input type=text name=num value="+39111111111"></td>
</tr>
<tr>
<td>Message text</td>
<td><textarea name=text value="My message"></textarea></td>
</tr>
<tr>
<td>Password</td>
<td><input type=text name=Pwd value="SMSxxx"></td>
</tr>
</table>
<input type=button value=Send onclick="send();">
</form>
<hr>
</body>
</html>
I tried different ways to identify the nested frame using page-object i tried like
in_iframe(index: 1) do |frame|..end and i tried with id & class as well but no luck
<div id="tabsWrapper">
<table id="defaultTabs" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="tabContentCell">
<div id="tabContentContainer" style="height: 443px;">
<a id="top" name="top"></a>
<div id="tabDefaultContent"> </div>
<div id="tab14036918566282Content" class="tabContent" style="display: none;">
<iframe id="tab14036918566282Frame" class="portal xicSeamlessUI" width="100%" height="716px" frameborder="0" "="" name="tab14036918566282Frame" marginheight="0" marginwidth="0" src="/mywork/ptl/secure/defaultportal" style="height: 443px;">
<!DOCTYPE html>
<html class="ltr yui3-js-enabled gecko ltr js firefox firefox24 firefox24-0 win secure" lang="en-US" dir="ltr">
</iframe>
</div>
<div id="tab14036918654673Content" class="tabContent">
<iframe id="tab14036918654673Frame" class="portal xicSeamlessUI" width="100%" height="716px" frameborder="0" "="" name="tab14036918654673Frame" marginheight="0" marginwidth="0" src="/ncs/secure/jas/create" style="height: 443px;">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<body class="browserFF browserFF3 Init">
<div class="xicSeamlessUI" xic:app="Create" xic:title="Create">
<span id="bFeedback" class="feedback"> </span>
<div id="confirmationWindow69" xic:width="50%">
<div id="contentModalWindow6c" xic:width="50%">
<input id="hiddenText" class="xicInputText" type="text" size="1" style="visibility:hidden" name="hiddenText">
<input id="hiddenCheckBox" type="checkbox" onclick="var wcall=wicketAjaxPost('?wicket:interface=:0:hiddenCheckBox::IBehaviorListener:0:', wicketSerialize(Wicket.$('hiddenCheckBox')),null,null, function() {return Wicket.$('hiddenCheckBox') != null;}.bind(this));" name="hiddenCheckBox" style="visibility: hidden">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="83%"> </td>
<td width="17%" align="right" nowrap="nowrap">
<label id="categoryDescription65">Select Category: </label>
<span id="categoryDescriptionDropDown66">
<div class="xicInputWrapper xicInputWrapperSelect">
<select id="cellDropDown67" class="xicSmartSelectLoaded" name="categoryDescriptionDropDown:cellDropDown" onchange=".page.showPleaseWait('Processing...');var wcall=wicketAjaxPost('?wicket:interface=:0:categoryDescriptionDropDown:cellDropDown::IBehaviorListener:0:', wicketSerialize(Wicket.$('cellDropDown67')),null,null, function() {return Wicket.$('cellDropDown67') != null;}.bind(this));">
<option value="0" selected="selected">New</option>
<option value="1">Basic</option>
<option value="2">Advanced</option>
<option value="3">Premium</option>
<option value="4">Other</option>
</select>
</div>
</span>
</td>
</tr>
<tr>
<tr>
<tr>
</tbody>
</table>
<div id="myPleaseWait22" class="xicPleaseWait xicFullPageZIndex" style="z-index: 2000; display: none;">
</div>
<div id="PleaseWait" class="xicPleaseWait xicFullPageZIndex" style="z-index: 6000; display: none;">
</body>
</html>
</iframe>
</div>
</div>
</td>
</tr>
<tr>
</tbody>
</table>
Here, there are two frames 1 is active and other hidden.
Exception:
timed out after 30 seconds, waiting for {:css=>"select[name*='Description']", :tag_name=>"select"} to become present (Watir::Wait::TimeoutError)
This seems to me an IEDriver issue when i tried with firefox and chrome it is working fine
Explicitly switching to the frame in question worked for me.
First you switch to the frame and once you are done working inside the frame don't forget to return to your default content:
driver.switch_to.frame "frameName"
Do your stuff within IFrame
driver.switch_to.default_content
To find the solution the selenium docs were helpful as well as a this post about handling Iframes with selenium webdriver.
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.