JQuery Loop Through Variables to change element

Question

Completely new to JQuery so read some of the documentation here:

https://api.jquery.com/click/

I am trying to change an input from disabled to enabled on user click. I used this code which works fine:

$('#edit1').click(function(){
        $('#doc1').removeAttr('disabled');
});

I then wanted to loop through it for every value of edit1 and doc1 i.e. edit2 and doc2...etc.

I have tried this:

$(document).ready(function () {
        var max = 6;
        var i = 0;
        var x = 0

        if (x < max) {
            i++
            x++;

            $('#edit${i}').click(function () {
                $('#doc${x}').removeAttr('disabled');
            })
        }
    };

And can be seen here:

http://jsfiddle.net/Rockhopper92/9oapaf1k/

Now this does somehow "look" wrong to me but can't put my finger on it. I have a feeling it's to do with where I'm opening and closing my brackets or some really fundamental error like the opening line '$(document).ready(function()'

This is my first attempt at JQuery so any general pointers would be a massive help to me.

You can use it a bit more simple, check this jsfiddle.net/9oapaf1k/4 — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Jan 29, 2018 at 12:27
Thank you @CarstenLøvboAndersen this works perfectly. Do you mid me asking what exactly it is doing though just so I understand for future? — James
– James, Commented Jan 29, 2018 at 12:31
Rockhopper here is a new version with explanation jsfiddle.net/rog2td14 — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Jan 29, 2018 at 12:34

gurvinder372 · Accepted Answer · 2018-01-29 12:29:21Z

1

Multiple issues, updated fiddle

Using if instead of while
Not taking correct index and using x which would have become max by the time click is executed.
Not using the closing brace ) for document.ready.

Demo

$(document).ready(function() {
  var max = 6;
  var i = 0;

  while (i < max) {
    i++;

    $('#edit' + i).click(function() {
      var index = this.id.substring( 4 );
      $('#doc' + index).removeAttr('disabled');
    })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js">


</script>

<div class="row">
  <div class="content">
    <div id="edit1">
      <input type="text" id="doc1" value="Document 1" disabled><i class="far fa-edit"></i>
    </div>

    <div id="edit2">
      <input type="text" id="doc2" value="Document 2" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit3">
      <input type="text" id="doc3" value="Document 3" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit4">
      <input type="text" id="doc4" value="Document 4" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit5">
      <input type="text" id="doc5" value="Document 5" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit6">
      <input type="text" id="doc6" value="Document 6" disabled><i class="far fa-edit"></i>
      <br>
    </div>
  </div>
</div>

Note

I am using simple concatenation of i instead of template literals.

answered Jan 29, 2018 at 12:29

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

1 Comment

James Over a year ago

Thank you so much this is working perfectly. I also really appreciate the explanation. Seems obvious now you've pointed it out! Thank you for taking the time :)

Victor · Accepted Answer · 2018-01-29 12:27:30Z

0

if you want to use template literals use backticks `` isntead of '', if not you can use plain javascript :

$('#edit'+ i).click(function(){
        $('#doc'+x).removeAttr('disabled');
  })

Something like:

$(document).ready(function() {
var max = 6;
var i = 0;
var x = 0

if(x < max){
i++
x++;

$('#edit'+ i).click(function(){
        $('#doc'+x).removeAttr('disabled');
  })
}
});

answered Jan 29, 2018 at 12:27

Victor

4782 gold badges6 silver badges18 bronze badges

Comments

Hetal Chauhan · Accepted Answer · 2018-01-29 12:29:04Z

0

Try this one:

$(document).ready(function () {
    var max = 6;
    var i = 0;
    var x = 0; //no need

    for (i=0;i<=max;i++) {    

        $('#edit'+i).click(function () {
            $('#doc'+i).removeAttr('disabled');
        })
    }
};

answered Jan 29, 2018 at 12:29

Hetal Chauhan

80713 silver badges23 bronze badges

Comments

Vaibhav Patil · Accepted Answer · 2018-01-29 12:37:44Z

0

Try this solution :

This will enable/disable respective input when you click edit icon.

$(document).ready(function()
{
     $(document).on("click", ".fa-edit" , function(e)
   {
      var element = $(this);
      if(element.parent().children('input').attr('disabled') == 'disabled')
      element.parent().children('input').attr('disabled' , false);
      else
      element.parent().children('input').attr('disabled' , true);


   });

});

answered Jan 29, 2018 at 12:37

Vaibhav Patil

1321 silver badge6 bronze badges

Comments

l.g.karolos · Accepted Answer · 2018-01-29 12:45:28Z

$(document).ready(function() {
	// Find all divs with id which starts with edit and listen for a click event
   $('[id^="edit"]').click(function() {
     // find the input for the clicked div
     var doc = $(this).find($('input'));
     // remove the attribute
     doc.removeAttr('disabled');
  });
});

.row {
  width: 100%;
}

.content {
  width: 90%;
  text-align: center;
}

input[type=text] {
  padding: 6px 10px;
  margin: 8px 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js">


</script>

<div class="row">
  <div class="content">
    <div id="edit1">
      <input type="text" id="doc1" value="Document 1" disabled><i class="far fa-edit"></i>
    </div>

    <div id="edit2">
      <input type="text" id="doc2" value="Document 2" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit3">
      <input type="text" id="doc3" value="Document 3" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit4">
      <input type="text" id="doc4" value="Document 4" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit5">
      <input type="text" id="doc5" value="Document 5" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit6">
      <input type="text" id="doc6" value="Document 6" disabled><i class="far fa-edit"></i>
      <br>
    </div>
  </div>
</div>

There are several way to do this without the use of a loop.

You can add a class to your element and listen for a click event.

$('.yourClass').click(function(){
 $(this).removeAttr('disabled');
});

You can also listen to every click on an element with id starting with something.

If you know the element type then: (eg: replace 'element' with 'div')

$("element[id^="edit"]").click(function(){
 $(this).removeAttr('disabled');
});

If you don't know the element type:

$("[id^="edit"]").click(function(){
 $(this).removeAttr('disabled');
});

Andy · Accepted Answer · 2018-01-29 13:09:20Z

What you might find easier is to use classes instead of ids. Attach an edit class to each div then target those with the jQuery selector. That way you won't have to use a loop.

You target the class with $('.edit'), and then in the callback you target the input within the current selector context (this). You can then switch off the disable property.

(In the HTML I've replaced the value with a placeholder instead.)

$(document).ready(function() {
  $('.edit').on('click', function() {
    $('input', this).prop('disabled', false);
  });
});

.row {
  width: 100%;
}

.content {
  width: 90%;
  text-align: center;
}

input[type=text] {
  padding: 6px 10px;
  margin: 8px 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  box-sizing: border-box;
}

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="content">
    <div class="edit">
      <input type="text" id="doc1" placeholder="Document 1" disabled><i class="far fa-edit"></i>
    </div>
    <div class="edit">
      <input type="text" id="doc2" placeholder="Document 2" disabled><i class="far fa-edit"></i>
      <br>
    </div>
    <div class="edit">
      <input type="text" id="doc3" placeholder="Document 3" disabled><i class="far fa-edit"></i>
      <br>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

JQuery Loop Through Variables to change element

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related