Question

我有这个功课说：

“编写一个包含至少五个输入字段和一个按钮的表单的网页。如果用户点击该按钮，则应在浏览器窗口的中心弹出一个模态界面窗口（实际上是一个div）。模态窗口应该包含4个输入字段和一个按钮。如果用户点击该按钮，模态窗口将消失，用户在模态窗口的输入字段中插入的所有值将被连接并添加到主窗体中的文本字段在显示模态窗口期间，主窗体中的字段将处于非活动状态，并且应在网页顶部显示透明的灰色div（此灰色div应位于模态窗口下方，并应占据整个浏览器窗口）“。

我所做的一切都是第一部分。我无法保留插入的值并将它们附加到文本字段。我到现在所拥有的是：

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Modal Login Window Demo</title>
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="style.css">
  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" charset="utf-8"  src="js/jquery.leanModal.min.js"></script>
</head>

<body>
  <div id="w">
    <div id="content">
        <form id="myform">
            <label for="username">First name:</label>
            <input type="text" name="firstname" id="firstname">
            <label for="username">Last name:</label>
            <input type="text" name="lastname" id="lastname">
            <label for="username">Address:</label>
            <input type="text" name="address" id="address">
            <input type="checkbox" name="vehicle1" value="Bike">I have a bike<br>
            <input type="radio" name="like" value="like">Like this page?<br>
            <center><a href="#loginmodal" class="flatbtn" id="modaltrigger">Open window</a></center>
        </form>
    </div>
  </div>

  <div id="loginmodal" style="display:none;">
    <h1>So my window just showed up!</h1>
    <form id="loginform" name="loginform" method="post" action="index.html">
        <label for="username">First name:</label>
        <input type="text" name="firstname" id="firstname">
        <label for="username">Last name:</label>
        <input type="text" name="lastname" id="lastname">
        <label for="username">Address:</label>
        <input type="text" name="address" id="address">
        <label for="username">Description:</label>
        <input type="text" name="description" id="description">
       <div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Close window" tabindex="3">    </div>
    </form>
  </div>
    <script type="text/javascript">
    $(function(){
    $('#loginform').submit(function(e){
    return false;
  });

  $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});

var val1 = $("#firstnamemodal").val();
var val2 = $("#lastnamemodal").val();
var val3 = $("#addressmodal").val();
var val4 = $("#descriptionmodal").val();

var concatenatedValue = val1 + val2 + val3 + val4;

$("#loginbtn").click(function() {
    $("#firstname").val(concatenatedValue);
});

</script>
</body>
</html>

Answer 1

首先，您的ID名称存在冲突。只有一个元素可以在页面上携带相同的ID。因此，将模态窗口中的ID重命名为 firstnamemodal ， lastnamemodal ，等等。

根据我的理解，您希望从（模式窗口的）4个输入字段中检索值，并将它们放在一个字符串中，并将该字符串附加到其他5个现有字段之一。那么，为此，我们首先需要单独检索这4个输入字段的值。这可以通过

完成

var val1 = $("#firstnamemodal").val();
var val2 = $("#lastnamemodal").val();
var val3 = $("#addressmodal").val();
var val4 = $("#descriptionmodal").val();

然后，用

简单地连接这些

var concatenatedValue = val1 + val2 + val3 + val4;

然后，要将这些添加到某个输入字段（让我们说第一个），请使用：

$("#loginbtn").click(function() {
    $("#firstname").val(concatenatedValue);
});

因此，完整的代码变为

$("#loginbtn").click(function() {
    var val1 = $("#firstnamemodal").val();
    var val2 = $("#lastnamemodal").val();
    var val3 = $("#addressmodal").val();
    var val4 = $("#descriptionmodal").val();
    var concatenatedValue = val1 + val2 + val3 + val4;
    $("#firstname").val(concatenatedValue);
});

在jquery中弹出窗口，保留插入的值

1 个答案: