HTML与JavaScript交互示例-优快云博客

本文链接：https://blog.youkuaiyun.com/goto0917/article/details/83911837

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>

function openwin(){

var newwin=window.showModalDialog("2.htm",window);

if(newwin!="[object]"){
document.getElementById("hobby").value=newwin;
}
}

function getvalue(a){
document.getElementById("age").value=a;
}

function show(){
var str="";
str=str+document.getElementById("username").value+"--"+document.getElementById("password").value+"--"+document.getElementById("age").value+"--"+document.getElementById("hobby").value;
alert(str)
}
</script>
</HEAD>
<BODY>

<form id="parentForm" name="parentForm">
<table border="1" align="left">
<tr>
<td>
name:
</td>
<td>
<input type="text" id="username" name="username" value=""/>
</td>
</tr>
<tr>
<td>
password:
</td>
<td>
<input type="text" id="password" name="password" value=""/>
</td>
</tr>
<tr>
<td>
age:
</td>
<td>
<input type="text" id="age" name="age" value=""/>
</td>
</tr>
<tr>
<td>
hobby:
</td>
<td>
<input type="text" id="hobby" name="hobby" value=""/>
</td>
<tr>
<td colspan="2" align="right">
<input type="button" value="选择" οnclick="openwin();"/>
<input type="button" value="查看" οnclick="show();"/>
<td>
</tr>
</form>
</BODY>
</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Sub Window </TITLE>
<script>
function setLike(){
var selectLikes="";
var likes=document.getElementsByName("like");
for(var i=0;i<likes.length;i++){
if(likes[i].checked){
selectLikes=selectLikes+likes[i].value+";";
}
}

window.returnValue=selectLikes;

var parent=window.dialogArguments;
parent.getvalue(document.getElementById("age").value);
window.close();
}
</script>
</HEAD>
<BODY>
<br>
<form>
<table border="1">
<tr>
<td>
hobby
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="like" name="like" value="上网">上网</input>
<input type="checkbox" id="like" name="like" value="游戏">游戏</input>
<input type="checkbox" id="like" name="like" value="旅游">旅游</input>
<input type="checkbox" id="like" name="like" value="编程">编程</input>
</td>
</tr>
<tr>
<td>
age
</td>
</tr>
<tr>
<td>
<input type="text" id="age" name="age" value=""/>
</td>
</tr>
<tr>
<td>
<input type="button" value="确认" οnclick="setLike();">
<input type="button" value="关闭" οnclick="window.close();">
</td>
</tr>
<table>
</form>
</BODY>
</HTML>

modalDialog