新しいページにデータを渡して書き込む

Question

GetElementByIdを使用してテキストボックスからデータを渡そうとしています。

function mypopup() 
{ 
    mywindow = window.open("Page_preview.html","width=200,height=200"); 
    mywindow.moveTo(0, 0); 

} 
function load() 
{ 
    document.write("<p>" + Date() + "</p>"); 

    var myTextField = document.getElementById('p_name'); 
    if(myTextField.value != "") 
    alert("You entered: " + myTextField.value) 
} 

loadメソッドがpage_preview.html体内に呼び出されます。

<tr> 
<td>Your name:</td> 
<td> <input type="text" name="name" id = "p_name"/><br /></td> 

</tr> 

そして、これらは私の関数です：

これは私のテキストボックスです。

これはmypopup機能を起動するボタンである：それはそれを見つけることができないように、値を返すことはありません

<input type="button" onclick="mypopup()" value="Show preview" /> 

すべてのものは、のdocument.getElementById（「P_NAME」）除いて動作します。

私はそれが簡単に（私はこれに新しいです）行うことができると確信しています。

Answer 1

は、フォームがnameがあり、テキストフィールドがnameを持っている、あなたはdocument.myForm.myTextbox.valueを使用できる場合はjQuery

$('#p_name').val() 

Answer 2

を使用してみてください。あなたのpage_preview.htmlが、それは常にnilことになりますテキストフィールドがロードされる前にはJavaScriptを実行する場合 -

<form name='myForm'> 
    <input type='text' name='myTextbox'> 

また、あなたはDOMに対してアクションを実行する前に、あなたのページが実際に完全にロードされていることを確認してください。

Answer 3

document.writeは、ページ内のhtmlを上書きするため、その行の実行後に<input type="text" name="name" id = "p_name"/>は存在しなくなりました。代わりにdiv（またはspanまたはpなど）の内容を変更して出力してみてください。

例HTML：

<div id="messages"></div> 

例JS：あなたのonclickイベントに値を追加しない理由

var outputElement = document.getElementById; 
var msgs = 'This is a better way to monitor output'; 
var htmlMsgs = '<p>This is a better way to monitor output</p>'; 
outputElement.innerText = msgs; 
//outputElement.innerHTML = htmlMsgs; //for formatted output. 

Answer 4

？あなたの関数にパラメータを渡すことを意味します。あなたのjavascript関数でこの

<input type="button" onclick="mypopup(document.getElementById('p_name').value)" value="Show preview" /> 

のようなものは、それがこの

function load(p_name) 
{ 
    document.write("<p>" + Date() + "</p>"); 

    var myTextField = p_name; 
    if(myTextField.value != "") 
    alert("You entered: " + myTextField.value) 
} 

それともエラーがgetElementByIdをしているようなものです。この部分に.VALUEを追加してください：私はそれを修正するだろうと思う

var myTextField = document.getElementById('p_name').value; 

：このよう

var myTextField = document.getElementById('p_name'); 

はそれを確認します。希望が役立ちます。