使用模态

时间:2018-06-18 14:59:45

标签: php html

是否可以使用模式将选定的单选按钮值传递到一个页面中的文本框?我试图为图书馆制作一个考勤表,学生将点击选择目的按钮,模态将出现他们将选择作业或阅读,在他们选择并单击确认按钮后,所选单选按钮将出现在文本框中。希望你能帮我这个。提前谢谢。

见下我的示例代码:

 <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">&times;</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>

1 个答案:

答案 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>

我希望它有所帮助!