gpt4 book ai didi

javascript - 如何传输一个 html 文件的表单值并将其作为另一个文件中的值?

转载 作者:行者123 更新时间:2023-12-03 06:16:09 24 4
gpt4 key购买 nike

我正在尝试使用 jQuery 来做到这一点。我有 2 个 html 文件。一种有形式,另两种没有形式。我想传输表单值(如全名)并将其作为下一个 html 文件的全名。

我在第一个 html 文件中附加了表单的一部分

$( document ).ready(function() 
{
$("#theme1").click(function(){

function testjs(){
var name = jQuery("#fullname").val();
jQuery.load("resume1.html",function(){
jQuery("#name1").html(fullname);
});
}

});


});
<form class="form1">
<h3><b>Full Name:</b></h3><br/>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="text" class="size" name="fullname"><br><br/>
<h3><b>Phone Number:</b></h3><br/>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="text" class="size" name="phone"><br/><br/>
<h3><b>E-Mail:</b></h3><br/>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="text" class="size" name="mail"><br/><br/>
<h3><b>Select Theme:</b></h3><ul>
<li>Theme1&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="submit" class="size" id="theme1" name="theme1"></li><br/>
<li>Theme2&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="submit" class="size" name="theme2"></li><br/><br/>
</ul>

</form>

这是第二个 html 文件的一部分。

<div class="yui-u first">
<h1 id="name1">full name</h1>
</div>

最佳答案

如果您没有任何服务器端,您可以使用 localStorage 来完成。

使用您的代码:

page1.html:

<body>
<form class="form1">
<h3><b>Full Name:</b></h3><br/>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="text" class="size" id="fullname" name="fullname"><br><br/>
<h3><b>Phone Number:</b></h3><br/>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="text" class="size" id="phone" name="phone"><br/><br/>
<h3><b>E-Mail:</b></h3><br/>
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="text" class="size" id="mail" name="mail"><br/><br/>
<h3><b>Select Theme:</b></h3><ul>
<li>Theme1&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="submit" class="size" id="theme1" name="theme1"></li><br/>
<li>Theme2&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="submit" class="size" id="theme2" name="theme2"></li><br/><br/>
</ul>

</form>
</body>

page1.html 的脚本:

  <script>
$(document).ready(function() {
localStorage.clear();

$(".form1").submit(function(e) {
e.preventDefault();
console.log("in");
localStorage.setItem("fullname", $("#fullname").val());
localStorage.setItem("phone", $("#phone").val());
localStorage.setItem("mail", $("#mail").val());

window.location = "page2.html";
})
}
</script>

page2.html:

<body>
<div class="yui-u first">
<h1 id="name1"></h1>
<h1 id="phone1"></h1>
<h1 id="mail1"></h1>
</div>
</body>

page2.html 的脚本:

 <script>
$(document).ready(function() {
var fullname = localStorage.getItem("fullname");
var phone = localStorage.getItem("phone");
var mail = localStorage.getItem("mail");

$("#name1").append(fullname);
$("#phone1").append(phone);
$("#mail1").append(mail);

})
</script>

希望能有所帮助。

关于javascript - 如何传输一个 html 文件的表单值并将其作为另一个文件中的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39093890/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com