Using Jquery to create a hidden element when button is clicked

Question

I have a form that is submitted to the server using jscript however i need to post the value of the submit button. This cannot be done the conventional way i must use jscript to post form. What i am doing is when the button is clicked i want to create a hidden text item with the value of the button and post that to the server. I am having some problems in creating and attaching the element to the form:

JScript

 $(document).ready(function(){      

    $('#query').click(function(e){

         var form = $('citizenRegistration');


          var self= $("#query"),newElement = $("<input type='hidden'/>");

          alert("self value is : "+self.val());

                 //create a new element and copy attributes             
                newElement
                    .attr("name", 'user_request2')
                    .val(self.val())
                    .appendTo('.buttons');

            alert(newElement.attr("name"));

        e.preventDefault();
        //alert($(this).val());
        //submitPage();

    });

});

HTML

 <div class="buttons">  
    <ol>
    <li><input id="save" type="submit" name= "user_request" value="Save"/>
    <input id="update" type="submit" name= "user_request" value="Update"/>
    <input id="query" type="submit" name= "user_request" value="Query"/>
    </li>       
    </ol>
    </div>

Answer 1

Specify the attribute type in the call to attr() not in the construction of the element. Also the selector for citizenRegistration is missing either a . or a # depending on whether it is an id or class.

   $(document).ready(function(){
        $("#query").click(function(e){
             var form = $("#citizenRegistration"); //Added # may need .

              //removed type=hidden, you can just use $(this)
              var self= $(this),newElement = $("<input/>");
                     //create a new element and copy attributes             
                    newElement.attr({
                            "name":"user_request2",
                            "type":"hidden" //added new attribute
                     }).val(self.val()).appendTo(".buttons");

            e.preventDefault();
        });
    });

Working Example: http://jsfiddle.net/BXqVP/1/

You can see the hidden element when inspecting the page with firebug:

Answer 2

Without seeing your HTML I can't be certain, but I see two possible problems:

var form = $('citizenRegistration');

This is not a valid selector. It should probably start with # or . . You don't seem to end up using it, though.

.appendTo('.buttons');

If .buttons is an input element, you can't append to it. You also shouldn't be appending to multiple .buttons elements, if there is more than one. Instead, you should probably append it to form . Just .appendTo(form) will work fine.