是否可以使用模式将选定的单选按钮值传递到一个页面中的文本框?我试图为图书馆制作一个考勤表,学生将点击选择目的按钮,模态将出现他们将选择作业或阅读,在他们选择并单击确认按钮后,所选单选按钮将出现在文本框中。希望你能帮我这个。提前谢谢。
见下我的示例代码:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<form class="inputForm" >
<div class="inputbox">
<input type="text" required/>
<label>Purpose</label>
</div>
<input type="submit" value="Select Purpose" class="button1" data-toggle="modal" data-target="#exampleModal">
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Purpose:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Assignment</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Reading</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
答案 0 :(得分:1)
这对我来说更像是客户端(JavaScript)。 Live example
1。在HTML中包含以下内容:
<script>
$('#modal_button').click(function() {
var value = $("input:radio:checked").next().text();
$('#purpose_input').val(value);
$('#exampleModal').modal('hide');
});
</script>
将id="modal_button"
添加到确认按钮。
2. :将表单更改为:
<form class="inputForm" >
<div class="inputbox">
<input id="purpose_input" type="text" required/>
<label>Purpose</label>
</div>
</form>
3. 将提交按钮更改为:
<button class="button1" data-toggle="modal" data-target="#exampleModal">Select Purpose</button>
我希望它有所帮助!