Delete button sending the value of another form

Question

I have the following code that creates multiple different forms within a for loop to delete the different values in a database:

    @foreach (var item in Model.value)
        {
            <script>var temp = {'value' : '@item.name'}</script>
            <form class="formStyle" id="allCurrentNames_@item.name" method="post" action="">
                <input type="hidden" id="part_name_@item.name" value="@item.name"/>
                <button class="partDelete" onclick="deletePart(temp);return false;">Delete</button>
            </form>
        }

The following is the deletePart(temp) function:

function deletePart(temp) {
    var personName = $("input#part_num_"+temp.value).val();
    var dataString = 'partnumber=' + partnumber;

    $.ajax({
        AJAX STUFF
    })
}

Assuming I will have something like the following:

Person Name1       [DELETE]
Person Name2       [DELETE]
Person Name3       [DELETE]
Person Name4       [DELETE]
Person Name5       [DELETE]
Person Name6       [DELETE]

If I click Person Name3 it sends in the value of Person Name6 always no matter which Delete button I click.

Any help is much appreciated! Thank you for your time!

See: http://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page — Sam Hanley, Feb 10 '16 at 15:07
Possible duplicate of [jQuery id selector works only for the first element](http://stackoverflow.com/questions/11114622/jquery-id-selector-works-only-for-the-first-element) — Sam Hanley, Feb 10 '16 at 15:09
I edited the above to account for different part_num ids but now it always sends the last person value to be deleted...I also tried adding in what was mentioned below the specific form id as well but it sends the last value always — Baraa, Feb 10 '16 at 15:24

Sousuke · Accepted Answer · 2016-02-10T15:38:15.630

Remove your javascript from html

 @foreach (var item in Model.value)
        {
            <form class="formStyle" id="allCurrentNames_@item.name" method="post" action="">
                <input type="hidden" id="part_name_@item.name" value="@item.name"/>
                <button class="partDelete">Delete</button>
            </form>
        }

And change your javascript code like this

$('.partDelete').click(function(){
    var $this = $(this);
    var partnumber = $this.parent().find('input').val();
    var dataString = 'partnumber=' + partnumber;

    //ajax

    return false;
});

$('.partDelete').click(function(){
  var $this = $(this);
    var partnumber = $this.parent().find('input').val();
    var dataString = 'partnumber=' + partnumber;

  alert(dataString)
    
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="formStyle" id="allCurrentNames_1" method="post" action="" onsubmit="return false;">
  <input type="hidden" class="part_name" value="1"/>
  <button class="partDelete">Delete</button>
</form>
<form class="formStyle" id="allCurrentNames_2" method="post" action="" onsubmit="return false;">
  <input type="hidden" class="part_name" value="2"/>
  <button class="partDelete">Delete</button>
</form>
<form class="formStyle" id="allCurrentNames_2" method="post" action="" onsubmit="return false;">
  <input type="hidden" class="part_name" value="2"/>
  <button class="partDelete">Delete</button>
</form>

ohiodoug · Answer 2 · 2016-02-10T15:49:59.317

Your problem is in your javascript on this line:

var personName = $("input#part_num").val();

Since you are rendering these forms in a loop, you will have multiple input fields with part_num as the id. JQuery is going to give you the first instance found which matches your selector, which is why you are always posting the value of the first person.

You can easily fix this by figuring out which form the event came from and then selecting the correct part_num.

var personName = $('#correct_form_id #part_num').val();

Hope this helps!

EDIT: Adding some sample code

One approach could be to capture your form submit and handle it yourself. For instance:

$( "form" ).submit(function( event ) {
  var personName = $(this).find('#part_num').val();

  // Do what you want with this information

  // prevents the form from posting, if that is desired
  event.preventDefault(); 
});

Now you may have other forms on your page that you don't want to be caught by this handler, so you could add a class to the forms you are generating in your loop to verify that you are only capturing the correct events. Then your definition would look like:

$('form.some_class').submit(function(event)) { 
...
});

I tried this but for some reason now it always gets the value in the last form ...I also tried different id for each #part_num (ex: #part_num1, #part_num2 #part_num3) but that also ends up sending the last value... — Baraa, Feb 10 '16 at 15:21

score 0 · Answer 3 · answered Feb 10 '16 at 15:24

A much simpler action could be setting a unique id to each person's name. You'll just need to replace two lines of code. When building your forms, replace:

<input type="hidden" id="part_name" value="@item.name"/>
<button class="partDelete" onclick="deletePart();return false;">Delete</button>

with this:

<input type="hidden" id="part_name_@item.name" value="@item.name"/>
<button class="partDelete" onclick="deletePart(@item.name);return false;">Delete</button>

And in the deletePart js, replace:

function deletePart() {
var personName = $("input#part_num").val();

with this:

function deletePart(id) {
var personName = $("input#part_name" + id).val();

Does the ajax code matter at all? I have a break point set to show me what variable comes in the ajax part is just sending the value to be deleted and reloads the page? — Baraa, Feb 10 '16 at 15:32

Delete button sending the value of another form

3 Answers3