【问题标题】:How to pass textbox value from a page into a textbox in another page?如何将页面中的文本框值传递到另一个页面中的文本框?
【发布时间】:2026-01-01 10:05:02
【问题描述】:

我尝试将文本框值从一个页面传递到另一个页面。 我尝试传递该文本框,但失败了,我使用 javascript 来执行此操作。 我必须尝试正确更改我的代码但仍然无法正常工作 错误是传递给文本框的数据是多个。

这是我的代码 第一页代码

	function myFunction() {

   	var inputTest = document.getElementById('tanggal2').value;
	var inputTest1 = document.getElementById('dt').value;
	localStorage.setItem( 'objectToPass', inputTest );
	localStorage.setItem( 'objectToPass1', inputTest1 );
	if (inputTest=="") {
    					window.open('report_pengambilan_singgle.html','','height=650,width=1200');
				} 	
				else {
    					
						window.open('report_pengambilan_singgle1.html','','height=650,width=1200');
				}
    
	}
<input type="text" id="dt" type="text" name="dt" maxlength="1" size="23" readonly="readonly" style="visibility:hidden"  />
<input type="text" id="tanggal2" type="text" name="tanggal2" maxlength="1" size="23" readonly="readonly" style="visibility:hidden" />
<label onclick="myFunction();" >a</label> 

这是我的第二页代码

 var inputTest = localStorage.getItem('objectToPass');
  var inputTest1 = localStorage.getItem('objectToPass1');
  var displayData = inputTest;
  var displayData = inputTest1;
  document.getElementById("datepicker1").value=inputTest;
  document.getElementById("datepicker2").value=inputTest;
  document.getElementById("datepicker3").value=inputTest;
  localStorage.removeItem( 'objectToPass1' ); // Clear the localStorage
  localStorage.removeItem( 'objectToPass' ); // Clear the localStorage

【问题讨论】:

标签: javascript html


【解决方案1】:

试试这个方法……

test.html

<script>function myFunction() {

var inputTest = document.getElementById('tanggal2').value;
var inputTest1 = document.getElementById('dt').value;

if (inputTest=="") {
                    window.open('report_pengambilan_singgle.html','','height=650,width=1200');
            }   
            else {

                    window.open('test1.html?name=' + inputTest1,'','height=650,width=1200');
            }

}
</script>
<input type="text" id="dt" type="text" name="dt"  size="23"  />
<input type="text" id="tanggal2" type="text" name="tanggal2"  size="23"  />
<button onclick="myFunction();" >a</button> 

test1.html

<script>window.onload = function () {
var url = document.location.href,
    params = url.split('?')[1].split('&'),
    data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
     tmp = params[i].split('=');
     data[tmp[0]] = tmp[1];
}
document.getElementById("datepicker1").value = data.name;
}
</script>
<input type="text" id="datepicker1" type="text" name="datepicker1"  size="23"  />

我希望为你工作......

【讨论】:

  • 不...您的方法正在运行,兄弟..我修改了您的代码以显示在 3 textbox 上并且它有效。它没有再次重复。谢谢兄弟
  • 谢谢你的回答,但你能解释一下你为什么使用拆分方法吗?
  • @MinervazMine 我使用拆分概念分离获取值。(name=' + inputTest1,'','height=650,width=1200')
【解决方案2】:

您有 textbox 已隐藏且未定义任何值

所以首先在textbox 中设置任何值并在您的&lt;script&gt; 开始之前在另一个页面中创建textbox

喜欢

<input type="text" id="datepicker1" value="">
<input type="text" id="datepicker2" value="">
<input type="text" id="datepicker3" value="">

【讨论】:

  • 我已经尝试在该textbox 上赋予价值,并且我在其他页面中有textbox 以从第1 页中的textbox 获取价值。好的.. 我得到了价值但是。 . 只是我得到的来自id=tanggal2 的值。它传递了我在第 2 页中制作的所有文本框
  • 您在textbox 中传递的值与document.getElementById("datepicker1").value=inputTest; document.getElementById("datepicker2").value=inputTest; document.getElementById("datepicker3").value=inputTest; 相同,因此您更改document.getElementById("datepicker3").value=inputTest1;
  • 嗯...我不知道为什么。它仍然传递相同的数据