彈出窗口jQuery中，保留插入值

我有這樣的作業說：彈出窗口jQuery中，保留插入值

「寫一個網頁，包含至少五個輸入字段和一個按鈕的形式。如果用戶點擊該按鈕一個模式界面窗口（實際上是一個div）應該在瀏覽器窗口的中心彈出，這個模式窗口應該包含4個輸入字段和一個按鈕，如果用戶點擊該按鈕，模式窗口消失，並且用戶插入的所有值在模態窗口的輸入字段中將連接並添加到主窗體中的文本字段中，在顯示模態窗口期間，主窗體中的字段將處於非活動狀態，並且透明的灰色div應該顯示在網頁（這個灰色的div應該在模式窗口下面，並且應該佔據誰le瀏覽器窗口）「。

我到目前爲止所做的第一部分。我無法保留插入的值並將它們附加到文本字段。我現在擁有的是：

<!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>

來源

2016-05-12 AndrB

的第一部分只適用。在我插入值並關閉彈出窗口後沒有任何手勢 – AndrB

首先，你有衝突的ID名稱。只有一個元素可以在頁面上攜帶相同的ID。因此，請將模態窗口中的ID重命名爲名字模式,姓氏模式等等。

根據我的理解，您想要從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); 
});

來源

2016-05-12 15:42:17 Pandaqi

我插入了代碼，但沒有任何反應。我的意思是，我在彈出窗口中插入值，但是當我關閉它時，什麼也沒有發生。 – AndrB

您是否將所有代碼放置在點擊事件中？（忘了提及它，現在包括完整的代碼）你是否重命名了ID？ – Pandaqi

是的，我改變了ID，但沒有在click事件中插入代碼。現在它完美地工作。非常感謝。 – AndrB

彈出窗口jQuery中，保留插入值

回答

相關問題