开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用.innerHTML重新加载后将表单ID的输出值保留在页面上

使用.innerHTML重新加载后，表单ID的输出值不会保留在页面上。innerHTML是一个属性，用于获取或设置指定元素的HTML内容。当使用innerHTML重新加载页面时，页面会被重新渲染，原有的内容会被替换掉。

要保留表单ID的输出值在页面上，可以使用其他方法来实现，例如使用JavaScript来处理表单提交和重新加载的逻辑。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>保留表单ID的输出值</title>
</head>
<body>
  <form id="myForm">
    <input type="text" id="inputField" value="">
    <button type="button" onclick="submitForm()">提交</button>
  </form>

  <div id="output"></div>

  <script>
    function submitForm() {
      var inputField = document.getElementById("inputField");
      var outputDiv = document.getElementById("output");
      var value = inputField.value;

      // 处理表单提交逻辑，例如发送到服务器进行处理

      // 更新输出值
      outputDiv.innerHTML = "表单ID的输出值：" + value;
    }
  </script>
</body>
</html>

在上述示例中，我们通过JavaScript获取表单输入框的值，并在点击提交按钮时更新输出值。这样即使重新加载页面，输出值也会被保留在页面上。

请注意，以上示例仅为演示目的，实际应用中可能需要根据具体需求进行适当的修改和扩展。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

一个简单粗暴的前后端分离方案

后端专注做业务逻辑，不想在后端做页面渲染的事情，只向前端提供数据接口。于是协商后打算将前后端完全分离，页面上的所有数据都通过ajax向后端取，页面渲染的事情完全由前端来做。...之前也有看过淘宝团队的实践，利用nodejs做一个中间层，处理页面渲染、路由控制、SEO等事情，将前后端的分界线进行了重新定义。...搜索、尝试了多种方法后，最终的方案定为：用document.write()将编译结果写到页面，这样标签能够正常加载。...另外想说的一点就是页面的缓存，异步加载来的内容可以存在localStorage中，也可以放在页面上进行显隐控制，这样用户在频繁切换视图的时候无需再次请求，回到上一步的时候之前填好的表单数据也不会消失，体验会非常好...传统由后端渲染的页面，url中的参数会发送到服务端，服务端接收后可以再渲染到页面上供js使用。

1.5K1 0

javaScript的常见document对象

) //获得指定ID值的对象 document.getElementsByName(Name) //获得指定Name值的对象 document.body.appendChild(oTag) ———...号后的部分 documeny.location.reload() //刷新网页 document.location.reload(URL) //打开新的网页 document.location.assign...img /标签与之对应就可以显示 ———————————————————————- forms集合(页面中的表单) a)通过集合引用 document.forms //对应页面上的form标签...只有ie支持此属性，因此也用来判断浏览器的种类*/ 图层对象的4个属性 document.getElementById(”ID”).innerText //动态输出文本 document.getElementById...(”ID”).innerHTML //动态输出HTML document.getElementById(”ID”).outerText //同innerText document.getElementById

8915 1

什么是AJAX？

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 AJAX = 异步 JavaScript 和 XML。...这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。...这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。...当你的页面全部加载完毕后，客户端会通过 XMLHttpRequest对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。...} }); 需要注意的是，使用这种方法的前提是form表单中的项一定要有name属性，后台获取的键值对为key=name值，value=各项值。

1.7K2 0

Js面试题__附答案

===被称为严格等式运算符，当两个操作数具有相同的值而没有任何类型转换时，该运算符返回true。 12、说明如何使用JavaScript提交表单？...要使用JavaScript提交表单，请使用 document.form [0] .submit（）; 13、元素的样式/类如何改变？...'”旧的内容仍然会被html替换；整个innerHTML内容被重新解析并构建成元素，因此它的速度要慢得多；innerHTML不提供验证，因此我们可能会在文档中插入有效的和破坏性的HTML并将其中断。...Closure是与函数返回时保留在内存中的函数相关的本地声明变量。例如： ? 40、一个值如何附加到数组？...EncodeURl（）用于将URL转换为十六进制编码。而DecodeURI（）用于将编码的URL转换回正常。 56、为什么不建议在JavaScript中使用innerHTML？

8.9K3 0

form表单添加验证码并当验证通过后再提交表单

" name="captcha"> id="generated-captcha" onclick="generateCaptcha()">点击加载验证码id为generated-captcha，点击后获取验证码绑定点击事件generateCaptcha() 验证码生成函数 function...document.getElementById("captcha").value = ""; // 将生成的验证码显示在页面上 document.getElementById(...true，否则返回false 表单提交事件 // 使用事件监听器来捕获表单提交事件 var form = document.querySelector("form"); form.addEventListener...alert('验证码输入错误，请重新输入') } }); 这里，先阻止表单的默认事件，然后执行验证码验证，并且检测如果验证返回true则手动提交表单，否则返回错误信息。

1.6K1 0

js2

