Jquery Get input value from loop

Question

I want to make an inline editing solution using php, jquery, ajax

My Loop:

$a=0;

  while($row = $db->fetch_array($res)){
  if($a%2==1){
  $class = 'class="even"';
  }
  else{
  $class = 'class="odd"';
  }
  $a++;

Html Table:

   <tr <?php echo $class; ?>>
    <td class="th table-check-cell sorting_1"><input type="checkbox" name="zones_id[]" value="<?php echo $row['zone_id']; ?>"></td>
    <td><?php echo $a; ?></td>
    <td><?php echo $row['zone_name']; ?></td>
    <td><?php echo $row['zone_position']; ?></td>
    <td><?php echo $row['status']; ?></td>

    <td class="table-actions">
    <a href="javascript:void(0);" title="Edit" class="with-tip" onclick="slidemenu('innerlinks_<?php echo $a; ?>')"><img src="images/icons/fugue/pencil.png" width="16" height="16"></a></td>
    </tr>

    <tr style="display:none;" id="innerlinks_<?php echo $a; ?>" class="sub">
    <td><?php echo $a; ?></td>
    <td><input type="checkbox" /></td>
    <td><input type="text" class="zn" name="zone_name" id="zone_name" value="<?php echo $row['zone_name']; ?>" /></td>
    <td><input type="text" name="zone_pos" id="zone_pos"  value="<?php echo $row['zone_position']; ?>" /></td>
    <td colspan="2"><a><?php echo $row['zone_name']; ?></a></td>
    </tr>



    <?php } ?>   



    function slidemenu(id){
       $('#'+id).slideToggle();
      }





    ///second proccess 

    $(".sub").click(function(){
        $(this).closest('tr').find("input,select").each(function() {




        $.ajax({
          type: "POST",
          url: "<?php echo SITE_URL .'controlls/zone_add.php'; ?>",
          data: datastring,
          success: function (data) {

            alert("Details saved successfully!!!");
          }
            })

            });

    });

I want two things:

One is hide my data row and show form row for editing. Second is how to get all input select radio etc by there name for ajax request

What are you having problems with?

Marshmellow1328
– Marshmellow1328

2013-04-06 18:08:40 +00:00
Commented Apr 6, 2013 at 18:08 — Marshmellow1328
– Marshmellow1328, Commented Apr 6, 2013 at 18:08
for getting specific row field values

Zia
– Zia

2013-04-06 18:22:01 +00:00
Commented Apr 6, 2013 at 18:22 — Zia
– Zia, Commented Apr 6, 2013 at 18:22

fredrik · Accepted Answer · 2013-04-06 18:05:37Z

1

What you need to do is generate a unique ID for each row in the table - and give the table row that id:

<tr id="<?= $id ?>" class="<?= $class ?>">

Then you can find this row using jQuery $("#<?= $id ?>") and manipulate the contents of the row to replace static text with input controls and submit/cancel buttons.

Also, when you want to submit, you can retrieve the input values by querying them with jQuery. For example:

$("tr#<?= $id ?> input#zone_name").value();

The key is to give each row a unique id, which you might already have in the database...

answered Apr 6, 2013 at 18:05

fredrik

6,6783 gold badges40 silver badges49 bronze badges

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

1 Comment

fredrik Over a year ago

No, for each row you define the onclick events to contain the row ID. That way it becomes input to the event handlers. A <a onclick="showEditControls('<?= $id ?>')">Edit row</a> control for each row. The showEditControls can then be global and independent of the row. Then do it analogously for each control the row needs and every other row in the table.

Marshmellow1328 · Accepted Answer · 2013-04-06 21:15:39Z

1

You don't want to do an AJAX POST for each field.

$(".sub").click( 
    function() {
        var data = {};
        $(this).closest("tr").find( "input,select").each(
            function() {
                data[$(this).attr("name")] = $(this).val();
            }
        );
        $.post( "your URL", data, function( data ) { alert( "Successful!" ); } );
    }
);

I didn't look at the selectors you had. I'm assuming you have them correct. I just focused on the process for capturing the values from each field, adding it to a JavaScript object, and posting it via AJAX.

answered Apr 6, 2013 at 21:15

Marshmellow1328

1,2653 gold badges19 silver badges27 bronze badges

2 Comments

Zia Over a year ago

Your answer is almost correct but you make an array for data that's way its return all page input values. I make an string for data like: var data = ''; and append values in this without array like: var data += $(this).attr("name") = $(this).val(); in the last i remove comma by javascript slice and done my job. Thanks for reply.

Marshmellow1328 Over a year ago

Why concatenate only to have to slice later?

Collectives™ on Stack Overflow

Jquery Get input value from loop

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related