Setting the submit button as the default in an XForm

Bjørn E. Gustafson

Vote:

Hello, I have an XForm with some textboxes and a submit button. I want the user to be able to hit enter in a text box to submit the form and not have to actually click the button. I already have the javascript function that can care of clicking a button when enter is hit inside a textbox, and in the function FormControl_ControlsCreated I loop through all the controls and find all the textboxes (controls of type EPiServer.XForms.WebControls.Input). From a previous loop through the controls, I also have the button control (EPiServer.XForms.WebControls.Submit). Now, all I need to do is to add an attribute to the textbox which captures the keyboard event and calls the button's click event. I thought this would be straight-forward, but it appears from the resulting HTML code that the submit button is rendered without an ID. It only has a name. Anyone has a workaround?

#12903

Jan 18, 2007 15:04

Bjørn E. Gustafson

Vote:

Ok, I've made my own work around for this. Quickly explained: Find the textboxes in the ControlsCreated function, and add an attribute that calls the javascript called "ClickButtonWithName" with the name of the XForm's submit button. The name is automatically generated and can extracted from the button's ClientID. The javascript checks whether the enter-key was hit, calls a recursive function to find the button with the given name, and if successfully retrieved it calls the button's click event. Here is the C# function that you can call to set the submit button as the default button for the EPiServer textbox (assuming the XForm is contained within a DIV with the unique id "XFormContentDiv":


// Created by Janus Kamp Hansen - http://www.kamp-hansen.dk
// Ported to C# by Steve Celius
// Modified to suit XForm webcontrols by Bjørn Gustafson
public static void SetDefaultButton(System.Web.UI.Page page, EPiServer.XForms.WebControls.Input textBox, EPiServer.XForms.WebControls.Submit defaultButton )
{
	//System.Text.StringBuilder sScript = new System.Text.StringBuilder();
	string ClickButtonWithNameScript = @"
";

	string FindButtonWithNameScript = @"
";

	string buttonname = defaultButton.ClientID;
	buttonname = buttonname.Replace("_",":");
	buttonname = buttonname.Replace("::",":_");
	textBox.Attributes.Add("onkeydown", "ClickButtonWithName('" + buttonname + "')");
	page.RegisterStartupScript("ClickButtonWithNameScript", ClickButtonWithNameScript);
	page.RegisterStartupScript("FindButtonWithNameScript", FindButtonWithNameScript);
}

Your ControlsCreated function could look something like this:


private void FormControl_ControlsCreated(object sender, EventArgs e)
{
	// Find the submit button, if any
	System.Web.UI.Control submitbutton = null;
	foreach (System.Web.UI.Control formcontrol in FormControl.Controls)
		if (formcontrol is EPiServer.XForms.WebControls.Submit)
			submitbutton = formcontrol;

	// Loop through all the xform controls
	foreach (System.Web.UI.Control formcontrol in FormControl.Controls)
	{
		// We are dealing with an input field (textbox) and the form has a submit button
		if ((submitbutton != null) && (formcontrol is EPiServer.XForms.WebControls.Input))
		{
			// Set the button as the default button when hitting enter in a field
			SetDefaultButton(Page,(EPiServer.XForms.WebControls.Input)formcontrol,(EPiServer.XForms.WebControls.Submit)submitbutton);
		}
	}
}

Hope this can come in handy for someone, and don't hesitate to let me know if you have suggestions for improvement to the code or a simpler workaround than the one presented here! :-) -b

#15072

Jan 18, 2007 15:55