如何從輸入框中獲取文本以顯示在彈出窗口中？

如何從輸入框中提取信息並單擊一個按鈕將其顯示在單獨的彈出窗口中？下面如何從輸入框中獲取文本以顯示在彈出窗口中？

例子：

enter image description here

HTML編碼：

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

</head> 

<body> 

<table style="width: 50%" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td>Firstname</td> 
     <td><input type="text" id="firstname"></td> 
    </tr> 
    <tr> 
     <td>Lastname</td> 
     <td><input type="text" id="lastname"></td> 
    </tr> 
    <tr> 
     <td>Address</td> 
     <td><input type="text" id="address"></td> 
    </tr> 
    <tr> 
     <td>Telephone</td> 
     <td><input type="text" id="telephone"></td> 
    </tr> 
</table> 

<input type="button" value="show details"> 

</body> 

</html>

來源

2014-11-03 BobbyJones

我想，從一個網頁到另一個發送數據的最簡單的方法是使用HTML的形式GET方法。

比方說，你的輸入框在文件form.html實施：

<html> 
    <body> 
     <form action="./display.html" method="GET"> 
      <table> 
       <tr><td>First Name:</td><td><input type="text" name="firstname"></td></tr> 
       <tr><td>Last Name:</td><td><input type="text" name="lastname"></td></tr> 
       <tr><td>Phone number:</td><td><input type="tel" name="phonenumber"></td></tr> 
      </table> 

      <input type="submit" value="submit"> 
     </form> 
    </body> 
</html>

如果你在第一個和最後的名字作爲PHONENUMBER類型以及並按提交按鈕，你將被重定向到文件display.html。此外，您的瀏覽器表單的數據添加到URL以下列方式：

display.html?firstname=Albert&lastname=Einstein&phonenumber=555-12345

（如果你是愛因斯坦;））

更確切地說，它需要每個表單元素的name信息添加=，然後添加用戶提供的信息。如果<form></form>標籤內有多個表單元素，則每個鍵值對都由&分隔。

爲了在文件display.html檢索數據，你必須使用一些JavaScript：

<html> 
    <body> 
     <table> 
      <tr> 
       <td>First name: </td><td><span id="firstname"></span></td></tr> 
       <td>Last name: </td><td><span id="lastname"></span></td></tr> 
       <td>Phone number: </td><td><span id="phonenumber"></span></td> 
      </tr> 
     </table> 

     <script> 
      var queryvars={}; 

      function getQueryVariables() { 
       var query = window.location.search.substring(1); 
       var vars = query.split("&"); 

       for (var i=0;i<vars.length;i++) { 
        var pair = vars[i].split("="); 
        queryvars[pair[0]]=pair[1]; 
       } 
      } 

      getQueryVariables(); 

      document.getElementById("firstname").innerHTML=queryvars['firstname']; 
      document.getElementById("lastname").innerHTML=queryvars['lastname']; 
      document.getElementById("phonenumber").innerHTML=queryvars['phonenumber']; 
     </script> 
    </body> 
</html>

它當前URL的?後發生的一切，即firstname=Albert&lastname=Einstein&phonenumber=555-12345，將其分解在每一個&，這樣你最終的鍵值對列表。之後，它會將這些鍵值對中的每一個拆分爲=，並將這些信息存儲在queryvars變量中。最後，信息被插入到顯示給用戶的表的相應<span></span>中。

我希望，這回答你的問題。

來源

2014-11-03 16:44:41 damare

我在想沿着這個概念的東西線：

function show_mailing_address() { 
    var width = 200 
    var height = 150 
    var left = parseInt((screen.availWidth/2) - (width/2)) 
    var top = parseInt((screen.availHeight/2) - (height/2)) 

    var windowFeatures = "scrollbars=no, toolbar=no,menubar=no,location=no, width=" + width + ",height=" + height + ",status=no,resizable=yes,left=" + left + ",top=" + top + "screenX=" + left + ",screenY=" + top; 

    win = window.open('', '_blank', windowFeatures) 

     var html = '<p style="text-align: center;">' + 
      document.getElementById('firstname').value + ' ' + 
      document.getElementById('lastname').value + '<br>' + 
     document.getElementById('address').value + '<br>' + 
      document.getElementById('telephone').value + '</p>' 

     if (win) { 
      win.document.write(html) 
      win.document.title = 'Mailing Address' 
      win.document.close() 
      win.focus() 
     } 
     return false; 
}

來源

2014-11-04 17:16:24 BobbyJones

如何從輸入框中獲取文本以顯示在彈出窗口中？

回答

相關問題