For each method on textboxes that are dynamicly added

Hello all,

I have a live click function where if a button is clicked it adds a set of text boxes.

$(document).ready(function () {

    var counter = 2;

    $(".addButton").live("click", function () {



        var newTextBoxDiv = $(document.createElement('div'))
      .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.html(' <label class="alignme" for="repdist' + counter + '">Rep' + counter + ' - </label><label for="repdist' + counter + '">Distance:</label>' +
    ' <input  onkeypress="return IsNumber(event)"  name="repdist' + counter + '" type="text" id="repsit' + counter + '" style="width:30px;" />' +
   '  <select name="kmormile' + counter + '" id="kmormile' + counter + '"> ' +
     	'<option value="Miles">Miles</option>' +
        	'<option value="Km">Km</option>' +
           ' </select>' +
                      ' <label for="repmin' + counter + '">Min:</label>' +
                   '  <input onkeypress="return IsNumber(event)"  name="repmin' + counter + '" type="text" value="00" maxlength="2" id="repmin' + counter + '" style="width:30px;" />' +

                      ' <label for="repsec' + counter + '">Sec:</label>' +
                     '<input onkeypress="return IsNumber(event)"  name="repsec' + counter + '" type="text" value="00" maxlength="2" id="repsec' + counter + '" style="width:30px;" /><a href="#" style="border: 0;"  id="addButton" class="addButton"><img style="border: 0;"  src="images/add.PNG" /></a><a href="#" id="removeButton" class="removeButton"><img style="border: 0;"  src="images/close_square.PNG" /></a>');

        newTextBoxDiv.appendTo("#TextBoxesGroup");


        counter++;
    });

Open in new window


the issue is when i go to add it to my sql how would i loop through the text boxes to add them into the db?
runnerjp2005Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
Advertise Here
 
Tom BeckConnect With a Mentor Commented:
Something like this:
function loopTextBoxes(){
	var values = '';
	$('#TextBoxesGroup div[id^="TextBoxDiv"]').each(function(){
		$(this).find('input').each(function(){
			values += $(this).attr('id') + ': ' + $(this).val() + '\r\n';
		});
		values += $(this).find('select').attr('id') + ': ' + $(this).find('option:selected').val() + '\r\n\r\n';
	});
	alert(values); //Replace with code to transfer values to POST
}

Open in new window


EDIT: added the select option
0
 
JamieTownsendCommented:
Firstly, jQuery live is deprecated. You should be using 'on' now.  http://api.jquery.com/on/

For the saving and to learn how it is working, I would suggest downloading a program like Fiddler and look at what is sent to the server when you finally submit your form.  This should then show you what you will have access to in "Request.Form"
0
 
runnerjp2005Author Commented:
Thanks i have updated live to on but i need to loop through all available fields via asp.net
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Sign Up
 
runnerjp2005Author Commented:
is there away to count how many i have made?
0
 
Tom BeckCommented:
Looping through the entered values via asp.net will be a separate operation. The textboxes you are creating in your script are not server controls so you cannot access them directly from asp.net code behind. First, collect the values in a string via client side script in this format "inputId:value,inputID:value" as I have demonstrated (replace '\r\n' with commas). Assign the string to an asp:HiddenField value. On submit, you can get the hidden field value and with server side code, split the string on the comma to create an array, loop through the array, split the pair on the colon and write the two values to the database.
0
 
runnerjp2005Author Commented:
Hello,

I tried this 
        $(".Submit").on("click", function () {

        var values = '';
        $('#TextBoxesGroup div[id^="TextBoxDiv"]').each(function () {
            $(this).find('input').each(function () {
                values += $(this).attr('id') + ': ' + $(this).val() + '\r\n';
            });
            values += $(this).find('select').attr('id') + ': ' + $(this).find('option:selected').val() + '\r\n\r\n';
        });
        alert(values); //Replace with code to transfer values to POST
    });

Open in new window


But it does not show when click submit button

<asp:Button class="classname" ID="Submit" runat="server" Text="Submit"
                                 Height="30px" Width="90px"   />
0
 
Tom BeckCommented:
Your click event handler is assigned to a button with class="Submit" which you do not have.

You can do the following assuming asp.net does not change the asp:button client id from the server ID you have assigned to it. In certain circumstances, asp.net prepends additional words and symbols to the server IDs you assign in order to create new client ids. This keeps all ids on the rendered page unique.

$("#Submit").on("click", function () {

Alternately, you can put the values collector script in a normal javascript function as I have done and in your asp:Button add the attribute OnClientClick="loopTextBoxes".
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.