2017-06-21 3 views
0

私はhtmlコーディングが新しく、ウェブサーバーのヘルプなしでhtmlを探索しようとしています。ウェブサーバーなしで2ページ間でフォームコンテンツをナビゲートして交換する

私は1.htmlと2.html

1.htmlという名前のディレクトリに配置された2つのHTMLページを持っている

<!DOCTYPE html> 
<html> 
<body> 

<form action="2.html" method="POST"> 
    First name:<br> 
    <input type="text" name="firstname" value="Mickey"> 
    <br> 
    Last name:<br> 
    <input type="text" name="lastname" value="Mouse"> 
    <br><br> 
    <input type="submit" value="Submit"> 
</form> 

<p>Upon click the "Submit" button, the form-data will be sent to 2.html".</p> 

</body> 
</html> 

と 2.htmlが

<!DOCTYPE html> 
<html> 
<body> 

<form action="1.html" method="POST"> 
    First name:<br> 
    <input type="text" id="firstname" name="firstname"> 
    <br> 
    Last name:<br> 
    <input type="text" id="lastname" name="lastname"> 
    <br><br> 
    <input type="submit" value="Submit"> 
</form> 
<script> 
document.getElementById('firstname').value = 
"Here I need firstname from 1.html"; 
</script> 


</body> 
</html> 

私はあるさどのWebサーバを使用せずに1.htmlから2.htmlにデータを転送するためにどのようなメカニズムを使用できるかを知る必要があります。

手段、

私は2.htmlに1.htmlからファーストネームを表示する必要がある場合は、

undersection

<script> 
document.getElementById('firstname').value = 
"Here I need firstname from 1.html"; 
</script> 

私がどのようなコードを書く必要がありますか?

+0

ローカルストレージを試してみましたみては? –

答えて

1

が、これは1

1.html

<!DOCTYPE html> 
<html> 

<body> 

<form action="2.html" method="GET"> 
    First name:<br> 
    <input type="text" name="firstname" value="Mickey" > 
    <br> 
    Last name:<br> 
    <input type="text" name="lastname" value="Mouse" > 
    <br><br> 
    <input type="Submit" value="Submit" > 
</form> 

<p>Upon click the "Submit" button, the form-data will be sent to 2.html".</p> 

</body> 
</html> 

2.html

<!DOCTYPE html> 
<html> 
<body> 
    <form action="2.html" method="GET"> 
     First name:<br> 
     <input type="text" id="firstname" name="firstname" value=""> 
     <br> 
     Last name:<br> 
     <input type="text" id="lastname" name="lastname" value=""> 
     <br><br> 
     <input type="submit" value="Submit"> 
    </form> 
</body> 
</html> 

<script type="text/javascript"> 
    window.onload = function() { 
     var query = window.location.search.substring(1); 
     var vars = query.split("&"); 
     var pair =""; 
     for (var i=0;i<vars.length;i++) { 
      pair = pair + vars[i].split("=")+","; 
     } 

     var arr=pair.split(","); 
     document.getElementById('firstname').value = arr[1];  
     document.getElementById('lastname').value = arr[3]; 
    }; 
</script> 
関連する問題