I have a form and here's the handler for the submit button:

$( '#submit_btn' ).click( function( data ){ 
    theForm = document.getElementById( 'realForm' );
    theForm.meetingName.value = document.getElementById( 'meeting_name' ).value;
    theForm.meetingId.value = '';
    theForm.description.value = document.getElementById( 'mtg_description' ).value;
    theForm.startTime.value = startDate + ' ' + startTime;
    theForm.endTime.value = endDate + ' ' + endTime;
    theForm.loginName.value = participants;
    theForm.role.value = roles;
    theForm.docRights.value = docRights;
    theForm.submit();
});

This handler basically pre-processes some data and sends to a hidden form, this:

<form id="realForm" style="visibility:hidden" action="/app/meeting/create" method="post">
    <input name="loginName" type="text">
    <input name="meetingName" type="text">
    <input name="meetingId" type="text">
    <input name="startTime" type="text">
    <input name="endTime" type="text">
    <input name="description" type="text">
    <input name="roles" type="text">
    <input name="docRights" type="text">
</form>

Problem is that the request isn't hitting the endpoint defined in the hidden form. What am I doing wrong here?

I've changed to make the input types hidden instead of the form. The submit handler certainly executes and, using FireBug, I don't see the request going out under the NET tab.

I'm using this dummy data to try and trigger the request but it's still not working:

theForm.meetingName.value       = "MY MTG";
                        theForm.meetingId.value         = '';
                        theForm.description.value       = "DESC";
                        theForm.startTime.value         = "2013-05-25 00:00:00";
                        theForm.endTime.value           = "2013-05-25 02:00:00";
                        theForm.loginName.value         = "[email protected]";
                        theForm.role.value              = "M,M";
                        theForm.docRights.value         = "CRUT,CRUT";

I have a form and here's the handler for the submit button:

$( '#submit_btn' ).click( function( data ){ 
    theForm = document.getElementById( 'realForm' );
    theForm.meetingName.value = document.getElementById( 'meeting_name' ).value;
    theForm.meetingId.value = '';
    theForm.description.value = document.getElementById( 'mtg_description' ).value;
    theForm.startTime.value = startDate + ' ' + startTime;
    theForm.endTime.value = endDate + ' ' + endTime;
    theForm.loginName.value = participants;
    theForm.role.value = roles;
    theForm.docRights.value = docRights;
    theForm.submit();
});

This handler basically pre-processes some data and sends to a hidden form, this:

<form id="realForm" style="visibility:hidden" action="/app/meeting/create" method="post">
    <input name="loginName" type="text">
    <input name="meetingName" type="text">
    <input name="meetingId" type="text">
    <input name="startTime" type="text">
    <input name="endTime" type="text">
    <input name="description" type="text">
    <input name="roles" type="text">
    <input name="docRights" type="text">
</form>

Problem is that the request isn't hitting the endpoint defined in the hidden form. What am I doing wrong here?

I've changed to make the input types hidden instead of the form. The submit handler certainly executes and, using FireBug, I don't see the request going out under the NET tab.

I'm using this dummy data to try and trigger the request but it's still not working:

theForm.meetingName.value       = "MY MTG";
                        theForm.meetingId.value         = '';
                        theForm.description.value       = "DESC";
                        theForm.startTime.value         = "2013-05-25 00:00:00";
                        theForm.endTime.value           = "2013-05-25 02:00:00";
                        theForm.loginName.value         = "[email protected]";
                        theForm.role.value              = "M,M";
                        theForm.docRights.value         = "CRUT,CRUT";

• javascript
• jquery
• html

• Have you checked to see if the submit happens? Or is that the issue? Use Firebug and watch the NET tab (or similar tool). – matthewpavkov Commented May 24, 2013 at 19:03
• I don't have an answer, but I have a couple of suggestions. Have you tried it without the visibility:hidden to see if it works? Also, maybe try 'display:none' instead of 'visibility:hidden'. – Adam Plocher Commented May 24, 2013 at 19:03
• 2 Why not provide a form with Hidden fields instead of the entirely hidden form? – Fals Commented May 24, 2013 at 19:04

4 Answers 4

I'd try this out:

document.forms.realForm.submit()

2 tips:

1. use this for fetching variable from input.

   $("#NAME_OF_YOUR_INPUT_ID").val(); 
   

2. use hidden input instead and identify each one with ID.

   <input id="docRights" type="hidden">
   

The problem is that my first form had a button with type = "submit"...so that was submitting the form even though I didn't want it to.

I had to change the type to "button" in order to prevent that from happening.

Thanks for all the prompt responses.

Your input name is roles not role.

Change your line of JS to:

theForm.roles.value = roles;

See JS Fiddle: http://jsfiddle/jav6s/