CODEWITHSUNDEEP
javascriptjqueryhtml
fumeng
fumeng

Reputation: 1820

Prepopulate and submit hidden form

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";

Upvotes: 3

Views: 15095

Answers (4)

fumeng
fumeng

Reputation: 1820

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.

Upvotes: 2

Adam Plocher
Adam Plocher

Reputation: 14233

Your input name is roles not role.

Change your line of JS to:

theForm.roles.value = roles;

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

Upvotes: 1

Faron
Faron

Reputation: 1243

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">

Upvotes: 2

Mark
Mark

Reputation: 595

I'd try this out:

document.forms.realForm.submit()

Upvotes: 3

Related Questions