常用属性和方法： location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面弹出框可以在 JavaScript...当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法： alert("你看到了吗？"); 确认框（了解即可）确认框用于使用户可以验证或者接受某些信息。...提示框（了解即可）提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。...由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。...clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

2.2K1 0

前端基础技术全解析：从HTML前端基础标签语言开始，逐步深入CSS样式修饰、JavaScript脚本控制、Ajax异步通信以及WebSocket持久通信

否则就会图片失衡. border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定. 因为当前页面是在我的桌面文件里面的，而我采用的图片也是桌面上的，因此在同一路径下，直接..../加图片名就可以加载了。超链接标签: a href: 必须具备, 表示点击后会跳转到哪个页面. target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开....表单标签（可以将前端数据传送到后端）表单是让用户输入信息的重要途径. 分成两个部分: 表单域: 包含表单元素的区域. 重点是 form 标签. 表单控件: 输入框 , 提交按钮等....6.2、通信方式与实时性 Ajax： Ajax的通信方式是基于HTTP协议的短连接。每次请求完成后，连接即会关闭。当客户端需要再次发送请求时，必须重新建立连接。...在某些情况下，Ajax和WebSocket可以结合使用。例如，在初始化阶段可以使用Ajax来加载页面所需的部分数据或配置信息，而在需要实时交互的场景中则使用WebSocket来实现低延迟的双向通信。

1601 0

BOM和DOM

常用属性和方法： location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面,就是刷新一下页面　　上面的内容需要大家记住的是...当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。　　　　如果用户点击确认，那么返回值为输入的值。...先用函数封装一下，返回值t其实就是一个id值（浏览器给你自动分配的）　　　　　　setTimeout() 方法会返回某个值。...，别忘了页面加载的时候的顺序，以防出现找不到标签的情况出现，我们可以将这个script标签放到body标签最下面，或者用window.onload，这里我没有放，你们练习的时候放到下面去 var...= i; //将省份的数据添加到option标签中 p.appendChild(optionP);//将option标签添加到select标签中 } //只要select中选择的值发生变化的时候

5411 0

【前端基础篇】JavaScript之DOM介绍

元素节点.innerHTML 获取 HTML 元素的 inner HTML。元素节点.属性获取 HTML 元素的属性值。...DOMContentLoaded DOMContentLoaded事件在初始HTML文档被完全加载和解析后触发，不等待样式表、图片和子框架的加载。...document.addEventListener("DOMContentLoaded", function() { console.log("DOM完全加载并解析完成"); }); 解释：当你想在文档完全加载后执行某些...; }); 解释：当用户将鼠标悬停在ID为 hoverElement 的元素上时，控制台将打印一条消息。 5. submit submit 事件在表单提交时触发。...8. change change 事件在用户改变输入元素的值后触发，常用于 input、select、textarea 等表单元素。

1171 0

用JavaScript动态输出的JS脚本不能执行

在公司产品动易2006版整合接口的开发过程中，需要在客户端页面上输出一段调用远程接口写cookies的代码，最早的时候我是把调用url通过script的方式输出。...动易2006的前台登陆表单已经采用了Ajax技术，页面上所看到的登陆表单并非直接由HTML代码在页面中写成，而是在页面加载以后，通过JS，通过Ajax，向服务器端的asp程序查询用户登录状态以后，再动态输出到页面的...用alert调试发现代码已经正确生成，显然用innerHTML输出到页面以后，是没有问题的。但是为什么没有登陆呢？为这个问题，折磨了我一晚上。...，可以看到页面执行了远程的js脚本，输出统计图标把代码修改如下：加载中......("div").innerHTML = newStr; 可以看到“加载中...”字样已经被下面的JS代码动态输出的代码替换了，但是并没有显示统计图标，说明script脚本调用代码已经被输出到页面，但是没有被执行

3.3K5 0

JAVA保姆式上手教程之免费JAVA 案例day02-js高级

, 是一个框架标签，把页面引入或者进行割，最大的缺点就不能body一块使用分割的标签标签引入其他页面加载history列表中的下一个URL go(数字) 加载hitory列表中的某一个具体的页面加载html文件中的所有标签时，把html文件中的所有标签页加载成不同的标签对象，以及标签中的属性，也加载成属性对象，标签中的文本也加载成文本对象。...浏览器在加载某个标签时，标签的文本数据，被加载成当前标签的一个子标签。当我们把一个html文件加载完成之后，他们就得到这个html文件中的所有标签，属性，文本对象。...可以使用js技术结合Document对象，对html文件中的所有标签，进行各种操作。

761 0

【Java 进阶篇】HTML DOM 事件详解

接下来，让我们逐一介绍不同类型的事件。鼠标事件点击事件（click）点击事件是最常见的事件之一，它在用户点击（或触摸）页面上的元素时触发。...通过event.preventDefault()，我们阻止了表单的默认提交行为，以便在警告框弹出后保留在当前页面。重置事件（reset）重置事件在用户点击表单的重置按钮时触发。...它通常用于将表单的输入字段重置为默认值。...文档事件加载事件（load）加载事件在文档加载完成后触发。它通常用于在页面加载完成后执行一些初始化操作。... window.addEventListener('load', function() { alert('页面已加载'); }); 在这个示例中，当页面中的所有内容都加载完成后

