Question

我想在点击后在JS中创建一个按钮，要求用户输入该书的AUTHOR和TITLE。我想把这个输入转移到其他地方。但是，我很难编码这个按钮。

到目前为止，我写的是：

  $('span.addall').on('click', function(e){
      e.preventDefault();
      var title, author;
      title = prompt("Please enter title");
      author = prompt("Please enter author")
    });

但是，上述代码的问题是两个单独的窗口背靠背弹出，要求用户输入信息。是否有可能我可以编写JS代码，以便它在一个窗口上询问标题和作者，并有2个不同的输入框？我还想确保它不允许用户提交数据而不必同时完成这两个字段。某种警报。这有点像我希望按钮一旦点击就能工作，我用油漆来编辑图片：

提前致谢！

my books.jsp页面需要修复：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Database Project</title>   

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <spring:url value="/webjars/bootstrap/3.2.0/css/bootstrap.min.css" var="bootstrap"/>
  <spring:url value="/webjars/jquery/1.11.1/jquery.min.js" var="jquery"/>
  <spring:url value="/webjars/bootstrap/3.2.0/js/bootstrap.min.js" var="bootstrapJS"/>
  <spring:url value="/webjars/bootstrap-table/1.9.1/dist/bootstrap-table.min.css" var="bootstrapTable"/>
  <spring:url value="/webjars/bootstrap-table/1.9.1/dist/bootstrap-table.min.js" var="bootstrapTableJS"/>  
  <spring:url value="/resources/css/entertainment.css" var="entertainmentCss"/>
  <spring:url value="/resources/js/script.js" var="tableJS"/>

  <link href="${bootstrap}" rel="stylesheet"/>
  <link href="${bootstrapTable}" rel="stylesheet"/>
  <link href="${entertainmentCss}" rel="stylesheet"/>
</head>

<body> 
  <div class="site-wrapper">
    <div class="site-wrapper-inner">
      <div class="cover-container">
        <div class="masthead clearfix">
          <div class="inner">
            <h3 class="masthead-brand">Entertainment App</h3>
              <nav>
                <ul class="nav masthead-nav">
                  <li class="active"><a href="#">Home</a></li>                  
                </ul>
              </nav>
          </div>
        </div>
        <div class="inner cover">
          <div class="entertainmentDisplay"> 
            <h1>Books</h1>                      
            <table class="zebra-style" id="dtable">
              <thead>
                <tr>
                  <th scope="col">
                    <input type="checkbox" class="checkall" />
                  </th>
                  <th scope="col">Title</th>
                  <th scope="col">Author</th>
                  <th scope="col">#</th>
                </tr>
              </thead>
              <tbody>              
                <c:forEach var="book" items="${books}">
                  <tr>
                    <td> <input type="checkbox" class="checkbox" name="selectedItems" 
                        value="<c:out value="${book.booksKey}"/>"/></td>
                    <td><c:out value="${book.title}"/></td>
                    <td><c:out value="${book.author}"/></td>
                    <td><c:out value="${book.booksKey}"/></td>
                  </tr>
                </c:forEach>
              <tfoot>
                <tr>
                  <!--<th colspan="2"><a href="javascript:;" class="btn btn-default deleteall" title="dtable">Delete Selected Items</a></th>-->
                  <th colspan="2"><span href="javascript:;" id= "formsubmit" class="btn btn-default deleteall" title="dtable">Delete Selected Items</span></th>
                  <th colspan="2"><span href="javascript:;" id= "formsubmit" class="btn btn-default addall" title="dtable">Add Item(s)</span></th>

                </tr>
              </tfoot>
              </tbody>
            </table>           
          </div>
        </div>
        <div class="mastfoot">
          <div class="inner">
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="${jquery}"></script>
  <script src="${bootstrapJS}"></script>
  <script src="${bootstrapTableJS}"></script>
  <script src="${tableJS}"></script>        
</body>
</html>

Answer 1

我强烈建议使用Bootstrap模式。 http://getbootstrap.com/javascript/#modals

单击按钮

时，您可以轻松添加模式

请参阅＆＃34;基于触发按钮＆＃34;

改变模态内容的示例

如何让我的JS按钮接受用户输入？我想在一个提示中提交多个值

1 个答案: