将数据传递到新页面并进行编写

Question

I am trying to pass data from text boxes using GetElementById .

this is my text box:

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

</tr>

And these are my functions:

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

The load method is called inside the page_preview.html body.

This is the button which starts mypopup function:

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

Every thing works except the document.getElementById('p_name') never returns a value, like it can't find it.

I am sure it can be done easily ( i am new to this ).

Answer 1

If your form has a name , and the text field has a name , you can use document.myForm.myTextbox.value .

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

Also, make sure your page has actually fully loaded before you perform actions on the DOM - if your page_preview.html runs the javascript BEFORE the text field loads, that will cause it to always be nil .

Answer 2

why don't you add value on your onclick event? I mean pass parameters to your function. something like this

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

In your javascript function, it would be like this

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

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

Or maybe the error is in your getElementById. Please add .value on this part:

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

Make it like this:

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

I think that would fix it. Hope that helps.

Answer 3

尝试使用jQuery

$('#p_name').val()

Answer 4

document.write overwrites the html in your page, so after that line executes <input type="text" name="name" id = "p_name"/> no longer exists. Try modifying the contents of a div (or span or p , etc.) for output instead.

Example HTML:

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

Example JS:

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.