jQuery Form Plugin: post dynamic fields

Question

I am using jQuery Form Plugin to submit (POST) a WebForm.

Everything works great if I put my controls on that form.

When I add (append) dynamic fields using jQuery (text or hidden) it seems that my fields cannot be sent.

Is there anyone who experienced the same problem?

Answer 1

You might try attaching the plugin on form submit:

<script type="text/javascript"> 
    $("#submit").click(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#myForm').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
        return false;
    }); 
</script> 

Answer 2

How are you adding your dynamic fields? I do the same thing, appending hidden input elements, and it uploads them just fine.

To be more specific, I am using jQuery as well, so I am curious what functionality in jQuery you are using which you are having a problem with.

That being said, you are going to have to give more information on your problem, as there are many proven ways to succesfully do exactly what it is you are trying to do.

Answer 3

I wouldn't do it this way simply because I can see various browsers disabling this ability in the future and then you're up the creek.

Why not just have a single hidden field from the beginning and put all your variables and values in there in some kind of querystring form format like "<variable>=<value>&<variable>=<value>&..."?

It's quick, it's easy and it doesn't rely on rendering HTML form controls after a page has loaded.

EDIT: Per the numerous comments below. This may not be considered "natural" by some but it's reliable. Being that we're dealing with client side scripting which is notorious for behaving inconsistently across browsers, personally, I would go for what I know will work. I don't expect everyone to prefer my way but I stand by it as a decent option with advantages that at least should be considered.

Answer 4

I have no problems with dynamically added field in my application.

Make sure that the new field is still inside <form> and </form>. Make sure your tag structure is valid and balanced. Put the form open and close outside the block element, such as div and table to make sure that the new added field not fall outside the form tag.

Firebug will be your best friend, use it to inspect the added field and the AJAX request sent by form plugins.

Answer 5

I would like to thank everyone for their help.

I am using jQuery 1.4.1 to append elements to a UL:

var file = "";
FilesToUpload++;
$("#UploadedFilesList")
    .show()
    .append("<li class='element001'><p>" + file + "</p><span class='element002'>x</span><input type='hidden' value='1' id='Attachment_" + FilesToUpload + "' /></li>");

I am adding and hidden element but I've tried using a text as well.

I've checked with FireBug and the elements are inside the .... I've checked and all the TAGS are closed properly. This is the script I am using to post the form:

$('#aspnetForm').submit(function()      {
     $(this).ajaxSubmit(options);
     return (false);
});

All the asp.net web controls are posted correctly; the problem is just with the dynamic fields.
I'll try to build a sample project to see if I've got the same problems. I've tried with different browsers and the results are the same.

Thanks

Alberto