How to get values from textboxes

Hello,

I am using javascript to add text boxes when i click add button

  $(".addButton").on("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;" />');

        newTextBoxDiv.appendTo("#TextBoxesGroup");


        counter++;
    });

Open in new window


The issue is im not really sure how i can loop through them to get the values output.

Has anyone got any ideas??

The working code is shown here : http://jarrattperkins.com/training/addtraining.aspx
runnerjp2005Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Meir RivkinConnect With a Mentor Full stack Software EngineerCommented:
in line 5 you code:
.attr("id", 'TextBoxDiv' + counter);

so basically you give your textbox unique id which can be used to retrieve its value:

for(var i=0;i<counter;i++){
var val = $('#TextBoxDiv'+i).text();
}

Open in new window

0
 
runnerjp2005Author Commented:
how would i do this in vb.net though rather then javascript
0
 
Meir RivkinFull stack Software EngineerCommented:
do you mean that you want to get the value of your dynamic generated text-boxes values, in your code behind?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
runnerjp2005Author Commented:
yes thats it :)
0
 
Meir RivkinFull stack Software EngineerCommented:
since the textboxes are not aspnet controls but generated on runtime in your client side, you have a few options:

1. use aspnet hidden field control.
you add it in your aspx page:
<asp:HiddenField runat="server" ID="txtboxValues" Value='' />

Open in new window

set its value in your client side:
//create json array
var txtboxValues = [];
for(var i=0;i<counter;i++){
txtboxValues.push($('#TextBoxDiv'+i).text());
}
//assign the hidden field
$("#<%: this.txtboxValues.ClientID %>").val(txtboxValues);

Open in new window

read it in your server side:
JavaScriptSerializer js = new JavaScriptSerializer();
string [] txtboxValues =  js.Deserialize<string>(this.txtboxValues.Value);

Open in new window


2. create web service and use ajax to pass the values to server side.
check here for guideline: Walkthrough: Creating and Using AJAX-Enabled Web Service
in your VS solution, aright click in your project and add Web Service.
add new service called:
[WebMethod]
public SendValues(List<string> values){
}

in your client side you call the web service like this:
var txtboxValues = [];
for(var i=0;i<counter;i++){
txtboxValues.push($('#TextBoxDiv'+i).text());
}
var jsonText = JSON.stringify({ list: txtboxValues});
     
    $.ajax({
      type: "POST",
     url: "WebService1.asmx/SendValues",
      data: jsonText,
      contentType: "application/json; charset=utf-8",
      dataType: "json",
     success: function() { alert("success"); },
     failure: function() { alert("failed"); }
  });

Open in new window

check here to pass string array to server side via ajax:
javascript-arrays-via-jquery-ajax-to-an-aspnet-webmethod
0
 
runnerjp2005Author Commented:
When im reading it on client side

JavaScriptSerializer js = new JavaScriptSerializer();
string [] txtboxValues =  js.Deserialize<string>(this.txtboxValues.Value);

Open in new window


how would i add it to my sql database
0
 
Monica PSoftware DeveloperCommented:
0
All Courses

From novice to tech pro — start learning today.