我需要有关 javascript 的帮助。我正在尝试使用多种形式在模式中显示动态名称。这是我所拥有的,但上面写着“你确定要删除鲍勃吗?”但如果我点击删除汤姆按钮,我希望它显示汤姆。
表格:
<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>
模态:
<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>
最佳答案
首先,您需要使用submitBtn
类,因为您有两个具有相同id
的元素。
请试试这个:
$('.submitBtn').click(function() {
$('#deletename_id').text($(this).parents('form').find('input').eq(0).val());
});
另一种方法是使用这个方法:
$('#deletename_id').text($(this).parents('form').find('#username').val());
在这两种方法中,您都需要找到包含单击的按钮
的表单
,然后,您需要找到
输入。
$('.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>
关于javascript - 一页上的多个表单模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41451588/