입력란의 텍스트를 팝업 창에 표시하려면 어떻게합니까?

입력 상자에서 정보를 추출하고 단추를 클릭하여 별도의 팝업 창에 표시하는 방법은 무엇입니까? 아래입력란의 텍스트를 팝업 창에 표시하려면 어떻게합니까?

예 :

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에서 구현되는,의가 있다고 가정 해 봅시다 : 당신이 당신의 PHONENUMBER뿐만 아니라 당신의 이름과 성을 입력하면

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

을하고 제출 버튼을 누르면, 당신은 리디렉션됩니다 display.html 파일. 또한, 브라우저는 다음과 같은 방법으로 URL로 양식의 데이터를 추가 : (당신은 알버트 아인슈타인이있는 경우)

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

가)

더 정확하게

, 그것은 각 양식 요소의 name 정보를 가져 =을 추가 한 다음 사용자가 제공 한 정보를 추가합니다. 두 개 이상의 양식 요소가 <form></form> 태그 안에있는 경우 해당 키 - 값 쌍 각각은 &으로 구분됩니다.

<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이 그것을 분할 : 파일 display.html에서 데이터를 검색하기 위해

, 당신은 자바 스크립트의 비트를 사용해야합니다 매번 &에서 키 - 값 쌍의 목록으로 끝나야합니다. 그런 다음이 키 - 값 쌍을 각각 =으로 분할하고이 정보를 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

입력란의 텍스트를 팝업 창에 표시하려면 어떻게합니까?

답변

관련 문제