Submit Xform when hitting enter - set defaultbutton?

Vote:
 

On our website, we have a search field at the top of the page and it interferes when there are 2 forms on the page. For example, on the contact us page, there is the quick search form and the contact form which is an xform. If you are typing something in the contact form and hit enter, it send the information to the search form.

Is there no easy way to set the defaultbutton for the xform submit button? I haven't seen a way to either add an ID to the button or reference it in some way using FormControl.FindControl(). There is only a name set for the submit button but no ID. 

I did see a post by Bjorn Gustafson titled "Setting the submit button as the default button in an XForm", but I was wondering if there is an alternative way to this.

Is there no other solution to this?

#33248
Oct 05, 2009 20:47
Vote:
 

<script type="text/javascript">

//Registerar en eventhanterare för keypress på xformsdelen.

$(function(){

var inputFields = $("#xforms input").keypress(keypressHandler);

})

//Eventhanterare för xforms-delen. Kontrollerar om det var ett enter som trycktes ner och triggar i så fall en postback

function keypressHandler(e)

{

var key;

if(window.event)

{

//IE

key = window.event.keyCode;

}

else

{

//firefox

key = e.which;

}

if (key == 13)

{

//Get the button the user wants to have clicked

triggerXformPostback();

}

}

//Letar rätt på submit-knappen på xformsformuläret och triggar det

function triggerXformPostback()

{

var button = $("#xforms input[type=submit]:first");

if (button != null)

{

//If we find the button click it

button.click();

event.keyCode = 0;

}

}

</script>

<div id="xforms">

<asp:ValidationSummary ID="xFormsValidationSummary" runat="server" />

<XForms:XFormControl ID="FormControl" runat="server" EnableClientScript="true" />

</div>

</asp:Panel>

#33466
Edited, Oct 14, 2009 10:24
Vote:
 

This is my xforms.ascx control that I use. Jquery needs to be linked in though....Hope it helps,

#33468
Oct 14, 2009 10:29
Vote:
 

Tack Daniel! That works perfectly in IE.

Unfortunately, in FF and Safari when you have 2 buttons on the page then there is a problem. I have my search button set as default button for the search panel. With your code, it did work if you enter all required fields. The form does get processed when you hit Enter key.

However, if there is an error, then you will see the error message display but then 1 second after you see the error message - the submit button on my search form will submit.

Very strange. Atleast it is working in IE until I can figure out the problem for the other browsers.

#33562
Oct 15, 2009 16:43
Vote:
 

Ok, I got it working for IE, Firefox, and Safari. Not sure about other browsers, but those were the 3 I tested the fix on.

I modified your code to be:

<script type="text/javascript">
$(function(){ var inputFields = $("#xforms input").keypress(keypressHandler); })

function keypressHandler(e)
{
   var key; 
   if(window.event)
   {
      key = window.event.keyCode; //IE
   }
   else
   {
      key = e.which; //firefox
   }

   if (key == 13)
   {
      var button = $("#xforms input[type=submit]:first");
         if (button != null)
         {
            button.click();
            return (key != 13 && event.keyCode != 13);
         }
      }
   }
}
</script>

#33563
Edited, Oct 15, 2009 18:35
Vote:
 

I had trouble getting Christines script to work, but finally I've got a something that's working. I've got a wrapping div around xForms with the class "xForm", but you can select the the inputs any way you prefer. If you can trust JQuery this should work in all browsers, the event argument comes from them.

$('.xForm input').keydown(function (event) {
        
        var key;
        key = event.which;

        if (key == 13) {
            var button = $(".xForm input[type=submit]:first");
            if (button != null) {
                button.click();
                return false;
            }
        }
    });

#46054
Nov 25, 2010 13:32
Vote:
 

Thanks, Jacob's solution works perfectly for me.

#55881
Dec 21, 2011 14:52
Vote:
 

Just a side note:

The class selector is among the slowest selectors in jQuery; in IE it loops through the entire DOM. Avoid using it whenever possible. Never prefix an ID with a tag name. For example, this is slow because it will loop through all <div> elements looking for the ‘content’ ID:

http://www.artzstudio.com/2009/04/jquery-performance-rules/#use-tags-before-classes

#55983
Dec 23, 2011 18:38