0
我想在JS中創建一個按鈕，單擊它，要求用戶輸入本書的AUTHOR和TITLE。我想把這個輸入轉移到其他地方。但是，我很難編碼這個按鈕。如何讓我的JS按鈕接受用戶輸入？我想在一個提示中提交多個值
我迄今爲止寫的是：
$('span.addall').on('click', function(e){
e.preventDefault();
var title, author;
title = prompt("Please enter title");
author = prompt("Please enter author")
});
然而，與上面的代碼的問題是2個獨立窗口彈出背靠背要求用戶輸入信息。是否有可能我可以編寫JS代碼，以便在一個窗口中要求標題和作者，並且有2個不同的輸入框？我也想確保它不會允許用戶在沒有完成兩個字段的情況下提交數據。某種警報。這是有點兒我怎麼想的按鈕工作，一旦點擊，我用油漆來編輯圖片：
提前感謝！
我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>
「的基礎上觸發按鈕變模態內容」的例子雖然你不能拿超過1個輸入，提示另外，你還有其他的選擇。首先，你需要形式和模型。有關表單，請查看MDN [文檔]（https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form），其中顯示了結構和模式查看jquery [文檔】（https://jqueryui.com/dialog/#modal-form）。爲你的例子，它需要標題和作者作爲參數，並將其傳遞給變量這是工作[fiddler]（http://codepen.io/cmlonder/pen/BKPZJg） – cmlonder
@cmlonder哇這真的很好，唯一的問題是我需要在我的books.jsp頁面中實現，我已經把它放在上面的更新後的文章中。認爲你可以幫忙嗎？我已經有了一個刪除功能和一個按預期工作的表格，這是'添加'按鈕。 – ihoaxed