getting data from textboxes using a jQuery loop

Question

I'm trying to capture the values of pairs of textboxes on my page.

I am capturing them, but it's not exactly working the way I'd want it to as I am getting duplicate data.

Here's my HTML code:

    <div id="links">
        <div id="group1">
             <input type="text" name="linkTitle" value="Google">
             <input type="text" name="linkURL" value="www.google.com">
        </div>

        <div id="group2">
             <input type="text" name="linkTitle" value="Yahoo">
             <input type="text" name="linkURL" value="www.Yahoo.com">
        </div>

    </div>

    <div>
        <input id="btnSaveLinks" type="button" value="Save">
    </div>

And here is the javascript:

    $("#btnSaveLinks").on('click', function() {
       $('#links input[type=text]').each(function () {
          var title = $(this).attr("value");
          var url = $(this).attr("value");
          console.log('title: ' + title);
          console.log('url: ' + url);
       });
    });

title: Google

url: Google

title: www.google.com

url: www.google.com

title: Yahoo

url: Yahoo

title: www.yahoo.com

url: www.yahoo.com

Guilherme Sehn · Accepted Answer · 2013-10-29 19:31:39Z

6

You are getting duplicated data because you are iterating over every input and then storing the same value in the two variables:

var title = $(this).attr("value");
var url = $(this).attr("value"); // same thing

Your variables title and url contain the same thing.

You could iterate over your divs and then get the inputs inside them:

$('#links div').each(function() {
      var title = $(this).find('[name=linkTitle]').val();
      var url = $(this).find('[name=linkURL]').val();
      console.log('title: ' + title);
      console.log('url: ' + url);
});

Fiddle: http://jsfiddle.net/zXTEC/

answered Oct 29, 2013 at 19:31

Guilherme Sehn

6,79722 silver badges36 bronze badges

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

Comments

zzlalani · Accepted Answer · 2013-10-29 19:32:51Z

1

It's duplicated because you're writing the value twice for each text box with this line $(this).attr("value"); Look at your code again and you'll see that you use this same line for each box to get the value and assign it to two different variables...

edited Oct 29, 2013 at 19:32

zzlalani

24.6k16 gold badges48 silver badges73 bronze badges

answered Oct 29, 2013 at 19:32

NKD

1,0491 gold badge13 silver badges25 bronze badges

Collectives™ on Stack Overflow

getting data from textboxes using a jQuery loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related