dynamic button not passing correct value to c# Web Method

I have a .js file that build a HTML table, within a carousel  - amongst other elements, is a <input> controlled, which displays text. The text can be altered by the end user, and derived from a read only element in the table.

So, for example, the  table  contains a field, called AcceptedText, the input control contains the value of this field, but allows the end user to add additional information.

Ok, so far so good. Now, what I need to do is add a submit button, to send the value of the input control to a C# WebMethod, And i've achieved this using the following code snippet:

 response +=  '<div class="pull-right">' +
    '<label>Accepted Text:</label><input type="text" id="acceptedText" value="' + tdata[i]['MatchedString'] + '"></input>' +
     '<button class="btn  btn-success btn-xs" type="button" data-toggle="tooltip" data-original-title="Add Text?" onclick=" addTextString(event, this, ' + tdata[i]['Id'] + '); " data-id="' + tdata[i]['Id'] + '" value="' + tdata[i]['MatchedString'] + '"></button>' +
                            '</div>' +

Open in new window


Now, every time the carousal changes, this input control changes value, but clicking on the button, always posted the first value. So, if there are four pages, then irrespective on where this button is clicked, I always get the value on page 1.

My WebMethod, looks like this:

function addTextString(event, element, id) {
    console.log($('#acceptedText').val());});

Open in new window


 
Not sure what i'm doing wrong, here, as the value in the input control is different, on each iteration of the carousel
LVL 1
Wayne AthertonProduct Analyst Financial Messaging LondonAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
without the complete generated HTML source code nor the logic, it is just a guess, but I assume that you generate this input box multiple times - but always with the same id - therefore you might get always just the value of the first input element.

HTH
Rainer
0
Wayne AthertonProduct Analyst Financial Messaging LondonAuthor Commented:
@HTH, you are so spot on. How did I miss that one. I'll set it as a class name, and see if this is correct.
0
Wayne AthertonProduct Analyst Financial Messaging LondonAuthor Commented:
Alas, removing the Id, and then creating it with a class name, still produces, the same output. I've included the full html output, which also shows, how I apply it to the carousel

$.ajax({
            type: "POST",
            url: "Default.aspx/GetData",
            data: JSON.stringify({ "messageId": id }),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function(result) {
                tdata = jQuery.parseJSON(result.d);
                // Clear out the carousel
                $('#homepageItems').empty();

                var response = '',
                    indicator = '';

                for (var i = 0; i < tdata.length; i++) {
                    response += '<div class="item">' +
                        '<div class="panel panel-default">' +
                        '<div class=panel-heading>Hit (' + tdata[i]['StartNumber'] + ') of (' + tdata[i]['EndNumber'] + ')'</div>' +
                        '<div class="panel panel-body">' +
                        '<table  class="table table-user-information" style="height: 300px;">' +
                        '<tbody>' +
                        '<tr>' +
                        '<td><label>Accepted Text:</span></td>' +
                        '<td><span id="acceptedText">' + tdata[i]['SearchedString'] + '</span>' +
                        '</tr>' +
						'<tr>' +
                        '<td><label>Matched String:</span></td>' +
                        '<td><span id="matchedString">' + tdata[i]['MatchedString'] + '</span>' +
                        '</tr>' +
                        '<tr>' +
                        '<td><label>Date Listed:</label></td>' +
                        '<td><span id="dateListed">' + tdata[i]['DateListed'] + '</span></td>' +
                        '</tr>'; +
                      
  					  switch (status) {
                        case "Completed":
                        response += '<div class="panel-footer clearfix"><div class="pull-right"></div>' +
                                '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                            break;
                        default:
                           response +=  '<div class="pull-right">' +
    '<label>Accepted Text:</label><input type="text" id="acceptedText" value="' + tdata[i]['MatchedString'] + '"></input>' +
     '<button class="btn  btn-success btn-xs" type="button" data-toggle="tooltip" data-original-title="Add Text?" onclick=" addTextString(event, this, ' + tdata[i]['Id'] + '); " data-id="' + tdata[i]['Id'] + '" value="' + tdata[i]['MatchedString'] + '"></button>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    }
                   
                    indicator += '<li data-target="#hitCarousel" data-slide-to="' + tdata[i]['MessageId'] + '"></li>';

                }
                $('#homepageItems').append(response);
                $('#indicators').append(indicator);
                $('.item').first().addClass('active');
                $('.carousel-indicators > li').first().addClass('active');
                $("#Carousel").carousel();
                $('#showContent').show();
            }
        });
    }

Open in new window

0
Rainer JeschorCommented:
Hi,

could you please try this with the following two changes:

1. Add the ID value to the base input ID attribute
Change is in this line:
<input type="text" id="acceptedText' + tdata[i]['Id'] + '" value="' + tdata[i]['MatchedString'] + '"></input>'

Open in new window


Here the full part:
$.ajax({
            type: "POST",
            url: "Default.aspx/GetData",
            data: JSON.stringify({ "messageId": id }),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function(result) {
                tdata = jQuery.parseJSON(result.d);
                // Clear out the carousel
                $('#homepageItems').empty();

                var response = '',
                    indicator = '';

                for (var i = 0; i < tdata.length; i++) {
                    response += '<div class="item">' +
                        '<div class="panel panel-default">' +
                        '<div class=panel-heading>Hit (' + tdata[i]['StartNumber'] + ') of (' + tdata[i]['EndNumber'] + ')'</div>' +
                        '<div class="panel panel-body">' +
                        '<table  class="table table-user-information" style="height: 300px;">' +
                        '<tbody>' +
                        '<tr>' +
                        '<td><label>Accepted Text:</span></td>' +
                        '<td><span id="acceptedText">' + tdata[i]['SearchedString'] + '</span>' +
                        '</tr>' +
						'<tr>' +
                        '<td><label>Matched String:</span></td>' +
                        '<td><span id="matchedString">' + tdata[i]['MatchedString'] + '</span>' +
                        '</tr>' +
                        '<tr>' +
                        '<td><label>Date Listed:</label></td>' +
                        '<td><span id="dateListed">' + tdata[i]['DateListed'] + '</span></td>' +
                        '</tr>'; +
                      
  					  switch (status) {
                        case "Completed":
                        response += '<div class="panel-footer clearfix"><div class="pull-right"></div>' +
                                '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                            break;
                        default:
                           response +=  '<div class="pull-right">' +
    '<label>Accepted Text:</label><input type="text" id="acceptedText' + tdata[i]['Id'] + '" value="' + tdata[i]['MatchedString'] + '"></input>' +
     '<button class="btn  btn-success btn-xs" type="button" data-toggle="tooltip" data-original-title="Add Text?" onclick=" addTextString(event, this, ' + tdata[i]['Id'] + '); " data-id="' + tdata[i]['Id'] + '" value="' + tdata[i]['MatchedString'] + '"></button>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    }
                   
                    indicator += '<li data-target="#hitCarousel" data-slide-to="' + tdata[i]['MessageId'] + '"></li>';

                }
                $('#homepageItems').append(response);
                $('#indicators').append(indicator);
                $('.item').first().addClass('active');
                $('.carousel-indicators > li').first().addClass('active');
                $("#Carousel").carousel();
                $('#showContent').show();
            }
        });
    }

Open in new window


2. Adjust your addTestString function

To get the dynamic part of the input ID:
function addTextString(event, element, id) {
	console.log($('#acceptedText' + id).val());
}

Open in new window


HTH
Rainer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Wayne AthertonProduct Analyst Financial Messaging LondonAuthor Commented:
Thanks Rainer - that's saved me a lot of reworking.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.