You need to sign in to do that
Don't have an account?

How to submit a VF form using jQuery?
I have a VF form with one input field and an 'Enter' command button. Since the input value is almost always the same length, I want to automatically submit the form when the input field is filled. I'm using jQuery to determine when the field is filled but I cannot figure out how to submit the form. Eventually I want to convert this page to use AJAX so just the form and message are rerender then create a mobile version of the UI. Any suggestions are greatly appreciated.
Here's the code:
<apex:page docType="html-5.0" controller="MyController" standardStylesheets="true" showHeader="true" sidebar="false">
<apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates, 'Mobile-Design-Templates-master/common/js/jQuery2.0.2.min.js')}"/>
<script>
j$ = jQuery.noConflict();
j$(document).ready( function() {
j$("input[id$='lu']").keyup( function() {
if (j$(this).val().length == 20) {
alert( "Len = 20" ); // this fires
j$("form[id$='form']").submit(); // form not submitted, input field retains entered value
}
});
});
</script>
<apex:form id="form">
<apex:pageBlock >
<apex:pageBlockSection >
<apex:outputLabel value="LU"/ >
<apex:input id="lu" type="text" value="{!inputLU}" html-maxlength="20" />
</apex:pageBlockSection>
<apex:pageBlockSection >
<apex:commandButton action="{!updateLU}" value="Enter"/>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:pageMessages />
</apex:form>
</apex:page>
Here's the code:
<apex:page docType="html-5.0" controller="MyController" standardStylesheets="true" showHeader="true" sidebar="false">
<apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates, 'Mobile-Design-Templates-master/common/js/jQuery2.0.2.min.js')}"/>
<script>
j$ = jQuery.noConflict();
j$(document).ready( function() {
j$("input[id$='lu']").keyup( function() {
if (j$(this).val().length == 20) {
alert( "Len = 20" ); // this fires
j$("form[id$='form']").submit(); // form not submitted, input field retains entered value
}
});
});
</script>
<apex:form id="form">
<apex:pageBlock >
<apex:pageBlockSection >
<apex:outputLabel value="LU"/ >
<apex:input id="lu" type="text" value="{!inputLU}" html-maxlength="20" />
</apex:pageBlockSection>
<apex:pageBlockSection >
<apex:commandButton action="{!updateLU}" value="Enter"/>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:pageMessages />
</apex:form>
</apex:page>

In jQuery, you can do this: $("[id$=saveButton]").click(), assuming you have a button or link like this: <apex:commandButton value="Save" id="saveButton" action="{!save}" />. This works regardless of if the button uses a reRender attribute (AJAX) or not (form submit).

That solved my problem. Thanks!

Please, anyone, make me understand