Post wrong value if form submit with javascript

Question

I have a table with different items and id's for each item. There are an dropdown menu for every item to delete/edit/start it. My problem is, that only the first item-id is passed to every of my $post['item_id'].

$(document).ready(function() {

$('.dropdown-opt li').click(function() {
        document.getElementById('opt').value = $(this).data('value');
        $('#options').submit();
});


$("#options").submit(function() {
    if (confirm('proceed?')){
        return true;
    } else {
        return false;
    }
});
});

 <!-- BEGIN items -->
  <tr>
    <td align="center">
      <form name="" action="" method="post" id="options">
      <input type="hidden" name="item_id" value="{items.ID}">
      <input type="hidden" name="action" id="opt" value="">

      <li class="dropdown-opt"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Optionen<span class="caret"></span></a>
        <ul id="selector" class="dropdown-opt" role="menu">
          <li data-value="edit"><a href="#">Edit</a></li>
          <li data-value="start"><a href="#">Start</a></li>
          <li data-value="delete"><a href="#">Delete</a></li>
        </ul>
      </li>
      </form>
    </td>
  </tr>
  <!-- END items -->

My first ID is 116 at this time, if i click on "Edit" I got POST-ID 116 on every item. But why? I have

 <input type="hidden" name="item_id" value="{items.ID}">

on every item so it can't never be the same ID.

EDIT: After add id='item_id' to the input hidden and update the javascript it works now.

 <input type="hidden" name="item_id" id="item_id" value="{items.ID}">

 $('.dropdown-opt li').click(function() {
        document.getElementById('opt').value = $(this).data('value');
        document.getElementById('item_id').value = $(this).closest('tr').find('input[name=item_id]').val();
        $('#options').submit();
});

The only thing that don't work was this line

 $(this).closest('tr').find('input#opt').val($(this).data('value'));

In this Javascript function

 $('.dropdown-opt li').click(function() {
        document.getElementById('opt').value = $(this).closest('tr').find('input#opt').val($(this).data('value'));
        document.getElementById('item_id').value = $(this).closest('tr').find('input[name=item_id]').val();
        $('#options').submit();
});

But this don't bring any issue as far as i can see. Thank you very very much TechBreak!!!

Why the answer is marked as unacceptable, please put your comments ? — ScanQR
– ScanQR, Commented Jan 4, 2017 at 6:06

ScanQR · Accepted Answer · 2016-12-14 14:51:08Z

You need to find closest tr first of the li element and then set the value in the respective input with id as opt and also get the required item id

    $('.dropdown-opt li').click(function() {
            $(this).closest('tr').find('input#opt').val($(this).data('value'));
            alert($(this).closest('tr').find('input[name=item_id]').val());
            $('#options').submit();
    });

Check this working demo

$(document).ready(function() {
  $('.dropdown-opt li').click(function() {
    $(this).closest('tr').find('input#opt').val($(this).data('value'));
    alert($(this).closest('tr').find('input[name=item_id]').val());
    
  });
  $("#options").submit(function() {
    if (confirm('proceed?')) {
      return true;
    } else {
      return
      false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>

  <!-- BEGIN items -->
  <tr>
    <td align="center">
      <form name="" action="" method="post" id="options">
        <input type="hidden" name="item_id" value="115">
        <input type="text" name="action" id="opt" value="">

        <li class="dropdown-opt">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Optionen<span class="caret"></span></a>
          <ul id="selector" class="dropdown-opt" role="menu">
            <li data-value="edit"><a href="#">Edit</a>
            </li>
            <li data-value="start"><a href="#">Start</a>
            </li>
            <li data-value="delete"><a href="#">Delete</a>
            </li>
          </ul>
        </li>
      </form>
    </td>
  </tr>
    <tr>
    <td align="center">
      <form name="" action="" method="post" id="options">
        <input type="hidden" name="item_id" value="116">
        <input type="text" name="action" id="opt" value="">

        <li class="dropdown-opt">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Optionen<span class="caret"></span></a>
          <ul id="selector" class="dropdown-opt" role="menu">
            <li data-value="edit"><a href="#">Edit</a>
            </li>
            <li data-value="start"><a href="#">Start</a>
            </li>
            <li data-value="delete"><a href="#">Delete</a>
            </li>
          </ul>
        </li>
      </form>
    </td>
  </tr>
</table>
<!-- END items -->

Collectives™ on Stack Overflow

Post wrong value if form submit with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related