Get data from php-foreach-loop to ajax

Question

I have searched very long for a solution to this problem but could not find any.

I get data from the database to show some projects on my website. For each project i can click on a pen-symbol to edit the name of the project. I´d like to send the date per ajax request, but always get the data of the first project. If i try for example to edit the name of the second project "test", i get the data of the first project "blubb"

What i have tried: - Used classes not Id´s Call Ajax function from PHP foreach with form - Used $this Get Ajax variable from the PHP foreach loops

My code lookes like this (simplified):

< script type = "text/javascript" >
  $(document).ready(function() {
    $(".submit").click(function() {

//here are the problems, i only get the value of the first project
      var new_project_name = $('.new_project_name').val(); 
      var old_project_name = $('.old_project_name').val();


      $.ajax({
        type: "POST",
        url: "php/edit/edit.php",
        data: {
          old_project_name: old_project_name,
          new_project_name: new_project_name,
          name: name
        },

      }).

      done(function(response) {
        blabla

      });
    });
  }); < /script>

<?php foreach($db->query('SELECT * FROM portfolio ORDER BY position, id desc') as $row) { $name = $row['name']; ?>

<div class="rename">
  <table width="400" border="0" cellspacing="1" cellpadding="2">
    <tr>
      <td>Projektname:</td>
    </tr>
    <tr>
      <td>
        <input type="text" class="new_project_name" value="<?php echo $name;?>">
      </td>
      <input type="text" class="old_project_name" value="<?php echo $name;?>" hidden>
    </tr>
    <tr>
      <td>
        <input class="submit" type="submit" value="Umbenennen">
      </td>
    </tr>
  </table>
</div>

<?php } ?>

Thank you for any help.

$('.new_project_name') will return a collection of everything having class new_project_name. I doubt what calling #val function on collection is intended to return. To achieve what you want, you should iterate the collection for changes. — Aleksei Matiushkin
– Aleksei Matiushkin, Commented Jan 7, 2015 at 9:55
you can use closest in jquery to take the corresponding input value OR you can use id to differentiate and take the corresponding input value — Siva.G ツ
– Siva.G ツ, Commented Jan 7, 2015 at 9:59
@.Siva.G : I tried to use closest like this: var new_project_name = $(this).closest('.new_project_name').val(); But this doesent seem to work. — Mischu
– Mischu, Commented Jan 7, 2015 at 10:34

Hoja · Accepted Answer · 2015-01-07 11:18:21Z

3

you could pass the id of the project to ajax and update the new value. For that you just need to pass the id of the element.

HTML

  <input type="text" class="new_project_name" value="<?php echo $name;?>" rel="<?php echo $id; ?>">

jQuery

 $(document).ready(function() {
    $(".submit").click(function() {
      var parentObj = $(this).closest('.rename');
      var id = parentObj.find(' .new_project_name').attr('rel');
      var project_name = parentObj.find(' .new_project_name').val();


      $.ajax({
        type: "POST",
        url: "php/edit/edit.php",
        data: {
          project_name : project_name ,
          id:id
        },

      }).

      done(function(response) {
        blabla

      });
    });
  });

See the Fiddle and check console

http://jsfiddle.net/hoja/2caukhvo/11/

edited Jan 7, 2015 at 11:18

answered Jan 7, 2015 at 10:07

Hoja

1,2371 gold badge15 silver badges36 bronze badges

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

3 Comments

Mischu Over a year ago

Thank you for the answer. I tried like you said but firebug tells me, that he gets the name of the first project -> project_name : blubb

Hoja Over a year ago

Check My Fiddle and accept answer if it's worth for you

Mischu Over a year ago

Thank you very much, you solved the problem. I tried for so many hours without success.

Collectives™ on Stack Overflow

Get data from php-foreach-loop to ajax

1 Answer 1

HTML

jQuery

See the Fiddle and check console

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

jQuery

See the Fiddle and check console

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related