开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用.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

什么是AJAX？

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

1.7K2 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

8755 1

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

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

1.4K1 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.8K3 0

js2

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

2.2K1 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中选择的值发生变化的时候

5291 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 进阶篇】HTML DOM 事件详解

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

1922 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

4.7K1 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.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

【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

js对象(BOM部分DOM部分)

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

4.2K2 0

前端之BOM和DOM

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

1.6K5 0

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

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

day03_js学习笔记_03_js的事件、js的BOM、js的DOM

10) 将元素插入到元素前面 (11) 将新节点插入到某节点的后面（同上） (12) 删除节点 (13) innerHTML属性...等到页面加载完毕后再执行onload事件所指向的函数。...第七页方式二： demo05.html 后一页 demo06....html 后一页 // 使用innerHTML读出id="subject"中的文本内容 var div = document.getElementById

28.1K1 2

【JavaEE初阶】博客系统后端

博客列表页当前博客列表页上的数据都是写死的.正确的做法,应该是通过数据库读取数据显示到页面上. 此处就需要打通前后端交互的操作....让博客列表页,在加载的时候,通过ajax给服务器发一个请求服务器查数据库获取到博客列表数据,返回给浏览器,浏览器再根据数据构造页面内容.这样的交互过程,也称为“前后端分离" 前端只向后端请求数据,而不请求具体的页面...开发前端代码在博客列表页加载过程中,触发ajax，访问服务器中的数据.再把拿到的数据构造到页面中. <!...如果是ajax请求(本身不会触发),响应是302,此时是无法进行跳转的. 实现前端代码往页面上加入from表单,使得点击登录操作能够触发请求. <!...发布博客约定前后端交互接口使用form表单:页面中更多了form标签,同时让form里面能够感知到博客的内容.

2293 0

原生JS实现酷炫分页

10小于json.title.length，加载10条 //如果当前页乘以10大于json.title.length, 加载本例中剩于的4条...的值 aLi[i].style.left = arr[i][0] + 'px'; //重新分配...top的值 aLi[i].style.top = arr[i][1] + 'px'; //...function () { //执行move.js中的strartMove函数,从下标为iNow的li开始，修改left/top/opacity值...//执行move.js中的strartMove函数,从下标为iNow的li开始 //将每个li的属性值还原到第一次运动前存储的值

3.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