Solved

For each method on textboxes that are dynamicly added

Posted on 2013-02-05
7
120 Views
Last Modified: 2013-02-20
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?
0
Comment
Question by:runnerjp2005
  • 3
  • 3
7 Comments
 
LVL 1

Expert Comment

by:JamieTownsend
ID: 38854588
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
 

Author Comment

by:runnerjp2005
ID: 38854680
Thanks i have updated live to on but i need to loop through all available fields via asp.net
0
 

Author Comment

by:runnerjp2005
ID: 38854683
is there away to count how many i have made?
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 38854684
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38854742
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
 

Author Comment

by:runnerjp2005
ID: 38854806
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38854906
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

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now