asp.net mvc sending jquery generated hidden field to controller action

Question

I have preloaded hidden fields on the web form. these hidden fields are sent successfully to the controller when the jquery button is clicked

<input type ="hidden" class="serviceslist " value="1"/>
<input type ="hidden" class="serviceslist " value="2"/>

i am adding additional hidden fields by clicking the addmore button. these hidden fields are not be send to the controller when the jquery button is clicked . what might be the problem? are they not present in the dom?

<input type ="hidden" class="serviceslist " value="3"/>
<input type ="hidden" class="serviceslist " value="4"/>


  $('#addmoreservices').on('click', function () {
        var url = "/Quotation/AddmoreServices/";

        var serviceslist = $(".serviceslist ").serialize();        
        $.ajax({
            url: url,
            data: { serviceslist: serviceslist },
            cache: false,
            contenttype: 'application/json',
            dataType: "json",              
            type: "GET",
            success: function (data) {           

                return false;
            },
            error: function (reponse) {
                alert("error : " + reponse);
            }

this is the code of the button i am trying to send whole bunch of hidden fields(preloaded and created) to the controller. the preloaded are being sent and created ones are left behind)

Can you add the code to add the input fields dynamically?? Or is it so that you add input fields in this function's success callback?? — HCJ
– HCJ, Commented Feb 28, 2014 at 9:12

sanjeev · Accepted Answer · 2014-02-28 05:38:35Z

1

You are adding the element dynamically so it is not registered when you set the click handler. Therefor also call the event handler once you have created the dynamic element

You have not shown enough code , therefor difficult to tell the exact solution,

answered Feb 28, 2014 at 5:38

sanjeev

4,6512 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sanjeev Over a year ago

change the first line of where you attached event handler with $(document.body).on('click','#addmoreservices' , function () { , this will attach event handler for dynamic element also

TGH · Accepted Answer · 2014-02-28 05:29:03Z

0

Add unique names to the fields. Don't use the same name over and over again.

answered Feb 28, 2014 at 5:29

TGH

39.4k13 gold badges106 silver badges140 bronze badges

Comments

chenZ · Accepted Answer · 2014-02-28 06:11:37Z

0

if your input has a name,the serialize() can process

<input type ="hidden" class="serviceslist " value="1" name="a" />

but if all your input name is "a",the serialize result is

a=1&a=2&a=3....

i think that is not what you want
maybe you want

1,2,3,4....

try use

$(".serviceslist").map(function(){return $(this).val();}).get().join(",")

answered Feb 28, 2014 at 6:11

chenZ

9404 silver badges16 bronze badges

Comments

HCJ · Accepted Answer · 2014-02-28 09:37:28Z

0

Try to make the 'click' event handler a separate js function like

$('#addmoreservices').on('click', addHandler)

var addHandler = function(){...};

Then on the addmore button click handler, after you add the new input to dom, again bind the addmoreservices button click handler 'addHandler'. This will include the newly created inputs in the 'addHandler' function.

answered Feb 28, 2014 at 9:37

HCJ

5271 gold badge6 silver badges14 bronze badges

Collectives™ on Stack Overflow

asp.net mvc sending jquery generated hidden field to controller action

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related