2742 0

使用 Tampermonkey 编写高级跨网站自动化任务脚本

这意味着，使用 @require 标记的脚本可能会在文档已加载后执行，因为获取所需脚本花费了很长时间。...F12 可以很容易得到每个表单项的 id，然后使用最简单的操作 DOM 的方式为表单赋值，我们也可以将一些参数放到 URL 里面，再使用脚本自动解析 URL 填充到表单里。...API 可以打开一个新的浏览器标签页， url 是网页 URL，options 是一个对象，可以有以下几个值： active 决定新的 tab 是否被聚焦，聚焦的意思是直接显示 insert 插入一个新的...tab 在当前的 tab 后面 setParent 在 tab 关闭后重新聚焦当前 tab // grant GM_openInTab GM_openInTab('https://fizzz.blog.csdn.net...saveAs：boolean 值，显示一个保存的弹窗 onerror：下载以失败结束执行的回调函数 onload 现在完成后执行的回调函数 onprogress 下载过程中变化的回调函数 ontimeout

5.2K1 0

前端之BOM和DOM

常用属性和方法： kk //获取URL kk="URL" // 跳转到指定页面 location.reload() //重新加载页面 1.2.5弹出框 1.2.5.1警告框警告框经常用于确保用户可以得到某些信息...1.2.5.7提示框提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。...由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。...clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。...处理方法方法1：利用onload等待某个对象加载完毕再执行方法2：直接将JS代码写在body的最下方，这样就不会出现调用的函数还没加载的问题了

2.7K3 0

DOM 和 BOM

返回值 getElementsByTagName() 返回多个元素的*动态*集合，不实际存储对象的属性值，每次访问，都要重新查找 DOM 树 querySelectorAll() 返回多个元素的*非动态...HTML DOM 常用对象 form，form 代表页面上一个表单元素 (1). 获取表单 document.forms[i/id] (2)....获得表单元素 form.elements[i/id/name] 如果表单元素有 name 属性:form.name (5). 手动提交表单 form.submit() (6)....停止: clearTimeout(timer) 16. window.onload 页面所有加载后触发和中的 js 很可能和 CSS 并行加载，甚至先与 css 中的 transition...执行，所以，只要一段代码必须在 css 加载后才能执行都要放在 window.onload 中。

2.3K1 0

前端之BOM和DOM

常用属性和方法： location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面弹出框可以在JavaScript...当警告框出现后，用户需要点击确定按钮才能继续操作。语法： alert("系统错误"); 确认框确认框用于使用户可以验证或者接受某些消息。...提示框提示框经常用于提示用户在进入页面输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操作。...由于setlnterval()返回的ID值可用作clearlnterval()方法的参数。...clearlnterval() 方法的参数必须是由setlnterval()返回的ID值。

1.7K5 0

js对象(BOM部分DOM部分)

常用属性和方法： location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面弹出框可以在 JavaScript...当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法： alert("你看到了吗？"); 确认框（了解即可）确认框用于使用户可以验证或者接受某些信息。...提示框（了解即可）提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。...由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。...clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

4.3K2 0

【javascript系列】史上最全javascript系列教程（二）

这两个都是对元素的一个操作，简单讲，innerHTML可以在某种特定环境下重构某个元素节点的DOM结构，innerText只能修改文本值。...给获取到的元素⼀些内容，document.getElementById(‘id名’).innerHTML=‘内容’。 <!...") //使用了innerHTML的话，H1标签会生效，使用innerText给元素值的时候h1标签不生效 document.getElementById("tim").innerHTML...html> 效果：本来div标签下面是没有文字的，获取标签后给到元素文字显示。...console.log("鼠标移出") } //onchange 元素值改变，⼀般⽤在表单元素上 document.getElementById("xd

2.2K3 0

thinkphp5学习路程七 ajax使用和实现分页无刷新

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。...(string) string：仅用于 POST 请求将请求发送到服务器。...script> function ajaxPost(){ var formData = $("#myform").serialize(); //serialize() 方法通过序列化表单值...$("#content").append(data);//获取成功以后输出返回值 } }); } 表单起个id用于获取表单并序列化--> <input type="password" name="

1.1K1 0

java文本框获得输入焦点_文本框获得焦点和失去焦点的判断代码

文本框失去焦点事件、获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件...，我们可以使用jQuery的焦点函数focus(),blur()。...focus()：得到焦点时使用，和javascript中的onfocus使用方法相同。...=”密码不能大于6位” else document.getElementById(“s2″).innerHTML=””; } 用户名：密码: 第一种： html5 html5给表单文本框新增加了几个属性...必须保证input的value值为空， placeholder的内容就是我们在页面上看到的内容。代码如下：第二种： jQuery 原理：让表单的val值等于其title值。

4K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