multiple form modals on one page

Question

I need help with the javascript. I'm trying to display a dynamic name inside the modal using multiple forms. Here is what I have, but it says "Are you sure you want to delete bob?" but I want it to display tom if I click on the delete tom button.

Forms:

<form role="form" id="formfield" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="username" id="username" value="bob" /> 
<input type="hidden" name="delete_id" id="delete_id" value="45" /> 
<button type="button" name="btn" value="Delete" id="submitBtn" data-toggle="modal" data-target="#confirm-delete" class="btn btn-xs btn-danger tooltip-error no-border" style="padding:5px; width:30px; height:30px;" /><i class="fa fa-trash-o bigger-120"></i></button>
</form>

<form role="form" id="formfield" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="username" id="username" value="tom" /> 
<input type="hidden" name="delete_id" id="delete_id" value="48" /> 
<button type="button" name="btn" value="Delete" id="submitBtn" data-    toggle="modal" data-target="#confirm-delete" class="btn btn-xs btn-danger tooltip-error no-border" style="padding:5px; width:30px; height:30px;" /><i class="fa fa-trash-o bigger-120"></i></button>
</form>

Modal:

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
            </div>
            <div class="modal-body">
                Are you sure you want to delete <span id="deletename_id">?
            </div>
            <div class="modal-footer">
                <button type="button" id="cancel" class="btn btn-default success" data-dismiss="modal">Cancel</button>
                <a href="#" id="delete" class="btn btn-danger success">Delete</a>
            </div>
        </div>
    </div>
</div>

Javascript:

<script>
$('#submitBtn').click(function() {
     $('#deletename_id').text($('#username').val());
});

$('#delete').click(function(){
    $('#formfield').submit();
});
</script>

Answer 1

First of all, you need to use submitBtn class, because you have two elements with same id. Please try this:

$('.submitBtn').click(function() {
    $('#deletename_id').text($(this).parents('form').find('input').eq(0).val());
});

Another method is to use this method:

$('#deletename_id').text($(this).parents('form').find('#username').val());

In both methods, you need to find the form which contains the button clicked and , then, you need to find the input.

$('.submitBtn').click(function() {           
  $('#deletename_id').text($(this).parents('form').find('input').eq(0).val());
});

$('#delete').click(function(){
    $('#formfield').submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<form role="form" id="formfield" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="username" id="username" value="bob" /> 
<input type="hidden" name="delete_id" id="delete_id" value="45" /> 
<button type="button" name="btn" class="submitBtn" data-toggle="modal" data-target="#confirm-delete" class="btn btn-xs btn-danger tooltip-error no-border"><i class="fa fa-trash-o bigger-120"></i>Delete</button>
</form>

<form role="form" id="formfield" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="username" id="username" value="tom" /> 
<input type="hidden" name="delete_id" id="delete_id" value="48" /> 
<button type="button" name="btn" class="submitBtn" data-toggle="modal" data-target="#confirm-delete" class="btn btn-xs btn-danger tooltip-error no-border"><i class="fa fa-trash-o bigger-120"></i>Delete</button>
</form>
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
            </div>
            <div class="modal-body">
            Are you sure you want to delete <span id="deletename_id"></span>?
            </div>
            <div class="modal-footer">
                <button type="button" id="cancel" class="btn btn-default success" data-dismiss="modal">Cancel</button>
                <a href="#" id="delete" class="btn btn-danger success">Delete</a>
            </div>
        </div>
    </div>
</div>