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

If you want to make javascript unique then you need to think a bit dynamic like giving id in such a way that you can get different field data from different form with just changing a character while getting data.

What i want to mean is that as you can see in my code that I have appended '_1' and '_2' after your id's 'username' and 'delete_id'. Also I have used an advanced way of generating bootstrap modal. So that you don't need to write hole code by your self. You can get clear idea of this method from this link.

Now, note that upon clicking the button I have called a method in which i have passed an id. If that id varies then I can get name on that id.

For testing purpose copy past any form and change the digit after '_' in every id to your favourite digit and also put that in brackets after 'deleteForm' function call as a parameter.

function deleteForm(formid) {
  var name = $('#username_' + formid).val();
  console.log(name);
  BootstrapDialog.show({
    title: 'Confirm Submit',
    message: 'Are you sure you want to delete '+name+' ?',
    buttons: [{
      label: 'Cancel',
      action: function(dialog) {
        dialog.close();
      }
    }, {
      label: 'Delete',
      cssClass : 'btn btn-danger',
      action: function(dialog) {
        // Do whatever you want to do here
        console.log('Do whatever you want to do here');
        dialog.close();
      }
    }]
  });

}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>





<form role="form" id="formfield_1" action="" method="post">
  <input type="hidden" name="username" id="username_1" value="bob" />
  <input type="hidden" name="delete_id" id="delete_id_1" value="45" />
  <button type="button" name="btn" value="Delete" id="submitBtn_1" class="btn btn-xs btn-danger tooltip-error no-border" style="padding:5px; width:30px;height:30px;" onclick="deleteForm(1)" /><i class="fa fa-trash-o bigger-120"></i>
  </button>
</form>

<form role="form" id="formfield_2" action="" method="post">
  <input type="hidden" name="username" id="username_2" value="tom" />
  <input type="hidden" name="delete_id" id="delete_id_2" value="48" />
  <button type="button" name="btn" value="Delete" id="submitBtn_2" class="btn btn-xs btn-danger tooltip-error no-border" style="padding:5px; width:30px; height:30px;" onclick="deleteForm(2)" /><i class="fa fa-trash-o bigger-120"></i>
  </button>
</form>

Answer 2

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>