从html调用模态

Question

从锚标记调用模态时，我无法在输入文本中获取值。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href='#myModal' role="button" data-toggle="modal">${legList.ledgerName} 
    </a>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"		 
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
	<div class="modal-content">
	<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal"
	aria-hidden="true">&times;</button>
	<h4 class="modal-title" id="myModalLabel">Please enter
	user details</h4>
	</div>
	<form method="post" id="getuserdetails">
	<div class="modal-body">
	<input type="text" name="legid"
	id="legidinput">write something</input>
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-default" data- 
    dismiss="modal">Cancel</button>
	<button type="button" class="btn btn-primary" id="submit">Submit</button>
	</div>>
	</div>

In image one can see on calling modal "write something" is getting printed next to input box instead inside text box

请帮我在文本框中获取数据，我想知道是否要打印一些来自jsp的动态数据然后我如何进入文本框。

帮助将不胜感激。提前致谢。

Answer 1

您需要使用脚本语言将文本动态添加到模态文本框中

$('#btnOpenModal').click(function(){
  setTimeout(function(){$('#legidinput').val(1)},200);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href='#myModal' id="btnOpenModal" role="button" data-toggle="modal">${legList.ledgerName} 
    </a>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"		 
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
	<div class="modal-content">
	<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal"
	aria-hidden="true">&times;</button>
	<h4 class="modal-title" id="myModalLabel">Please enter
	user details</h4>
	</div>
	<form method="post" id="getuserdetails">
	<div class="modal-body">
	<input type="text" name="legid"
	id="legidinput">write something</input>
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-default" data- 
    dismiss="modal">Cancel</button>
	<button type="button" class="btn btn-primary" id="submit">Submit</button>
	</div>
	</div>