1) included the following in bundle.config
/Content/kendo/kendo.common.min.css
/Scripts/modernizr-2.5.3.js
/Scripts/jquery-1.7.1.js
/Scripts/kendo/kendo.all.min.js
/Scripts/kendo/kendo.aspnetmvc.min.js
/Content/kendo/kendo.common.min.css
/Content/kendo/kendo.metro.min.css
2) web.config
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Optimization"/>
<add namespace="System.Web.Routing" />
<add namespace="Kendo.Mvc.UI" />
</namespaces>
3) .cshtml
#using Kendo.Mvc.UI
<script>
var onActivate = function (e) {
// access the activated item via e.item (Element)
// detach activate event handler via unbind()
tabStrip.unbind("activate", onActivate);
};
</script>
<div id="forecast">
#(Html.Kendo().TabStrip()
.Name("tabstrip")
.Events(events => events
.Select("onSelect")
.Activate("onActivate")
.ContentLoad("onContentLoad")
.Error("onError")
)
.Items(tabstrip =>
{
tabstrip.Add().Text("Paris")
.Selected(true)
.Content(#<text>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
<span class="rainy"> </span>
</text>);
tabstrip.Add().Text("New York")
.Content(Html.Action("HandleTabStrip","Home").ToString()
);
tabstrip.Add().Text("Moscow")
.Content(#<text>
#Html.Action("HandleTabStrip", "Home")
</text>);
tabstrip.Add().Text("Sydney")
.Content(#<text>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Sidney.</p>
</div>
<span class="rainy"> </span>
</text>);
})
)
</div>
HomeController
----------------
public ActionResult HandleTabStrip()
{
return View();
}
The problem is the tabs dont switch. No JS errors. it just changes url doing nothing
http://:55985/Home/AjaxBoundTabView#tabstrip-2
I have spent close to 2 weeks without any clue. I just followed the steps specified in the documentation but it doesnt work
Try changing the jQuery version. 1.7.1 is quite an old one and your Kendo UI version may not support it.
Related
I will update this problem with the solution, I wanted to include my problem and solution as I wasn't able to find it on Stackoverflow. If you want to jump in with the solution, feel free.
I have a newly created 'Empty' MVC5 project created using Visual Studio 2013. I needed a from and wanted AJAX behavior if possible. Using Ajax.BeginForm was always straight-forward in MVC3 so I thought it would be in MVC5 also.
However none of the javascript functions I've specified in OnBegin, OnFailure or OnSuccess inside the AjaxOptions are invoked when I click the submit button. Instead an Ajaxless post is sent to the server, this has shown to be true by examining Request.IsAjaxRequest which returns false.
I have concluded that for some reason, then, ajax isn't being used at all. I've checked a number of things such as web.config, my layout scripts, etc.
My layout includes the following scripts:
<script src="~/Scripts/jquery-1.5.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
My web.config includes:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
</configuration>
My view:
#model ContactEnquiryViewModel
#{
AjaxOptions ContactOptions = new AjaxOptions()
{
OnBegin = "OnConactFormBegin()",
OnSuccess = "OnContactFormSuccess()",
OnFailure = "OnContactFormFailure()"
};
}
<div id="EnquiryFormContainer">
#using (Ajax.BeginForm("Contact", "Home", new { formName = "EnquiryForm" }, ContactOptions))
{
#Html.HiddenFor(m => m.Subject)
<div class="field">
#Html.LabelFor(m => m.FirstName)
#Html.TextBoxFor(m => m.FirstName)
<div class="validation">
#Html.ValidationMessageFor(m => m.FirstName)
</div>
</div>
<div class="field">
#Html.LabelFor(m => m.LastName)
#Html.TextBoxFor(m => m.LastName)
<div class="validation">
#Html.ValidationMessageFor(m => m.LastName)
</div>
</div>
<div class="field">
#Html.LabelFor(m => m.Email)
#Html.TextBoxFor(m => m.Email)
<div class="validation">
#Html.ValidationMessageFor(m => m.Email)
</div>
</div>
<div class="field">
#Html.LabelFor(m => m.PhoneNumber)
#Html.TextBoxFor(m => m.PhoneNumber)
<div class="validation">
#Html.ValidationMessageFor(m => m.PhoneNumber)
</div>
</div>
<div class="field">
#Html.LabelFor(m => m.Comments)
#Html.TextAreaFor(m => m.Comments)
<div class="validation">
#Html.ValidationMessageFor(m => m.Comments)
</div>
</div>
<div id="submitButtonContainer">
<input type="submit" value="Submit" name="submit" />
</div>
}
</div>
My controller action (unfinished):
[HttpPost]
public ActionResult Contact(ContactViewModel viewModel, String formName = "")
{
if (Request.IsAjaxRequest())
{
return new EmptyResult();
}
return new EmptyResult();
}
I have checked some other posts on this problem, and couldn't find a solution. Though some hinted at the possible solution, I was confused by the Microsoft CDN (http://www.asp.net/ajaxlibrary/cdn.ashx).
On the Microsoft CDN they have the following section:
The following ASP.NET MVC JavaScript files are hosted on this CDN:
ASP.NET MVC 5.0
http://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.js
http://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js
ASP.NET MVC 4.0
http://ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.js
http://ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js
ASP.NET MVC 3.0
http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.debug.js
ASP.NET MVC 2.0
http://ajax.aspnetcdn.com/ajax/mvc/2.0/MicrosoftMvcAjax.js
http://ajax.aspnetcdn.com/ajax/mvc/2.0/MicrosoftMvcAjax.debug.js
ASP.NET MVC 1.0
http://ajax.aspnetcdn.com/ajax/mvc/1.0/MicrosoftMvcAjax.js
http://ajax.aspnetcdn.com/ajax/mvc/1.0/MicrosoftMvcAjax.debug.js
They would seem to suggest the only script you'll need for MVC5 is jquery.validate.unobtrusive.
To get a local copy as part of your MVC project"
From VS2013, right click on your MVC 5 project, select "Manage NuGet Packages".
Select "Online" and search for "jquery.unobtrusive-ajax",
Then Install "Microsoft.jQuery.Unobtrusive.Ajax".
I had the same issue on a dummy MVC5 project.
Add this to your BundleConfig
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
Add this to your layout.cshtml
#Scripts.Render("~/bundles/jqueryval")
I didn't add any new files to my projects so if you have an MVC 4 or 5 web project, I doubt if you would need to add any extra js files.
It solved my issue. I hope it solves yours.
Everything has started working since I included the following script in my layout:
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>
On the Microsoft CDN it looks as though this script is MVC3-specific.
Feel free to contribute better ways if possible, or answer the question: "Why isn't this script included in the MVC project template (VS2013)?"
Did you check if your web.config file contains
<appSettings>
<!-- this one is for client side validation -->
<add key="ClientValidationEnabled" value="true" />
<!-- this is for unobtrusive ajax -->
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
I had the same issue and the solution was actually to make sure that the script references are in the right order (specifically that #Scripts.Render("~/bundles/jquery") appears before #Scripts.Render("~/bundles/jqueryval"))
For some reason it wasn't like it by default when creating the new project and adding the nuget packages
Adding reference to the javascript file jquery.unobtrusive-ajax.js worked for me.
For me it was a little bit peculiar and counter-intuitive.
The page was displayed from the controller with a custom route attribute:
[Route("contact")]
[HttpGet]
public ActionResult Contact()
{
return this.View();
}
but the POST action handling the AjaxRequest had no [Route("contact")] attribute and that's why it didn't work.
For me it was the way i posted the form:
Changing Submit
Into <button type="submit" value="">Submit</button> solved my problem.
Apologies for starting another thread but I kind of solved the issue of my first thread but now I run into a different issue.
Background:
I have a portlet which takes 3 Parameters (Temperature,FromUnit,ToUnit) and passes them on to an external WebService located here:
http://www.webservicex.net/ConvertTemperature.asmx/ConvertTemp
I did not want the portlet to actually redirect to the URL of the webService and the only way to do that appeared to be AJAX using jquery which I have done now.
However I also want the response of the webService to be embedded in the same portlet that I used to call it and that's where I am having issues.
This is what I got so far, here is my portlet page:
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<script src="http://localhost:8080/my-greeting-portlet/jquery.js"></script>
<script type="text/javascript" src="http://localhost:8080/my-greeting-portlet/js/script.js"></script>
<%# taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%# page import="javax.portlet.PortletPreferences" %>
<portlet:defineObjects />
<%
PortletPreferences prefs = renderRequest.getPreferences();
String Temperature = (String)prefs.getValue("Temperature","Temperature");
PortletPreferences prefs2 = renderRequest.getPreferences();
String FromUnit = (String)prefs2.getValue("FromUnit", "FromUnit");
PortletPreferences prefs3 = renderRequest.getPreferences();
String ToUnit = (String)prefs3.getValue("ToUnit","ToUnit");
%>
<portlet:renderURL var="editGreetingURL">
<portlet:param name="jspPage" value="/edit.jsp" />
</portlet:renderURL>
<div id="contact_form">
<form name="callWebService" id="callWebService" action="">
<fieldset>
<label for="Temperature" id="Temperature_label">Temperature </label>
<input type="text" name="Temperature" id="Temperature" size="30" value="" class="text-input" />
<label class="error" for="Temperature" id="Temperature_error">This field is required.</label>
<br />
<label for="FromUnit" id="FromUnit_label">From unit </label>
<input type="text" name="FromUnit" id="FromUnit" size="30" value="" class="text-input" />
<label class="error" for="FromUnit" id="FromUnit_error">This field is required.</label>
<br />
<label for="ToUnit" id="ToUnit_label">To Unit </label>
<input type="text" name="ToUnit" id="ToUnit" size="30" value="" class="text-input" />
<label class="error" for="ToUnit" id="ToUnit_error">This field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="submit" />
</fieldset>
</form>
</div>
</body>
</html>
And here is the jquery code:
$(function() {
$('.error').hide();
$(".button").click(function() {
// validate and process form here
var dataString = $("#callWebService").serialize();
// alert (dataString);return false;
$.ajax({
type: "POST",
url: "http://www.webservicex.net/ConvertTemperature.asmx/ConvertTemp",
data: $("#callWebService").serialize(),
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
$('.error').hide();
var Temperature = $("#Temperature").val();
if (Temperature == "") {
$("#Temperature_error").show();
$("#Temperature").focus();
return false;
}
var FromUnit = $("input#FromUnit").val();
if (FromUnit == "") {
$("label#FromUnit_error").show();
$("input#FromUnit").focus();
return false;
}
var ToUnit = $("input#ToUnit").val();
if (ToUnit == "") {
$("label#ToUnit_error").show();
$("input#ToUnit").focus();
return false;
}
});
});
Everything seems to be working, or at least I do not get errors but it seems that this part of the code is completely ignored:
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
When I press the "submit" button nothing happens. No redirection to the webservice URL (good) but also the custom message defined above does not show up (bad). The screen remains exactly as it is.
When I uncomment the "alert" in the jquery code and the parameters are definitely picked up correctly and I would assume that they are being passed to the webService URL but nothing else is happening.
Is this because the webservice URL returns a response that overwrites my message or something like that?
How can I get the webService response embedded into the portlet?
Again, many thanks for looking at this, it is much appreciated!
You ran into a Cross Domain Scripting problem.
Read this and this to resolve the problem
I have product list and I should to filter products by multiple criterias. In one page I have multiple criterias (name, price, create date etc.) in differenet elements: textbox, Dropdownlist etc.
I want to search products without reload page. When I change any criteria, product list updates automatically, without reloading page. Like this: Filter users.
Here is my view:
#model IEnumerable<Product>
<section id="sidebar left">
<div class="form_info">
<label>Category</label>
#Html.DropDownListFor(model => model.CategoryId, ViewBag.CategoryList as IEnumerable<SelectListItem>, "-", new { id = "ProductCategory" })
</div>
<div class="form_info">
<label>Name</label>
#Html.TextBoxFor(model => model.Name, new{ id = "ProductName"})
</div>
...//other properties
</section>
<section id="content" >
#foreach (var item in Model)
{
<a class="productStyle" href="#Url.Action("Details", "Product", new { id=item.Id})">#item.Name</a>
}
</section>
I have FilterProductByCriteria(int CategoryId, int Name, double priceFrom, double PriceTo..etc) action in controller.
I can do this: in onchange() event of every element to send all criteria values to controller and call back result data - filtered product list, but I cannot use returned data in #foreach (var item in Model). Help me in it or advice better ways, please. (Sorry for bad english)
I can do this: in onchange() event of every element to send all
criteria values to controller and call back result data - filtered
product list, but I cannot use returned data in #foreach (var item in
Model)
Why not? Sure you can. As an alternative you could place the filter criteria inputs inside an HTML form and provide a submit button that will send the values to the controller and this controller will return the same view with filtered products model. And then you could optimize this by introducing AJAX. You would place the <section id="content"> contents into a partial view which will contain the filtered results. And then you could use an Ajax.BeginForm instead of a regular Html.BeginForm to send the filter criteria to the controller action. In turn this controller action will perform the filtering and pass the filtered product list to the same partial view (return PartialView()) which will then be used to refresh only results section of your DOM.
For example:
#model IEnumerable<Product>
#using (Ajax.BeginForm("Search", "SomeController", new AjaxOptions { UpdateTargetId = "content" }))
{
<section id="sidebar left">
<div class="form_info">
#Html.LabelFor(model => model.CategoryId)
#Html.DropDownListFor(
model => model.CategoryId,
ViewBag.CategoryList as IEnumerable<SelectListItem>,
"-",
new { id = "ProductCategory" }
)
</div>
<div class="form_info">
#Html.LabelFor(model => model.Name)
#Html.TextBoxFor(model => model.Name, new { id = "ProductName"})
</div>
...//other properties
</section>
<button type="submit">Filter</button>
}
<section id="content">
#Html.Partial("_Products", Model)
</section>
and then your controller action might look like this:
[HttpPost]
public ActionResult Search(SearchCriteriaViewModel model)
{
IEnumerable<Product> filteredProducts = ... you know what to do here
return PartialView("_Products", filteredProducts);
}
Please refer this link for searching inside ASP.Net GridView without refresh the page.
[ASP.NET GridView Searching without refresh whole Page]
http://www.ashishblog.com/search-sort-in-gridview-using-c-net-ajax-and-jquery/
Here is my aspx page having search text box and gridview inside AJAX update panel.
<asp:ScriptManager ID="ScriptManager" runat="server" />
Search: <asp:TextBox ID="txtSearch" runat="server" OnTextChanged="txtSearch_TextChanged" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<div class="GridviewDiv">
<asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="False" AllowPaging="True"
AllowSorting="true" DataSourceID="dsGridview" Width="540px" PageSize="10" CssClass="yui">
<Columns>
<asp:BoundField DataField="id" HeaderText="ID" SortExpression="id" ItemStyle-Width="40px"
ItemStyle-HorizontalAlign="Center" />
<asp:TemplateField HeaderText="First Name" SortExpression="FirstName">
<ItemStyle Width="120px" HorizontalAlign="Left" />
<ItemTemplate>
<asp:Label ID="lblFirstname" Text='<%# HighlightText(Eval("FirstName").ToString()) %>' runat="server"
CssClass="TextField" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Name" SortExpression="LastName">
<ItemStyle Width="120px" HorizontalAlign="Left" />
<ItemTemplate>
<asp:Label ID="lblLastname" Text='<%# HighlightText(Eval("LastName").ToString()) %>' runat="server"
CssClass="TextField" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Department" HeaderText="Department" SortExpression="Department"
ItemStyle-Width="130px" />
<asp:BoundField DataField="Location" HeaderText="Location" SortExpression="Location"
ItemStyle-Width="130px" />
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtSearch" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
--> Here is my code behind file add method in page load event.
string SearchString = "";
protected void Page_Load(object sender, EventArgs e)
{
txtSearch.Attributes.Add("onkeyup", "setTimeout('__doPostBack(\\'" + txtSearch.ClientID.Replace("_", "$") + "\\',\\'\\')', 0);");
if (!IsPostBack)
{
Gridview1.DataBind();
}
}
protected void txtSearch_TextChanged(object sender, EventArgs e)
{
SearchString = txtSearch.Text;
}
public string HighlightText(string InputTxt)
{
string Search_Str = txtSearch.Text.ToString();
// Setup the regular expression and add the Or operator.
Regex RegExp = new Regex(Search_Str.Replace(" ", "|").Trim(), RegexOptions.IgnoreCase);
// Highlight keywords by calling the
//delegate each time a keyword is found.
return RegExp.Replace(InputTxt, new MatchEvaluator(ReplaceKeyWords));
// Set the RegExp to null.
RegExp = null;
}
public string ReplaceKeyWords(Match m)
{
return "<span class=highlight>" + m.Value + "</span>";
}
I have a scrollable GridView in my Web Part and I have to make an AJAX call on each user scroll. I use Jquery 1.7.1 in the web part to call a c# handler class.
I am getting error 500 : Internal Server Error.
Here is a sample of the ascx :
<div id="divProducts" style="height:300px;overflow:auto">
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" EnableViewState="false">
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle CssClass="header" BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
</asp:GridView>
</div>
<div id="divProgress" style="margin-top: -50px;margin-left:150px;z-index:-999">
<asp:Image ID="image1" ImageUrl="~/_layouts/images/MyWebPart/loading.gif" width="100" height="100" runat="server" />
</div>
<script type="text/javascript">
$(document).ready(function () {
//initially hide the loading gif
$("#divProgress").hide();
//Attach function to the scroll event of the div
$("#divProducts").scroll(function () {
//User has scrolled to the end of the grid. Load new data..
$("#divProgress").ajaxStart(function () {
$(this).show();
});
$("#divProgress").ajaxStop(function () {
$(this).hide();
});
BindNewData();
});
});
function BindNewData() {
$.ajax({
type: "GET",
url: "/_layouts/MyWebPart/FetchRecordsHandler.ashx",
success: function (data) {
alert('data ', data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
</script>
I added a ASHX file that will be deployed in Layouts folder of my web part project (Layouts/MyWebPart/FetchRecordsHandler.ashx) :
<%# WebHandler Language="C#" Class="MyWebPart.Code.FetchRecordsHandler" CodeBehind="FetchRecordsHandler.cs" %>
And I created the class FetchRecordsHandler that implements IHttpHandler with correct namespace :
namespace MyWebPart.Code
{
class FetchRecordsHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.Write("From the handler at " + DateTime.Now);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
This method doesn't work in my web part. Any idea of a solution or maybe another technic to make ajax calls from the scroll events to the web part ?
Thx
You need to change your .ashx to something like:
<%# WebHandler Language="C#" Class="MyWebPart.Code.FetchRecordsHandler, {my assembly}, Version=1.0.0.0, Culture=neutral, PublicKeyToken=xxxxxxxxxxxxxxxx" %>
Where {my assembly} is the name of the compiled .dll (without the .dll), probably MyWebPart and xxxxxxxxxxxxxxxx is the public key token for your assembly. One way to find this would be to look at the deployed .ascx from your web part, the first line or so should contain something similar.
I imagine the 500 error you are receiving has something to do with the fact that SharePoint cannot load the assembly for your .ashx. You could look in the event viewer for more details.
I have the following CFSELECT tags that are used to populate a text input:
<cfselect id="this" name="this" bind="cfc:Data.getThis()" bindonload="true" />
<cfselect id="that" name="that" bind="cfc:Data.getThat({p1})" />
<cfselect id="theOther" name="theOther" bind="cfc:Data.getTheOther({p1}, {p2})" />
The text input is the only value that needs to be submitted in a form:
<cfform name="addItem" method="post" action="somepage.cfm">
<cfinput
type="text"
id="item"
name="item"
bind="cfc:Data.getResult({this}, {that}, {theOther})" /><br />
<cfinput
type="submit"
name="addButton"
value="Add Item" />
</cfform>
I want the form and it's contents to be visible only when all three selections have been made, and there is a value for the text input. What is the best way to do this? I'm assuming some use of CFDIV is the best way, but I'm not sure how to load the dynamic content (the CFINPUTs) this way.
<cfselect id="this" name="this" bind="cfc:Data.getThis()" bindonload="true" onChange="toggleForm();" />
<cfselect id="that" name="that" bind="cfc:Data.getThat({p1})" onChange="toggleForm();" />
<cfselect id="theOther" name="theOther" bind="cfc:Data.getTheOther({p1}, {p2})" onChange="toggleForm();" />
<div id="theForm" style="display:none">
<cfform name="addItem" method="post" action="somepage.cfm">
<cfinput
type="text"
id="item"
name="item"
bind="cfc:Data.getResult({this}, {that}, {theOther})" /><br />
<cfinput
type="submit"
name="addButton"
value="Add Item" />
</cfform>
</div>
<script type="text/javascript">
function toggleForm(){
var a = document.getElementById("this").selectedIndex;
var b = document.getElementById("that").selectedIndex;
var c = document.getElementById("theOther").selectedIndex;
if (a > -1 && b > -1 && c > -1){
document.getElementById("theForm").style.display = "";
}
}
</script>
Personally I would simplify that JS a bit by using jQuery, but I don't know if you're already using jQuery on your site, and I don't want to be another "use jquery" empty answer; so this should work without jQuery, should you want/need to go without it. (But jQuery is awesome!)